diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx
index f4a72b90aa35..73c9b18d4d1b 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx
@@ -1,4 +1,5 @@
 import { Form, Formik, useField } from "formik";
+import merge from "lodash/merge";
 import { useState } from "react";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -9,7 +10,7 @@ import { Modal, ModalBody, ModalFooter } from "components/ui/Modal";
 import { FormikPatch } from "core/form/FormikPatch";
 
 import { ReactComponent as PlusIcon } from "../../connection/ConnectionOnboarding/plusIcon.svg";
-import { BuilderStream } from "../types";
+import { BuilderStream, DEFAULT_BUILDER_STREAM_VALUES } from "../types";
 import styles from "./AddStreamButton.module.scss";
 import { BuilderField } from "./BuilderField";
 
@@ -49,18 +50,11 @@ export const AddStreamButton: React.FC<AddStreamButtonProps> = ({ onAddStream, b
           onSubmit={(values: AddStreamValues) => {
             helpers.setValue([
               ...streamsField.value,
-              {
-                fieldPointer: [],
-                httpMethod: "GET",
-                requestOptions: {
-                  requestParameters: [],
-                  requestHeaders: [],
-                  requestBody: [],
-                },
+              merge({}, DEFAULT_BUILDER_STREAM_VALUES, {
                 ...initialValues,
                 name: values.streamName,
                 urlPath: values.urlPath,
-              },
+              }),
             ]);
             setIsOpen(false);
             onAddStream(numStreams);
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/Builder.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/Builder.module.scss
index 4c361af3aa4e..8ece94e80807 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/Builder.module.scss
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/Builder.module.scss
@@ -18,4 +18,5 @@
 .form {
   flex: 1;
   padding: variables.$spacing-xl;
+  overflow: auto;
 }
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.module.scss
index 48fedff9a2a0..552148a02cf6 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.module.scss
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.module.scss
@@ -6,3 +6,8 @@
   flex-direction: column;
   gap: variables.$spacing-xl;
 }
+
+.toggleContainer {
+  display: flex;
+  gap: variables.$spacing-md;
+}
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.tsx
index 312884a7a2b4..deec879b8c91 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.tsx
@@ -2,13 +2,38 @@ import classNames from "classnames";
 import React from "react";
 
 import { Card } from "components/ui/Card";
+import { CheckBox } from "components/ui/CheckBox";
 
 import styles from "./BuilderCard.module.scss";
 
 interface BuilderCardProps {
   className?: string;
+  toggleConfig?: {
+    label: React.ReactNode;
+    toggledOn: boolean;
+    onToggle: (newToggleValue: boolean) => void;
+  };
 }
 
-export const BuilderCard: React.FC<React.PropsWithChildren<BuilderCardProps>> = ({ children, className }) => {
-  return <Card className={classNames(className, styles.card)}>{children}</Card>;
+export const BuilderCard: React.FC<React.PropsWithChildren<BuilderCardProps>> = ({
+  children,
+  className,
+  toggleConfig,
+}) => {
+  return (
+    <Card className={classNames(className, styles.card)}>
+      {toggleConfig && (
+        <div className={styles.toggleContainer}>
+          <CheckBox
+            checked={toggleConfig.toggledOn}
+            onChange={(event) => {
+              toggleConfig.onToggle(event.target.checked);
+            }}
+          />
+          {toggleConfig.label}
+        </div>
+      )}
+      {(!toggleConfig || toggleConfig.toggledOn) && children}
+    </Card>
+  );
 };
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx
index 1bffdfcc8d72..30171879af3f 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderField.tsx
@@ -97,6 +97,9 @@ export const BuilderField: React.FC<BuilderFieldProps> = ({
           {...field}
           onChange={(e) => {
             field.onChange(e);
+            if (e.target.value === "") {
+              helpers.setValue(undefined);
+            }
             props.onChange?.(e.target.value);
           }}
           type={props.type}
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.tsx
index 3894595d67bd..7bd54599ea6b 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.tsx
@@ -10,14 +10,10 @@ import { Heading } from "components/ui/Heading";
 import { Text } from "components/ui/Text";
 
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
-import {
-  BuilderView,
-  DEFAULT_BUILDER_FORM_VALUES,
-  useConnectorBuilderState,
-} from "services/connectorBuilder/ConnectorBuilderStateService";
+import { BuilderView, useConnectorBuilderState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
 import { DownloadYamlButton } from "../DownloadYamlButton";
-import { BuilderFormValues, getInferredInputs } from "../types";
+import { BuilderFormValues, DEFAULT_BUILDER_FORM_VALUES, getInferredInputs } from "../types";
 import { useBuilderErrors } from "../useBuilderErrors";
 import { AddStreamButton } from "./AddStreamButton";
 import styles from "./BuilderSidebar.module.scss";
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/InjectRequestOptionFields.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/InjectRequestOptionFields.tsx
new file mode 100644
index 000000000000..7f556b44cc0e
--- /dev/null
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/InjectRequestOptionFields.tsx
@@ -0,0 +1,49 @@
+import { useField } from "formik";
+
+import { RequestOption } from "core/request/ConnectorManifest";
+
+import { injectIntoValues } from "../types";
+import { BuilderField } from "./BuilderField";
+
+interface InjectRequestOptionFieldsProps {
+  path: string;
+  descriptor: string;
+  excludeInjectIntoValues?: string[];
+}
+
+export const InjectRequestOptionFields: React.FC<InjectRequestOptionFieldsProps> = ({
+  path,
+  descriptor,
+  excludeInjectIntoValues,
+}) => {
+  const [field, , helpers] = useField<RequestOption>(path);
+
+  return (
+    <>
+      <BuilderField
+        type="enum"
+        path={`${path}.inject_into`}
+        options={
+          excludeInjectIntoValues
+            ? injectIntoValues.filter((val) => !excludeInjectIntoValues.includes(val))
+            : injectIntoValues
+        }
+        onChange={(newValue) => {
+          if (newValue === "path") {
+            helpers.setValue({ inject_into: newValue, field_name: undefined });
+          }
+        }}
+        label="Inject into"
+        tooltip={`Configures where the ${descriptor} should be set on the HTTP requests`}
+      />
+      {field.value.inject_into !== "path" && (
+        <BuilderField
+          type="string"
+          path={`${path}.field_name`}
+          label="Field name"
+          tooltip={`Configures which key should be used in the location that the ${descriptor} is being injected into`}
+        />
+      )}
+    </>
+  );
+};
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/InputsView.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/InputsView.tsx
index a934422b60f6..77095bd805fc 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/InputsView.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/InputsView.tsx
@@ -334,7 +334,7 @@ const InputItem = ({
   isInferredInput: boolean;
 }): JSX.Element => {
   return (
-    <li className={styles.listItem}>
+    <li className={styles.listItem} key={input.key}>
       <div className={styles.itemLabel}>{input.definition.title || input.key}</div>
       <Button
         className={styles.itemButton}
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/PaginationSection.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/PaginationSection.tsx
new file mode 100644
index 000000000000..4082e34cf04e
--- /dev/null
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/PaginationSection.tsx
@@ -0,0 +1,164 @@
+import { useField } from "formik";
+
+import GroupControls from "components/GroupControls";
+import { ControlLabels } from "components/LabeledControl";
+
+import { BuilderCard } from "./BuilderCard";
+import { BuilderField } from "./BuilderField";
+import { BuilderOneOf } from "./BuilderOneOf";
+import { InjectRequestOptionFields } from "./InjectRequestOptionFields";
+import { ToggleGroupField } from "./ToggleGroupField";
+
+interface PaginationSectionProps {
+  streamFieldPath: (fieldPath: string) => string;
+}
+
+export const PaginationSection: React.FC<PaginationSectionProps> = ({ streamFieldPath }) => {
+  const [field, , helpers] = useField(streamFieldPath("paginator"));
+  const [pageSizeField] = useField(streamFieldPath("paginator.strategy.page_size"));
+  const [, , pageSizeOptionHelpers] = useField(streamFieldPath("paginator.pageSizeOption"));
+
+  const handleToggle = (newToggleValue: boolean) => {
+    if (newToggleValue) {
+      helpers.setValue({
+        strategy: {
+          type: "OffsetIncrement",
+        },
+        pageTokenOption: {
+          inject_into: "request_parameter",
+        },
+      });
+    } else {
+      helpers.setValue(undefined);
+    }
+  };
+  const toggledOn = field.value !== undefined;
+
+  const pageTokenOption = (
+    <GroupControls
+      label={
+        <ControlLabels
+          label="Page token option"
+          infoTooltipContent="Configures how the page token will be sent in requests to the source API"
+        />
+      }
+    >
+      <InjectRequestOptionFields path={streamFieldPath("paginator.pageTokenOption")} descriptor="page token" />
+    </GroupControls>
+  );
+
+  const pageSizeOption = (
+    <ToggleGroupField
+      label="Page size option"
+      tooltip="Configures how the page size will be sent in requests to the source API"
+      fieldPath={streamFieldPath("paginator.pageSizeOption")}
+      initialValues={{
+        inject_into: "request_parameter",
+        field_name: "",
+      }}
+    >
+      <InjectRequestOptionFields
+        path={streamFieldPath("paginator.pageSizeOption")}
+        descriptor="page size"
+        excludeInjectIntoValues={["path"]}
+      />
+    </ToggleGroupField>
+  );
+
+  return (
+    <BuilderCard
+      toggleConfig={{
+        label: (
+          <ControlLabels
+            label="Pagination"
+            infoTooltipContent="Configure how pagination is handled by your connector"
+          />
+        ),
+        toggledOn,
+        onToggle: handleToggle,
+      }}
+    >
+      <BuilderOneOf
+        path={streamFieldPath("paginator.strategy")}
+        label="Mode"
+        tooltip="Pagination method to use for requests sent to the API"
+        options={[
+          {
+            label: "Offset Increment",
+            typeValue: "OffsetIncrement",
+            children: (
+              <>
+                <BuilderField
+                  type="number"
+                  path={streamFieldPath("paginator.strategy.page_size")}
+                  label="Page size"
+                  tooltip="Set the size of each page"
+                />
+                {pageSizeOption}
+                {pageTokenOption}
+              </>
+            ),
+          },
+          {
+            label: "Page Increment",
+            typeValue: "PageIncrement",
+            children: (
+              <>
+                <BuilderField
+                  type="number"
+                  path={streamFieldPath("paginator.strategy.page_size")}
+                  label="Page size"
+                  tooltip="Set the size of each page"
+                />
+                <BuilderField
+                  type="number"
+                  path={streamFieldPath("paginator.strategy.start_from_page")}
+                  label="Start from page"
+                  tooltip="Page number to start requesting pages from"
+                  optional
+                />
+                {pageSizeOption}
+                {pageTokenOption}
+              </>
+            ),
+          },
+          {
+            label: "Cursor Pagination",
+            typeValue: "CursorPagination",
+            children: (
+              <>
+                <BuilderField
+                  type="string"
+                  path={streamFieldPath("paginator.strategy.cursor_value")}
+                  label="Cursor value"
+                  tooltip="Value of the cursor to send in requests to the API"
+                />
+                <BuilderField
+                  type="string"
+                  path={streamFieldPath("paginator.strategy.stop_condition")}
+                  label="Stop condition"
+                  tooltip="Condition that determines when to stop requesting further pages"
+                  optional
+                />
+                <BuilderField
+                  type="number"
+                  path={streamFieldPath("paginator.strategy.page_size")}
+                  onChange={(newValue) => {
+                    if (newValue === undefined || newValue === "") {
+                      pageSizeOptionHelpers.setValue(undefined);
+                    }
+                  }}
+                  label="Page size"
+                  tooltip="Set the size of each page"
+                  optional
+                />
+                {pageSizeField.value && pageSizeField.value !== "" && pageSizeOption}
+                {pageTokenOption}
+              </>
+            ),
+          },
+        ]}
+      />
+    </BuilderCard>
+  );
+};
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/StreamConfigView.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/StreamConfigView.tsx
index f346fbfd4819..09225da07c86 100644
--- a/airbyte-webapp/src/components/connectorBuilder/Builder/StreamConfigView.tsx
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/StreamConfigView.tsx
@@ -14,6 +14,7 @@ import { BuilderConfigView } from "./BuilderConfigView";
 import { BuilderField } from "./BuilderField";
 import { BuilderTitle } from "./BuilderTitle";
 import { KeyValueListField } from "./KeyValueListField";
+import { PaginationSection } from "./PaginationSection";
 import styles from "./StreamConfigView.module.scss";
 
 interface StreamConfigViewProps {
@@ -84,10 +85,18 @@ export const StreamConfigView: React.FC<StreamConfigViewProps> = ({ streamNum })
         <BuilderField
           type="array"
           path={streamFieldPath("fieldPointer")}
-          label="Field Pointer"
+          label="Record selector"
           tooltip="Pointer into the response that should be extracted as the final record"
         />
+        <BuilderField
+          type="array"
+          path={streamFieldPath("primaryKey")}
+          label="Primary key"
+          tooltip="Pointer into the response that should be used as the primary key when deduplicating records in the destination"
+          optional
+        />
       </BuilderCard>
+      <PaginationSection streamFieldPath={streamFieldPath} />
       <BuilderCard>
         <KeyValueListField
           path={streamFieldPath("requestOptions.requestParameters")}
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/ToggleGroupField.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/ToggleGroupField.module.scss
new file mode 100644
index 000000000000..1f016d2cb288
--- /dev/null
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/ToggleGroupField.module.scss
@@ -0,0 +1,12 @@
+@use "scss/variables";
+
+.label {
+  display: flex;
+  align-items: center;
+  gap: variables.$spacing-md;
+  height: 34px;
+
+  label {
+    padding-bottom: 0;
+  }
+}
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/ToggleGroupField.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/ToggleGroupField.tsx
new file mode 100644
index 000000000000..bd25d13ab793
--- /dev/null
+++ b/airbyte-webapp/src/components/connectorBuilder/Builder/ToggleGroupField.tsx
@@ -0,0 +1,39 @@
+import { useField } from "formik";
+
+import GroupControls from "components/GroupControls";
+import { ControlLabels } from "components/LabeledControl";
+import { CheckBox } from "components/ui/CheckBox";
+
+import styles from "./ToggleGroupField.module.scss";
+
+interface ToggleGroupFieldProps {
+  label: string;
+  tooltip: string;
+  fieldPath: string;
+  initialValues: unknown;
+}
+
+export const ToggleGroupField: React.FC<React.PropsWithChildren<ToggleGroupFieldProps>> = ({
+  children,
+  label,
+  tooltip,
+  fieldPath,
+  initialValues,
+}) => {
+  const [field, , helpers] = useField(fieldPath);
+  const enabled = field.value !== undefined;
+
+  const labelComponent = (
+    <div className={styles.label}>
+      <CheckBox
+        checked={enabled}
+        onChange={(event) => {
+          event.target.checked ? helpers.setValue(initialValues) : helpers.setValue(undefined);
+        }}
+      />
+      <ControlLabels label={label} infoTooltipContent={tooltip} />
+    </div>
+  );
+
+  return enabled ? <GroupControls label={labelComponent}>{children}</GroupControls> : labelComponent;
+};
diff --git a/airbyte-webapp/src/components/connectorBuilder/types.ts b/airbyte-webapp/src/components/connectorBuilder/types.ts
index 9350135732a9..57d0c1f0dd01 100644
--- a/airbyte-webapp/src/components/connectorBuilder/types.ts
+++ b/airbyte-webapp/src/components/connectorBuilder/types.ts
@@ -13,6 +13,8 @@ import {
   HttpRequesterAllOfAuthenticator,
   NoAuth,
   SessionTokenAuthenticator,
+  DefaultPaginatorAllOfPaginationStrategy,
+  RequestOption,
 } from "core/request/ConnectorManifest";
 
 export interface BuilderFormInput {
@@ -47,13 +49,44 @@ export interface BuilderStream {
   name: string;
   urlPath: string;
   fieldPointer: string[];
+  primaryKey: string[];
   httpMethod: "GET" | "POST";
   requestOptions: {
     requestParameters: Array<[string, string]>;
     requestHeaders: Array<[string, string]>;
     requestBody: Array<[string, string]>;
   };
+  paginator?: {
+    strategy: DefaultPaginatorAllOfPaginationStrategy;
+    pageTokenOption: RequestOption;
+    pageSizeOption?: RequestOption;
+  };
 }
+
+export const DEFAULT_BUILDER_FORM_VALUES: BuilderFormValues = {
+  global: {
+    connectorName: "",
+    urlBase: "",
+    authenticator: { type: "NoAuth" },
+  },
+  inputs: [],
+  inferredInputOverrides: {},
+  streams: [],
+};
+
+export const DEFAULT_BUILDER_STREAM_VALUES: BuilderStream = {
+  name: "",
+  urlPath: "",
+  fieldPointer: [],
+  primaryKey: [],
+  httpMethod: "GET",
+  requestOptions: {
+    requestParameters: [],
+    requestHeaders: [],
+    requestBody: [],
+  },
+};
+
 function getInferredInputList(values: BuilderFormValues): BuilderFormInput[] {
   if (values.global.authenticator.type === "ApiKeyAuthenticator") {
     return [
@@ -179,6 +212,8 @@ export function getInferredInputs(values: BuilderFormValues): BuilderFormInput[]
   );
 }
 
+export const injectIntoValues = ["request_parameter", "header", "path", "body_data", "body_json"];
+
 export const builderFormValidationSchema = yup.object().shape({
   global: yup.object().shape({
     connectorName: yup.string().required("form.empty.error"),
@@ -216,12 +251,60 @@ export const builderFormValidationSchema = yup.object().shape({
       name: yup.string().required("form.empty.error"),
       urlPath: yup.string().required("form.empty.error"),
       fieldPointer: yup.array().of(yup.string()),
+      primaryKey: yup.array().of(yup.string()),
       httpMethod: yup.mixed().oneOf(["GET", "POST"]),
       requestOptions: yup.object().shape({
         requestParameters: yup.array().of(yup.array().of(yup.string())),
         requestHeaders: yup.array().of(yup.array().of(yup.string())),
         requestBody: yup.array().of(yup.array().of(yup.string())),
       }),
+      paginator: yup
+        .object()
+        .shape({
+          pageSizeOption: yup
+            .object()
+            .shape({
+              inject_into: yup.mixed().oneOf(injectIntoValues.filter((val) => val !== "path")),
+              field_name: yup.string().required("form.empty.error"),
+            })
+            .notRequired()
+            .default(undefined),
+          pageTokenOption: yup.object().shape({
+            inject_into: yup.mixed().oneOf(injectIntoValues),
+            field_name: yup.mixed().when("inject_into", {
+              is: "path",
+              then: (schema) => schema.strip(),
+              otherwise: yup.string().required("form.empty.error"),
+            }),
+          }),
+          strategy: yup
+            .object({
+              page_size: yup.mixed().when("type", {
+                is: (val: string) => ["OffsetIncrement", "PageIncrement"].includes(val),
+                then: yup.number().required("form.empty.error"),
+                otherwise: yup.number(),
+              }),
+              cursor_value: yup.mixed().when("type", {
+                is: "CursorPagination",
+                then: yup.string().required("form.empty.error"),
+                otherwise: (schema) => schema.strip(),
+              }),
+              stop_condition: yup.mixed().when("type", {
+                is: "CursorPagination",
+                then: yup.string(),
+                otherwise: (schema) => schema.strip(),
+              }),
+              start_from_page: yup.mixed().when("type", {
+                is: "PageIncrement",
+                then: yup.string(),
+                otherwise: (schema) => schema.strip(),
+              }),
+            })
+            .notRequired()
+            .default(undefined),
+        })
+        .notRequired()
+        .default(undefined),
     })
   ),
 });
@@ -248,8 +331,10 @@ export const convertToManifest = (values: BuilderFormValues): PatchedConnectorMa
   const manifestStreams: DeclarativeStream[] = values.streams.map((stream) => {
     return {
       name: stream.name,
+      primary_key: stream.primaryKey,
       retriever: {
         name: stream.name,
+        primary_key: stream.primaryKey,
         requester: {
           name: stream.name,
           url_base: values.global?.urlBase,
@@ -269,6 +354,21 @@ export const convertToManifest = (values: BuilderFormValues): PatchedConnectorMa
             config: {},
           },
         },
+        paginator: stream.paginator
+          ? {
+              type: "DefaultPaginator",
+              page_token_option: {
+                ...stream.paginator.pageTokenOption,
+                // ensures that empty field_name is not set, as connector builder server cannot accept a field_name if inject_into is set to 'path'
+                field_name: stream.paginator.pageTokenOption?.field_name
+                  ? stream.paginator.pageTokenOption?.field_name
+                  : undefined,
+              },
+              page_size_option: stream.paginator.pageSizeOption,
+              pagination_strategy: stream.paginator.strategy,
+              url_base: values.global?.urlBase,
+            }
+          : { type: "NoPagination" },
         config: {},
       },
       config: {},
diff --git a/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx b/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx
index 035b3ff9a23c..435c7ebe4e43 100644
--- a/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx
+++ b/airbyte-webapp/src/services/connectorBuilder/ConnectorBuilderStateService.tsx
@@ -1,26 +1,16 @@
 import { dump } from "js-yaml";
+import merge from "lodash/merge";
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import { useLocalStorage } from "react-use";
 
-import { BuilderFormValues, convertToManifest } from "components/connectorBuilder/types";
+import { BuilderFormValues, convertToManifest, DEFAULT_BUILDER_FORM_VALUES } from "components/connectorBuilder/types";
 
 import { PatchedConnectorManifest } from "core/domain/connectorBuilder/PatchedConnectorManifest";
 import { StreamReadRequestBodyConfig, StreamsListReadStreamsItem } from "core/request/ConnectorBuilderClient";
 
 import { useListStreams } from "./ConnectorBuilderApiService";
 
-export const DEFAULT_BUILDER_FORM_VALUES: BuilderFormValues = {
-  global: {
-    connectorName: "",
-    urlBase: "",
-    authenticator: { type: "NoAuth" },
-  },
-  inputs: [],
-  inferredInputOverrides: {},
-  streams: [],
-};
-
 const DEFAULT_JSON_MANIFEST_VALUES: PatchedConnectorManifest = {
   version: "0.1.0",
   check: {
@@ -78,7 +68,7 @@ export const ConnectorBuilderStateProvider: React.FC<React.PropsWithChildren<unk
   );
 
   const builderFormValues = useMemo(() => {
-    return { ...DEFAULT_BUILDER_FORM_VALUES, ...(storedBuilderFormValues ?? {}) };
+    return merge({}, DEFAULT_BUILDER_FORM_VALUES, storedBuilderFormValues);
   }, [storedBuilderFormValues]);
 
   const [jsonManifest, setJsonManifest] = useLocalStorage<PatchedConnectorManifest>(