+);
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;
+
+const Template: ComponentStory = (args) => ;
+
+const title = "Connections";
+
+const endComponent = (
+ } variant="primary" size="sm">
+ New Source
+
+);
+
+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 (
}
- pageTitle={} />}
+ pageTitle={} />}
>
{!emailVerified && }
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 = () => {
}
pageTitle={
- }
endComponent={
} 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 = () => {
<>
- }
middleComponent={}
/>
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 = () => {
}
pageTitle={
- }
endComponent={
@@ -93,7 +93,7 @@ exports[` should renders with mock data without cr
class="container"
>
Alpha
@@ -125,7 +125,7 @@ exports[` should renders with mock data without cr
>
@@ -188,7 +188,7 @@ exports[` should renders with mock data without cr
>
@@ -230,7 +230,7 @@ exports[` should renders with mock data without cr
>
@@ -272,7 +272,7 @@ exports[` should renders with mock data without cr
>
@@ -291,7 +291,7 @@ exports[` should renders with mock data without cr
class="container"
>
Alpha
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[` should renders without crash with provided pr
>
@@ -41,7 +41,7 @@ exports[` should renders without crash with provided pr
class="container"
>