diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.module.scss b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.module.scss
index 05ba9b001d70..689a99b2c03a 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.module.scss
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.module.scss
@@ -20,6 +20,8 @@
   display: none;
   position: absolute;
   right: variables.$spacing-xl;
+
+  // used to control svg size, not text size
   font-size: 18px;
   color: colors.$blue;
 }
@@ -35,11 +37,7 @@
     width: 100%;
 
     h2 {
-      font-weight: 700;
-      font-size: 24px;
-      line-height: 29px;
       text-align: center;
-      color: colors.$dark-blue-900;
       margin: variables.$spacing-md;
       word-wrap: break-word;
     }
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.tsx
index 303699871935..8bb38d8df64f 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.tsx
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { ChangeEvent, useState } from "react";
 
 import { Input } from "components";
+import { Text } from "components/ui/Text";
 
 import { buildConnectionUpdate } from "core/domain/connection";
 import { WebBackendConnectionRead } from "core/request/AirbyteClient";
@@ -85,7 +86,9 @@ export const ConnectionName: React.FC<ConnectionNameProps> = ({ connection }) =>
       ) : (
         <button className={styles.nameContainer} onClick={() => setEditingState(true)}>
           <div>
-            <h2>{name}</h2>
+            <Text as="h2" size="lg">
+              {name}
+            </Text>
           </div>
           <FontAwesomeIcon className={styles.icon} icon={faPenToSquare} />
         </button>
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.module.scss b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.module.scss
new file mode 100644
index 000000000000..10360aaf922e
--- /dev/null
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.module.scss
@@ -0,0 +1,14 @@
+@use "../../../../scss/variables";
+
+.tryArrow {
+  margin: 0 variables.$spacing-md -1px 0;
+
+  // used to control svg size
+  font-size: 14px;
+}
+
+.content {
+  max-width: 1279px;
+  margin: 0 auto;
+  padding-bottom: variables.$spacing-md;
+}
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.tsx
index 97bc17dac7ca..97cb8b508f6c 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.tsx
@@ -3,7 +3,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useMemo, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useAsyncFn, useUnmount } from "react-use";
-import styled from "styled-components";
 
 import { LabeledSwitch } from "components/LabeledSwitch";
 import LoadingSchema from "components/LoadingSchema";
@@ -27,6 +26,8 @@ import { equal, naturalComparatorBy } from "utils/objects";
 import { CatalogDiffModal } from "views/Connection/CatalogDiffModal/CatalogDiffModal";
 import { ConnectionForm } from "views/Connection/ConnectionForm";
 
+import styles from "./ConnectionReplicationTab.module.scss";
+
 interface ConnectionReplicationTabProps {
   onAfterSaveSchema: () => void;
   connectionId: string;
@@ -74,17 +75,6 @@ const ResetWarningModal: React.FC<ResetWarningModalProps> = ({ onCancel, onClose
   );
 };
 
-const Content = styled.div`
-  max-width: 1279px;
-  margin: 0 auto;
-  padding-bottom: 10px;
-`;
-
-const TryArrow = styled(FontAwesomeIcon)`
-  margin: 0 10px -1px 0;
-  font-size: 14px;
-`;
-
 export const ConnectionReplicationTab: React.FC<ConnectionReplicationTabProps> = ({
   onAfterSaveSchema,
   connectionId,
@@ -221,7 +211,7 @@ export const ConnectionReplicationTab: React.FC<ConnectionReplicationTabProps> =
   };
 
   return (
-    <Content>
+    <div className={styles.content}>
       {!isRefreshingCatalog && connection ? (
         <ConnectionFormServiceProvider
           connection={connection}
@@ -239,7 +229,7 @@ export const ConnectionReplicationTab: React.FC<ConnectionReplicationTabProps> =
                 onClick={onRefreshSourceSchema}
                 type="button"
                 variant="secondary"
-                icon={<TryArrow icon={faSyncAlt} />}
+                icon={<FontAwesomeIcon className={styles.tryArrow} icon={faSyncAlt} />}
               >
                 <FormattedMessage id="connection.updateSchema" />
               </Button>
@@ -249,6 +239,6 @@ export const ConnectionReplicationTab: React.FC<ConnectionReplicationTabProps> =
       ) : (
         <LoadingSchema />
       )}
-    </Content>
+    </div>
   );
 };
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.module.scss b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.module.scss
new file mode 100644
index 000000000000..ef0b0aa1659e
--- /dev/null
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.module.scss
@@ -0,0 +1,30 @@
+@use "../../../scss/variables";
+
+.formContainer {
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-md;
+}
+
+.readonly {
+  pointer-events: none;
+}
+
+.flexRow {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: variables.$spacing-md;
+}
+
+.leftFieldCol {
+  flex: 1;
+  max-width: 640px;
+  padding-right: variables.$spacing-xl;
+}
+
+.rightFieldCol {
+  flex: 1;
+  max-width: 300px;
+}
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
index 10a2da74154c..d574fc05ee36 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
@@ -1,14 +1,14 @@
+import classNames from "classnames";
 import { Field, FieldProps, Form, Formik } from "formik";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useToggle } from "react-use";
 import styled from "styled-components";
 
-import { H5 } from "components/base/Titles";
 import { FormChangeTracker } from "components/FormChangeTracker";
 import { ControlLabels } from "components/LabeledControl";
-import { Card } from "components/ui/Card";
 import { Input } from "components/ui/Input";
+import { Text } from "components/ui/Text";
 
 import { NamespaceDefinitionType } from "core/request/AirbyteClient";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
@@ -18,80 +18,21 @@ import EditControls from "./components/EditControls";
 import { NamespaceDefinitionField } from "./components/NamespaceDefinitionField";
 import { OperationsSection } from "./components/OperationsSection";
 import ScheduleField from "./components/ScheduleField";
+import { Section } from "./components/Section";
 import SchemaField from "./components/SyncCatalogField";
+import styles from "./ConnectionForm.module.scss";
 import { connectionValidationSchema } from "./formConfig";
 
+// This is removed in KC's main refactor PR.  Removing it would require major scope creep for this PR.
 const ConnectorLabel = styled(ControlLabels)`
   max-width: 328px;
   margin-right: 20px;
   vertical-align: top;
 `;
 
-const NamespaceFormatLabel = styled(ControlLabels)`
-  flex: 5 0 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-`;
-
-export const FlexRow = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: 10px;
-`;
-
-export const LeftFieldCol = styled.div`
-  flex: 1;
-  max-width: 640px;
-  padding-right: 30px;
-`;
-
-export const RightFieldCol = styled.div`
-  flex: 1;
-  max-width: 300px;
-`;
-
-export const StyledSection = styled.div`
-  padding: 20px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-
-  &:not(:last-child) {
-    box-shadow: 0 1px 0 rgba(139, 139, 160, 0.25);
-  }
-`;
-
-interface SectionProps {
-  title?: React.ReactNode;
-}
-
-const LabelHeading = styled(H5)`
-  line-height: 16px;
-  display: inline;
-`;
-
-const Section: React.FC<React.PropsWithChildren<SectionProps>> = ({ title, children }) => (
-  <Card>
-    <StyledSection>
-      {title && <H5 bold>{title}</H5>}
-      {children}
-    </StyledSection>
-  </Card>
-);
-
-const FormContainer = styled(Form)`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`;
-
 export type ConnectionFormMode = "create" | "edit" | "readonly";
 
 export interface ConnectionFormProps {
-  className?: string;
   successMessage?: React.ReactNode;
 
   /** Should be passed when connection is updated with withRefreshCatalog flag */
@@ -100,7 +41,6 @@ export interface ConnectionFormProps {
 }
 
 export const ConnectionForm: React.FC<ConnectionFormProps> = ({
-  className,
   successMessage,
   canSubmitUntouchedForm,
   additionalSchemaControl,
@@ -110,6 +50,10 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
   const [editingTransformation, toggleEditingTransformation] = useToggle(false);
   const { formatMessage } = useIntl();
 
+  const readonlyClass = classNames({
+    [styles.readonly]: mode === "readonly",
+  });
+
   return (
     <Formik
       initialValues={initialValues}
@@ -118,28 +62,28 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
       onSubmit={onFormSubmit}
     >
       {({ isSubmitting, isValid, dirty, resetForm, values }) => (
-        <FormContainer className={className}>
+        <Form className={styles.formContainer}>
           <FormChangeTracker changed={dirty} formId={formId} />
           {mode === "create" && (
             <Section>
               <Field name="name">
                 {({ field, meta }: FieldProps<string>) => (
-                  <FlexRow>
-                    <LeftFieldCol>
+                  <div className={styles.flexRow}>
+                    <div className={styles.leftFieldCol}>
                       <ConnectorLabel
                         nextLine
                         error={!!meta.error && meta.touched}
                         label={
-                          <LabelHeading bold>
+                          <Text as="h5" size="sm">
                             <FormattedMessage id="form.connectionName" />
-                          </LabelHeading>
+                          </Text>
                         }
                         message={formatMessage({
                           id: "form.connectionName.message",
                         })}
                       />
-                    </LeftFieldCol>
-                    <RightFieldCol>
+                    </div>
+                    <div className={styles.RightFieldCol}>
                       <Input
                         {...field}
                         error={!!meta.error}
@@ -148,8 +92,8 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
                           id: "form.connectionName.placeholder",
                         })}
                       />
-                    </RightFieldCol>
-                  </FlexRow>
+                    </div>
+                  </div>
                 )}
               </Field>
             </Section>
@@ -157,77 +101,76 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
           <Section title={<FormattedMessage id="connection.transfer" />}>
             <ScheduleField />
           </Section>
-          <Card>
-            <StyledSection>
-              <H5 bold>
-                <FormattedMessage id="connection.streams" />
-              </H5>
-              <span style={{ pointerEvents: mode === "readonly" ? "none" : "auto" }}>
-                <Field name="namespaceDefinition" component={NamespaceDefinitionField} />
-              </span>
-              {values.namespaceDefinition === NamespaceDefinitionType.customformat && (
-                <Field name="namespaceFormat">
-                  {({ field, meta }: FieldProps<string>) => (
-                    <FlexRow>
-                      <LeftFieldCol>
-                        <NamespaceFormatLabel
-                          nextLine
-                          error={!!meta.error}
-                          label={<FormattedMessage id="connectionForm.namespaceFormat.title" />}
-                          message={<FormattedMessage id="connectionForm.namespaceFormat.subtitle" />}
-                        />
-                      </LeftFieldCol>
-                      <RightFieldCol style={{ pointerEvents: mode === "readonly" ? "none" : "auto" }}>
-                        <Input
-                          {...field}
-                          error={!!meta.error}
-                          placeholder={formatMessage({
-                            id: "connectionForm.namespaceFormat.placeholder",
-                          })}
-                        />
-                      </RightFieldCol>
-                    </FlexRow>
-                  )}
-                </Field>
-              )}
-              <Field name="prefix">
-                {({ field }: FieldProps<string>) => (
-                  <FlexRow>
-                    <LeftFieldCol>
+          <Section>
+            <Text as="h5" size="sm">
+              <FormattedMessage id="connection.streams" />
+            </Text>
+            <span style={{ pointerEvents: mode === "readonly" ? "none" : "auto" }}>
+              <Field name="namespaceDefinition" component={NamespaceDefinitionField} />
+            </span>
+            {values.namespaceDefinition === NamespaceDefinitionType.customformat && (
+              <Field name="namespaceFormat">
+                {({ field, meta }: FieldProps<string>) => (
+                  <div className={styles.flexRow}>
+                    <div className={styles.leftFieldCol}>
                       <ControlLabels
+                        className={styles.NamespaceFormatLabel}
                         nextLine
-                        label={formatMessage({
-                          id: "form.prefix",
-                        })}
-                        message={formatMessage({
-                          id: "form.prefix.message",
-                        })}
+                        error={!!meta.error}
+                        label={<FormattedMessage id="connectionForm.namespaceFormat.title" />}
+                        message={<FormattedMessage id="connectionForm.namespaceFormat.subtitle" />}
                       />
-                    </LeftFieldCol>
-                    <RightFieldCol>
+                    </div>
+                    <div className={classNames(styles.rightFieldCol, readonlyClass)}>
                       <Input
                         {...field}
-                        type="text"
+                        error={!!meta.error}
                         placeholder={formatMessage({
-                          id: `form.prefix.placeholder`,
+                          id: "connectionForm.namespaceFormat.placeholder",
                         })}
-                        data-testid="prefixInput"
-                        style={{ pointerEvents: mode === "readonly" ? "none" : "auto" }}
                       />
-                    </RightFieldCol>
-                  </FlexRow>
+                    </div>
+                  </div>
                 )}
               </Field>
-            </StyledSection>
-            <StyledSection>
-              <Field
-                name="syncCatalog.streams"
-                additionalControl={additionalSchemaControl}
-                component={SchemaField}
-                isSubmitting={isSubmitting}
-              />
-            </StyledSection>
-          </Card>
+            )}
+            <Field name="prefix">
+              {({ field }: FieldProps<string>) => (
+                <div className={styles.flexRow}>
+                  <div className={styles.leftFieldCol}>
+                    <ControlLabels
+                      nextLine
+                      label={formatMessage({
+                        id: "form.prefix",
+                      })}
+                      message={formatMessage({
+                        id: "form.prefix.message",
+                      })}
+                    />
+                  </div>
+                  <div className={styles.rightFieldCol}>
+                    <Input
+                      {...field}
+                      type="text"
+                      placeholder={formatMessage({
+                        id: `form.prefix.placeholder`,
+                      })}
+                      data-testid="prefixInput"
+                      style={{ pointerEvents: mode === "readonly" ? "none" : "auto" }}
+                    />
+                  </div>
+                </div>
+              )}
+            </Field>
+          </Section>
+          <Section>
+            <Field
+              name="syncCatalog.streams"
+              additionalControl={additionalSchemaControl}
+              component={SchemaField}
+              isSubmitting={isSubmitting}
+            />
+          </Section>
           {mode === "edit" && (
             <EditControls
               isSubmitting={isSubmitting}
@@ -254,7 +197,7 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
               />
             </>
           )}
-        </FormContainer>
+        </Form>
       )}
     </Formik>
   );
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.module.scss b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.module.scss
new file mode 100644
index 000000000000..0a3d7654d1e2
--- /dev/null
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.module.scss
@@ -0,0 +1 @@
+@forward "../ConnectionForm.module.scss";
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.tsx
index efc7888ad940..b1ff8ab1c5bb 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/NamespaceDefinitionField.tsx
@@ -5,8 +5,7 @@ import { FormattedMessage } from "react-intl";
 import { ControlLabels, DropDown } from "components";
 
 import { NamespaceDefinitionType } from "../../../../core/request/AirbyteClient";
-import { FlexRow, LeftFieldCol, RightFieldCol } from "../ConnectionForm";
-
+import styles from "./NamespaceDefinitionField.module.scss";
 export const StreamOptions = [
   {
     value: NamespaceDefinitionType.source,
@@ -29,8 +28,8 @@ export const NamespaceDefinitionField: React.FC<FieldProps<string>> = ({ field,
   const [, meta] = useField(field.name);
 
   return (
-    <FlexRow>
-      <LeftFieldCol>
+    <div className={styles.flexRow}>
+      <div className={styles.leftFieldCol}>
         <ControlLabels
           nextLine
           error={!!meta.error && meta.touched}
@@ -38,8 +37,8 @@ export const NamespaceDefinitionField: React.FC<FieldProps<string>> = ({ field,
           label={<FormattedMessage id="connectionForm.namespaceDefinition.title" />}
           message={<FormattedMessage id="connectionForm.namespaceDefinition.subtitle" />}
         />
-      </LeftFieldCol>
-      <RightFieldCol>
+      </div>
+      <div className={styles.rightFieldCol}>
         <DropDown
           name="namespaceDefinition"
           error={!!meta.error && meta.touched}
@@ -47,7 +46,7 @@ export const NamespaceDefinitionField: React.FC<FieldProps<string>> = ({ field,
           value={field.value}
           onChange={({ value }) => form.setFieldValue(field.name, value)}
         />
-      </RightFieldCol>
-    </FlexRow>
+      </div>
+    </div>
   );
 };
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/OperationsSection.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/OperationsSection.tsx
index 6dfa6f10cfb0..1e5a77f78819 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/OperationsSection.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/OperationsSection.tsx
@@ -2,14 +2,14 @@ import { Field, FieldArray } from "formik";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { H5 } from "components/base/Titles";
 import { Card } from "components/ui/Card";
+import { Text } from "components/ui/Text";
 
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
 
-import { StyledSection } from "../ConnectionForm";
 import { NormalizationField } from "./NormalizationField";
+import { Section } from "./Section";
 import { TransformationField } from "./TransformationField";
 
 interface OperationsSectionProps {
@@ -35,16 +35,16 @@ export const OperationsSection: React.FC<OperationsSectionProps> = ({
 
   return (
     <Card>
-      <StyledSection>
+      <Section>
         {supportsNormalization || supportsTransformations ? (
-          <H5 bold>
+          <Text as="h5">
             {[
               supportsNormalization && formatMessage({ id: "connectionForm.normalization.title" }),
               supportsTransformations && formatMessage({ id: "connectionForm.transformation.title" }),
             ]
               .filter(Boolean)
               .join(" & ")}
-          </H5>
+          </Text>
         ) : null}
         {supportsNormalization && <Field name="normalization" component={NormalizationField} />}
         {supportsTransformations && (
@@ -58,7 +58,7 @@ export const OperationsSection: React.FC<OperationsSectionProps> = ({
             )}
           </FieldArray>
         )}
-      </StyledSection>
+      </Section>
     </Card>
   );
 };
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/Section.module.scss b/airbyte-webapp/src/views/Connection/ConnectionForm/components/Section.module.scss
new file mode 100644
index 000000000000..54c545da209f
--- /dev/null
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/Section.module.scss
@@ -0,0 +1,13 @@
+@use "../../../../scss/variables";
+
+.section {
+  padding: variables.$spacing-xl;
+  display: flex;
+  flex-direction: column;
+  gap: variables.$spacing-lg;
+
+  // TODO: We may be able to get rid of this.
+  &:not(:last-child) {
+    box-shadow: 0 1px 0 rgba(139, 139, 160, 25%);
+  }
+}
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/Section.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/Section.tsx
new file mode 100644
index 000000000000..57d28f56ed95
--- /dev/null
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/Section.tsx
@@ -0,0 +1,21 @@
+import { Card } from "components/ui";
+import { Text } from "components/ui/Text";
+
+import styles from "./Section.module.scss";
+
+interface SectionProps {
+  title?: React.ReactNode;
+}
+
+export const Section: React.FC<React.PropsWithChildren<SectionProps>> = ({ title, children }) => (
+  <Card>
+    <div className={styles.section}>
+      {title && (
+        <Text as="h5" size="sm">
+          {title}
+        </Text>
+      )}
+      {children}
+    </div>
+  </Card>
+);