diff --git a/airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.tsx b/airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.tsx
index 9723c03ca0a3..4e146026f910 100644
--- a/airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.tsx
+++ b/airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.tsx
@@ -8,8 +8,9 @@ import { useUpdateEffect } from "react-use";
 import rehypeSlug from "rehype-slug";
 import urls from "rehype-urls";
 
-import { LoadingPage, PageTitle } from "components";
+import { LoadingPage } from "components";
 import { Markdown } from "components/ui/Markdown";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { useConfig } from "config";
 import { useDocumentation } from "hooks/services/useDocumentation";
@@ -52,7 +53,7 @@ export const DocumentationPanel: React.FC = () => {
     <LoadingPage />
   ) : (
     <div className={styles.container}>
-      <PageTitle withLine title={<FormattedMessage id="connector.setupGuide" />} />
+      <PageHeader withLine title={<FormattedMessage id="connector.setupGuide" />} />
       <Markdown
         className={styles.content}
         content={docs && !error ? docs : formatMessage({ id: "connector.setupGuide.notFound" })}
diff --git a/airbyte-webapp/src/components/PageTitle/PageTitle.tsx b/airbyte-webapp/src/components/PageTitle/PageTitle.tsx
deleted file mode 100644
index 6d2eab942915..000000000000
--- a/airbyte-webapp/src/components/PageTitle/PageTitle.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-import { H3 } from "components/base/Titles";
-
-interface PageTitleProps {
-  withLine?: boolean;
-  middleComponent?: React.ReactNode;
-  middleTitleBlock?: React.ReactNode;
-  endComponent?: React.ReactNode;
-  title: React.ReactNode;
-}
-
-export const MainContainer = styled.div<{ withLine?: boolean }>`
-  padding: 20px 32px 18px;
-  border-bottom: ${({ theme, withLine }) => (withLine ? `1px solid ${theme.greyColor20}` : "none")};
-  position: relative;
-  z-index: 2;
-  color: ${({ theme }) => theme.darkPrimaryColor};
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-export const MiddleBlock = styled.div`
-  flex: 1 0 0;
-  display: flex;
-  justify-content: center;
-`;
-
-export const MiddleTitleBlock = styled(H3)`
-  flex: 1 0 0;
-  display: flex;
-  justify-content: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-export const EndBlock = styled.div`
-  flex: 1 0 0;
-  display: flex;
-  justify-content: flex-end;
-`;
-
-export const TitleBlock = styled(H3)`
-  flex: 1 0 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const PageTitle: React.FC<PageTitleProps> = ({ title, withLine, middleComponent, middleTitleBlock, endComponent }) => (
-  <MainContainer withLine={withLine}>
-    <TitleBlock>{title}</TitleBlock>
-    {middleTitleBlock ? (
-      <MiddleTitleBlock>{middleTitleBlock}</MiddleTitleBlock>
-    ) : (
-      <MiddleBlock>{middleComponent}</MiddleBlock>
-    )}
-    <EndBlock>{endComponent}</EndBlock>
-  </MainContainer>
-);
-
-export default PageTitle;
diff --git a/airbyte-webapp/src/components/PageTitle/index.tsx b/airbyte-webapp/src/components/PageTitle/index.tsx
deleted file mode 100644
index 9557b396dbbf..000000000000
--- a/airbyte-webapp/src/components/PageTitle/index.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import PageTitle from "./PageTitle";
-
-export default PageTitle;
-export { PageTitle };
diff --git a/airbyte-webapp/src/components/index.tsx b/airbyte-webapp/src/components/index.tsx
index 0c0ec0b3b2d9..550e525f17da 100644
--- a/airbyte-webapp/src/components/index.tsx
+++ b/airbyte-webapp/src/components/index.tsx
@@ -10,7 +10,6 @@ export * from "./LabeledSwitch";
 export * from "./Link";
 export * from "./LoadingPage";
 export * from "./MainPageWithScroll";
-export * from "./PageTitle";
 export * from "./SimpleTableComponents";
 export * from "./StatusIcon";
 export * from "./ConnectorCard";
diff --git a/airbyte-webapp/src/components/PageTitle/PageTitle.module.scss b/airbyte-webapp/src/components/ui/PageHeader/PageHeader.module.scss
similarity index 90%
rename from airbyte-webapp/src/components/PageTitle/PageTitle.module.scss
rename to airbyte-webapp/src/components/ui/PageHeader/PageHeader.module.scss
index 0d1f1fba56a1..6ad22a10a7f3 100644
--- a/airbyte-webapp/src/components/PageTitle/PageTitle.module.scss
+++ b/airbyte-webapp/src/components/ui/PageHeader/PageHeader.module.scss
@@ -1,5 +1,5 @@
-@use "../../scss/colors";
-@use "../../scss/variables";
+@use "../../../scss/colors";
+@use "../../../scss/variables";
 
 .container {
   padding: variables.$spacing-xl 32px 0;
diff --git a/airbyte-webapp/src/components/ui/PageHeader/PageHeader.tsx b/airbyte-webapp/src/components/ui/PageHeader/PageHeader.tsx
new file mode 100644
index 000000000000..91acb27afb4c
--- /dev/null
+++ b/airbyte-webapp/src/components/ui/PageHeader/PageHeader.tsx
@@ -0,0 +1,48 @@
+import classNames from "classnames";
+import React from "react";
+
+import { Text } from "components/ui/Text";
+
+import styles from "./PageHeader.module.scss";
+
+interface PageHeaderProps {
+  withLine?: boolean;
+  middleComponent?: React.ReactNode;
+  middleTitleBlock?: React.ReactNode;
+  endComponent?: React.ReactNode;
+  title: React.ReactNode;
+}
+
+export const PageHeader: React.FC<PageHeaderProps> = ({
+  title,
+  withLine,
+  middleComponent,
+  middleTitleBlock,
+  endComponent,
+}) => (
+  <div className={classNames(styles.container)} data-withLine={withLine}>
+    <Text
+      as="h1"
+      size="md"
+      className={classNames(styles.start, {
+        [styles.withLine]: withLine,
+      })}
+    >
+      {title}
+    </Text>
+    {middleTitleBlock ? (
+      <Text
+        as="h3"
+        size="md"
+        className={classNames(styles.heading, {
+          [styles.middle]: middleTitleBlock,
+        })}
+      >
+        {middleTitleBlock}
+      </Text>
+    ) : (
+      <div className={classNames(styles.middle)}>{middleComponent}</div>
+    )}
+    <div className={classNames(styles.end)}>{endComponent}</div>
+  </div>
+);
diff --git a/airbyte-webapp/src/components/ui/PageHeader/index.stories.tsx b/airbyte-webapp/src/components/ui/PageHeader/index.stories.tsx
new file mode 100644
index 000000000000..dfd9bfdac3b7
--- /dev/null
+++ b/airbyte-webapp/src/components/ui/PageHeader/index.stories.tsx
@@ -0,0 +1,28 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Button } from "../Button";
+import { PageHeader } from "./PageHeader";
+
+export default {
+  title: "UI/PageHeader",
+  component: PageHeader,
+  argTypes: {},
+} as ComponentMeta<typeof PageHeader>;
+
+const Template: ComponentStory<typeof PageHeader> = (args) => <PageHeader {...args} />;
+
+const title = "Connections";
+
+const endComponent = (
+  <Button icon={<FontAwesomeIcon icon={faPlus} />} variant="primary" size="sm">
+    New Source
+  </Button>
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  title,
+  endComponent,
+};
diff --git a/airbyte-webapp/src/components/ui/PageHeader/index.tsx b/airbyte-webapp/src/components/ui/PageHeader/index.tsx
new file mode 100644
index 000000000000..78b169af8a23
--- /dev/null
+++ b/airbyte-webapp/src/components/ui/PageHeader/index.tsx
@@ -0,0 +1 @@
+export * from "./PageHeader";
diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/CreditsPage.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/CreditsPage.tsx
index 00bcf92a30d4..7d485ce749cb 100644
--- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/CreditsPage.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/CreditsPage.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { PageTitle } from "components";
 import HeadTitle from "components/HeadTitle";
 import MainPageWithScroll from "components/MainPageWithScroll";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
@@ -28,7 +28,7 @@ const CreditsPage: React.FC = () => {
   return (
     <MainPageWithScroll
       headTitle={<HeadTitle titles={[{ id: "credits.credits" }]} />}
-      pageTitle={<PageTitle title={<FormattedMessage id="credits.credits" />} />}
+      pageTitle={<PageHeader title={<FormattedMessage id="credits.credits" />} />}
     >
       <Content>
         {!emailVerified && <EmailVerificationHintWithMargin />}
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx
index 9e9cd835dca7..d444bc23f336 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx
@@ -4,9 +4,10 @@ import React, { Suspense } from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 
-import { Button, LoadingPage, MainPageWithScroll, PageTitle } from "components";
+import { Button, LoadingPage, MainPageWithScroll } from "components";
 import { EmptyResourceListView } from "components/EmptyResourceListView";
 import HeadTitle from "components/HeadTitle";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useConnectionList } from "hooks/services/useConnectionHook";
@@ -28,7 +29,7 @@ const AllConnectionsPage: React.FC = () => {
         <MainPageWithScroll
           headTitle={<HeadTitle titles={[{ id: "sidebar.connections" }]} />}
           pageTitle={
-            <PageTitle
+            <PageHeader
               title={<FormattedMessage id="sidebar.connections" />}
               endComponent={
                 <Button icon={<FontAwesomeIcon icon={faPlus} />} variant="primary" size="sm" onClick={onCreateClick}>
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx
index e067b867fa71..69224657cb98 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx
@@ -2,11 +2,12 @@ import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { useLocation, useNavigate } from "react-router-dom";
 
-import { LoadingPage, PageTitle } from "components";
+import { LoadingPage } from "components";
 import ConnectionBlock from "components/ConnectionBlock";
 import { FormPageContent } from "components/ConnectorBlocks";
 import { CreateConnection } from "components/CreateConnection/CreateConnection";
 import HeadTitle from "components/HeadTitle";
+import { PageHeader } from "components/ui/PageHeader";
 import { StepsMenu } from "components/ui/StepsMenu";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
@@ -214,7 +215,7 @@ export const CreationFormPage: React.FC = () => {
     <>
       <HeadTitle titles={[{ id: "connection.newConnectionTitle" }]} />
       <ConnectorDocumentationWrapper>
-        <PageTitle
+        <PageHeader
           title={<FormattedMessage id={titleId} />}
           middleComponent={<StepsMenu lightMode data={steps} activeStep={currentStep} />}
         />
diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/AllDestinationsPage/AllDestinationsPage.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/AllDestinationsPage/AllDestinationsPage.tsx
index d2f565a27d2c..0aa6aaac0b53 100644
--- a/airbyte-webapp/src/pages/DestinationPage/pages/AllDestinationsPage/AllDestinationsPage.tsx
+++ b/airbyte-webapp/src/pages/DestinationPage/pages/AllDestinationsPage/AllDestinationsPage.tsx
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 import { Button, MainPageWithScroll } from "components";
 import { EmptyResourceListView } from "components/EmptyResourceListView";
 import HeadTitle from "components/HeadTitle";
-import PageTitle from "components/PageTitle";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useDestinationList } from "hooks/services/useDestinationHook";
@@ -26,7 +26,7 @@ const AllDestinationsPage: React.FC = () => {
     <MainPageWithScroll
       headTitle={<HeadTitle titles={[{ id: "admin.destinations" }]} />}
       pageTitle={
-        <PageTitle
+        <PageHeader
           title={<FormattedMessage id="admin.destinations" />}
           endComponent={
             <Button
diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx
index cd1605a13768..e21148398bc8 100644
--- a/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx
+++ b/airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 
 import { FormPageContent } from "components/ConnectorBlocks";
 import HeadTitle from "components/HeadTitle";
-import PageTitle from "components/PageTitle";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { ConnectionConfiguration } from "core/domain/connection";
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
@@ -43,7 +43,7 @@ export const CreateDestinationPage: React.FC = () => {
     <>
       <HeadTitle titles={[{ id: "destinations.newDestinationTitle" }]} />
       <ConnectorDocumentationWrapper>
-        <PageTitle title={null} middleTitleBlock={<FormattedMessage id="destinations.newDestinationTitle" />} />
+        <PageHeader title={null} middleTitleBlock={<FormattedMessage id="destinations.newDestinationTitle" />} />
         <FormPageContent>
           <DestinationForm
             onSubmit={onSubmitDestinationForm}
diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx
index 9858a005f7f3..736ed8f6f9a1 100644
--- a/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx
+++ b/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx
@@ -2,13 +2,14 @@ import React, { Suspense, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { Route, Routes, useNavigate, useParams } from "react-router-dom";
 
-import { DropDownRow, LoadingPage, PageTitle } from "components";
+import { DropDownRow, LoadingPage } from "components";
 import ApiErrorBoundary from "components/ApiErrorBoundary";
 import { ItemTabs, StepsTypes, TableItemTitle } from "components/ConnectorBlocks";
 import { ConnectorIcon } from "components/ConnectorIcon";
 import HeadTitle from "components/HeadTitle";
 import Placeholder, { ResourceTypes } from "components/Placeholder";
 import { Breadcrumbs } from "components/ui/Breadcrumbs";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useConnectionList } from "hooks/services/useConnectionHook";
@@ -88,7 +89,7 @@ const DestinationItemPage: React.FC = () => {
     <ConnectorDocumentationWrapper>
       <HeadTitle titles={[{ id: "admin.destinations" }, { title: destination.name }]} />
 
-      <PageTitle
+      <PageHeader
         title={<Breadcrumbs data={breadcrumbsData} />}
         middleComponent={<ItemTabs currentStep={currentStep} setCurrentStep={onSelectStep} />}
       />
diff --git a/airbyte-webapp/src/pages/SettingsPage/SettingsPage.tsx b/airbyte-webapp/src/pages/SettingsPage/SettingsPage.tsx
index 58c8c20c42ad..eac9e576ff55 100644
--- a/airbyte-webapp/src/pages/SettingsPage/SettingsPage.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/SettingsPage.tsx
@@ -6,7 +6,7 @@ import styled from "styled-components";
 import HeadTitle from "components/HeadTitle";
 import LoadingPage from "components/LoadingPage";
 import MainPageWithScroll from "components/MainPageWithScroll";
-import PageTitle from "components/PageTitle";
+import { PageHeader } from "components/ui/PageHeader";
 import { SideMenu, CategoryItem } from "components/ui/SideMenu";
 
 import useConnector from "hooks/services/useConnector";
@@ -95,7 +95,7 @@ const SettingsPage: React.FC<SettingsPageProps> = ({ pageConfig }) => {
   return (
     <MainPageWithScroll
       headTitle={<HeadTitle titles={[{ id: "sidebar.settings" }]} />}
-      pageTitle={<PageTitle title={<FormattedMessage id="sidebar.settings" />} />}
+      pageTitle={<PageHeader title={<FormattedMessage id="sidebar.settings" />} />}
     >
       <Content>
         <SideMenu data={menuItems} onSelect={onSelectMenuItem} activeItem={pathname} />
diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx
index 9b3be9eeec72..41abb9f3acd8 100644
--- a/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx
+++ b/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 import { Button, MainPageWithScroll } from "components";
 import { EmptyResourceListView } from "components/EmptyResourceListView";
 import HeadTitle from "components/HeadTitle";
-import PageTitle from "components/PageTitle";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useSourceList } from "hooks/services/useSourceHook";
@@ -24,7 +24,7 @@ const AllSourcesPage: React.FC = () => {
     <MainPageWithScroll
       headTitle={<HeadTitle titles={[{ id: "admin.sources" }]} />}
       pageTitle={
-        <PageTitle
+        <PageHeader
           title={<FormattedMessage id="sidebar.sources" />}
           endComponent={
             <Button icon={<FontAwesomeIcon icon={faPlus} />} onClick={onCreateSource} size="sm" data-id="new-source">
diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx
index 8c9b64053bf2..3f6c6e9e7a79 100644
--- a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx
+++ b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 
 import { FormPageContent } from "components/ConnectorBlocks";
 import HeadTitle from "components/HeadTitle";
-import PageTitle from "components/PageTitle";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { ConnectionConfiguration } from "core/domain/connection";
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
@@ -44,7 +44,7 @@ const CreateSourcePage: React.FC = () => {
     <>
       <HeadTitle titles={[{ id: "sources.newSourceTitle" }]} />{" "}
       <ConnectorDocumentationWrapper>
-        <PageTitle title={null} middleTitleBlock={<FormattedMessage id="sources.newSourceTitle" />} />
+        <PageHeader title={null} middleTitleBlock={<FormattedMessage id="sources.newSourceTitle" />} />
         <FormPageContent>
           <SourceForm onSubmit={onSubmitSourceStep} sourceDefinitions={sourceDefinitions} hasSuccess={successRequest} />
         </FormPageContent>
diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx
index b8d5acea541f..d046d22c019a 100644
--- a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx
+++ b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx
@@ -8,9 +8,9 @@ import { ItemTabs, StepsTypes, TableItemTitle } from "components/ConnectorBlocks
 import { ConnectorIcon } from "components/ConnectorIcon";
 import HeadTitle from "components/HeadTitle";
 import LoadingPage from "components/LoadingPage";
-import PageTitle from "components/PageTitle";
 import Placeholder, { ResourceTypes } from "components/Placeholder";
 import { Breadcrumbs } from "components/ui/Breadcrumbs";
+import { PageHeader } from "components/ui/PageHeader";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useConnectionList } from "hooks/services/useConnectionHook";
@@ -89,7 +89,7 @@ const SourceItemPage: React.FC = () => {
   return (
     <ConnectorDocumentationWrapper>
       <HeadTitle titles={[{ id: "admin.sources" }, { title: source.name }]} />
-      <PageTitle
+      <PageHeader
         title={<Breadcrumbs data={breadcrumbsData} />}
         middleComponent={<ItemTabs currentStep={currentStep} setCurrentStep={onSelectStep} />}
       />
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap b/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
index dbab95111663..3270eeb4fa50 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
@@ -74,7 +74,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-bZnhIo idQFbm"
+                        class="sc-himrzO gCuIyJ"
                         src="data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C!--%20Generator%3A%20Adobe%20Illustrator%2025.0.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200)%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20363.6%20500%22%20enable-background%3D%22new%200%200%20363.6%20500%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cpath%20fill%3D%22%2300832D%22%20d%3D%22M238.6%2C0l125%2C125l-62.5%2C11.4L238.6%2C125l-11.4-62.5L238.6%2C0z%22%2F%3E%0A%09%3Cpath%20fill%3D%22%2300AC47%22%20d%3D%22M238.6%2C125V0H34.1C15.3%2C0%2C0%2C15.3%2C0%2C34.1v431.8C0%2C484.7%2C15.3%2C500%2C34.1%2C500h295.5c18.8%2C0%2C34.1-15.3%2C34.1-34.1%0A%09%09V125H238.6z%22%2F%3E%0A%09%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M68.2%2C193.2V358h227.3V193.2H68.2z%20M167.6%2C329.5h-71v-39.8h71V329.5z%20M167.6%2C261.4h-71v-39.8h71V261.4z%0A%09%09%20M267%2C329.5h-71v-39.8h71V329.5z%20M267%2C261.4h-71v-39.8h71V261.4z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"
                       />
                     </div>
@@ -93,7 +93,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                           class="container"
                         >
                           <div
-                            class="sc-jdAMXn jELupt"
+                            class="sc-jIZahH gqWSUB"
                           >
                             Alpha
                           </div>
@@ -125,7 +125,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-bZnhIo idQFbm"
+                        class="sc-himrzO gCuIyJ"
                         src="data:image/svg+xml;utf8,%3Csvg%20height%3D%222500%22%20width%3D%222500%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-1.633235433328256%207.0326093303156565%20131.26574682416876%20114.63439066968435%22%3E%3ClinearGradient%20id%3D%22a%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2264%22%20x2%3D%2264%22%20y1%3D%227.034%22%20y2%3D%22120.789%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%234387fd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%234683ea%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20d%3D%22M27.79%20115.217L1.54%2069.749a11.499%2011.499%200%200%201%200-11.499l26.25-45.467a11.5%2011.5%200%200%201%209.96-5.75h52.5a11.5%2011.5%200%200%201%209.959%205.75l26.25%2045.467a11.499%2011.499%200%200%201%200%2011.5l-26.25%2045.467a11.5%2011.5%200%200%201-9.959%205.749h-52.5a11.499%2011.499%200%200%201-9.96-5.75z%22%20fill%3D%22url(%23a)%22%2F%3E%3Cpath%20clip-path%3D%22url(%23b)%22%20d%3D%22M119.229%2086.48L80.625%2047.874%2064%2043.425l-14.933%205.55L43.3%2064l4.637%2016.729%2040.938%2040.938%208.687-.386z%22%20opacity%3D%22.07%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M64%2040.804c-12.81%200-23.195%2010.385-23.195%2023.196%200%2012.81%2010.385%2023.195%2023.195%2023.195S87.194%2076.81%2087.194%2064c0-12.811-10.385-23.196-23.194-23.196m0%2040.795c-9.72%200-17.6-7.88-17.6-17.6S54.28%2046.4%2064%2046.4%2081.6%2054.28%2081.6%2064%2073.72%2081.6%2064%2081.6%22%2F%3E%3Cpath%20d%3D%22M52.99%2063.104v7.21a12.794%2012.794%200%200%200%204.38%204.475V63.104zM61.675%2057.026v19.411c.745.137%201.507.22%202.29.22.714%200%201.41-.075%202.093-.189V57.026zM70.766%2066.1v8.562a12.786%2012.786%200%200%200%204.382-4.7v-3.861zM80.691%2078.287l-2.403%202.405a1.088%201.088%200%200%200%200%201.537l9.115%209.112a1.088%201.088%200%200%200%201.537%200l2.403-2.402a1.092%201.092%200%200%200%200-1.536l-9.116-9.116a1.09%201.09%200%200%200-1.536%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                       />
                     </div>
@@ -188,7 +188,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-bZnhIo idQFbm"
+                        class="sc-himrzO gCuIyJ"
                         src="data:image/svg+xml;utf8,%3Csvg%20width%3D%222215%22%20height%3D%222500%22%20viewBox%3D%220%200%20256%20289%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22xMidYMid%22%3E%3Cpath%20d%3D%22M165.258%20288.501h3.508l57.261-28.634.953-1.347V29.964l-.953-1.354L168.766%200h-3.551l.043%20288.501%22%20fill%3D%22%235294CF%22%2F%3E%3Cpath%20d%3D%22M90.741%20288.501h-3.557l-57.212-28.634-1.161-1.997-.589-226.742%201.75-2.518L87.184%200h3.601l-.044%20288.501%22%20fill%3D%22%231F5B98%22%2F%3E%3Cpath%20d%3D%22M87.285%200h81.426v288.501H87.285V0z%22%20fill%3D%22%232D72B8%22%2F%3E%3Cpath%20d%3D%22M256%20137.769l-1.935-.429-27.628-2.576-.41.204-57.312-2.292h-81.43l-57.313%202.292V91.264l-.06.032.06-.128%2057.313-13.28h81.43l57.312%2013.28%2021.069%2011.199v-7.2l8.904-.974-.922-1.798-28.192-20.159-.859.279-57.312-17.759h-81.43L29.972%2072.515V28.61L0%2063.723v30.666l.232-.168%208.672.946v7.348L0%20107.28v30.513l.232-.024%208.672.128v12.807l-7.482.112L0%20150.68v30.525l8.904%204.788v7.433l-8.531.942-.373-.28v30.661l29.972%2035.118v-43.901l57.313%2017.759h81.43l57.481-17.811.764.335%2027.821-19.862%201.219-1.979-8.904-.982v-7.284l-1.167-.466-19.043%2010.265-.69%201.44-57.481%2013.203v.016h-81.43v-.016l-57.313-13.259v-43.864l57.313%202.284v.056h81.43l57.312-2.34%201.305.6%2026.779-2.306%201.889-.923-8.904-.128v-12.807l8.904-.128%22%20fill%3D%22%231A476F%22%2F%3E%3Cpath%20d%3D%22M226.027%20215.966v43.901L256%20224.749v-30.461l-29.8%2021.626-.173.052M226.027%20197.421l.173-.04%2029.8-16.028v-30.649l-29.973%202.757v43.96M226.2%2091.208l-.173-.04v43.8L256%20137.769v-30.634l-29.8-15.927M226.2%2072.687L256%2094.193V63.731L226.027%2028.61v43.905l.173.06v.112%22%20fill%3D%22%232D72B8%22%2F%3E%3C%2Fsvg%3E"
                       />
                     </div>
@@ -230,7 +230,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-bZnhIo idQFbm"
+                        class="sc-himrzO gCuIyJ"
                         src="data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%20640%20640%22%20width%3D%22640%22%20height%3D%22640%22%3E%3Cdefs%3E%3Cpath%20d%3D%22M454.48%20258.27C421.69%20113.73%20344.25%2066.21%20335.9%2048.07C328.85%2036.65%20322.83%2024.62%20317.93%2012.13C317.72%2011.55%20317.48%2010.98%20317.21%2010.43C317.65%2022.19%20312.69%2033.5%20303.74%2041.15C284.96%2055.79%20188.75%20136.46%20180.85%20300.76C173.57%20453.48%20291.52%20545.1%20307.51%20556.78C307.69%20556.91%20309.13%20557.91%20309.31%20558.04C313.89%20547.62%20318.29%20517.71%20321.7%20476.65C322.42%20509.71%20327.18%20545.19%20343.62%20552.65C343.71%20552.59%20344.43%20552.08%20344.52%20552.02C351.58%20547.01%20358.3%20541.55%20364.64%20535.67C404.62%20498.84%20480.08%20407.66%20454.48%20258.27%22%20id%3D%22b3m9u0RT9j%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M321.43%20477.01C318.2%20517.98%20313.53%20547.8%20309.04%20557.86C309.04%20557.86%20314.07%20593.79%20318.02%20632.24C319.27%20632.24%20329.26%20632.24%20330.51%20632.24C333.44%20605.49%20337.82%20578.92%20343.62%20552.65C327.36%20545.1%20322.6%20509.71%20321.88%20476.65%22%20id%3D%22aevBvhJN5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M454.48%20258.27C421.69%20113.73%20344.25%2066.21%20335.9%2048.07C328.81%2036.67%20322.79%2024.64%20317.93%2012.13C325.66%2042.41%20324.4%20284.14%20325.21%20313.07C326.92%20367.62%20325.75%20422.22%20321.7%20476.65C322.42%20509.71%20327.18%20545.19%20343.53%20552.74C343.63%20552.67%20344.42%20552.09%20344.52%20552.02C351.58%20547.06%20358.31%20541.62%20364.64%20535.76C364.72%20535.7%20365.29%20535.2%20365.36%20535.13C404.53%20499.2%20480.08%20407.66%20454.48%20258.27%22%20id%3D%22akHagKvoh%22%3E%3C%2Fpath%3E%3C%2Fdefs%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23b3m9u0RT9j%22%20opacity%3D%221%22%20fill%3D%22%2312a950%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23b3m9u0RT9j%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23aevBvhJN5%22%20opacity%3D%221%22%20fill%3D%22%23b8c5c2%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23aevBvhJN5%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23akHagKvoh%22%20opacity%3D%221%22%20fill%3D%22%2313994f%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23akHagKvoh%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
                       />
                     </div>
@@ -272,7 +272,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                     >
                       <img
                         alt=""
-                        class="sc-bZnhIo idQFbm"
+                        class="sc-himrzO gCuIyJ"
                         src="data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%0D%0A%20%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%0D%0A%3Csvg%20width%3D%22432.071pt%22%20height%3D%22445.383pt%22%20viewBox%3D%220%200%20432.071%20445.383%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%0A%3Cg%20id%3D%22orginal%22%20style%3D%22fill-rule%3Anonzero%3Bclip-rule%3Anonzero%3Bstroke%3A%23000000%3Bstroke-miterlimit%3A4%3B%22%3E%0D%0A%09%3C%2Fg%3E%0D%0A%3Cg%20id%3D%22Layer_x0020_3%22%20style%3D%22fill-rule%3Anonzero%3Bclip-rule%3Anonzero%3Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A12.4651%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A4%3B%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23000000%3Bstroke%3A%23000000%3Bstroke-width%3A37.3953%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3B%22%20d%3D%22M323.205%2C324.227c2.833-23.601%2C1.984-27.062%2C19.563-23.239l4.463%2C0.392c13.517%2C0.615%2C31.199-2.174%2C41.587-7c22.362-10.376%2C35.622-27.7%2C13.572-23.148c-50.297%2C10.376-53.755-6.655-53.755-6.655c53.111-78.803%2C75.313-178.836%2C56.149-203.322%20%20%20%20C352.514-5.534%2C262.036%2C26.049%2C260.522%2C26.869l-0.482%2C0.089c-9.938-2.062-21.06-3.294-33.554-3.496c-22.761-0.374-40.032%2C5.967-53.133%2C15.904c0%2C0-161.408-66.498-153.899%2C83.628c1.597%2C31.936%2C45.777%2C241.655%2C98.47%2C178.31%20%20%20%20c19.259-23.163%2C37.871-42.748%2C37.871-42.748c9.242%2C6.14%2C20.307%2C9.272%2C31.912%2C8.147l0.897-0.765c-0.281%2C2.876-0.157%2C5.689%2C0.359%2C9.019c-13.572%2C15.167-9.584%2C17.83-36.723%2C23.416c-27.457%2C5.659-11.326%2C15.734-0.797%2C18.367c12.768%2C3.193%2C42.305%2C7.716%2C62.268-20.224%20%20%20%20l-0.795%2C3.188c5.325%2C4.26%2C4.965%2C30.619%2C5.72%2C49.452c0.756%2C18.834%2C2.017%2C36.409%2C5.856%2C46.771c3.839%2C10.36%2C8.369%2C37.05%2C44.036%2C29.406c29.809-6.388%2C52.6-15.582%2C54.677-101.107%22%2F%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23336791%3Bstroke%3Anone%3B%22%20d%3D%22M402.395%2C271.23c-50.302%2C10.376-53.76-6.655-53.76-6.655c53.111-78.808%2C75.313-178.843%2C56.153-203.326c-52.27-66.785-142.752-35.2-144.262-34.38l-0.486%2C0.087c-9.938-2.063-21.06-3.292-33.56-3.496c-22.761-0.373-40.026%2C5.967-53.127%2C15.902%20%20%20%20c0%2C0-161.411-66.495-153.904%2C83.63c1.597%2C31.938%2C45.776%2C241.657%2C98.471%2C178.312c19.26-23.163%2C37.869-42.748%2C37.869-42.748c9.243%2C6.14%2C20.308%2C9.272%2C31.908%2C8.147l0.901-0.765c-0.28%2C2.876-0.152%2C5.689%2C0.361%2C9.019c-13.575%2C15.167-9.586%2C17.83-36.723%2C23.416%20%20%20%20c-27.459%2C5.659-11.328%2C15.734-0.796%2C18.367c12.768%2C3.193%2C42.307%2C7.716%2C62.266-20.224l-0.796%2C3.188c5.319%2C4.26%2C9.054%2C27.711%2C8.428%2C48.969c-0.626%2C21.259-1.044%2C35.854%2C3.147%2C47.254c4.191%2C11.4%2C8.368%2C37.05%2C44.042%2C29.406c29.809-6.388%2C45.256-22.942%2C47.405-50.555%20%20%20%20c1.525-19.631%2C4.976-16.729%2C5.194-34.28l2.768-8.309c3.192-26.611%2C0.507-35.196%2C18.872-31.203l4.463%2C0.392c13.517%2C0.615%2C31.208-2.174%2C41.591-7c22.358-10.376%2C35.618-27.7%2C13.573-23.148z%22%2F%3E%0D%0A%3Cpath%20d%3D%22M215.866%2C286.484c-1.385%2C49.516%2C0.348%2C99.377%2C5.193%2C111.495c4.848%2C12.118%2C15.223%2C35.688%2C50.9%2C28.045c29.806-6.39%2C40.651-18.756%2C45.357-46.051c3.466-20.082%2C10.148-75.854%2C11.005-87.281%22%2F%3E%0D%0A%3Cpath%20d%3D%22M173.104%2C38.256c0%2C0-161.521-66.016-154.012%2C84.109c1.597%2C31.938%2C45.779%2C241.664%2C98.473%2C178.316c19.256-23.166%2C36.671-41.335%2C36.671-41.335%22%2F%3E%0D%0A%3Cpath%20d%3D%22M260.349%2C26.207c-5.591%2C1.753%2C89.848-34.889%2C144.087%2C34.417c19.159%2C24.484-3.043%2C124.519-56.153%2C203.329%22%2F%3E%0D%0A%3Cpath%20style%3D%22stroke-linejoin%3Abevel%3B%22%20d%3D%22M348.282%2C263.953c0%2C0%2C3.461%2C17.036%2C53.764%2C6.653c22.04-4.552%2C8.776%2C12.774-13.577%2C23.155c-18.345%2C8.514-59.474%2C10.696-60.146-1.069c-1.729-30.355%2C21.647-21.133%2C19.96-28.739c-1.525-6.85-11.979-13.573-18.894-30.338%20%20%20%20c-6.037-14.633-82.796-126.849%2C21.287-110.183c3.813-0.789-27.146-99.002-124.553-100.599c-97.385-1.597-94.19%2C119.762-94.19%2C119.762%22%2F%3E%0D%0A%3Cpath%20d%3D%22M188.604%2C274.334c-13.577%2C15.166-9.584%2C17.829-36.723%2C23.417c-27.459%2C5.66-11.326%2C15.733-0.797%2C18.365c12.768%2C3.195%2C42.307%2C7.718%2C62.266-20.229c6.078-8.509-0.036-22.086-8.385-25.547c-4.034-1.671-9.428-3.765-16.361%2C3.994z%22%2F%3E%0D%0A%3Cpath%20d%3D%22M187.715%2C274.069c-1.368-8.917%2C2.93-19.528%2C7.536-31.942c6.922-18.626%2C22.893-37.255%2C10.117-96.339c-9.523-44.029-73.396-9.163-73.436-3.193c-0.039%2C5.968%2C2.889%2C30.26-1.067%2C58.548c-5.162%2C36.913%2C23.488%2C68.132%2C56.479%2C64.938%22%2F%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23FFFFFF%3Bstroke-width%3A4.155%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3B%22%20d%3D%22M172.517%2C141.7c-0.288%2C2.039%2C3.733%2C7.48%2C8.976%2C8.207c5.234%2C0.73%2C9.714-3.522%2C9.998-5.559c0.284-2.039-3.732-4.285-8.977-5.015c-5.237-0.731-9.719%2C0.333-9.996%2C2.367z%22%2F%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23FFFFFF%3Bstroke-width%3A2.0775%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3B%22%20d%3D%22M331.941%2C137.543c0.284%2C2.039-3.732%2C7.48-8.976%2C8.207c-5.238%2C0.73-9.718-3.522-10.005-5.559c-0.277-2.039%2C3.74-4.285%2C8.979-5.015c5.239-0.73%2C9.718%2C0.333%2C10.002%2C2.368z%22%2F%3E%0D%0A%3Cpath%20d%3D%22M350.676%2C123.432c0.863%2C15.994-3.445%2C26.888-3.988%2C43.914c-0.804%2C24.748%2C11.799%2C53.074-7.191%2C81.435%22%2F%3E%0D%0A%3Cpath%20style%3D%22stroke-width%3A3%3B%22%20d%3D%22M0%2C60.232%22%2F%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E"
                       />
                     </div>
@@ -291,7 +291,7 @@ exports[`<FrequentlyUsedDestinations /> should renders with mock data without cr
                           class="container"
                         >
                           <div
-                            class="sc-jdAMXn jELupt"
+                            class="sc-jIZahH gqWSUB"
                           >
                             Alpha
                           </div>
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap b/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap
index cc148aa5d9b9..e4704e8a81c5 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`<StartWithDestinations /> should renders without crash with provided pr
             >
               <img
                 alt=""
-                class="sc-bZnhIo idQFbm"
+                class="sc-himrzO gCuIyJ"
                 src="data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%20640%20640%22%20width%3D%22640%22%20height%3D%22640%22%3E%3Cdefs%3E%3Cpath%20d%3D%22M454.48%20258.27C421.69%20113.73%20344.25%2066.21%20335.9%2048.07C328.85%2036.65%20322.83%2024.62%20317.93%2012.13C317.72%2011.55%20317.48%2010.98%20317.21%2010.43C317.65%2022.19%20312.69%2033.5%20303.74%2041.15C284.96%2055.79%20188.75%20136.46%20180.85%20300.76C173.57%20453.48%20291.52%20545.1%20307.51%20556.78C307.69%20556.91%20309.13%20557.91%20309.31%20558.04C313.89%20547.62%20318.29%20517.71%20321.7%20476.65C322.42%20509.71%20327.18%20545.19%20343.62%20552.65C343.71%20552.59%20344.43%20552.08%20344.52%20552.02C351.58%20547.01%20358.3%20541.55%20364.64%20535.67C404.62%20498.84%20480.08%20407.66%20454.48%20258.27%22%20id%3D%22b3m9u0RT9j%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M321.43%20477.01C318.2%20517.98%20313.53%20547.8%20309.04%20557.86C309.04%20557.86%20314.07%20593.79%20318.02%20632.24C319.27%20632.24%20329.26%20632.24%20330.51%20632.24C333.44%20605.49%20337.82%20578.92%20343.62%20552.65C327.36%20545.1%20322.6%20509.71%20321.88%20476.65%22%20id%3D%22aevBvhJN5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M454.48%20258.27C421.69%20113.73%20344.25%2066.21%20335.9%2048.07C328.81%2036.67%20322.79%2024.64%20317.93%2012.13C325.66%2042.41%20324.4%20284.14%20325.21%20313.07C326.92%20367.62%20325.75%20422.22%20321.7%20476.65C322.42%20509.71%20327.18%20545.19%20343.53%20552.74C343.63%20552.67%20344.42%20552.09%20344.52%20552.02C351.58%20547.06%20358.31%20541.62%20364.64%20535.76C364.72%20535.7%20365.29%20535.2%20365.36%20535.13C404.53%20499.2%20480.08%20407.66%20454.48%20258.27%22%20id%3D%22akHagKvoh%22%3E%3C%2Fpath%3E%3C%2Fdefs%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23b3m9u0RT9j%22%20opacity%3D%221%22%20fill%3D%22%2312a950%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23b3m9u0RT9j%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23aevBvhJN5%22%20opacity%3D%221%22%20fill%3D%22%23b8c5c2%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23aevBvhJN5%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23akHagKvoh%22%20opacity%3D%221%22%20fill%3D%22%2313994f%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23akHagKvoh%22%20opacity%3D%221%22%20fill-opacity%3D%220%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
               />
             </div>
@@ -41,7 +41,7 @@ exports[`<StartWithDestinations /> should renders without crash with provided pr
                   class="container"
                 >
                   <div
-                    class="sc-jdAMXn jELupt"
+                    class="sc-jIZahH gqWSUB"
                   >
                     Alpha
                   </div>