diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/Arrow.tsx b/airbyte-webapp/src/components/connection/CatalogTree/Arrow.tsx
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/components/Arrow.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/Arrow.tsx
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/BulkHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.module.scss
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/components/BulkHeader.module.scss
rename to airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.module.scss
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/BulkHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx
similarity index 96%
rename from airbyte-webapp/src/views/Connection/CatalogTree/components/BulkHeader.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx
index fabf20d4b6e3..9788a0da07f8 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/components/BulkHeader.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/BulkHeader.tsx
@@ -11,13 +11,13 @@ import { SyncSchemaField, SyncSchemaFieldObject, SyncSchemaStream, traverseSchem
 import { DestinationSyncMode, SyncMode } from "core/request/AirbyteClient";
 import { useBulkEditService } from "hooks/services/BulkEdit/BulkEditService";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
+import { SUPPORTED_MODES } from "views/Connection/ConnectionForm/formConfig";
 
-import { SUPPORTED_MODES } from "../../ConnectionForm/formConfig";
-import { ArrowCell, CheckboxCell, HeaderCell } from "../styles";
-import { flatten, getPathType } from "../utils";
 import styles from "./BulkHeader.module.scss";
 import { pathDisplayName, PathPopout } from "./PathPopout";
+import { ArrowCell, CheckboxCell, HeaderCell } from "./styles";
 import { SyncSettingsDropdown } from "./SyncSettingsDropdown";
+import { flatten, getPathType } from "./utils";
 
 const ActionCell = styled.div`
   display: flex;
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.module.scss
similarity index 90%
rename from airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.module.scss
rename to airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.module.scss
index 1ccdb8880366..ab6bdcf4c2b0 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.module.scss
+++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.module.scss
@@ -1,4 +1,4 @@
-@use "../../../scss/colors";
+@use "scss/colors";
 
 .streamFieldTableContainer {
   margin-left: 85px;
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.tsx
similarity index 99%
rename from airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.tsx
index c408151a8426..2e1c03fdeba5 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogSection.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogSection.tsx
@@ -6,17 +6,17 @@ import { DropDownOptionDataItem } from "components/ui/DropDown";
 
 import { SyncSchemaField, SyncSchemaFieldObject, SyncSchemaStream } from "core/domain/catalog";
 import { traverseSchemaToField } from "core/domain/catalog/fieldUtil";
-import { useDestinationNamespace } from "hooks/connection/useDestinationNamespace";
-import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
-import { equal, naturalComparatorBy } from "utils/objects";
-import { ConnectionFormValues, SUPPORTED_MODES } from "views/Connection/ConnectionForm/formConfig";
-
 import {
   AirbyteStreamConfiguration,
   DestinationSyncMode,
   NamespaceDefinitionType,
   SyncMode,
-} from "../../../core/request/AirbyteClient";
+} from "core/request/AirbyteClient";
+import { useDestinationNamespace } from "hooks/connection/useDestinationNamespace";
+import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
+import { equal, naturalComparatorBy } from "utils/objects";
+import { ConnectionFormValues, SUPPORTED_MODES } from "views/Connection/ConnectionForm/formConfig";
+
 import styles from "./CatalogSection.module.scss";
 import { StreamFieldTable } from "./StreamFieldTable";
 import { StreamHeader } from "./StreamHeader";
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogTree.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx
similarity index 97%
rename from airbyte-webapp/src/views/Connection/CatalogTree/CatalogTree.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx
index 20c99b7565a6..b00a71c0cf9e 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogTree.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTree.tsx
@@ -7,11 +7,11 @@ import { BulkEditServiceProvider } from "hooks/services/BulkEdit/BulkEditService
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { naturalComparatorBy } from "utils/objects";
 
+import { BulkHeader } from "./BulkHeader";
 import { CatalogTreeBody } from "./CatalogTreeBody";
 import { CatalogTreeHeader } from "./CatalogTreeHeader";
 import { CatalogTreeSearch } from "./CatalogTreeSearch";
 import { CatalogTreeSubheader } from "./CatalogTreeSubheader";
-import { BulkHeader } from "./components/BulkHeader";
 
 interface CatalogTreeProps {
   streams: SyncSchemaStream[];
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogTreeBody.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeBody.module.scss
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/CatalogTreeBody.module.scss
rename to airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeBody.module.scss
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogTreeBody.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeBody.tsx
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/CatalogTreeBody.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeBody.tsx
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogTreeHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeHeader.module.scss
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/CatalogTreeHeader.module.scss
rename to airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeHeader.module.scss
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogTreeHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeHeader.tsx
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/CatalogTreeHeader.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeHeader.tsx
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogTreeSearch.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/CatalogTreeSearch.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSearch.tsx
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogTreeSubheader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSubheader.module.scss
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/CatalogTreeSubheader.module.scss
rename to airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSubheader.module.scss
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/CatalogTreeSubheader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSubheader.tsx
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/CatalogTreeSubheader.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/CatalogTreeSubheader.tsx
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/DataTypeCell.tsx b/airbyte-webapp/src/components/connection/CatalogTree/DataTypeCell.tsx
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/components/DataTypeCell.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/DataTypeCell.tsx
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/FieldHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/FieldHeader.tsx
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/FieldHeader.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/FieldHeader.tsx
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/FieldRow.tsx b/airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx
similarity index 94%
rename from airbyte-webapp/src/views/Connection/CatalogTree/FieldRow.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx
index 125833bfe2a7..c87a61578f7a 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/FieldRow.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx
@@ -10,8 +10,8 @@ import { AirbyteStreamConfiguration } from "core/request/AirbyteClient";
 import { equal } from "utils/objects";
 import { useTranslateDataType } from "utils/useTranslateDataType";
 
-import DataTypeCell from "./components/DataTypeCell";
-import { pathDisplayName } from "./components/PathPopout";
+import DataTypeCell from "./DataTypeCell";
+import { pathDisplayName } from "./PathPopout";
 import { NameContainer } from "./styles";
 
 interface FieldRowProps {
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopout.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/PathPopout.module.scss
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopout.module.scss
rename to airbyte-webapp/src/components/connection/CatalogTree/PathPopout.module.scss
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopout.tsx b/airbyte-webapp/src/components/connection/CatalogTree/PathPopout.tsx
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopout.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/PathPopout.tsx
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopoutButton.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.module.scss
similarity index 87%
rename from airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopoutButton.module.scss
rename to airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.module.scss
index 2d27778881ed..0b1615bbf20e 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopoutButton.module.scss
+++ b/airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.module.scss
@@ -1,5 +1,5 @@
-@use "../../../../scss/colors";
-@use "../../../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 
 .arrow {
   color: colors.$grey-300;
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopoutButton.tsx b/airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.tsx
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopoutButton.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.tsx
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/StreamFieldTable.tsx b/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx
similarity index 87%
rename from airbyte-webapp/src/views/Connection/CatalogTree/StreamFieldTable.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx
index bf1a1dd2c756..538e1b5b8210 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/StreamFieldTable.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamFieldTable.tsx
@@ -2,12 +2,12 @@ import React from "react";
 import styled from "styled-components";
 
 import { SyncSchemaField, SyncSchemaFieldObject } from "core/domain/catalog";
+import { AirbyteStreamConfiguration } from "core/request/AirbyteClient";
 
-import { AirbyteStreamConfiguration } from "../../../core/request/AirbyteClient";
-import { pathDisplayName } from "./components/PathPopout";
-import { TreeRowWrapper } from "./components/TreeRowWrapper";
 import { FieldHeader } from "./FieldHeader";
 import { FieldRow } from "./FieldRow";
+import { pathDisplayName } from "./PathPopout";
+import { TreeRowWrapper } from "./TreeRowWrapper";
 
 const RowsContainer = styled.div`
   background: ${({ theme }) => theme.whiteColor};
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/StreamHeader.module.scss b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
similarity index 94%
rename from airbyte-webapp/src/views/Connection/CatalogTree/StreamHeader.module.scss
rename to airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
index 576fef3a3806..2bd4fa8812e8 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/StreamHeader.module.scss
+++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.module.scss
@@ -1,5 +1,5 @@
-@use "../../../scss/colors";
-@use "../../../scss/variables";
+@use "scss/colors";
+@use "scss/variables";
 @forward "./CatalogTreeBody.module.scss";
 
 .icon {
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/StreamHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
similarity index 96%
rename from airbyte-webapp/src/views/Connection/CatalogTree/StreamHeader.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
index 8ce7252da1d5..eacb3024d886 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/StreamHeader.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
@@ -14,11 +14,11 @@ import { Path, SyncSchemaField, SyncSchemaStream } from "core/domain/catalog";
 import { DestinationSyncMode, SyncMode } from "core/request/AirbyteClient";
 import { useBulkEditSelect } from "hooks/services/BulkEdit/BulkEditService";
 
-import { Arrow as ArrowBlock } from "./components/Arrow";
-import { IndexerType, PathPopout } from "./components/PathPopout";
-import { SyncSettingsDropdown } from "./components/SyncSettingsDropdown";
+import { Arrow as ArrowBlock } from "./Arrow";
+import { IndexerType, PathPopout } from "./PathPopout";
 import styles from "./StreamHeader.module.scss";
 import { ArrowCell, HeaderCell } from "./styles";
+import { SyncSettingsDropdown } from "./SyncSettingsDropdown";
 
 const EmptyField = styled.span`
   color: ${({ theme }) => theme.greyColor40};
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/SyncSettingsDropdown.tsx b/airbyte-webapp/src/components/connection/CatalogTree/SyncSettingsDropdown.tsx
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/components/SyncSettingsDropdown.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/SyncSettingsDropdown.tsx
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/TreeRowWrapper.tsx b/airbyte-webapp/src/components/connection/CatalogTree/TreeRowWrapper.tsx
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/components/TreeRowWrapper.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/TreeRowWrapper.tsx
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/index.tsx b/airbyte-webapp/src/components/connection/CatalogTree/index.tsx
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/index.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/index.tsx
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/styles.tsx b/airbyte-webapp/src/components/connection/CatalogTree/styles.tsx
similarity index 100%
rename from airbyte-webapp/src/views/Connection/CatalogTree/styles.tsx
rename to airbyte-webapp/src/components/connection/CatalogTree/styles.tsx
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/utils.ts b/airbyte-webapp/src/components/connection/CatalogTree/utils.ts
similarity index 89%
rename from airbyte-webapp/src/views/Connection/CatalogTree/utils.ts
rename to airbyte-webapp/src/components/connection/CatalogTree/utils.ts
index 2209a1f9732c..ee4b7add856b 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/utils.ts
+++ b/airbyte-webapp/src/components/connection/CatalogTree/utils.ts
@@ -1,6 +1,6 @@
 import { SyncSchemaField } from "core/domain/catalog";
 
-import { IndexerType } from "./components/PathPopout";
+import { IndexerType } from "./PathPopout";
 
 export const flatten = (fArr: SyncSchemaField[], arr: SyncSchemaField[] = []): SyncSchemaField[] =>
   fArr.reduce<SyncSchemaField[]>((acc, f) => {
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/SyncCatalogField.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/SyncCatalogField.tsx
index c8d5603809d0..7218199752ab 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/SyncCatalogField.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/SyncCatalogField.tsx
@@ -2,12 +2,12 @@ import { FieldProps } from "formik";
 import React, { useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 
+import { CatalogTree } from "components/connection/CatalogTree";
 import { Text } from "components/ui/Text";
 
 import { SyncSchemaStream } from "core/domain/catalog";
 import { DestinationSyncMode } from "core/request/AirbyteClient";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
-import { CatalogTree } from "views/Connection/CatalogTree";
 
 import styles from "./SyncCatalogField.module.scss";