From 45c2f20dd431385ef03ec39edf38e61fe61ffd86 Mon Sep 17 00:00:00 2001
From: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com>
Date: Thu, 12 Jan 2023 10:00:00 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20=F0=9F=A7=B9=20Reorganize=20conn?=
 =?UTF-8?q?ections=20pages=20(#20845)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Reorganize connection pages
Flatten structure
Simplify names

* Consolidate all the Connection routes to a single file

* Extract job types and utilities to own files within JobItem
Move JobsWithJobs to JobItem/utils

* Move ConnectionName component to components/connection

* Move StatusMainInfo components and rename to components/connection/ConnectionInfoCard

* Move ConnectionBlock to components/connection

* Clean up ConnectionPage structure

* Update style import in ConnectionInfoCard test

* Clean up ConnectionRoutePaths enum

* Apply suggestions from code review - Update export default style

Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>

* Update ConnectionInfoCard test description name

* Update test snapshots

Co-authored-by: Krishna (kc) Glick <krishna@airbyte.io>
---
 .../src/components/ConnectionBlock/index.tsx  |   3 -
 .../CreateConnectionForm.test.tsx.snap        |  13 ++-
 .../components/ConnectionSettingsCell.tsx     |   7 +-
 .../src/components/JobItem/JobItem.tsx        |  21 ++---
 .../components/JobItem/components/JobLogs.tsx |   2 +-
 .../JobItem/components/MainInfo.tsx           |   4 +-
 .../src/components/JobItem/index.ts           |   1 +
 .../src/components/JobItem/types.ts           |   5 ++
 .../src/components/JobItem/utils.ts           |  22 ++++-
 .../ConnectionBlock.module.scss               |   2 +-
 .../ConnectionBlock/ConnectionBlock.tsx       |   4 +-
 .../ConnectionBlock/ConnectionBlockItem.tsx   |   0
 .../connection/ConnectionBlock/index.ts       |   1 +
 .../ConnectionInfoCard.module.scss}           |   0
 .../ConnectionInfoCard.test.tsx}              |  32 +++----
 .../ConnectionInfoCard.tsx}                   |  10 +--
 .../EnabledControl.module.scss                |   0
 .../ConnectionInfoCard}/EnabledControl.tsx    |   0
 .../SchemaChangesDetected.module.scss         |   0
 .../SchemaChangesDetected.test.tsx            |   0
 .../SchemaChangesDetected.tsx                 |   6 +-
 .../connection/ConnectionInfoCard/index.ts    |   1 +
 .../ConnectionName.module.scss                |   4 +-
 .../ConnectionName}/ConnectionName.tsx        |   0
 .../connection/ConnectionName/index.ts        |   1 +
 .../connection/JobProgress/JobProgress.tsx    |   4 +-
 .../src/packages/cloud/cloudRoutes.tsx        |   8 +-
 .../pages/ConnectionPage/ConnectionPage.tsx   |  30 -------
 .../pages/AllConnectionsPage/index.tsx        |   3 -
 .../ConnectionItemPage/ConnectionItemPage.tsx |  74 ----------------
 .../ConnectionSettingsRoutes.tsx              |   6 --
 .../pages/CreationFormPage/index.tsx          |   3 -
 .../src/pages/SourcesPage/SourcesPage.tsx     |   4 +-
 .../AllConnectionsPage.module.scss            |   0
 .../AllConnectionsPage/AllConnectionsPage.tsx |   8 +-
 .../AllConnectionsPage}/ConnectionsTable.tsx  |   0
 .../connections/AllConnectionsPage/index.ts   |   3 +
 .../ConnectionPage/ConnectionPage.tsx         |  54 ++++++++++++
 .../ConnectionPageTitle.module.scss           |   0
 .../ConnectionPage}/ConnectionPageTitle.tsx   |  22 ++---
 .../ConnectionPage/index.ts}                  |   0
 .../ConnectionReplicationPage.module.scss}    |   0
 .../ConnectionReplicationPage.test.tsx}       |   8 +-
 .../ConnectionReplicationPage.tsx}            |   4 +-
 .../ResetWarningModal.tsx                     |   0
 .../ConnectionReplicationPage.test.tsx.snap}  |  15 ++--
 .../ConnectionReplicationPage/index.ts        |   1 +
 .../ConnectionSettingsPage.module.scss}       |   0
 .../ConnectionSettingsPage.test.tsx}          |   8 +-
 .../ConnectionSettingsPage.tsx}               |  13 ++-
 .../SchemaUpdateNotifications.module.scss     |   0
 .../SchemaUpdateNotifications.tsx             |   0
 .../ConnectionSettingsPage}/StateBlock.tsx    |   0
 .../ConnectionSettingsPage/index.ts           |   1 +
 .../ConnectionStatusPage.module.scss}         |   0
 .../ConnectionStatusPage.tsx}                 |   4 +-
 .../ConnectionStatusPage}/JobsList.tsx        |   5 +-
 .../connections/ConnectionStatusPage/index.ts |   1 +
 .../ConnectionTransformationPage.module.scss} |   0
 .../ConnectionTransformationPage.tsx}         |  80 ++----------------
 .../CustomTransformationsCard.tsx             |  50 +++++++++++
 .../DbtCloudTransformationsCard.module.scss   |   0
 .../DbtCloudTransformationsCard.tsx           |   0
 .../NormalizationCard.tsx                     |  37 ++++++++
 .../dbt-bit_tm.svg                            |   0
 .../ConnectionTransformationPage/index.ts     |   1 +
 .../octavia-worker.png                        | Bin
 .../pages/connections/ConnectionsRoutes.tsx   |  33 ++++++++
 .../ConnectionCreateDestinationForm.tsx       |   0
 .../ConnectionCreateSourceForm.tsx            |   0
 .../CreateConnectionPage.tsx}                 |   6 +-
 .../ExistingEntityForm.module.scss            |   0
 .../ExistingEntityForm.tsx                    |   0
 .../connections/CreateConnectionPage/index.ts |   1 +
 airbyte-webapp/src/pages/connections/types.ts |   7 ++
 airbyte-webapp/src/pages/routes.tsx           |   8 +-
 76 files changed, 336 insertions(+), 305 deletions(-)
 delete mode 100644 airbyte-webapp/src/components/ConnectionBlock/index.tsx
 create mode 100644 airbyte-webapp/src/components/JobItem/index.ts
 create mode 100644 airbyte-webapp/src/components/JobItem/types.ts
 rename airbyte-webapp/src/components/{ => connection}/ConnectionBlock/ConnectionBlock.module.scss (91%)
 rename airbyte-webapp/src/components/{ => connection}/ConnectionBlock/ConnectionBlock.tsx (90%)
 rename airbyte-webapp/src/components/{ => connection}/ConnectionBlock/ConnectionBlockItem.tsx (100%)
 create mode 100644 airbyte-webapp/src/components/connection/ConnectionBlock/index.ts
 rename airbyte-webapp/src/{pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.module.scss => components/connection/ConnectionInfoCard/ConnectionInfoCard.module.scss} (100%)
 rename airbyte-webapp/src/{pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.test.tsx => components/connection/ConnectionInfoCard/ConnectionInfoCard.test.tsx} (72%)
 rename airbyte-webapp/src/{pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.tsx => components/connection/ConnectionInfoCard/ConnectionInfoCard.tsx} (91%)
 rename airbyte-webapp/src/{pages/ConnectionPage/pages/ConnectionItemPage => components/connection/ConnectionInfoCard}/EnabledControl.module.scss (100%)
 rename airbyte-webapp/src/{pages/ConnectionPage/pages/ConnectionItemPage => components/connection/ConnectionInfoCard}/EnabledControl.tsx (100%)
 rename airbyte-webapp/src/{pages/ConnectionPage/pages/ConnectionItemPage => components/connection/ConnectionInfoCard}/SchemaChangesDetected.module.scss (100%)
 rename airbyte-webapp/src/{pages/ConnectionPage/pages/ConnectionItemPage => components/connection/ConnectionInfoCard}/SchemaChangesDetected.test.tsx (100%)
 rename airbyte-webapp/src/{pages/ConnectionPage/pages/ConnectionItemPage => components/connection/ConnectionInfoCard}/SchemaChangesDetected.tsx (90%)
 create mode 100644 airbyte-webapp/src/components/connection/ConnectionInfoCard/index.ts
 rename airbyte-webapp/src/{pages/ConnectionPage/pages/ConnectionItemPage => components/connection/ConnectionName}/ConnectionName.module.scss (95%)
 rename airbyte-webapp/src/{pages/ConnectionPage/pages/ConnectionItemPage => components/connection/ConnectionName}/ConnectionName.tsx (100%)
 create mode 100644 airbyte-webapp/src/components/connection/ConnectionName/index.ts
 delete mode 100644 airbyte-webapp/src/pages/ConnectionPage/ConnectionPage.tsx
 delete mode 100644 airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/index.tsx
 delete mode 100644 airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionItemPage.tsx
 delete mode 100644 airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsRoutes.tsx
 delete mode 100644 airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/index.tsx
 rename airbyte-webapp/src/pages/{ConnectionPage/pages => connections}/AllConnectionsPage/AllConnectionsPage.module.scss (100%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages => connections}/AllConnectionsPage/AllConnectionsPage.tsx (90%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/AllConnectionsPage/components => connections/AllConnectionsPage}/ConnectionsTable.tsx (100%)
 create mode 100644 airbyte-webapp/src/pages/connections/AllConnectionsPage/index.ts
 create mode 100644 airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPage.tsx
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage => connections/ConnectionPage}/ConnectionPageTitle.module.scss (100%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage => connections/ConnectionPage}/ConnectionPageTitle.tsx (76%)
 rename airbyte-webapp/src/pages/{ConnectionPage/index.tsx => connections/ConnectionPage/index.ts} (100%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.module.scss => connections/ConnectionReplicationPage/ConnectionReplicationPage.module.scss} (100%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.test.tsx => connections/ConnectionReplicationPage/ConnectionReplicationPage.test.tsx} (96%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.tsx => connections/ConnectionReplicationPage/ConnectionReplicationPage.tsx} (98%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage => connections/ConnectionReplicationPage}/ResetWarningModal.tsx (100%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap => connections/ConnectionReplicationPage/__snapshots__/ConnectionReplicationPage.test.tsx.snap} (98%)
 create mode 100644 airbyte-webapp/src/pages/connections/ConnectionReplicationPage/index.ts
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsTab.module.scss => connections/ConnectionSettingsPage/ConnectionSettingsPage.module.scss} (100%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsTab.test.tsx => connections/ConnectionSettingsPage/ConnectionSettingsPage.test.tsx} (85%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsTab.tsx => connections/ConnectionSettingsPage/ConnectionSettingsPage.tsx} (74%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage => connections/ConnectionSettingsPage}/SchemaUpdateNotifications.module.scss (100%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage => connections/ConnectionSettingsPage}/SchemaUpdateNotifications.tsx (100%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage => connections/ConnectionSettingsPage}/StateBlock.tsx (100%)
 create mode 100644 airbyte-webapp/src/pages/connections/ConnectionSettingsPage/index.ts
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.module.scss => connections/ConnectionStatusPage/ConnectionStatusPage.module.scss} (100%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.tsx => connections/ConnectionStatusPage/ConnectionStatusPage.tsx} (98%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage => connections/ConnectionStatusPage}/JobsList.tsx (78%)
 create mode 100644 airbyte-webapp/src/pages/connections/ConnectionStatusPage/index.ts
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab.module.scss => connections/ConnectionTransformationPage/ConnectionTransformationPage.module.scss} (100%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab.tsx => connections/ConnectionTransformationPage/ConnectionTransformationPage.tsx} (60%)
 create mode 100644 airbyte-webapp/src/pages/connections/ConnectionTransformationPage/CustomTransformationsCard.tsx
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab => connections/ConnectionTransformationPage}/DbtCloudTransformationsCard.module.scss (100%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab => connections/ConnectionTransformationPage}/DbtCloudTransformationsCard.tsx (100%)
 create mode 100644 airbyte-webapp/src/pages/connections/ConnectionTransformationPage/NormalizationCard.tsx
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab => connections/ConnectionTransformationPage}/dbt-bit_tm.svg (100%)
 create mode 100644 airbyte-webapp/src/pages/connections/ConnectionTransformationPage/index.ts
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab => connections/ConnectionTransformationPage}/octavia-worker.png (100%)
 create mode 100644 airbyte-webapp/src/pages/connections/ConnectionsRoutes.tsx
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/CreationFormPage => connections/CreateConnectionPage}/ConnectionCreateDestinationForm.tsx (100%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/CreationFormPage => connections/CreateConnectionPage}/ConnectionCreateSourceForm.tsx (100%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx => connections/CreateConnectionPage/CreateConnectionPage.tsx} (98%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/CreationFormPage => connections/CreateConnectionPage}/ExistingEntityForm.module.scss (100%)
 rename airbyte-webapp/src/pages/{ConnectionPage/pages/CreationFormPage => connections/CreateConnectionPage}/ExistingEntityForm.tsx (100%)
 create mode 100644 airbyte-webapp/src/pages/connections/CreateConnectionPage/index.ts
 create mode 100644 airbyte-webapp/src/pages/connections/types.ts

diff --git a/airbyte-webapp/src/components/ConnectionBlock/index.tsx b/airbyte-webapp/src/components/ConnectionBlock/index.tsx
deleted file mode 100644
index bcff58df95d7..000000000000
--- a/airbyte-webapp/src/components/ConnectionBlock/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import ConnectionBlock from "./ConnectionBlock";
-
-export default ConnectionBlock;
diff --git a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
index 8d474ad58224..e2cc8aef5734 100644
--- a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
+++ b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`CreateConnectionForm should render 1`] = `
                   <label
                     class="<removed-for-snapshot-test>"
                   >
-                    Connection name*
+                    Connection name
                     <span
                       class="<removed-for-snapshot-test>"
                     >
@@ -104,7 +104,7 @@ exports[`CreateConnectionForm should render 1`] = `
                     <label
                       class="<removed-for-snapshot-test>"
                     >
-                      Replication frequency*
+                      Replication frequency
                       <span
                         class="<removed-for-snapshot-test>"
                       >
@@ -243,7 +243,7 @@ exports[`CreateConnectionForm should render 1`] = `
                       <label
                         class="<removed-for-snapshot-test>"
                       >
-                        Destination Namespace*
+                        Destination Namespace
                         <span
                           class="<removed-for-snapshot-test>"
                         >
@@ -366,7 +366,7 @@ exports[`CreateConnectionForm should render 1`] = `
                     <label
                       class="<removed-for-snapshot-test>"
                     >
-                      Destination Stream Prefix (Optional)
+                      Destination Stream Prefix
                       <span
                         class="<removed-for-snapshot-test>"
                       >
@@ -390,6 +390,11 @@ exports[`CreateConnectionForm should render 1`] = `
                           </span>
                         </span>
                       </span>
+                      <p
+                        class="<removed-for-snapshot-test>"
+                      >
+                        Optional
+                      </p>
                     </label>
                   </div>
                 </div>
diff --git a/airbyte-webapp/src/components/EntityTable/components/ConnectionSettingsCell.tsx b/airbyte-webapp/src/components/EntityTable/components/ConnectionSettingsCell.tsx
index 922df7372306..d70099f8e8ce 100644
--- a/airbyte-webapp/src/components/EntityTable/components/ConnectionSettingsCell.tsx
+++ b/airbyte-webapp/src/components/EntityTable/components/ConnectionSettingsCell.tsx
@@ -6,9 +6,8 @@ import styled from "styled-components";
 import { Link } from "components";
 
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
-import { ConnectionSettingsRoutes } from "pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsRoutes";
-
-import { RoutePaths } from "../../../pages/routePaths";
+import { ConnectionRoutePaths } from "pages/connections/types";
+import { RoutePaths } from "pages/routePaths";
 
 interface IProps {
   id: string;
@@ -39,7 +38,7 @@ const ConnectorCell: React.FC<IProps> = ({ id }) => {
     event.stopPropagation();
   };
 
-  const settingPath = `/${RoutePaths.Workspaces}/${workspaceId}/${RoutePaths.Connections}/${id}/${ConnectionSettingsRoutes.REPLICATION}`;
+  const settingPath = `/${RoutePaths.Workspaces}/${workspaceId}/${RoutePaths.Connections}/${id}/${ConnectionRoutePaths.Replication}`;
   return (
     <Content onClick={openSettings}>
       <Link to={settingPath}>
diff --git a/airbyte-webapp/src/components/JobItem/JobItem.tsx b/airbyte-webapp/src/components/JobItem/JobItem.tsx
index 9c67d2537de9..43dc8c3772e1 100644
--- a/airbyte-webapp/src/components/JobItem/JobItem.tsx
+++ b/airbyte-webapp/src/components/JobItem/JobItem.tsx
@@ -3,15 +3,16 @@ import styled from "styled-components";
 
 import { Spinner } from "components/ui/Spinner";
 
-import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/JobsList";
+import { SynchronousJobRead } from "core/request/AirbyteClient";
 
-import { AttemptRead, JobStatus, SynchronousJobRead } from "../../core/request/AirbyteClient";
 import { useAttemptLink } from "./attemptLinkUtils";
 import ContentWrapper from "./components/ContentWrapper";
 import ErrorDetails from "./components/ErrorDetails";
 import { JobLogs } from "./components/JobLogs";
 import MainInfo from "./components/MainInfo";
 import styles from "./JobItem.module.scss";
+import { JobsWithJobs } from "./types";
+import { didJobSucceed, getJobAttempts, getJobId } from "./utils";
 
 const Item = styled.div<{ isFailed: boolean }>`
   border-bottom: 1px solid ${({ theme }) => theme.greyColor20};
@@ -27,18 +28,6 @@ interface JobItemProps {
   job: SynchronousJobRead | JobsWithJobs;
 }
 
-const didJobSucceed = (job: SynchronousJobRead | JobsWithJobs): boolean =>
-  "succeeded" in job ? job.succeeded : getJobStatus(job) !== "failed";
-
-export const getJobStatus: (job: SynchronousJobRead | JobsWithJobs) => JobStatus = (job) =>
-  "succeeded" in job ? (job.succeeded ? JobStatus.succeeded : JobStatus.failed) : job.job.status;
-
-export const getJobAttemps: (job: SynchronousJobRead | JobsWithJobs) => AttemptRead[] | undefined = (job) =>
-  "attempts" in job ? job.attempts : undefined;
-
-export const getJobId = (job: SynchronousJobRead | JobsWithJobs): string | number =>
-  "id" in job ? job.id : job.job.id;
-
 export const JobItem: React.FC<JobItemProps> = ({ job }) => {
   const { jobId: linkedJobId } = useAttemptLink();
   const alreadyScrolled = useRef(false);
@@ -63,7 +52,7 @@ export const JobItem: React.FC<JobItemProps> = ({ job }) => {
 
   return (
     <Item isFailed={!didSucceed} ref={scrollAnchor}>
-      <MainInfo isOpen={isOpen} isFailed={!didSucceed} onExpand={onExpand} job={job} attempts={getJobAttemps(job)} />
+      <MainInfo isOpen={isOpen} isFailed={!didSucceed} onExpand={onExpand} job={job} attempts={getJobAttempts(job)} />
       <ContentWrapper isOpen={isOpen} onToggled={onDetailsToggled}>
         <div>
           <Suspense
@@ -75,7 +64,7 @@ export const JobItem: React.FC<JobItemProps> = ({ job }) => {
           >
             {isOpen && (
               <>
-                <ErrorDetails attempts={getJobAttemps(job)} />
+                <ErrorDetails attempts={getJobAttempts(job)} />
                 <JobLogs job={job} jobIsFailed={!didSucceed} />
               </>
             )}
diff --git a/airbyte-webapp/src/components/JobItem/components/JobLogs.tsx b/airbyte-webapp/src/components/JobItem/components/JobLogs.tsx
index 06836a6fbb5d..1de32354a2ed 100644
--- a/airbyte-webapp/src/components/JobItem/components/JobLogs.tsx
+++ b/airbyte-webapp/src/components/JobItem/components/JobLogs.tsx
@@ -8,10 +8,10 @@ import { StatusIconStatus } from "components/ui/StatusIcon/StatusIcon";
 import { Text } from "components/ui/Text";
 
 import { AttemptRead, AttemptStatus, SynchronousJobRead } from "core/request/AirbyteClient";
-import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/JobsList";
 import { useGetDebugInfoJob } from "services/job/JobService";
 
 import { parseAttemptLink } from "../attemptLinkUtils";
+import { JobsWithJobs } from "../types";
 import { isCancelledAttempt } from "../utils";
 import styles from "./JobLogs.module.scss";
 import Logs from "./Logs";
diff --git a/airbyte-webapp/src/components/JobItem/components/MainInfo.tsx b/airbyte-webapp/src/components/JobItem/components/MainInfo.tsx
index 44030c37101c..ad4811eed912 100644
--- a/airbyte-webapp/src/components/JobItem/components/MainInfo.tsx
+++ b/airbyte-webapp/src/components/JobItem/components/MainInfo.tsx
@@ -9,9 +9,9 @@ import { Cell, Row } from "components/SimpleTableComponents";
 import { StatusIcon } from "components/ui/StatusIcon";
 
 import { AttemptRead, JobStatus, SynchronousJobRead } from "core/request/AirbyteClient";
-import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/JobsList";
 
-import { getJobStatus } from "../JobItem";
+import { JobsWithJobs } from "../types";
+import { getJobStatus } from "../utils";
 import { AttemptDetails } from "./AttemptDetails";
 import styles from "./MainInfo.module.scss";
 import { ResetStreamsDetails } from "./ResetStreamDetails";
diff --git a/airbyte-webapp/src/components/JobItem/index.ts b/airbyte-webapp/src/components/JobItem/index.ts
new file mode 100644
index 000000000000..79acb143ceba
--- /dev/null
+++ b/airbyte-webapp/src/components/JobItem/index.ts
@@ -0,0 +1 @@
+export * from "./JobItem";
diff --git a/airbyte-webapp/src/components/JobItem/types.ts b/airbyte-webapp/src/components/JobItem/types.ts
new file mode 100644
index 000000000000..68e8ed45217f
--- /dev/null
+++ b/airbyte-webapp/src/components/JobItem/types.ts
@@ -0,0 +1,5 @@
+import { JobWithAttemptsRead } from "core/request/AirbyteClient";
+
+export interface JobsWithJobs extends JobWithAttemptsRead {
+  job: Exclude<JobWithAttemptsRead["job"], undefined>;
+}
diff --git a/airbyte-webapp/src/components/JobItem/utils.ts b/airbyte-webapp/src/components/JobItem/utils.ts
index 8411959d4fc4..d06ca80524d3 100644
--- a/airbyte-webapp/src/components/JobItem/utils.ts
+++ b/airbyte-webapp/src/components/JobItem/utils.ts
@@ -1,4 +1,12 @@
-import { AttemptFailureReason, AttemptFailureType, AttemptRead } from "core/request/AirbyteClient";
+import {
+  AttemptFailureReason,
+  AttemptFailureType,
+  AttemptRead,
+  JobStatus,
+  SynchronousJobRead,
+} from "core/request/AirbyteClient";
+
+import { JobsWithJobs } from "./types";
 
 export const getFailureFromAttempt = (attempt: AttemptRead): AttemptFailureReason | undefined =>
   attempt.failureSummary?.failures[0];
@@ -6,3 +14,15 @@ export const getFailureFromAttempt = (attempt: AttemptRead): AttemptFailureReaso
 export const isCancelledAttempt = (attempt: AttemptRead): boolean =>
   attempt.failureSummary?.failures.some(({ failureType }) => failureType === AttemptFailureType.manual_cancellation) ??
   false;
+
+export const didJobSucceed = (job: SynchronousJobRead | JobsWithJobs): boolean =>
+  "succeeded" in job ? job.succeeded : getJobStatus(job) !== "failed";
+
+export const getJobStatus: (job: SynchronousJobRead | JobsWithJobs) => JobStatus = (job) =>
+  "succeeded" in job ? (job.succeeded ? JobStatus.succeeded : JobStatus.failed) : job.job.status;
+
+export const getJobAttempts: (job: SynchronousJobRead | JobsWithJobs) => AttemptRead[] | undefined = (job) =>
+  "attempts" in job ? job.attempts : undefined;
+
+export const getJobId = (job: SynchronousJobRead | JobsWithJobs): string | number =>
+  "id" in job ? job.id : job.job.id;
diff --git a/airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.module.scss b/airbyte-webapp/src/components/connection/ConnectionBlock/ConnectionBlock.module.scss
similarity index 91%
rename from airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.module.scss
rename to airbyte-webapp/src/components/connection/ConnectionBlock/ConnectionBlock.module.scss
index 025c0f0bbf79..b09547fbd935 100644
--- a/airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.module.scss
+++ b/airbyte-webapp/src/components/connection/ConnectionBlock/ConnectionBlock.module.scss
@@ -1,4 +1,4 @@
-@use "../../scss/colors";
+@use "scss/colors";
 
 .lightContentCard {
   display: flex;
diff --git a/airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.tsx b/airbyte-webapp/src/components/connection/ConnectionBlock/ConnectionBlock.tsx
similarity index 90%
rename from airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.tsx
rename to airbyte-webapp/src/components/connection/ConnectionBlock/ConnectionBlock.tsx
index 899945593547..9b26590637c0 100644
--- a/airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.tsx
+++ b/airbyte-webapp/src/components/connection/ConnectionBlock/ConnectionBlock.tsx
@@ -13,12 +13,10 @@ interface IProps {
   itemTo?: { name: string; icon?: string };
 }
 
-const ConnectionBlock: React.FC<IProps> = (props) => (
+export const ConnectionBlock: React.FC<IProps> = (props) => (
   <Card className={classNames(styles.lightContentCard)}>
     {props.itemFrom ? <ConnectionBlockItem {...props.itemFrom} /> : <Content className={styles.extraBlock} />}
     <FontAwesomeIcon className={styles.arrow} icon={faChevronRight} />
     {props.itemTo ? <ConnectionBlockItem {...props.itemTo} /> : <Content className={styles.extraBlock} />}
   </Card>
 );
-
-export default ConnectionBlock;
diff --git a/airbyte-webapp/src/components/ConnectionBlock/ConnectionBlockItem.tsx b/airbyte-webapp/src/components/connection/ConnectionBlock/ConnectionBlockItem.tsx
similarity index 100%
rename from airbyte-webapp/src/components/ConnectionBlock/ConnectionBlockItem.tsx
rename to airbyte-webapp/src/components/connection/ConnectionBlock/ConnectionBlockItem.tsx
diff --git a/airbyte-webapp/src/components/connection/ConnectionBlock/index.ts b/airbyte-webapp/src/components/connection/ConnectionBlock/index.ts
new file mode 100644
index 000000000000..970311780b20
--- /dev/null
+++ b/airbyte-webapp/src/components/connection/ConnectionBlock/index.ts
@@ -0,0 +1 @@
+export * from "./ConnectionBlock";
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.module.scss b/airbyte-webapp/src/components/connection/ConnectionInfoCard/ConnectionInfoCard.module.scss
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.module.scss
rename to airbyte-webapp/src/components/connection/ConnectionInfoCard/ConnectionInfoCard.module.scss
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.test.tsx b/airbyte-webapp/src/components/connection/ConnectionInfoCard/ConnectionInfoCard.test.tsx
similarity index 72%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.test.tsx
rename to airbyte-webapp/src/components/connection/ConnectionInfoCard/ConnectionInfoCard.test.tsx
index 1665305d8523..a56cd970f55d 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.test.tsx
+++ b/airbyte-webapp/src/components/connection/ConnectionInfoCard/ConnectionInfoCard.test.tsx
@@ -7,7 +7,7 @@ import { ConnectionStatus, SchemaChange } from "core/request/AirbyteClient";
 import { defaultOssFeatures, FeatureItem } from "hooks/services/Feature";
 
 // eslint-disable-next-line css-modules/no-unused-class
-import styles from "./StatusMainInfo.module.scss";
+import styles from "./ConnectionInfoCard.module.scss";
 
 const mockUseConnectionEditService = jest.fn();
 
@@ -32,9 +32,9 @@ const TestWrapperWithAutoDetectSchema: React.FC<React.PropsWithChildren<Record<s
 );
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const { StatusMainInfo } = require("./StatusMainInfo");
+const { ConnectionInfoCard } = require("./ConnectionInfoCard");
 
-describe("<StatusMainInfo />", () => {
+describe(`<${ConnectionInfoCard.name} />`, () => {
   beforeEach(() => {
     mockUseConnectionEditService.mockReturnValue({
       connection: mockConnection,
@@ -43,16 +43,16 @@ describe("<StatusMainInfo />", () => {
   });
 
   it("renders", () => {
-    const { getByTestId, queryByTestId } = render(<StatusMainInfo />, { wrapper: TestWrapperWithAutoDetectSchema });
+    const { getByTestId, queryByTestId } = render(<ConnectionInfoCard />, { wrapper: TestWrapperWithAutoDetectSchema });
 
-    expect(getByTestId("statusMainInfo")).toBeDefined();
+    expect(getByTestId("connectionInfo")).toBeDefined();
 
     expect(getByTestId("enabledControl")).toBeDefined();
     expect(getByTestId("enabledControl-switch")).toBeEnabled();
 
     // schema changes-related
-    expect(getByTestId("statusMainInfo-sourceLink")).not.toHaveClass(styles.breaking);
-    expect(getByTestId("statusMainInfo-sourceLink")).not.toHaveClass(styles.nonBreaking);
+    expect(getByTestId("connectionInfo-sourceLink")).not.toHaveClass(styles.breaking);
+    expect(getByTestId("connectionInfo-sourceLink")).not.toHaveClass(styles.nonBreaking);
     expect(queryByTestId("schemaChangesDetected")).toBeFalsy();
   });
 
@@ -62,10 +62,10 @@ describe("<StatusMainInfo />", () => {
       schemaHasBeenRefreshed: false,
     });
 
-    const { getByTestId, queryByTestId } = render(<StatusMainInfo />, { wrapper: TestWrapperWithAutoDetectSchema });
+    const { getByTestId, queryByTestId } = render(<ConnectionInfoCard />, { wrapper: TestWrapperWithAutoDetectSchema });
 
-    expect(getByTestId("statusMainInfo-sourceLink")).not.toHaveClass(styles.breaking);
-    expect(getByTestId("statusMainInfo-sourceLink")).not.toHaveClass(styles.nonBreaking);
+    expect(getByTestId("connectionInfo-sourceLink")).not.toHaveClass(styles.breaking);
+    expect(getByTestId("connectionInfo-sourceLink")).not.toHaveClass(styles.nonBreaking);
 
     expect(queryByTestId("enabledControl")).toBeFalsy();
     expect(queryByTestId("schemaChangesDetected")).toBeFalsy();
@@ -77,10 +77,10 @@ describe("<StatusMainInfo />", () => {
       schemaHasBeenRefreshed: false,
     });
 
-    const { getByTestId } = render(<StatusMainInfo />, { wrapper: TestWrapperWithAutoDetectSchema });
+    const { getByTestId } = render(<ConnectionInfoCard />, { wrapper: TestWrapperWithAutoDetectSchema });
 
-    expect(getByTestId("statusMainInfo-sourceLink")).toHaveClass(styles.breaking);
-    expect(getByTestId("statusMainInfo-sourceLink")).not.toHaveClass(styles.nonBreaking);
+    expect(getByTestId("connectionInfo-sourceLink")).toHaveClass(styles.breaking);
+    expect(getByTestId("connectionInfo-sourceLink")).not.toHaveClass(styles.nonBreaking);
     expect(getByTestId("schemaChangesDetected")).toBeDefined();
 
     expect(getByTestId("enabledControl-switch")).toBeDisabled();
@@ -92,10 +92,10 @@ describe("<StatusMainInfo />", () => {
       schemaHasBeenRefreshed: false,
     });
 
-    const { getByTestId } = render(<StatusMainInfo />, { wrapper: TestWrapperWithAutoDetectSchema });
+    const { getByTestId } = render(<ConnectionInfoCard />, { wrapper: TestWrapperWithAutoDetectSchema });
 
-    expect(getByTestId("statusMainInfo-sourceLink")).not.toHaveClass(styles.breaking);
-    expect(getByTestId("statusMainInfo-sourceLink")).toHaveClass(styles.nonBreaking);
+    expect(getByTestId("connectionInfo-sourceLink")).not.toHaveClass(styles.breaking);
+    expect(getByTestId("connectionInfo-sourceLink")).toHaveClass(styles.nonBreaking);
     expect(getByTestId("schemaChangesDetected")).toBeDefined();
 
     expect(getByTestId("enabledControl-switch")).toBeEnabled();
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.tsx b/airbyte-webapp/src/components/connection/ConnectionInfoCard/ConnectionInfoCard.tsx
similarity index 91%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.tsx
rename to airbyte-webapp/src/components/connection/ConnectionInfoCard/ConnectionInfoCard.tsx
index a0ff55abfe35..429c79580719 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.tsx
+++ b/airbyte-webapp/src/components/connection/ConnectionInfoCard/ConnectionInfoCard.tsx
@@ -14,11 +14,11 @@ import { RoutePaths } from "pages/routePaths";
 import { useDestinationDefinition } from "services/connector/DestinationDefinitionService";
 import { useSourceDefinition } from "services/connector/SourceDefinitionService";
 
+import styles from "./ConnectionInfoCard.module.scss";
 import { EnabledControl } from "./EnabledControl";
 import { SchemaChangesDetected } from "./SchemaChangesDetected";
-import styles from "./StatusMainInfo.module.scss";
 
-export const StatusMainInfo: React.FC = () => {
+export const ConnectionInfoCard: React.FC = () => {
   const {
     connection: { source, destination, status, schemaChange },
     schemaHasBeenRefreshed,
@@ -43,12 +43,12 @@ export const StatusMainInfo: React.FC = () => {
         };
 
   return (
-    <div className={styles.container} data-testid="statusMainInfo">
+    <div className={styles.container} data-testid="connectionInfo">
       <div className={styles.pathContainer}>
         <Link
           to={sourceConnectionPath}
           className={classNames(styles.connectorLink, schemaChangeClassNames)}
-          data-testid="statusMainInfo-sourceLink"
+          data-testid="connectionInfo-sourceLink"
         >
           <ConnectorCard
             connectionName={source.sourceName}
@@ -61,7 +61,7 @@ export const StatusMainInfo: React.FC = () => {
         <Link
           to={destinationConnectionPath}
           className={styles.connectorLink}
-          data-testid="statusMainInfo-destinationLink"
+          data-testid="connectionInfo-destinationLink"
         >
           <ConnectorCard
             connectionName={destination.destinationName}
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.module.scss b/airbyte-webapp/src/components/connection/ConnectionInfoCard/EnabledControl.module.scss
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.module.scss
rename to airbyte-webapp/src/components/connection/ConnectionInfoCard/EnabledControl.module.scss
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.tsx b/airbyte-webapp/src/components/connection/ConnectionInfoCard/EnabledControl.tsx
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.tsx
rename to airbyte-webapp/src/components/connection/ConnectionInfoCard/EnabledControl.tsx
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.module.scss b/airbyte-webapp/src/components/connection/ConnectionInfoCard/SchemaChangesDetected.module.scss
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.module.scss
rename to airbyte-webapp/src/components/connection/ConnectionInfoCard/SchemaChangesDetected.module.scss
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.test.tsx b/airbyte-webapp/src/components/connection/ConnectionInfoCard/SchemaChangesDetected.test.tsx
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.test.tsx
rename to airbyte-webapp/src/components/connection/ConnectionInfoCard/SchemaChangesDetected.test.tsx
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.tsx b/airbyte-webapp/src/components/connection/ConnectionInfoCard/SchemaChangesDetected.tsx
similarity index 90%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.tsx
rename to airbyte-webapp/src/components/connection/ConnectionInfoCard/SchemaChangesDetected.tsx
index 772ba675c845..4b8fd87073ec 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.tsx
+++ b/airbyte-webapp/src/components/connection/ConnectionInfoCard/SchemaChangesDetected.tsx
@@ -8,9 +8,9 @@ import { Text } from "components/ui/Text";
 import { useSchemaChanges } from "hooks/connection/useSchemaChanges";
 import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService";
 import { useFormChangeTrackerService } from "hooks/services/FormChangeTracker";
+import { ConnectionRoutePaths } from "pages/connections/types";
 import { useRefreshSourceSchemaWithConfirmationOnDirty } from "views/Connection/ConnectionForm/components/refreshSourceSchemaWithConfirmationOnDirty";
 
-import { ConnectionSettingsRoutes } from "./ConnectionSettingsRoutes";
 import styles from "./SchemaChangesDetected.module.scss";
 
 export const SchemaChangesDetected: React.FC = () => {
@@ -31,8 +31,8 @@ export const SchemaChangesDetected: React.FC = () => {
   }
 
   const onReviewActionButtonClick: React.MouseEventHandler<HTMLButtonElement> = () => {
-    if (!location.pathname.includes(`/${ConnectionSettingsRoutes.REPLICATION}`)) {
-      navigate(ConnectionSettingsRoutes.REPLICATION);
+    if (!location.pathname.includes(`/${ConnectionRoutePaths.Replication}`)) {
+      navigate(ConnectionRoutePaths.Replication);
     }
 
     refreshSchema();
diff --git a/airbyte-webapp/src/components/connection/ConnectionInfoCard/index.ts b/airbyte-webapp/src/components/connection/ConnectionInfoCard/index.ts
new file mode 100644
index 000000000000..85ad959bcb15
--- /dev/null
+++ b/airbyte-webapp/src/components/connection/ConnectionInfoCard/index.ts
@@ -0,0 +1 @@
+export * from "./ConnectionInfoCard";
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.module.scss b/airbyte-webapp/src/components/connection/ConnectionName/ConnectionName.module.scss
similarity index 95%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.module.scss
rename to airbyte-webapp/src/components/connection/ConnectionName/ConnectionName.module.scss
index bca89e228004..b8b68d08d49b 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.module.scss
+++ b/airbyte-webapp/src/components/connection/ConnectionName/ConnectionName.module.scss
@@ -1,5 +1,5 @@
-@use "../../../../scss/colors";
-@use "../../../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 
 .container {
   margin-top: variables.$spacing-md;
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.tsx b/airbyte-webapp/src/components/connection/ConnectionName/ConnectionName.tsx
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionName.tsx
rename to airbyte-webapp/src/components/connection/ConnectionName/ConnectionName.tsx
diff --git a/airbyte-webapp/src/components/connection/ConnectionName/index.ts b/airbyte-webapp/src/components/connection/ConnectionName/index.ts
new file mode 100644
index 000000000000..a48bbcb72f2d
--- /dev/null
+++ b/airbyte-webapp/src/components/connection/ConnectionName/index.ts
@@ -0,0 +1 @@
+export * from "./ConnectionName";
diff --git a/airbyte-webapp/src/components/connection/JobProgress/JobProgress.tsx b/airbyte-webapp/src/components/connection/JobProgress/JobProgress.tsx
index 07d546402350..6e0e24222367 100644
--- a/airbyte-webapp/src/components/connection/JobProgress/JobProgress.tsx
+++ b/airbyte-webapp/src/components/connection/JobProgress/JobProgress.tsx
@@ -3,11 +3,11 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { getJobStatus } from "components/JobItem/JobItem";
+import { JobsWithJobs } from "components/JobItem/types";
+import { getJobStatus } from "components/JobItem/utils";
 import { Text } from "components/ui/Text";
 
 import { AttemptRead, AttemptStatus, SynchronousJobRead } from "core/request/AirbyteClient";
-import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/JobsList";
 import { formatBytes } from "utils/numberHelper";
 
 import styles from "./JobProgress.module.scss";
diff --git a/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx b/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx
index eb773b2e70f5..f87bd756f1c5 100644
--- a/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx
+++ b/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx
@@ -46,8 +46,8 @@ const WorkspacesPage = React.lazy(() => import("packages/cloud/views/workspaces"
 const Auth = React.lazy(() => import("packages/cloud/views/auth"));
 const CreditsPage = React.lazy(() => import("packages/cloud/views/credits"));
 
-const ConnectionPage = React.lazy(() => import("pages/ConnectionPage"));
-const CreationFormPage = React.lazy(() => import("pages/ConnectionPage/pages/CreationFormPage"));
+const ConnectionsRoutes = React.lazy(() => import("pages/connections/ConnectionsRoutes"));
+const CreateConnectionPage = React.lazy(() => import("pages/connections/CreateConnectionPage"));
 const AllDestinationsPage = React.lazy(() => import("pages/destination/AllDestinationsPage"));
 const CreateDestinationPage = React.lazy(() => import("pages/destination/CreateDestinationPage"));
 const DestinationItemPage = React.lazy(() => import("pages/destination/DestinationItemPage"));
@@ -91,14 +91,14 @@ const MainRoutes: React.FC = () => {
         <Route path={RoutePaths.Destination}>
           <Route index element={<AllDestinationsPage />} />
           <Route path={DestinationPaths.NewDestination} element={<CreateDestinationPage />} />
-          <Route path={DestinationPaths.NewConnection} element={<CreationFormPage />} />
+          <Route path={DestinationPaths.NewConnection} element={<CreateConnectionPage />} />
           <Route path={DestinationPaths.Root} element={<DestinationItemPage />}>
             <Route path={DestinationPaths.Settings} element={<DestinationSettingsPage />} />
             <Route index element={<DestinationOverviewPage />} />
           </Route>
         </Route>
         <Route path={`${RoutePaths.Source}/*`} element={<SourcesPage />} />
-        <Route path={`${RoutePaths.Connections}/*`} element={<ConnectionPage />} />
+        <Route path={`${RoutePaths.Connections}/*`} element={<ConnectionsRoutes />} />
         <Route path={`${RoutePaths.Settings}/*`} element={<CloudSettingsPage />} />
         <Route path={CloudRoutes.Credits} element={<CreditsPage />} />
         <Route path="*" element={<Navigate to={RoutePaths.Connections} replace />} />
diff --git a/airbyte-webapp/src/pages/ConnectionPage/ConnectionPage.tsx b/airbyte-webapp/src/pages/ConnectionPage/ConnectionPage.tsx
deleted file mode 100644
index 78cbab7b3bf3..000000000000
--- a/airbyte-webapp/src/pages/ConnectionPage/ConnectionPage.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { Suspense } from "react";
-import { Route, Routes } from "react-router-dom";
-
-import { LoadingPage } from "components";
-
-import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary";
-import { StartOverErrorView } from "views/common/StartOverErrorView";
-
-import { RoutePaths } from "../routePaths";
-
-const CreationFormPage = React.lazy(() => import("./pages/CreationFormPage/CreationFormPage"));
-const ConnectionItemPage = React.lazy(() => import("./pages/ConnectionItemPage/ConnectionItemPage"));
-const AllConnectionsPage = React.lazy(() => import("./pages/AllConnectionsPage"));
-
-export const ConnectionPage: React.FC = () => (
-  <Suspense fallback={<LoadingPage />}>
-    <Routes>
-      <Route path={RoutePaths.ConnectionNew} element={<CreationFormPage />} />
-      <Route
-        path=":connectionId/*"
-        element={
-          <ResourceNotFoundErrorBoundary errorComponent={<StartOverErrorView />}>
-            <ConnectionItemPage />
-          </ResourceNotFoundErrorBoundary>
-        }
-      />
-      <Route index element={<AllConnectionsPage />} />
-    </Routes>
-  </Suspense>
-);
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/index.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/index.tsx
deleted file mode 100644
index 74ecf882f245..000000000000
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import AllConnectionsPage from "./AllConnectionsPage";
-
-export default AllConnectionsPage;
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionItemPage.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionItemPage.tsx
deleted file mode 100644
index b72522d8f042..000000000000
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionItemPage.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { Suspense } from "react";
-import { Navigate, Route, Routes, useParams } from "react-router-dom";
-
-import { LoadingPage, MainPageWithScroll } from "components";
-import { HeadTitle } from "components/common/HeadTitle";
-
-import { ConnectionStatus } from "core/request/AirbyteClient";
-import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
-import {
-  ConnectionEditServiceProvider,
-  useConnectionEditService,
-} from "hooks/services/ConnectionEdit/ConnectionEditService";
-
-import { ConnectionPageTitle } from "./ConnectionPageTitle";
-import { ConnectionReplicationTab } from "./ConnectionReplicationTab";
-import { ConnectionSettingsRoutes } from "./ConnectionSettingsRoutes";
-import { ConnectionSettingsTab } from "./ConnectionSettingsTab";
-import { ConnectionStatusTab } from "./ConnectionStatusTab";
-import { ConnectionTransformationTab } from "./ConnectionTransformationTab";
-
-export const ConnectionItemPageInner: React.FC = () => {
-  const { connection } = useConnectionEditService();
-
-  useTrackPage(PageTrackingCodes.CONNECTIONS_ITEM);
-
-  const isConnectionDeleted = connection.status === ConnectionStatus.deprecated;
-
-  return (
-    <MainPageWithScroll
-      headTitle={
-        <HeadTitle
-          titles={[
-            { id: "sidebar.connections" },
-            {
-              id: "connection.fromTo",
-              values: {
-                source: connection.source.name,
-                destination: connection.destination.name,
-              },
-            },
-          ]}
-        />
-      }
-      pageTitle={<ConnectionPageTitle />}
-    >
-      <Suspense fallback={<LoadingPage />}>
-        <Routes>
-          <Route path={ConnectionSettingsRoutes.STATUS} element={<ConnectionStatusTab />} />
-          <Route path={ConnectionSettingsRoutes.REPLICATION} element={<ConnectionReplicationTab />} />
-          <Route path={ConnectionSettingsRoutes.TRANSFORMATION} element={<ConnectionTransformationTab />} />
-          <Route
-            path={ConnectionSettingsRoutes.SETTINGS}
-            element={isConnectionDeleted ? <Navigate replace to=".." /> : <ConnectionSettingsTab />}
-          />
-          <Route index element={<Navigate to={ConnectionSettingsRoutes.STATUS} replace />} />
-        </Routes>
-      </Suspense>
-    </MainPageWithScroll>
-  );
-};
-
-export const ConnectionItemPage = () => {
-  const params = useParams<{
-    connectionId: string;
-  }>();
-  const connectionId = params.connectionId || "";
-  return (
-    <ConnectionEditServiceProvider connectionId={connectionId}>
-      <ConnectionItemPageInner />
-    </ConnectionEditServiceProvider>
-  );
-};
-
-export default ConnectionItemPage;
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsRoutes.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsRoutes.tsx
deleted file mode 100644
index 81ba2190184a..000000000000
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsRoutes.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-export enum ConnectionSettingsRoutes {
-  STATUS = "status",
-  TRANSFORMATION = "transformation",
-  REPLICATION = "replication",
-  SETTINGS = "settings",
-}
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/index.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/index.tsx
deleted file mode 100644
index a6d6eb6ad41c..000000000000
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CreationFormPage } from "./CreationFormPage";
-
-export default CreationFormPage;
diff --git a/airbyte-webapp/src/pages/SourcesPage/SourcesPage.tsx b/airbyte-webapp/src/pages/SourcesPage/SourcesPage.tsx
index ac10deb6bab2..17c646e3b956 100644
--- a/airbyte-webapp/src/pages/SourcesPage/SourcesPage.tsx
+++ b/airbyte-webapp/src/pages/SourcesPage/SourcesPage.tsx
@@ -9,12 +9,12 @@ import { RoutePaths } from "../routePaths";
 const AllSourcesPage = React.lazy(() => import("./pages/AllSourcesPage"));
 const CreateSourcePage = React.lazy(() => import("./pages/CreateSourcePage/CreateSourcePage"));
 const SourceItemPage = React.lazy(() => import("./pages/SourceItemPage"));
-const CreationFormPage = React.lazy(() => import("pages/ConnectionPage/pages/CreationFormPage/CreationFormPage"));
+const CreateConnectionPage = React.lazy(() => import("pages/connections/CreateConnectionPage"));
 
 export const SourcesPage: React.FC = () => (
   <Routes>
     <Route path={RoutePaths.SourceNew} element={<CreateSourcePage />} />
-    <Route path={RoutePaths.ConnectionNew} element={<CreationFormPage />} />
+    <Route path={RoutePaths.ConnectionNew} element={<CreateConnectionPage />} />
     <Route
       path=":id/*"
       element={
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.module.scss b/airbyte-webapp/src/pages/connections/AllConnectionsPage/AllConnectionsPage.module.scss
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.module.scss
rename to airbyte-webapp/src/pages/connections/AllConnectionsPage/AllConnectionsPage.module.scss
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx b/airbyte-webapp/src/pages/connections/AllConnectionsPage/AllConnectionsPage.tsx
similarity index 90%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx
rename to airbyte-webapp/src/pages/connections/AllConnectionsPage/AllConnectionsPage.tsx
index 837ecb163fa3..aa74d81c0083 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx
+++ b/airbyte-webapp/src/pages/connections/AllConnectionsPage/AllConnectionsPage.tsx
@@ -13,10 +13,10 @@ import { PageHeader } from "components/ui/PageHeader";
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useConnectionList } from "hooks/services/useConnectionHook";
 
-import { RoutePaths } from "../../../routePaths";
-import ConnectionsTable from "./components/ConnectionsTable";
+import { RoutePaths } from "../../routePaths";
+import ConnectionsTable from "./ConnectionsTable";
 
-const AllConnectionsPage: React.FC = () => {
+export const AllConnectionsPage: React.FC = () => {
   const navigate = useNavigate();
 
   useTrackPage(PageTrackingCodes.CONNECTIONS_LIST);
@@ -54,5 +54,3 @@ const AllConnectionsPage: React.FC = () => {
     </Suspense>
   );
 };
-
-export default AllConnectionsPage;
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/components/ConnectionsTable.tsx b/airbyte-webapp/src/pages/connections/AllConnectionsPage/ConnectionsTable.tsx
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/components/ConnectionsTable.tsx
rename to airbyte-webapp/src/pages/connections/AllConnectionsPage/ConnectionsTable.tsx
diff --git a/airbyte-webapp/src/pages/connections/AllConnectionsPage/index.ts b/airbyte-webapp/src/pages/connections/AllConnectionsPage/index.ts
new file mode 100644
index 000000000000..199d9fa30791
--- /dev/null
+++ b/airbyte-webapp/src/pages/connections/AllConnectionsPage/index.ts
@@ -0,0 +1,3 @@
+import { AllConnectionsPage } from "./AllConnectionsPage";
+
+export default AllConnectionsPage;
diff --git a/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPage.tsx b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPage.tsx
new file mode 100644
index 000000000000..86d47b246e1c
--- /dev/null
+++ b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPage.tsx
@@ -0,0 +1,54 @@
+import React, { Suspense } from "react";
+import { Outlet, useParams } from "react-router-dom";
+
+import { LoadingPage, MainPageWithScroll } from "components";
+import { HeadTitle } from "components/common/HeadTitle";
+
+import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
+import {
+  ConnectionEditServiceProvider,
+  useConnectionEditService,
+} from "hooks/services/ConnectionEdit/ConnectionEditService";
+import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary";
+import { StartOverErrorView } from "views/common/StartOverErrorView";
+
+import { ConnectionPageTitle } from "./ConnectionPageTitle";
+
+const ConnectionHeadTitle: React.FC = () => {
+  const { connection } = useConnectionEditService();
+
+  return (
+    <HeadTitle
+      titles={[
+        { id: "sidebar.connections" },
+        {
+          id: "connection.fromTo",
+          values: {
+            source: connection.source.name,
+            destination: connection.destination.name,
+          },
+        },
+      ]}
+    />
+  );
+};
+
+export const ConnectionPage: React.FC = () => {
+  const { connectionId = "" } = useParams<{
+    connectionId: string;
+  }>();
+
+  useTrackPage(PageTrackingCodes.CONNECTIONS_ITEM);
+
+  return (
+    <ConnectionEditServiceProvider connectionId={connectionId}>
+      <ResourceNotFoundErrorBoundary errorComponent={<StartOverErrorView />}>
+        <MainPageWithScroll headTitle={<ConnectionHeadTitle />} pageTitle={<ConnectionPageTitle />}>
+          <Suspense fallback={<LoadingPage />}>
+            <Outlet />
+          </Suspense>
+        </MainPageWithScroll>
+      </ResourceNotFoundErrorBoundary>
+    </ConnectionEditServiceProvider>
+  );
+};
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionPageTitle.module.scss b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.module.scss
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionPageTitle.module.scss
rename to airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.module.scss
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionPageTitle.tsx b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx
similarity index 76%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionPageTitle.tsx
rename to airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx
index ba9715e39396..c711c91dd26e 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionPageTitle.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx
@@ -3,6 +3,8 @@ import React, { useCallback, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate, useParams } from "react-router-dom";
 
+import { ConnectionInfoCard } from "components/connection/ConnectionInfoCard";
+import { ConnectionName } from "components/connection/ConnectionName";
 import { InfoBox } from "components/ui/InfoBox";
 import { StepsMenu } from "components/ui/StepsMenu";
 import { Text } from "components/ui/Text";
@@ -10,37 +12,35 @@ import { Text } from "components/ui/Text";
 import { ConnectionStatus } from "core/request/AirbyteClient";
 import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService";
 
-import { ConnectionName } from "./ConnectionName";
+import { ConnectionRoutePaths } from "../types";
 import styles from "./ConnectionPageTitle.module.scss";
-import { ConnectionSettingsRoutes } from "./ConnectionSettingsRoutes";
-import { StatusMainInfo } from "./StatusMainInfo";
 
 export const ConnectionPageTitle: React.FC = () => {
-  const params = useParams<{ id: string; "*": ConnectionSettingsRoutes }>();
+  const params = useParams<{ id: string; "*": ConnectionRoutePaths }>();
   const navigate = useNavigate();
-  const currentStep = params["*"] || ConnectionSettingsRoutes.STATUS;
+  const currentStep = params["*"] || ConnectionRoutePaths.Status;
 
   const { connection } = useConnectionEditService();
 
   const steps = useMemo(() => {
     const steps = [
       {
-        id: ConnectionSettingsRoutes.STATUS,
+        id: ConnectionRoutePaths.Status,
         name: <FormattedMessage id="sources.status" />,
       },
       {
-        id: ConnectionSettingsRoutes.REPLICATION,
+        id: ConnectionRoutePaths.Replication,
         name: <FormattedMessage id="connection.replication" />,
       },
       {
-        id: ConnectionSettingsRoutes.TRANSFORMATION,
+        id: ConnectionRoutePaths.Transformation,
         name: <FormattedMessage id="connectionForm.transformation.title" />,
       },
     ];
 
     connection.status !== ConnectionStatus.deprecated &&
       steps.push({
-        id: ConnectionSettingsRoutes.SETTINGS,
+        id: ConnectionRoutePaths.Settings,
         name: <FormattedMessage id="sources.settings" />,
       });
 
@@ -49,7 +49,7 @@ export const ConnectionPageTitle: React.FC = () => {
 
   const onSelectStep = useCallback(
     (id: string) => {
-      if (id === ConnectionSettingsRoutes.STATUS) {
+      if (id === ConnectionRoutePaths.Status) {
         navigate("");
       } else {
         navigate(id);
@@ -70,7 +70,7 @@ export const ConnectionPageTitle: React.FC = () => {
       </Text>
       <ConnectionName />
       <div className={styles.statusContainer}>
-        <StatusMainInfo />
+        <ConnectionInfoCard />
       </div>
       <StepsMenu lightMode data={steps} onSelect={onSelectStep} activeStep={currentStep} />
     </div>
diff --git a/airbyte-webapp/src/pages/ConnectionPage/index.tsx b/airbyte-webapp/src/pages/connections/ConnectionPage/index.ts
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/index.tsx
rename to airbyte-webapp/src/pages/connections/ConnectionPage/index.ts
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.module.scss b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.module.scss
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.module.scss
rename to airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.module.scss
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.test.tsx b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.test.tsx
similarity index 96%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.test.tsx
rename to airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.test.tsx
index 7f6d2b114017..9f23cc5d027c 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.test.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.test.tsx
@@ -19,7 +19,7 @@ import { ConnectionEditServiceProvider } from "hooks/services/ConnectionEdit/Con
 import { defaultOssFeatures, FeatureItem } from "hooks/services/Feature";
 import * as connectionHook from "hooks/services/useConnectionHook";
 
-import { ConnectionReplicationTab } from "./ConnectionReplicationTab";
+import { ConnectionReplicationPage } from "./ConnectionReplicationPage";
 
 jest.mock("services/connector/DestinationDefinitionSpecificationService", () => ({
   useGetDestinationDefinitionSpecification: () => mockDestinationDefinitionSpecification,
@@ -36,7 +36,7 @@ jest.mock("services/workspaces/WorkspacesService", () => ({
   useCurrentWorkspaceId: () => mockWorkspaceId,
 }));
 
-describe("ConnectionReplicationTab", () => {
+describe("ConnectionReplicationPage", () => {
   const Wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
     <Suspense fallback={<div>I should not show up in a snapshot</div>}>
       <TestWrapper>
@@ -51,7 +51,7 @@ describe("ConnectionReplicationTab", () => {
     await act(async () => {
       renderResult = tlr(
         <Wrapper>
-          <ConnectionReplicationTab />
+          <ConnectionReplicationPage />
         </Wrapper>
       );
     });
@@ -147,7 +147,7 @@ describe("ConnectionReplicationTab", () => {
       const container = tlr(
         <TestWrapper features={featuresToInject}>
           <ConnectionEditServiceProvider connectionId={mockConnection.connectionId}>
-            <ConnectionReplicationTab />
+            <ConnectionReplicationPage />
           </ConnectionEditServiceProvider>
         </TestWrapper>
       );
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.tsx b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.tsx
similarity index 98%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.tsx
rename to airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.tsx
index 0541bfa5372b..bc80f7252cee 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionReplicationTab.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.tsx
@@ -25,7 +25,7 @@ import { SchemaChangeBackdrop } from "views/Connection/ConnectionForm/components
 import { ConnectionFormFields } from "views/Connection/ConnectionForm/ConnectionFormFields";
 import { useConnectionValidationSchema, FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig";
 
-import styles from "./ConnectionReplicationTab.module.scss";
+import styles from "./ConnectionReplicationPage.module.scss";
 import { ResetWarningModal } from "./ResetWarningModal";
 
 const ValidateFormOnSchemaRefresh: React.FC = () => {
@@ -41,7 +41,7 @@ const ValidateFormOnSchemaRefresh: React.FC = () => {
   return null;
 };
 
-export const ConnectionReplicationTab: React.FC = () => {
+export const ConnectionReplicationPage: React.FC = () => {
   const analyticsService = useAnalyticsService();
   const connectionService = useConnectionService();
   const workspaceId = useCurrentWorkspaceId();
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ResetWarningModal.tsx b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ResetWarningModal.tsx
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ResetWarningModal.tsx
rename to airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ResetWarningModal.tsx
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/__snapshots__/ConnectionReplicationPage.test.tsx.snap
similarity index 98%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
rename to airbyte-webapp/src/pages/connections/ConnectionReplicationPage/__snapshots__/ConnectionReplicationPage.test.tsx.snap
index cd975243beb4..00fabefa1648 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
+++ b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/__snapshots__/ConnectionReplicationPage.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ConnectionReplicationTab should render 1`] = `
+exports[`ConnectionReplicationPage should render 1`] = `
 <body>
   <div>
     <div
@@ -35,7 +35,7 @@ exports[`ConnectionReplicationTab should render 1`] = `
                     <label
                       class="<removed-for-snapshot-test>"
                     >
-                      Replication frequency*
+                      Replication frequency
                       <span
                         class="<removed-for-snapshot-test>"
                       >
@@ -174,7 +174,7 @@ exports[`ConnectionReplicationTab should render 1`] = `
                       <label
                         class="<removed-for-snapshot-test>"
                       >
-                        Destination Namespace*
+                        Destination Namespace
                         <span
                           class="<removed-for-snapshot-test>"
                         >
@@ -297,7 +297,7 @@ exports[`ConnectionReplicationTab should render 1`] = `
                     <label
                       class="<removed-for-snapshot-test>"
                     >
-                      Destination Stream Prefix (Optional)
+                      Destination Stream Prefix
                       <span
                         class="<removed-for-snapshot-test>"
                       >
@@ -321,6 +321,11 @@ exports[`ConnectionReplicationTab should render 1`] = `
                           </span>
                         </span>
                       </span>
+                      <p
+                        class="<removed-for-snapshot-test>"
+                      >
+                        Optional
+                      </p>
                     </label>
                   </div>
                 </div>
@@ -845,7 +850,7 @@ exports[`ConnectionReplicationTab should render 1`] = `
 </body>
 `;
 
-exports[`ConnectionReplicationTab should show an error if there is a schemaError 1`] = `
+exports[`ConnectionReplicationPage should show an error if there is a schemaError 1`] = `
 <body>
   <div>
     <div
diff --git a/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/index.ts b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/index.ts
new file mode 100644
index 000000000000..097377043a18
--- /dev/null
+++ b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/index.ts
@@ -0,0 +1 @@
+export { ConnectionReplicationPage as default } from "./ConnectionReplicationPage";
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsTab.module.scss b/airbyte-webapp/src/pages/connections/ConnectionSettingsPage/ConnectionSettingsPage.module.scss
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsTab.module.scss
rename to airbyte-webapp/src/pages/connections/ConnectionSettingsPage/ConnectionSettingsPage.module.scss
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsTab.test.tsx b/airbyte-webapp/src/pages/connections/ConnectionSettingsPage/ConnectionSettingsPage.test.tsx
similarity index 85%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsTab.test.tsx
rename to airbyte-webapp/src/pages/connections/ConnectionSettingsPage/ConnectionSettingsPage.test.tsx
index 079a58226119..099c06c0e58f 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsTab.test.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionSettingsPage/ConnectionSettingsPage.test.tsx
@@ -1,6 +1,6 @@
 import { mockConnection, render } from "test-utils/testutils";
 
-import { ConnectionSettingsTab } from "./ConnectionSettingsTab";
+import { ConnectionSettingsPageInner } from "./ConnectionSettingsPage";
 
 let mockIsAdvancedMode = false;
 const setMockIsAdvancedMode = (newSetting: boolean) => {
@@ -34,16 +34,16 @@ jest.mock("components/common/DeleteBlock", () => ({
   },
 }));
 
-describe("<SettingsView />", () => {
+describe("<ConnectionSettingsPage />", () => {
   it("only renders connection state when advanced mode is enabled", async () => {
     let container: HTMLElement;
 
     setMockIsAdvancedMode(false);
-    ({ container } = await render(<ConnectionSettingsTab />));
+    ({ container } = await render(<ConnectionSettingsPageInner />));
     expect(container.textContent).not.toContain("Connection State");
 
     setMockIsAdvancedMode(true);
-    ({ container } = await render(<ConnectionSettingsTab />));
+    ({ container } = await render(<ConnectionSettingsPageInner />));
     expect(container.textContent).toContain("Connection State");
   });
 });
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsTab.tsx b/airbyte-webapp/src/pages/connections/ConnectionSettingsPage/ConnectionSettingsPage.tsx
similarity index 74%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsTab.tsx
rename to airbyte-webapp/src/pages/connections/ConnectionSettingsPage/ConnectionSettingsPage.tsx
index 6d717fbbdde2..0663166e8eef 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionSettingsTab.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionSettingsPage/ConnectionSettingsPage.tsx
@@ -1,19 +1,21 @@
 import React from "react";
+import { Navigate } from "react-router-dom";
 
 import { DeleteBlock } from "components/common/DeleteBlock";
 import { UpdateConnectionDataResidency } from "components/connection/UpdateConnectionDataResidency";
 
+import { ConnectionStatus } from "core/request/AirbyteClient";
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
 import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
 import { useAdvancedModeSetting } from "hooks/services/useAdvancedModeSetting";
 import { useDeleteConnection } from "hooks/services/useConnectionHook";
 
-import styles from "./ConnectionSettingsTab.module.scss";
+import styles from "./ConnectionSettingsPage.module.scss";
 import { SchemaUpdateNotifications } from "./SchemaUpdateNotifications";
 import { StateBlock } from "./StateBlock";
 
-export const ConnectionSettingsTab: React.FC = () => {
+export const ConnectionSettingsPageInner: React.FC = () => {
   const { connection } = useConnectionEditService();
   const { mutateAsync: deleteConnection } = useDeleteConnection();
   const canUpdateDataResidency = useFeature(FeatureItem.AllowChangeDataGeographies);
@@ -32,3 +34,10 @@ export const ConnectionSettingsTab: React.FC = () => {
     </div>
   );
 };
+
+export const ConnectionSettingsPage: React.FC = () => {
+  const { connection } = useConnectionEditService();
+  const isConnectionDeleted = connection.status === ConnectionStatus.deprecated;
+
+  return isConnectionDeleted ? <Navigate replace to=".." /> : <ConnectionSettingsPageInner />;
+};
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaUpdateNotifications.module.scss b/airbyte-webapp/src/pages/connections/ConnectionSettingsPage/SchemaUpdateNotifications.module.scss
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaUpdateNotifications.module.scss
rename to airbyte-webapp/src/pages/connections/ConnectionSettingsPage/SchemaUpdateNotifications.module.scss
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaUpdateNotifications.tsx b/airbyte-webapp/src/pages/connections/ConnectionSettingsPage/SchemaUpdateNotifications.tsx
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaUpdateNotifications.tsx
rename to airbyte-webapp/src/pages/connections/ConnectionSettingsPage/SchemaUpdateNotifications.tsx
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StateBlock.tsx b/airbyte-webapp/src/pages/connections/ConnectionSettingsPage/StateBlock.tsx
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StateBlock.tsx
rename to airbyte-webapp/src/pages/connections/ConnectionSettingsPage/StateBlock.tsx
diff --git a/airbyte-webapp/src/pages/connections/ConnectionSettingsPage/index.ts b/airbyte-webapp/src/pages/connections/ConnectionSettingsPage/index.ts
new file mode 100644
index 000000000000..33ac6c2e6c24
--- /dev/null
+++ b/airbyte-webapp/src/pages/connections/ConnectionSettingsPage/index.ts
@@ -0,0 +1 @@
+export { ConnectionSettingsPage as default } from "./ConnectionSettingsPage";
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.module.scss b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.module.scss
rename to airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.tsx b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx
similarity index 98%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.tsx
rename to airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx
index 2a8c65b41e94..29bcdb7986bb 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx
@@ -21,7 +21,7 @@ import { FeatureItem, useFeature } from "hooks/services/Feature";
 import { useResetConnection, useSyncConnection } from "hooks/services/useConnectionHook";
 import { useCancelJob, useListJobs } from "services/job/JobService";
 
-import styles from "./ConnectionStatusTab.module.scss";
+import styles from "./ConnectionStatusPage.module.scss";
 import JobsList from "./JobsList";
 
 const JOB_PAGE_SIZE_INCREMENT = 25;
@@ -44,7 +44,7 @@ const getJobRunningOrPending = (jobs: JobWithAttemptsRead[]) => {
   });
 };
 
-export const ConnectionStatusTab: React.FC = () => {
+export const ConnectionStatusPage: React.FC = () => {
   const { connection } = useConnectionEditService();
   useTrackPage(PageTrackingCodes.CONNECTIONS_ITEM_STATUS);
   const [activeJob, setActiveJob] = useState<ActiveJob>();
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/JobsList.tsx b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/JobsList.tsx
similarity index 78%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/JobsList.tsx
rename to airbyte-webapp/src/pages/connections/ConnectionStatusPage/JobsList.tsx
index ac51d0034983..487df209d82f 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/JobsList.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/JobsList.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 
-import { JobItem } from "components/JobItem/JobItem";
+import { JobItem } from "components/JobItem";
+import { JobsWithJobs } from "components/JobItem/types";
 
 import { JobWithAttemptsRead } from "core/request/AirbyteClient";
 
@@ -8,8 +9,6 @@ interface JobsListProps {
   jobs: JobWithAttemptsRead[];
 }
 
-export type JobsWithJobs = JobWithAttemptsRead & { job: Exclude<JobWithAttemptsRead["job"], undefined> };
-
 const JobsList: React.FC<JobsListProps> = ({ jobs }) => {
   const sortJobs: JobsWithJobs[] = useMemo(
     () =>
diff --git a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/index.ts b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/index.ts
new file mode 100644
index 000000000000..b76504abd05d
--- /dev/null
+++ b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/index.ts
@@ -0,0 +1 @@
+export { ConnectionStatusPage as default } from "./ConnectionStatusPage";
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab.module.scss b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.module.scss
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab.module.scss
rename to airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.module.scss
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab.tsx b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.tsx
similarity index 60%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab.tsx
rename to airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.tsx
index 6e2d3f6209d2..9c07a336c909 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/ConnectionTransformationPage.tsx
@@ -1,7 +1,5 @@
-import { Field, FieldArray } from "formik";
-import React, { useMemo } from "react";
+import React from "react";
 import { FormattedMessage } from "react-intl";
-import { useToggle } from "react-use";
 
 import { Card } from "components/ui/Card";
 import { Text } from "components/ui/Text";
@@ -15,84 +13,18 @@ import { FeatureItem, useFeature } from "hooks/services/Feature";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { useDestinationDefinition } from "services/connector/DestinationDefinitionService";
 import { FormikOnSubmit } from "types/formik";
-import { NormalizationField } from "views/Connection/ConnectionForm/components/NormalizationField";
-import { TransformationField } from "views/Connection/ConnectionForm/components/TransformationField";
 import {
   getInitialNormalization,
   getInitialTransformations,
   mapFormPropsToOperation,
 } from "views/Connection/ConnectionForm/formConfig";
-import { FormCard } from "views/Connection/FormCard";
 
-import styles from "./ConnectionTransformationTab.module.scss";
-import { DbtCloudTransformationsCard } from "./ConnectionTransformationTab/DbtCloudTransformationsCard";
+import styles from "./ConnectionTransformationPage.module.scss";
+import { CustomTransformationsCard } from "./CustomTransformationsCard";
+import { DbtCloudTransformationsCard } from "./DbtCloudTransformationsCard";
+import { NormalizationCard } from "./NormalizationCard";
 
-const CustomTransformationsCard: React.FC<{
-  operations?: OperationCreate[];
-  onSubmit: FormikOnSubmit<{ transformations?: OperationRead[] }>;
-}> = ({ operations, onSubmit }) => {
-  const [editingTransformation, toggleEditingTransformation] = useToggle(false);
-  const { mode } = useConnectionFormService();
-  const initialValues = useMemo(
-    () => ({
-      transformations: getInitialTransformations(operations || []),
-    }),
-    [operations]
-  );
-
-  return (
-    <FormCard<{ transformations?: OperationRead[] }>
-      title={<FormattedMessage id="connection.customTransformations" />}
-      collapsible
-      bottomSeparator
-      form={{
-        initialValues,
-        enableReinitialize: true,
-        onSubmit,
-      }}
-      submitDisabled={editingTransformation}
-    >
-      <FieldArray name="transformations">
-        {(formProps) => (
-          <TransformationField
-            {...formProps}
-            mode={mode}
-            onStartEdit={toggleEditingTransformation}
-            onEndEdit={toggleEditingTransformation}
-          />
-        )}
-      </FieldArray>
-    </FormCard>
-  );
-};
-
-const NormalizationCard: React.FC<{
-  operations?: OperationRead[];
-  onSubmit: FormikOnSubmit<{ normalization?: NormalizationType }>;
-}> = ({ operations, onSubmit }) => {
-  const { mode } = useConnectionFormService();
-  const initialValues = useMemo(
-    () => ({
-      normalization: getInitialNormalization(operations, true),
-    }),
-    [operations]
-  );
-
-  return (
-    <FormCard<{ normalization?: NormalizationType }>
-      form={{
-        initialValues,
-        onSubmit,
-      }}
-      title={<FormattedMessage id="connection.normalization" />}
-      collapsible
-    >
-      <Field name="normalization" component={NormalizationField} mode={mode} />
-    </FormCard>
-  );
-};
-
-export const ConnectionTransformationTab: React.FC = () => {
+export const ConnectionTransformationPage: React.FC = () => {
   const { connection, updateConnection } = useConnectionEditService();
   const { mode } = useConnectionFormService();
   const definition = useDestinationDefinition(connection.destination.destinationDefinitionId);
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/CustomTransformationsCard.tsx b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/CustomTransformationsCard.tsx
new file mode 100644
index 000000000000..21d4d79edd36
--- /dev/null
+++ b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/CustomTransformationsCard.tsx
@@ -0,0 +1,50 @@
+import { FieldArray } from "formik";
+import React, { useMemo } from "react";
+import { FormattedMessage } from "react-intl";
+import { useToggle } from "react-use";
+
+import { OperationCreate, OperationRead } from "core/request/AirbyteClient";
+import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
+import { FormikOnSubmit } from "types/formik";
+import { TransformationField } from "views/Connection/ConnectionForm/components/TransformationField";
+import { getInitialTransformations } from "views/Connection/ConnectionForm/formConfig";
+import { FormCard } from "views/Connection/FormCard";
+
+export const CustomTransformationsCard: React.FC<{
+  operations?: OperationCreate[];
+  onSubmit: FormikOnSubmit<{ transformations?: OperationRead[] }>;
+}> = ({ operations, onSubmit }) => {
+  const [editingTransformation, toggleEditingTransformation] = useToggle(false);
+  const { mode } = useConnectionFormService();
+  const initialValues = useMemo(
+    () => ({
+      transformations: getInitialTransformations(operations || []),
+    }),
+    [operations]
+  );
+
+  return (
+    <FormCard<{ transformations?: OperationRead[] }>
+      title={<FormattedMessage id="connection.customTransformations" />}
+      collapsible
+      bottomSeparator
+      form={{
+        initialValues,
+        enableReinitialize: true,
+        onSubmit,
+      }}
+      submitDisabled={editingTransformation}
+    >
+      <FieldArray name="transformations">
+        {(formProps) => (
+          <TransformationField
+            {...formProps}
+            mode={mode}
+            onStartEdit={toggleEditingTransformation}
+            onEndEdit={toggleEditingTransformation}
+          />
+        )}
+      </FieldArray>
+    </FormCard>
+  );
+};
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab/DbtCloudTransformationsCard.module.scss b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/DbtCloudTransformationsCard.module.scss
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab/DbtCloudTransformationsCard.module.scss
rename to airbyte-webapp/src/pages/connections/ConnectionTransformationPage/DbtCloudTransformationsCard.module.scss
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab/DbtCloudTransformationsCard.tsx b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/DbtCloudTransformationsCard.tsx
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab/DbtCloudTransformationsCard.tsx
rename to airbyte-webapp/src/pages/connections/ConnectionTransformationPage/DbtCloudTransformationsCard.tsx
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/NormalizationCard.tsx b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/NormalizationCard.tsx
new file mode 100644
index 000000000000..13d50871783d
--- /dev/null
+++ b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/NormalizationCard.tsx
@@ -0,0 +1,37 @@
+import { Field } from "formik";
+import { useMemo } from "react";
+import { FormattedMessage } from "react-intl";
+
+import { NormalizationType } from "core/domain/connection";
+import { OperationRead } from "core/request/AirbyteClient";
+import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
+import { FormikOnSubmit } from "types/formik";
+import { NormalizationField } from "views/Connection/ConnectionForm/components/NormalizationField";
+import { getInitialNormalization } from "views/Connection/ConnectionForm/formConfig";
+import { FormCard } from "views/Connection/FormCard";
+
+export const NormalizationCard: React.FC<{
+  operations?: OperationRead[];
+  onSubmit: FormikOnSubmit<{ normalization?: NormalizationType }>;
+}> = ({ operations, onSubmit }) => {
+  const { mode } = useConnectionFormService();
+  const initialValues = useMemo(
+    () => ({
+      normalization: getInitialNormalization(operations, true),
+    }),
+    [operations]
+  );
+
+  return (
+    <FormCard<{ normalization?: NormalizationType }>
+      form={{
+        initialValues,
+        onSubmit,
+      }}
+      title={<FormattedMessage id="connection.normalization" />}
+      collapsible
+    >
+      <Field name="normalization" component={NormalizationField} mode={mode} />
+    </FormCard>
+  );
+};
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab/dbt-bit_tm.svg b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/dbt-bit_tm.svg
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab/dbt-bit_tm.svg
rename to airbyte-webapp/src/pages/connections/ConnectionTransformationPage/dbt-bit_tm.svg
diff --git a/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/index.ts b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/index.ts
new file mode 100644
index 000000000000..67b3d5f6c6e9
--- /dev/null
+++ b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/index.ts
@@ -0,0 +1 @@
+export { ConnectionTransformationPage as default } from "./ConnectionTransformationPage";
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab/octavia-worker.png b/airbyte-webapp/src/pages/connections/ConnectionTransformationPage/octavia-worker.png
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionTransformationTab/octavia-worker.png
rename to airbyte-webapp/src/pages/connections/ConnectionTransformationPage/octavia-worker.png
diff --git a/airbyte-webapp/src/pages/connections/ConnectionsRoutes.tsx b/airbyte-webapp/src/pages/connections/ConnectionsRoutes.tsx
new file mode 100644
index 000000000000..52d50bec3273
--- /dev/null
+++ b/airbyte-webapp/src/pages/connections/ConnectionsRoutes.tsx
@@ -0,0 +1,33 @@
+import React, { Suspense } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+
+import { LoadingPage } from "components";
+
+import { RoutePaths } from "../routePaths";
+import { ConnectionRoutePaths } from "./types";
+
+const CreateConnectionPage = React.lazy(() => import("./CreateConnectionPage"));
+const ConnectionPage = React.lazy(() => import("./ConnectionPage"));
+const ConnectionReplicationPage = React.lazy(() => import("./ConnectionReplicationPage"));
+const ConnectionSettingsPage = React.lazy(() => import("./ConnectionSettingsPage"));
+const ConnectionStatusPage = React.lazy(() => import("./ConnectionStatusPage"));
+const ConnectionTransformationPage = React.lazy(() => import("./ConnectionTransformationPage"));
+const AllConnectionsPage = React.lazy(() => import("./AllConnectionsPage"));
+
+export const ConnectionsRoutes: React.FC = () => (
+  <Suspense fallback={<LoadingPage />}>
+    <Routes>
+      <Route path={RoutePaths.ConnectionNew} element={<CreateConnectionPage />} />
+      <Route path={ConnectionRoutePaths.Root} element={<ConnectionPage />}>
+        <Route path={ConnectionRoutePaths.Status} element={<ConnectionStatusPage />} />
+        <Route path={ConnectionRoutePaths.Replication} element={<ConnectionReplicationPage />} />
+        <Route path={ConnectionRoutePaths.Transformation} element={<ConnectionTransformationPage />} />
+        <Route path={ConnectionRoutePaths.Settings} element={<ConnectionSettingsPage />} />
+        <Route index element={<Navigate to={ConnectionRoutePaths.Status} replace />} />
+      </Route>
+      <Route index element={<AllConnectionsPage />} />
+    </Routes>
+  </Suspense>
+);
+
+export default ConnectionsRoutes;
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ConnectionCreateDestinationForm.tsx b/airbyte-webapp/src/pages/connections/CreateConnectionPage/ConnectionCreateDestinationForm.tsx
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ConnectionCreateDestinationForm.tsx
rename to airbyte-webapp/src/pages/connections/CreateConnectionPage/ConnectionCreateDestinationForm.tsx
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ConnectionCreateSourceForm.tsx b/airbyte-webapp/src/pages/connections/CreateConnectionPage/ConnectionCreateSourceForm.tsx
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ConnectionCreateSourceForm.tsx
rename to airbyte-webapp/src/pages/connections/CreateConnectionPage/ConnectionCreateSourceForm.tsx
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx b/airbyte-webapp/src/pages/connections/CreateConnectionPage/CreateConnectionPage.tsx
similarity index 98%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx
rename to airbyte-webapp/src/pages/connections/CreateConnectionPage/CreateConnectionPage.tsx
index 647a6ac99001..d66cb375bfe6 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx
+++ b/airbyte-webapp/src/pages/connections/CreateConnectionPage/CreateConnectionPage.tsx
@@ -5,7 +5,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { LoadingPage } from "components";
 import { CloudInviteUsersHint } from "components/CloudInviteUsersHint";
 import { HeadTitle } from "components/common/HeadTitle";
-import ConnectionBlock from "components/ConnectionBlock";
+import { ConnectionBlock } from "components/connection/ConnectionBlock";
 import { FormPageContent } from "components/ConnectorBlocks";
 import { CreateConnectionForm } from "components/CreateConnection/CreateConnectionForm";
 import { PageHeader } from "components/ui/PageHeader";
@@ -72,7 +72,7 @@ function usePreloadData(): {
   return { source, sourceDefinition, destination, destinationDefinition };
 }
 
-export const CreationFormPage: React.FC = () => {
+export const CreateConnectionPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.CONNECTIONS_NEW);
   const location = useLocation();
   const { formatMessage } = useIntl();
@@ -250,5 +250,3 @@ export const CreationFormPage: React.FC = () => {
     </>
   );
 };
-
-export default CreationFormPage;
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ExistingEntityForm.module.scss b/airbyte-webapp/src/pages/connections/CreateConnectionPage/ExistingEntityForm.module.scss
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ExistingEntityForm.module.scss
rename to airbyte-webapp/src/pages/connections/CreateConnectionPage/ExistingEntityForm.module.scss
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ExistingEntityForm.tsx b/airbyte-webapp/src/pages/connections/CreateConnectionPage/ExistingEntityForm.tsx
similarity index 100%
rename from airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ExistingEntityForm.tsx
rename to airbyte-webapp/src/pages/connections/CreateConnectionPage/ExistingEntityForm.tsx
diff --git a/airbyte-webapp/src/pages/connections/CreateConnectionPage/index.ts b/airbyte-webapp/src/pages/connections/CreateConnectionPage/index.ts
new file mode 100644
index 000000000000..591224b8c250
--- /dev/null
+++ b/airbyte-webapp/src/pages/connections/CreateConnectionPage/index.ts
@@ -0,0 +1 @@
+export { CreateConnectionPage as default } from "./CreateConnectionPage";
diff --git a/airbyte-webapp/src/pages/connections/types.ts b/airbyte-webapp/src/pages/connections/types.ts
new file mode 100644
index 000000000000..c0dba219fe90
--- /dev/null
+++ b/airbyte-webapp/src/pages/connections/types.ts
@@ -0,0 +1,7 @@
+export const enum ConnectionRoutePaths {
+  Root = ":connectionId/*",
+  Status = "status",
+  Transformation = "transformation",
+  Replication = "replication",
+  Settings = "settings",
+}
diff --git a/airbyte-webapp/src/pages/routes.tsx b/airbyte-webapp/src/pages/routes.tsx
index 9b4dc3cd7c43..6dbd338e4c5b 100644
--- a/airbyte-webapp/src/pages/routes.tsx
+++ b/airbyte-webapp/src/pages/routes.tsx
@@ -15,8 +15,8 @@ import MainView from "views/layout/MainView";
 import { WorkspaceRead } from "../core/request/AirbyteClient";
 import { RoutePaths, DestinationPaths } from "./routePaths";
 
-const ConnectionPage = React.lazy(() => import("./ConnectionPage"));
-const CreationFormPage = React.lazy(() => import("./ConnectionPage/pages/CreationFormPage"));
+const ConnectionsRoutes = React.lazy(() => import("./connections/ConnectionsRoutes"));
+const CreateConnectionPage = React.lazy(() => import("./connections/CreateConnectionPage"));
 const ConnectorBuilderPage = React.lazy(() => import("./ConnectorBuilderPage/ConnectorBuilderPage"));
 
 const AllDestinationsPage = React.lazy(() => import("./destination/AllDestinationsPage"));
@@ -48,14 +48,14 @@ const MainViewRoutes: React.FC = () => {
           <Route path={RoutePaths.Destination}>
             <Route index element={<AllDestinationsPage />} />
             <Route path={DestinationPaths.NewDestination} element={<CreateDestinationPage />} />
-            <Route path={DestinationPaths.NewConnection} element={<CreationFormPage />} />
+            <Route path={DestinationPaths.NewConnection} element={<CreateConnectionPage />} />
             <Route path={DestinationPaths.Root} element={<DestinationItemPage />}>
               <Route path={DestinationPaths.Settings} element={<DestinationSettingsPage />} />
               <Route index element={<DestinationOverviewPage />} />
             </Route>
           </Route>
           <Route path={`${RoutePaths.Source}/*`} element={<SourcesPage />} />
-          <Route path={`${RoutePaths.Connections}/*`} element={<ConnectionPage />} />
+          <Route path={`${RoutePaths.Connections}/*`} element={<ConnectionsRoutes />} />
           <Route path={`${RoutePaths.Settings}/*`} element={<SettingsPage />} />
 
           <Route path="*" element={<Navigate to={RoutePaths.Connections} />} />