diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
index e0a6b4a5d3098e..ddb7ab7616b89d 100644
--- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.module.scss
@@ -1,5 +1,5 @@
-@use "../../../scss/colors";
-@use "../../../scss/fonts";
+@use "scss/colors";
+@use "scss/fonts";
 
 .circle {
   height: 20px;
diff --git a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
index d38716afd5ce3f..7ff77e9183845c 100644
--- a/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
+++ b/airbyte-webapp/src/components/ui/NumberBadge/NumberBadge.tsx
@@ -20,7 +20,7 @@ export const NumberBadge: React.FC<NumberBadgeProps> = ({ value, color, classNam
 
   return (
     <div className={numberBadgeClassnames} aria-label={ariaLabel}>
-      <div>{value}</div>
+      {value}
     </div>
   );
 };
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss
index 94bdca9fae0f4e..dedf1888428d54 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.module.scss
@@ -1,6 +1,6 @@
-@use "../../../../scss/variables";
-@forward "../components/StreamRow.module.scss";
-@forward "../components/DiffSection.module.scss";
+@use "scss/variables";
+@forward "./StreamRow.module.scss";
+@forward "./DiffSection.module.scss";
 
 .accordionContainer {
   width: 100%;
@@ -15,6 +15,13 @@
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  padding: variables.$spacing-sm;
+  padding: 0 15px 0 0;
   font-weight: 400;
 }
+
+.accordionPanel {
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-sm;
+  padding: 0 15px variables.$spacing-md 40px;
+}
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx
index 112563dba001e1..4f7b5a50568cf8 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordion.tsx
@@ -32,7 +32,7 @@ export const DiffAccordion: React.FC<DiffAccordionProps> = ({ streamTransform })
                 open={open}
               />
             </Disclosure.Button>
-            <Disclosure.Panel>
+            <Disclosure.Panel className={styles.accordionPanel}>
               {removedItems.length > 0 && <DiffFieldTable fieldTransforms={removedItems} diffVerb="removed" />}
               {newItems.length > 0 && <DiffFieldTable fieldTransforms={newItems} diffVerb="new" />}
               {changedItems.length > 0 && <DiffFieldTable fieldTransforms={changedItems} diffVerb="changed" />}
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss
index fb72c083425627..58427fc104f2b4 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.module.scss
@@ -1,12 +1,11 @@
 @forward "../components/StreamRow.module.scss";
 @forward "../components/DiffSection.module.scss";
-@use "../../../../scss/variables";
+@use "scss/variables";
 
-.namespace {
-  padding-left: variables.$spacing-sm;
+.row {
+  padding: 0 0 0 variables.$spacing-sm;
 }
 
-.headerAdjust {
-  padding-left: -10px;
-  margin-left: -5px;
+.namespace {
+  padding-left: variables.$spacing-sm;
 }
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx
index 33d74bca7eb03b..e9465cad504649 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffAccordionHeader.tsx
@@ -36,10 +36,10 @@ export const DiffAccordionHeader: React.FC<DiffAccordionHeaderProps> = ({
       <ModificationIcon />
       <div className={namespaceCellStyles} aria-labelledby={formatMessage({ id: "connection.updateSchema.namespace" })}>
         {open ? <FontAwesomeIcon icon={faAngleDown} /> : <FontAwesomeIcon icon={faAngleRight} />}
-        <div className={styles.headerAdjust}>{streamDescriptor.namespace}</div>
+        <div>{streamDescriptor.namespace}</div>
       </div>
       <div className={nameCellStyle} aria-labelledby={formatMessage({ id: "connection.updateSchema.streamName" })}>
-        <div className={styles.headerAdjust}>{streamDescriptor.name}</div>
+        <div>{streamDescriptor.name}</div>
       </div>
       <DiffIconBlock removedCount={removedCount} newCount={newCount} changedCount={changedCount} />
     </>
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss
index 3196cf3187300b..edeef872b6bce5 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.module.scss
@@ -1,23 +1,20 @@
-@use "../../../../scss/variables";
+@use "scss/variables";
 @use "./DiffSection.module.scss";
 
-.accordionSubHeader {
+.header {
   @extend %sectionSubHeader;
 
-  & .padLeft {
-    padding-left: variables.$spacing-lg;
-  }
+  padding: 0 0 0 30px;
 
   & th {
     font-size: 10px;
     width: 228px;
-    padding-left: variables.$spacing-md;
   }
 }
 
 .table {
   width: 100%;
-  padding-left: variables.$spacing-xl;
+  border-spacing: 0;
 
   & tbody > tr:first-of-type > td:nth-of-type(2) {
     border-radius: variables.$border-radius-sm variables.$border-radius-sm 0 0;
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx
index 24c54af63dfcfa..b4d45e87177718 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffFieldTable.tsx
@@ -16,12 +16,12 @@ export const DiffFieldTable: React.FC<DiffFieldTableProps> = ({ fieldTransforms,
   return (
     <table className={styles.table} aria-label={`${diffVerb} fields`}>
       <thead>
-        <tr className={styles.accordionSubHeader}>
+        <tr className={styles.header}>
           <th>
             <DiffHeader diffCount={fieldTransforms.length} diffVerb={diffVerb} diffType="field" />
           </th>
           {diffVerb === "changed" && (
-            <th className={styles.padLeft}>
+            <th>
               <FormattedMessage id="connection.updateSchema.dataType" />
             </th>
           )}
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx
index 6b5f543d8ff833..00ef53880d3c1b 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffHeader.tsx
@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import { useIntl } from "react-intl";
 
 import { DiffVerb } from "../types";
 
@@ -11,15 +11,17 @@ interface DiffHeaderProps {
 }
 
 export const DiffHeader: React.FC<DiffHeaderProps> = ({ diffCount, diffVerb, diffType }) => {
-  return (
-    <div>
-      <FormattedMessage
-        id={`connection.updateSchema.${diffVerb}`}
-        values={{
-          value: diffCount,
-          item: <FormattedMessage id={`connection.updateSchema.${diffType}`} values={{ count: diffCount }} />,
-        }}
-      />
-    </div>
+  const { formatMessage } = useIntl();
+
+  const text = formatMessage(
+    {
+      id: `connection.updateSchema.${diffVerb}`,
+    },
+    {
+      value: diffCount,
+      item: formatMessage({ id: `connection.updateSchema.${diffType}` }, { count: diffCount }),
+    }
   );
+
+  return <>{text}</>;
 };
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.module.scss
index 7fb834f093b4f3..06891b31acf0d1 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.module.scss
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffIconBlock.module.scss
@@ -1,6 +1,8 @@
+@use "scss/variables";
+
 .iconBlock {
   display: flex;
   flex-direction: row;
-  gap: 1px;
+  gap: variables.$spacing-sm;
   margin-left: auto;
 }
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss
index b6db3b81c39514..6ac99ce10fa6b2 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.module.scss
@@ -1,12 +1,16 @@
-@use "../../../../scss/colors";
-@use "../../../../scss/variables";
-@use "../components/StreamRow.module.scss";
+@use "scss/colors";
+@use "scss/variables";
+@use "./StreamRow.module.scss";
 
 .sectionContainer {
   display: flex;
   flex-direction: column;
 }
 
+.table {
+  border-spacing: 0;
+}
+
 .sectionSubHeader,
 %sectionSubHeader {
   display: flex;
@@ -25,10 +29,6 @@
     color: colors.$grey;
     line-height: 12px;
   }
-
-  .padLeft {
-    padding-left: variables.$spacing-md;
-  }
 }
 
 .sectionHeader,
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx
index cd82648fdee961..215e40a53cb943 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/DiffSection.tsx
@@ -31,13 +31,13 @@ export const DiffSection: React.FC<DiffSectionProps> = ({ streams, catalog, diff
       <div className={styles.sectionHeader}>
         <DiffHeader diffCount={streams.length} diffVerb={diffVerb} diffType="stream" />
       </div>
-      <table aria-label={`${diffVerb} streams table`}>
+      <table aria-label={`${diffVerb} streams table`} className={styles.table}>
         <thead className={styles.sectionSubHeader}>
           <tr>
             <th>
               <FormattedMessage id="connection.updateSchema.namespace" />
             </th>
-            <th className={styles.padLeft}>
+            <th>
               <FormattedMessage id="connection.updateSchema.streamName" />
             </th>
             <th />
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss
index 79120f3e647507..8d9c8968bf6d17 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.module.scss
@@ -1,18 +1,16 @@
-@use "../../../../scss/variables";
-@use "../../../../scss/colors";
+@use "scss/variables";
+@use "scss/colors";
 
 .row {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: variables.$spacing-sm variables.$spacing-xl;
   gap: variables.$spacing-md;
   height: 35px;
   font-size: 12px;
 }
 
 .content {
-  padding-left: 10px;
   display: flex;
   width: 100%;
   height: 35px;
@@ -28,6 +26,16 @@
   }
 }
 
+tr:first-child .content {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+tr:last-child .content {
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
 .icon {
   &.plus {
     color: colors.$green;
@@ -39,24 +47,21 @@
 
   &.mod {
     color: colors.$blue-100;
+    margin-left: -5px;
   }
 }
 
-.iconCell {
-  background: white;
+.iconContainer {
   width: 10px;
   height: 100%;
   display: flex;
   align-items: center;
+  margin: 0 variables.$spacing-md;
 }
 
 .cell {
-  width: 228px;
-
   &.update {
-    border-radius: variables.$border-radius-sm;
-
-    & span {
+    span {
       background-color: rgba(98, 94, 255, 10%);
       padding: variables.$spacing-sm;
       border-radius: variables.$border-radius-sm;
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx
index 3f8d715c59065b..60746e4086ab45 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldRow.tsx
@@ -2,9 +2,10 @@ import { faArrowRight, faMinus, faPlus } from "@fortawesome/free-solid-svg-icons
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
 
+import { ModificationIcon } from "components/icons/ModificationIcon";
+
 import { FieldTransform } from "core/request/AirbyteClient";
 
-import { ModificationIcon } from "../../../../components/icons/ModificationIcon";
 import styles from "./FieldRow.module.scss";
 
 interface FieldRowProps {
@@ -38,29 +39,29 @@ export const FieldRow: React.FC<FieldRowProps> = ({ transform }) => {
 
   return (
     <tr className={styles.row}>
-      <td className={styles.iconCell}>
-        {diffType === "add" ? (
-          <FontAwesomeIcon icon={faPlus} size="1x" className={iconStyle} />
-        ) : diffType === "remove" ? (
-          <FontAwesomeIcon icon={faMinus} size="1x" className={iconStyle} />
-        ) : (
-          <span className="mod">
-            <ModificationIcon />
-          </span>
-        )}
-      </td>
       <td className={contentStyle}>
-        <div className={styles.cell}>
-          <span>{fieldName}</span>
+        <div className={styles.iconContainer}>
+          {diffType === "add" ? (
+            <FontAwesomeIcon icon={faPlus} size="1x" className={iconStyle} />
+          ) : diffType === "remove" ? (
+            <FontAwesomeIcon icon={faMinus} size="1x" className={iconStyle} />
+          ) : (
+            <div className={iconStyle}>
+              <ModificationIcon />
+            </div>
+          )}
         </div>
-        <div className={updateCellStyle}>
-          {oldType && newType && (
+        {fieldName}
+      </td>
+      {oldType && newType && (
+        <td className={contentStyle}>
+          <div className={updateCellStyle}>
             <span>
               {oldType} <FontAwesomeIcon icon={faArrowRight} /> {newType}
             </span>
-          )}
-        </div>
-      </td>
+          </div>
+        </td>
+      )}
     </tr>
   );
 };
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss
index a50363d0be935e..be5a3f172e9b0b 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.module.scss
@@ -1,5 +1,5 @@
-@use "../../../../scss/colors";
-@use "../../../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 @use "./DiffSection.module.scss";
 
 .fieldHeader {
@@ -11,11 +11,7 @@
 .fieldSubHeader {
   @extend %sectionSubHeader;
 
-  padding: 0 variables.$spacing-sm 0 35px;
-
-  .padLeft {
-    padding-left: variables.$spacing-xl;
-  }
+  padding: 0 variables.$spacing-sm 0 40px;
 
   > div {
     @extend %nameCell;
@@ -25,12 +21,11 @@
     font-size: 10px;
     color: colors.$grey;
     line-height: 12px;
-    padding-left: variables.$spacing-md;
   }
 }
 
 .fieldRowsContainer {
-  padding-left: variables.$spacing-lg;
+  padding: 0 variables.$spacing-lg;
 
   ul,
   li {
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx
index 9d85aa78a781fd..b6916a74ee8f5a 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/FieldSection.tsx
@@ -23,7 +23,7 @@ export const FieldSection: React.FC<FieldSectionProps> = ({ streams, diffVerb })
         <div id={formatMessage({ id: "connection.updateSchema.namespace" })}>
           <FormattedMessage id="connection.updateSchema.namespace" />
         </div>
-        <div className={styles.padLeft} id={formatMessage({ id: "connection.updateSchema.streamName" })}>
+        <div id={formatMessage({ id: "connection.updateSchema.streamName" })}>
           <FormattedMessage id="connection.updateSchema.streamName" />
         </div>
         <div />
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss
index 4ce24fc9df90f1..adbb2651fd932f 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.module.scss
@@ -1,12 +1,12 @@
-@use "../../../../scss/colors";
-@use "../../../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 
 .row {
   display: flex;
   flex-direction: row;
   height: 40px;
   align-items: center;
-  padding: variables.$spacing-sm variables.$spacing-xl;
+  padding: variables.$spacing-sm variables.$spacing-lg;
   gap: variables.$spacing-md;
   border-bottom: 1px solid colors.$white;
   width: 100%;
@@ -21,6 +21,19 @@
   }
 }
 
+.content {
+  display: flex;
+  align-items: center;
+}
+
+.iconContainer {
+  width: 10px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-right: variables.$spacing-lg;
+}
+
 .icon {
   margin-top: -1px;
 
@@ -49,7 +62,7 @@
 
 .nameCell,
 %nameCell {
-  width: 140px;
+  width: 150px;
   text-align: left;
 
   & .row {
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx
index de077b279de8c2..083699a4707645 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/components/StreamRow.tsx
@@ -35,16 +35,20 @@ export const StreamRow: React.FC<StreamRowProps> = ({ streamTransform, syncMode,
   const namespace = streamTransform.streamDescriptor.namespace;
   return (
     <tr className={rowStyle}>
-      <td>
-        {diffVerb === "new" ? (
-          <FontAwesomeIcon icon={faPlus} size="1x" className={iconStyle} />
-        ) : diffVerb === "removed" ? (
-          <FontAwesomeIcon icon={faMinus} size="1x" className={iconStyle} />
-        ) : (
-          <ModificationIcon />
-        )}
+      <td className={styles.nameCell}>
+        <div className={styles.content}>
+          <div className={styles.iconContainer}>
+            {diffVerb === "new" ? (
+              <FontAwesomeIcon icon={faPlus} size="1x" className={iconStyle} />
+            ) : diffVerb === "removed" ? (
+              <FontAwesomeIcon icon={faMinus} size="1x" className={iconStyle} />
+            ) : (
+              <ModificationIcon />
+            )}
+          </div>
+          {namespace}
+        </div>
       </td>
-      <td className={styles.nameCell}>{namespace}</td>
       <td className={styles.nameCell}>{itemName}</td>
       <td>{diffVerb === "removed" && syncMode && <SyncModeBox syncModeString={syncMode} />} </td>
     </tr>
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx
index 081a6c194b29b3..b78f416eedff4b 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx
@@ -3,6 +3,9 @@ import { FormattedMessage } from "react-intl";
 
 import { Modal } from "components/ui/Modal";
 
+import { CatalogDiff } from "core/request/AirbyteClient";
+import { ModalServiceProvider } from "hooks/services/Modal";
+
 import { CatalogDiffModal } from "./CatalogDiffModal";
 
 export default {
@@ -12,64 +15,120 @@ export default {
 
 const Template: ComponentStory<typeof CatalogDiffModal> = (args) => {
   return (
-    <Modal title={<FormattedMessage id="connection.updateSchema.completed" />}>
-      <CatalogDiffModal
-        catalogDiff={args.catalogDiff}
-        catalog={args.catalog}
-        onClose={() => {
-          return null;
-        }}
-      />
-    </Modal>
+    <ModalServiceProvider>
+      <Modal size="md" title={<FormattedMessage id="connection.updateSchema.completed" />}>
+        <CatalogDiffModal catalogDiff={args.catalogDiff} catalog={args.catalog} onClose={() => null} />
+      </Modal>
+    </ModalServiceProvider>
   );
 };
 
-export const Primary = Template.bind({});
+const oneStreamAddCatalogDiff: CatalogDiff = {
+  transforms: [
+    {
+      transformType: "add_stream",
+      streamDescriptor: { namespace: "apple", name: "banana" },
+    },
+  ],
+};
+
+const oneFieldAddCatalogDiff: CatalogDiff = {
+  transforms: [
+    {
+      transformType: "update_stream",
+      streamDescriptor: { namespace: "apple", name: "harissa_paste" },
+      updateStream: [{ transformType: "add_field", fieldName: ["users", "phone"], breaking: false }],
+    },
+  ],
+};
+
+const oneFieldUpdateCatalogDiff: CatalogDiff = {
+  transforms: [
+    {
+      transformType: "update_stream",
+      streamDescriptor: { namespace: "apple", name: "harissa_paste" },
+      updateStream: [
+        {
+          transformType: "update_field_schema",
+          breaking: false,
+          fieldName: ["users", "address"],
+          updateFieldSchema: { oldSchema: { type: "number" }, newSchema: { type: "string" } },
+        },
+      ],
+    },
+  ],
+};
+
+const fullCatalogDiff: CatalogDiff = {
+  transforms: [
+    {
+      transformType: "update_stream",
+      streamDescriptor: { namespace: "apple", name: "harissa_paste" },
+      updateStream: [
+        { transformType: "add_field", fieldName: ["users", "phone"], breaking: false },
+        { transformType: "add_field", fieldName: ["users", "email"], breaking: false },
+        { transformType: "remove_field", fieldName: ["users", "lastName"], breaking: false },
+        {
+          transformType: "update_field_schema",
+          breaking: false,
+          fieldName: ["users", "address"],
+          updateFieldSchema: { oldSchema: { type: "number" }, newSchema: { type: "string" } },
+        },
+        {
+          transformType: "update_field_schema",
+          breaking: false,
+          fieldName: ["users", "updated_at"],
+          updateFieldSchema: { oldSchema: { type: "string" }, newSchema: { type: "DateTime" } },
+        },
+      ],
+    },
+    {
+      transformType: "add_stream",
+      streamDescriptor: { namespace: "apple", name: "banana" },
+    },
+    {
+      transformType: "add_stream",
+      streamDescriptor: { namespace: "apple", name: "carrot" },
+    },
+    {
+      transformType: "remove_stream",
+      streamDescriptor: { namespace: "apple", name: "dragonfruit" },
+    },
+    {
+      transformType: "remove_stream",
+      streamDescriptor: { namespace: "apple", name: "eclair" },
+    },
+    {
+      transformType: "remove_stream",
+      streamDescriptor: { namespace: "apple", name: "fishcake" },
+    },
+    {
+      transformType: "remove_stream",
+      streamDescriptor: { namespace: "apple", name: "gelatin_mold" },
+    },
+  ],
+};
 
+export const Primary = Template.bind({});
 Primary.args = {
-  catalogDiff: {
-    transforms: [
-      {
-        transformType: "update_stream",
-        streamDescriptor: { namespace: "apple", name: "harissa_paste" },
-        updateStream: [
-          { transformType: "add_field", fieldName: ["users", "phone"], breaking: false },
-          { transformType: "add_field", fieldName: ["users", "email"], breaking: false },
-          { transformType: "remove_field", fieldName: ["users", "lastName"], breaking: false },
+  catalogDiff: fullCatalogDiff,
+  catalog: { streams: [] },
+};
+
+export const OneStreamAdd = Template.bind({});
+OneStreamAdd.args = {
+  catalogDiff: oneStreamAddCatalogDiff,
+  catalog: { streams: [] },
+};
+
+export const OneFieldAdd = Template.bind({});
+OneFieldAdd.args = {
+  catalogDiff: oneFieldAddCatalogDiff,
+  catalog: { streams: [] },
+};
 
-          {
-            transformType: "update_field_schema",
-            breaking: false,
-            fieldName: ["users", "address"],
-            updateFieldSchema: { oldSchema: { type: "number" }, newSchema: { type: "string" } },
-          },
-        ],
-      },
-      {
-        transformType: "add_stream",
-        streamDescriptor: { namespace: "apple", name: "banana" },
-      },
-      {
-        transformType: "add_stream",
-        streamDescriptor: { namespace: "apple", name: "carrot" },
-      },
-      {
-        transformType: "remove_stream",
-        streamDescriptor: { namespace: "apple", name: "dragonfruit" },
-      },
-      {
-        transformType: "remove_stream",
-        streamDescriptor: { namespace: "apple", name: "eclair" },
-      },
-      {
-        transformType: "remove_stream",
-        streamDescriptor: { namespace: "apple", name: "fishcake" },
-      },
-      {
-        transformType: "remove_stream",
-        streamDescriptor: { namespace: "apple", name: "gelatin_mold" },
-      },
-    ],
-  },
+export const OneFieldUpdate = Template.bind({});
+OneFieldUpdate.args = {
+  catalogDiff: oneFieldUpdateCatalogDiff,
   catalog: { streams: [] },
 };
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/useConfirmCatalogDiff.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/useConfirmCatalogDiff.tsx
index e21777def5322e..5a876663ef08ac 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/useConfirmCatalogDiff.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/useConfirmCatalogDiff.tsx
@@ -18,6 +18,7 @@ export const useConfirmCatalogDiff = () => {
       openModal<void>({
         title: formatMessage({ id: "connection.updateSchema.completed" }),
         preventCancel: true,
+        size: "md",
         content: ({ onClose }) => (
           <CatalogDiffModal catalogDiff={catalogDiff} catalog={syncCatalog} onClose={onClose} />
         ),