diff --git a/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorRow.tsx b/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorRow.tsx
index fafb4dd7c9a6..7ce55c8de178 100644
--- a/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorRow.tsx
+++ b/airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorRow.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { Button } from "components";
-import { Tooltip } from "components/base/Tooltip";
 import { CrossIcon } from "components/icons/CrossIcon";
 import { PencilIcon } from "components/icons/PencilIcon";
+import { Tooltip } from "components/ui/Tooltip";
 
 import styles from "./EditorRow.module.scss";
 
diff --git a/airbyte-webapp/src/components/CenteredPageComponents/PaddedCard.tsx b/airbyte-webapp/src/components/CenteredPageComponents/PaddedCard.tsx
index da4759ccb125..ab9f9cd6d14f 100644
--- a/airbyte-webapp/src/components/CenteredPageComponents/PaddedCard.tsx
+++ b/airbyte-webapp/src/components/CenteredPageComponents/PaddedCard.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-import { Card } from "components/base/Card";
+import { Card } from "components/ui/Card";
 
 const PaddedCard = styled(Card)`
   width: 100%;
diff --git a/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx b/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx
index ac89d371f51a..ff87ee8d3d32 100644
--- a/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx
+++ b/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { Button } from "components/base/Button";
+import { Button } from "components/ui/Button";
 import { Modal } from "components/ui/Modal";
 
 import useLoadingState from "../../hooks/useLoadingState";
diff --git a/airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.tsx b/airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.tsx
index efa5c5bdb25d..ea90feb54c7d 100644
--- a/airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.tsx
+++ b/airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.tsx
@@ -3,7 +3,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 import React from "react";
 
-import { Card } from "../base/Card";
+import { Card } from "components/ui/Card";
+
 import { ConnectionBlockItem, Content } from "./components/ConnectionBlockItem";
 import styles from "./ConnectionBlock.module.scss";
 
diff --git a/airbyte-webapp/src/components/ConnectorBlocks/TableItemTitle.tsx b/airbyte-webapp/src/components/ConnectorBlocks/TableItemTitle.tsx
index 2c73e12475cb..7c6bec992db9 100644
--- a/airbyte-webapp/src/components/ConnectorBlocks/TableItemTitle.tsx
+++ b/airbyte-webapp/src/components/ConnectorBlocks/TableItemTitle.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { Button, DropDownRow } from "components";
-import { Popout } from "components/base/Popout/Popout";
-import { Text } from "components/base/Text";
 import { ReleaseStageBadge } from "components/ReleaseStageBadge";
+import { Popout } from "components/ui/Popout";
+import { Text } from "components/ui/Text";
 
 import { ReleaseStage } from "core/request/AirbyteClient";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
diff --git a/airbyte-webapp/src/components/CreateConnectionContent/components/TryAfterErrorBlock.tsx b/airbyte-webapp/src/components/CreateConnectionContent/components/TryAfterErrorBlock.tsx
index ecc18a619b35..4c7a1145e86d 100644
--- a/airbyte-webapp/src/components/CreateConnectionContent/components/TryAfterErrorBlock.tsx
+++ b/airbyte-webapp/src/components/CreateConnectionContent/components/TryAfterErrorBlock.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Button } from "components/base/Button";
-import { Text } from "components/base/Text";
 import { StatusIcon } from "components/StatusIcon";
+import { Button } from "components/ui/Button";
+import { Text } from "components/ui/Text";
 
 import styles from "./TryAfterErrorBlock.module.scss";
 
diff --git a/airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx b/airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx
index 52231b1ead6f..ca8617e08a50 100644
--- a/airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx
+++ b/airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx
@@ -3,12 +3,12 @@ import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 
-import { Button, H5 } from "components";
+import { H5 } from "components/base/Titles";
+import { Button } from "components/ui/Button";
+import { Card } from "components/ui/Card";
 
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
 
-import { Card } from "../base/Card";
-
 interface IProps {
   type: "source" | "destination" | "connection";
   onDelete: () => Promise<unknown>;
diff --git a/airbyte-webapp/src/components/EmptyResourceListView/EmptyResourceListView.tsx b/airbyte-webapp/src/components/EmptyResourceListView/EmptyResourceListView.tsx
index 94def47a0b80..b6ba7f5d8ef3 100644
--- a/airbyte-webapp/src/components/EmptyResourceListView/EmptyResourceListView.tsx
+++ b/airbyte-webapp/src/components/EmptyResourceListView/EmptyResourceListView.tsx
@@ -2,8 +2,8 @@ import classNames from "classnames";
 import { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Button } from "components/base/Button";
-import { Text } from "components/base/Text";
+import { Button } from "components/ui/Button";
+import { Text } from "components/ui/Text";
 
 import styles from "./EmptyResourceListView.module.scss";
 
diff --git a/airbyte-webapp/src/components/GroupControls/index.stories.tsx b/airbyte-webapp/src/components/GroupControls/index.stories.tsx
index a03c8579d49e..0a318dba94ce 100644
--- a/airbyte-webapp/src/components/GroupControls/index.stories.tsx
+++ b/airbyte-webapp/src/components/GroupControls/index.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
-import { Card } from "components/base";
+import { Card } from "components/ui/Card";
 
 import { FormBlock, FormConditionItem } from "core/form/types";
 import { GroupLabel } from "views/Connector/ServiceForm/components/Sections/GroupLabel";
diff --git a/airbyte-webapp/src/components/JobItem/components/LinkToAttemptButton.tsx b/airbyte-webapp/src/components/JobItem/components/LinkToAttemptButton.tsx
index 3a935fb3ed8d..507a2dc97b78 100644
--- a/airbyte-webapp/src/components/JobItem/components/LinkToAttemptButton.tsx
+++ b/airbyte-webapp/src/components/JobItem/components/LinkToAttemptButton.tsx
@@ -4,8 +4,8 @@ import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useDebounce } from "react-use";
 
-import { Button } from "components";
-import { Tooltip } from "components/base/Tooltip";
+import { Button } from "components/ui/Button";
+import { Tooltip } from "components/ui/Tooltip";
 
 import { copyToClipboard } from "utils/clipboard";
 
diff --git a/airbyte-webapp/src/components/JobItem/components/ResetStreamDetails.tsx b/airbyte-webapp/src/components/JobItem/components/ResetStreamDetails.tsx
index 75572aacd8ec..ab035f2596b6 100644
--- a/airbyte-webapp/src/components/JobItem/components/ResetStreamDetails.tsx
+++ b/airbyte-webapp/src/components/JobItem/components/ResetStreamDetails.tsx
@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import React from "react";
 
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 
 import styles from "./ResetStreamDetails.module.scss";
 
diff --git a/airbyte-webapp/src/components/LabeledControl/ControlLabels.tsx b/airbyte-webapp/src/components/LabeledControl/ControlLabels.tsx
index adf8a6c2a22e..cab7607fdf12 100644
--- a/airbyte-webapp/src/components/LabeledControl/ControlLabels.tsx
+++ b/airbyte-webapp/src/components/LabeledControl/ControlLabels.tsx
@@ -2,9 +2,9 @@ import className from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Text } from "components/base/Text";
-import { InfoTooltip } from "components/base/Tooltip";
 import Label from "components/Label";
+import { Text } from "components/ui/Text";
+import { InfoTooltip } from "components/ui/Tooltip";
 
 import styles from "./ControlLabels.module.scss";
 
diff --git a/airbyte-webapp/src/components/LabeledInput/LabeledInput.tsx b/airbyte-webapp/src/components/LabeledInput/LabeledInput.tsx
index c287c50e269a..74d93305ab1f 100644
--- a/airbyte-webapp/src/components/LabeledInput/LabeledInput.tsx
+++ b/airbyte-webapp/src/components/LabeledInput/LabeledInput.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-import { Input, InputProps } from "components/base";
 import { ControlLabels, ControlLabelsProps } from "components/LabeledControl";
+import { Input, InputProps } from "components/ui/Input";
 
 type LabeledInputProps = Pick<ControlLabelsProps, "success" | "message" | "label" | "labelAdditionLength"> & InputProps;
 
diff --git a/airbyte-webapp/src/components/LabeledSwitch/LabeledSwitch.tsx b/airbyte-webapp/src/components/LabeledSwitch/LabeledSwitch.tsx
index fb4b806f3077..31b95f86757e 100644
--- a/airbyte-webapp/src/components/LabeledSwitch/LabeledSwitch.tsx
+++ b/airbyte-webapp/src/components/LabeledSwitch/LabeledSwitch.tsx
@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import React from "react";
 
-import { CheckBox, Switch } from "components/base";
+import { CheckBox, Switch } from "components/ui";
 
 import styles from "./LabeledSwitch.module.scss";
 
diff --git a/airbyte-webapp/src/components/PageTitle/PageTitle.tsx b/airbyte-webapp/src/components/PageTitle/PageTitle.tsx
index e21846eb3345..6d2eab942915 100644
--- a/airbyte-webapp/src/components/PageTitle/PageTitle.tsx
+++ b/airbyte-webapp/src/components/PageTitle/PageTitle.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { H3 } from "components";
+import { H3 } from "components/base/Titles";
 
 interface PageTitleProps {
   withLine?: boolean;
diff --git a/airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx b/airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx
index 73a283442cb8..af9693a35b61 100644
--- a/airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx
+++ b/airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx
@@ -1,8 +1,8 @@
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { Tooltip } from "components/base/Tooltip";
 import { GAIcon } from "components/icons/GAIcon";
+import { Tooltip } from "components/ui/Tooltip";
 
 import { ReleaseStage } from "core/request/AirbyteClient";
 
diff --git a/airbyte-webapp/src/components/base/Button/index.tsx b/airbyte-webapp/src/components/base/Button/index.tsx
deleted file mode 100644
index 0064dee8faf8..000000000000
--- a/airbyte-webapp/src/components/base/Button/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { Button } from "./Button";
diff --git a/airbyte-webapp/src/components/base/CheckBox/index.tsx b/airbyte-webapp/src/components/base/CheckBox/index.tsx
deleted file mode 100644
index 315f3895757c..000000000000
--- a/airbyte-webapp/src/components/base/CheckBox/index.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import CheckBox from "./CheckBox";
-
-export default CheckBox;
-export { CheckBox };
diff --git a/airbyte-webapp/src/components/index.tsx b/airbyte-webapp/src/components/index.tsx
index 7b71c30e627d..0c0ec0b3b2d9 100644
--- a/airbyte-webapp/src/components/index.tsx
+++ b/airbyte-webapp/src/components/index.tsx
@@ -1,4 +1,4 @@
-export * from "./base";
+export * from "./ui";
 
 export * from "./ArrayOfObjectsEditor";
 export * from "./DefaultLogoCatalog";
diff --git a/airbyte-webapp/src/components/base/Banner/AlertBanner.module.scss b/airbyte-webapp/src/components/ui/Banner/AlertBanner.module.scss
similarity index 100%
rename from airbyte-webapp/src/components/base/Banner/AlertBanner.module.scss
rename to airbyte-webapp/src/components/ui/Banner/AlertBanner.module.scss
diff --git a/airbyte-webapp/src/components/base/Banner/AlertBanner.tsx b/airbyte-webapp/src/components/ui/Banner/AlertBanner.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Banner/AlertBanner.tsx
rename to airbyte-webapp/src/components/ui/Banner/AlertBanner.tsx
diff --git a/airbyte-webapp/src/components/ui/Banner/index.stories.tsx b/airbyte-webapp/src/components/ui/Banner/index.stories.tsx
new file mode 100644
index 000000000000..8099630d5d43
--- /dev/null
+++ b/airbyte-webapp/src/components/ui/Banner/index.stories.tsx
@@ -0,0 +1,16 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { AlertBanner } from "./AlertBanner";
+
+export default {
+  title: "UI/AlertBanner",
+  component: AlertBanner,
+  argTypes: {},
+} as ComponentMeta<typeof AlertBanner>;
+
+const Template: ComponentStory<typeof AlertBanner> = (args) => <AlertBanner {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  message: "This is the AlertBanner component!",
+};
diff --git a/airbyte-webapp/src/components/base/Button/Button.module.scss b/airbyte-webapp/src/components/ui/Button/Button.module.scss
similarity index 100%
rename from airbyte-webapp/src/components/base/Button/Button.module.scss
rename to airbyte-webapp/src/components/ui/Button/Button.module.scss
diff --git a/airbyte-webapp/src/components/base/Button/Button.tsx b/airbyte-webapp/src/components/ui/Button/Button.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Button/Button.tsx
rename to airbyte-webapp/src/components/ui/Button/Button.tsx
diff --git a/airbyte-webapp/src/components/base/Button/index.stories.tsx b/airbyte-webapp/src/components/ui/Button/index.stories.tsx
similarity index 98%
rename from airbyte-webapp/src/components/base/Button/index.stories.tsx
rename to airbyte-webapp/src/components/ui/Button/index.stories.tsx
index 14610676fd0a..26fade189d62 100644
--- a/airbyte-webapp/src/components/base/Button/index.stories.tsx
+++ b/airbyte-webapp/src/components/ui/Button/index.stories.tsx
@@ -5,7 +5,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { Button } from "./Button";
 
 export default {
-  title: "Ui/Button",
+  title: "UI/Button",
   component: Button,
   argTypes: {
     backgroundColor: { control: "color" },
diff --git a/airbyte-webapp/src/components/ui/Button/index.tsx b/airbyte-webapp/src/components/ui/Button/index.tsx
new file mode 100644
index 000000000000..2157c1017657
--- /dev/null
+++ b/airbyte-webapp/src/components/ui/Button/index.tsx
@@ -0,0 +1,2 @@
+export * from "./Button";
+export * from "./types";
diff --git a/airbyte-webapp/src/components/base/Button/types.tsx b/airbyte-webapp/src/components/ui/Button/types.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Button/types.tsx
rename to airbyte-webapp/src/components/ui/Button/types.tsx
diff --git a/airbyte-webapp/src/components/base/Card/Card.module.scss b/airbyte-webapp/src/components/ui/Card/Card.module.scss
similarity index 100%
rename from airbyte-webapp/src/components/base/Card/Card.module.scss
rename to airbyte-webapp/src/components/ui/Card/Card.module.scss
diff --git a/airbyte-webapp/src/components/base/Card/Card.tsx b/airbyte-webapp/src/components/ui/Card/Card.tsx
similarity index 95%
rename from airbyte-webapp/src/components/base/Card/Card.tsx
rename to airbyte-webapp/src/components/ui/Card/Card.tsx
index c5c4c099f2d7..9efa55a6a608 100644
--- a/airbyte-webapp/src/components/base/Card/Card.tsx
+++ b/airbyte-webapp/src/components/ui/Card/Card.tsx
@@ -1,7 +1,8 @@
 import classNames from "classnames";
 import React from "react";
 
-import { H5 } from "../Titles";
+import { H5 } from "components/base/Titles";
+
 import styles from "./Card.module.scss";
 
 export interface CardProps {
diff --git a/airbyte-webapp/src/components/base/Card/index.stories.tsx b/airbyte-webapp/src/components/ui/Card/index.stories.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Card/index.stories.tsx
rename to airbyte-webapp/src/components/ui/Card/index.stories.tsx
diff --git a/airbyte-webapp/src/components/base/Card/index.tsx b/airbyte-webapp/src/components/ui/Card/index.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Card/index.tsx
rename to airbyte-webapp/src/components/ui/Card/index.tsx
diff --git a/airbyte-webapp/src/components/base/CheckBox/CheckBox.tsx b/airbyte-webapp/src/components/ui/CheckBox/CheckBox.tsx
similarity index 91%
rename from airbyte-webapp/src/components/base/CheckBox/CheckBox.tsx
rename to airbyte-webapp/src/components/ui/CheckBox/CheckBox.tsx
index e704bcadbc2c..155a1ba27790 100644
--- a/airbyte-webapp/src/components/base/CheckBox/CheckBox.tsx
+++ b/airbyte-webapp/src/components/ui/CheckBox/CheckBox.tsx
@@ -33,7 +33,7 @@ const CheckBoxContainer = styled.label<{
   position: relative;
 `;
 
-const CheckBox: React.FC<React.InputHTMLAttributes<HTMLInputElement> & { indeterminate?: boolean }> = ({
+export const CheckBox: React.FC<React.InputHTMLAttributes<HTMLInputElement> & { indeterminate?: boolean }> = ({
   indeterminate,
   ...props
 }) => (
@@ -47,5 +47,3 @@ const CheckBox: React.FC<React.InputHTMLAttributes<HTMLInputElement> & { indeter
     {indeterminate ? <FontAwesomeIcon icon={faMinus} /> : props.checked && <FontAwesomeIcon icon={faCheck} />}
   </CheckBoxContainer>
 );
-
-export default CheckBox;
diff --git a/airbyte-webapp/src/components/ui/CheckBox/index.ts b/airbyte-webapp/src/components/ui/CheckBox/index.ts
new file mode 100644
index 000000000000..6542e4920899
--- /dev/null
+++ b/airbyte-webapp/src/components/ui/CheckBox/index.ts
@@ -0,0 +1 @@
+export { CheckBox } from "./CheckBox";
diff --git a/airbyte-webapp/src/components/base/DropDown/CustomSelect.tsx b/airbyte-webapp/src/components/ui/DropDown/CustomSelect.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/DropDown/CustomSelect.tsx
rename to airbyte-webapp/src/components/ui/DropDown/CustomSelect.tsx
diff --git a/airbyte-webapp/src/components/base/DropDown/DropDown.tsx b/airbyte-webapp/src/components/ui/DropDown/DropDown.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/DropDown/DropDown.tsx
rename to airbyte-webapp/src/components/ui/DropDown/DropDown.tsx
diff --git a/airbyte-webapp/src/components/base/DropDown/SelectContainer.tsx b/airbyte-webapp/src/components/ui/DropDown/SelectContainer.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/DropDown/SelectContainer.tsx
rename to airbyte-webapp/src/components/ui/DropDown/SelectContainer.tsx
diff --git a/airbyte-webapp/src/components/base/DropDown/components/DropdownIndicator.tsx b/airbyte-webapp/src/components/ui/DropDown/components/DropdownIndicator.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/DropDown/components/DropdownIndicator.tsx
rename to airbyte-webapp/src/components/ui/DropDown/components/DropdownIndicator.tsx
diff --git a/airbyte-webapp/src/components/base/DropDown/components/Menu.tsx b/airbyte-webapp/src/components/ui/DropDown/components/Menu.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/DropDown/components/Menu.tsx
rename to airbyte-webapp/src/components/ui/DropDown/components/Menu.tsx
diff --git a/airbyte-webapp/src/components/base/DropDown/components/Option.tsx b/airbyte-webapp/src/components/ui/DropDown/components/Option.tsx
similarity index 97%
rename from airbyte-webapp/src/components/base/DropDown/components/Option.tsx
rename to airbyte-webapp/src/components/ui/DropDown/components/Option.tsx
index dabcb76d81b5..3ae388c635bd 100644
--- a/airbyte-webapp/src/components/base/DropDown/components/Option.tsx
+++ b/airbyte-webapp/src/components/ui/DropDown/components/Option.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { components, OptionProps } from "react-select";
 import styled from "styled-components";
 
-import CheckBox from "components/base/CheckBox";
+import { CheckBox } from "components/ui/CheckBox";
 
 import { OptionType } from "../DropDown";
 import Text from "./Text";
diff --git a/airbyte-webapp/src/components/base/DropDown/components/SingleValue.tsx b/airbyte-webapp/src/components/ui/DropDown/components/SingleValue.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/DropDown/components/SingleValue.tsx
rename to airbyte-webapp/src/components/ui/DropDown/components/SingleValue.tsx
diff --git a/airbyte-webapp/src/components/base/DropDown/components/Text.tsx b/airbyte-webapp/src/components/ui/DropDown/components/Text.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/DropDown/components/Text.tsx
rename to airbyte-webapp/src/components/ui/DropDown/components/Text.tsx
diff --git a/airbyte-webapp/src/components/base/DropDown/index.tsx b/airbyte-webapp/src/components/ui/DropDown/index.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/DropDown/index.tsx
rename to airbyte-webapp/src/components/ui/DropDown/index.tsx
diff --git a/airbyte-webapp/src/components/base/Input/Input.module.scss b/airbyte-webapp/src/components/ui/Input/Input.module.scss
similarity index 100%
rename from airbyte-webapp/src/components/base/Input/Input.module.scss
rename to airbyte-webapp/src/components/ui/Input/Input.module.scss
diff --git a/airbyte-webapp/src/components/base/Input/Input.test.tsx b/airbyte-webapp/src/components/ui/Input/Input.test.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Input/Input.test.tsx
rename to airbyte-webapp/src/components/ui/Input/Input.test.tsx
diff --git a/airbyte-webapp/src/components/base/Input/Input.tsx b/airbyte-webapp/src/components/ui/Input/Input.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Input/Input.tsx
rename to airbyte-webapp/src/components/ui/Input/Input.tsx
diff --git a/airbyte-webapp/src/components/base/Input/index.stories.tsx b/airbyte-webapp/src/components/ui/Input/index.stories.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Input/index.stories.tsx
rename to airbyte-webapp/src/components/ui/Input/index.stories.tsx
diff --git a/airbyte-webapp/src/components/base/Input/index.tsx b/airbyte-webapp/src/components/ui/Input/index.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Input/index.tsx
rename to airbyte-webapp/src/components/ui/Input/index.tsx
diff --git a/airbyte-webapp/src/components/ui/Modal/Modal.tsx b/airbyte-webapp/src/components/ui/Modal/Modal.tsx
index 880c41b5ca64..857174bb281a 100644
--- a/airbyte-webapp/src/components/ui/Modal/Modal.tsx
+++ b/airbyte-webapp/src/components/ui/Modal/Modal.tsx
@@ -2,7 +2,7 @@ import { Dialog } from "@headlessui/react";
 import classNames from "classnames";
 import React, { useState } from "react";
 
-import { Card } from "../../base/Card";
+import { Card } from "../Card";
 import styles from "./Modal.module.scss";
 
 export interface ModalProps {
diff --git a/airbyte-webapp/src/components/ui/Modal/index.stories.tsx b/airbyte-webapp/src/components/ui/Modal/index.stories.tsx
index c57c0e930040..fce5759c3fae 100644
--- a/airbyte-webapp/src/components/ui/Modal/index.stories.tsx
+++ b/airbyte-webapp/src/components/ui/Modal/index.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
-import { Button } from "components/base/Button";
+import { Button } from "components/ui/Button";
 
 import { Modal, ModalBody, ModalFooter } from ".";
 
diff --git a/airbyte-webapp/src/components/base/Multiselect/Multiselect.tsx b/airbyte-webapp/src/components/ui/Multiselect/Multiselect.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Multiselect/Multiselect.tsx
rename to airbyte-webapp/src/components/ui/Multiselect/Multiselect.tsx
diff --git a/airbyte-webapp/src/components/base/Multiselect/index.tsx b/airbyte-webapp/src/components/ui/Multiselect/index.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Multiselect/index.tsx
rename to airbyte-webapp/src/components/ui/Multiselect/index.tsx
diff --git a/airbyte-webapp/src/components/base/Popout/Popout.tsx b/airbyte-webapp/src/components/ui/Popout/Popout.tsx
similarity index 93%
rename from airbyte-webapp/src/components/base/Popout/Popout.tsx
rename to airbyte-webapp/src/components/ui/Popout/Popout.tsx
index 86aecf027e57..65ece47a34bf 100644
--- a/airbyte-webapp/src/components/base/Popout/Popout.tsx
+++ b/airbyte-webapp/src/components/ui/Popout/Popout.tsx
@@ -4,7 +4,7 @@ import { useToggle } from "react-use";
 import styled from "styled-components";
 
 import { DropDown } from "components";
-import { DropdownProps } from "components/base/DropDown";
+import { DropdownProps } from "components/ui/DropDown";
 
 const OutsideClickListener = styled.div`
   bottom: 0;
@@ -33,7 +33,7 @@ interface PopoutProps extends DropdownProps {
   title?: string;
 }
 
-const Popout: React.FC<PopoutProps> = ({ onChange, targetComponent, ...props }) => {
+export const Popout: React.FC<PopoutProps> = ({ onChange, targetComponent, ...props }) => {
   const [isOpen, toggleOpen] = useToggle(false);
 
   const onSelectChange = (value: Value, meta: ActionMeta<Value>) => {
@@ -88,5 +88,3 @@ const Popout: React.FC<PopoutProps> = ({ onChange, targetComponent, ...props })
     </>
   );
 };
-
-export { Popout };
diff --git a/airbyte-webapp/src/components/base/Popout/index.stories.tsx b/airbyte-webapp/src/components/ui/Popout/index.stories.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Popout/index.stories.tsx
rename to airbyte-webapp/src/components/ui/Popout/index.stories.tsx
diff --git a/airbyte-webapp/src/components/base/Popout/index.tsx b/airbyte-webapp/src/components/ui/Popout/index.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Popout/index.tsx
rename to airbyte-webapp/src/components/ui/Popout/index.tsx
diff --git a/airbyte-webapp/src/components/base/RadioButton/RadioButton.tsx b/airbyte-webapp/src/components/ui/RadioButton/RadioButton.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/RadioButton/RadioButton.tsx
rename to airbyte-webapp/src/components/ui/RadioButton/RadioButton.tsx
diff --git a/airbyte-webapp/src/components/base/RadioButton/index.tsx b/airbyte-webapp/src/components/ui/RadioButton/index.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/RadioButton/index.tsx
rename to airbyte-webapp/src/components/ui/RadioButton/index.tsx
diff --git a/airbyte-webapp/src/components/ui/SlickSlider/SlickSlider.tsx b/airbyte-webapp/src/components/ui/SlickSlider/SlickSlider.tsx
index 22316f3e2874..ec31d79174e8 100644
--- a/airbyte-webapp/src/components/ui/SlickSlider/SlickSlider.tsx
+++ b/airbyte-webapp/src/components/ui/SlickSlider/SlickSlider.tsx
@@ -4,7 +4,7 @@ import classnames from "classnames";
 import React, { useMemo } from "react";
 import Slider, { CustomArrowProps, Settings as SliderProps } from "react-slick";
 
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 
 import styles from "./SlickSlider.module.scss";
 
diff --git a/airbyte-webapp/src/components/base/Switch/Progress.svg b/airbyte-webapp/src/components/ui/Switch/Progress.svg
similarity index 100%
rename from airbyte-webapp/src/components/base/Switch/Progress.svg
rename to airbyte-webapp/src/components/ui/Switch/Progress.svg
diff --git a/airbyte-webapp/src/components/base/Switch/ProgressReverse.svg b/airbyte-webapp/src/components/ui/Switch/ProgressReverse.svg
similarity index 100%
rename from airbyte-webapp/src/components/base/Switch/ProgressReverse.svg
rename to airbyte-webapp/src/components/ui/Switch/ProgressReverse.svg
diff --git a/airbyte-webapp/src/components/base/Switch/Switch.module.scss b/airbyte-webapp/src/components/ui/Switch/Switch.module.scss
similarity index 100%
rename from airbyte-webapp/src/components/base/Switch/Switch.module.scss
rename to airbyte-webapp/src/components/ui/Switch/Switch.module.scss
diff --git a/airbyte-webapp/src/components/base/Switch/Switch.stories.tsx b/airbyte-webapp/src/components/ui/Switch/Switch.stories.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Switch/Switch.stories.tsx
rename to airbyte-webapp/src/components/ui/Switch/Switch.stories.tsx
diff --git a/airbyte-webapp/src/components/base/Switch/Switch.tsx b/airbyte-webapp/src/components/ui/Switch/Switch.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Switch/Switch.tsx
rename to airbyte-webapp/src/components/ui/Switch/Switch.tsx
diff --git a/airbyte-webapp/src/components/base/Switch/index.tsx b/airbyte-webapp/src/components/ui/Switch/index.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Switch/index.tsx
rename to airbyte-webapp/src/components/ui/Switch/index.tsx
diff --git a/airbyte-webapp/src/components/ui/Table/Table.tsx b/airbyte-webapp/src/components/ui/Table/Table.tsx
index b0380ce1bd9a..94b5805d5a6e 100644
--- a/airbyte-webapp/src/components/ui/Table/Table.tsx
+++ b/airbyte-webapp/src/components/ui/Table/Table.tsx
@@ -2,7 +2,7 @@ import React, { memo, useMemo } from "react";
 import { Cell, Column, ColumnInstance, SortingRule, useSortBy, useTable } from "react-table";
 import styled from "styled-components";
 
-import { Card } from "components";
+import { Card } from "../Card";
 
 interface PaddingProps {
   left?: number;
diff --git a/airbyte-webapp/src/components/base/TagInput/TagInput.tsx b/airbyte-webapp/src/components/ui/TagInput/TagInput.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/TagInput/TagInput.tsx
rename to airbyte-webapp/src/components/ui/TagInput/TagInput.tsx
diff --git a/airbyte-webapp/src/components/base/TagInput/TagItem.tsx b/airbyte-webapp/src/components/ui/TagInput/TagItem.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/TagInput/TagItem.tsx
rename to airbyte-webapp/src/components/ui/TagInput/TagItem.tsx
diff --git a/airbyte-webapp/src/components/base/TagInput/index.tsx b/airbyte-webapp/src/components/ui/TagInput/index.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/TagInput/index.tsx
rename to airbyte-webapp/src/components/ui/TagInput/index.tsx
diff --git a/airbyte-webapp/src/components/base/Text/Text.tsx b/airbyte-webapp/src/components/ui/Text/Text.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Text/Text.tsx
rename to airbyte-webapp/src/components/ui/Text/Text.tsx
diff --git a/airbyte-webapp/src/components/base/Text/heading.module.scss b/airbyte-webapp/src/components/ui/Text/heading.module.scss
similarity index 100%
rename from airbyte-webapp/src/components/base/Text/heading.module.scss
rename to airbyte-webapp/src/components/ui/Text/heading.module.scss
diff --git a/airbyte-webapp/src/components/base/Text/index.stories.tsx b/airbyte-webapp/src/components/ui/Text/index.stories.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Text/index.stories.tsx
rename to airbyte-webapp/src/components/ui/Text/index.stories.tsx
diff --git a/airbyte-webapp/src/components/base/Text/index.ts b/airbyte-webapp/src/components/ui/Text/index.ts
similarity index 100%
rename from airbyte-webapp/src/components/base/Text/index.ts
rename to airbyte-webapp/src/components/ui/Text/index.ts
diff --git a/airbyte-webapp/src/components/base/Text/text.module.scss b/airbyte-webapp/src/components/ui/Text/text.module.scss
similarity index 100%
rename from airbyte-webapp/src/components/base/Text/text.module.scss
rename to airbyte-webapp/src/components/ui/Text/text.module.scss
diff --git a/airbyte-webapp/src/components/base/TextArea/TextArea.module.scss b/airbyte-webapp/src/components/ui/TextArea/TextArea.module.scss
similarity index 100%
rename from airbyte-webapp/src/components/base/TextArea/TextArea.module.scss
rename to airbyte-webapp/src/components/ui/TextArea/TextArea.module.scss
diff --git a/airbyte-webapp/src/components/base/TextArea/TextArea.tsx b/airbyte-webapp/src/components/ui/TextArea/TextArea.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/TextArea/TextArea.tsx
rename to airbyte-webapp/src/components/ui/TextArea/TextArea.tsx
diff --git a/airbyte-webapp/src/components/base/TextArea/index.stories.tsx b/airbyte-webapp/src/components/ui/TextArea/index.stories.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/TextArea/index.stories.tsx
rename to airbyte-webapp/src/components/ui/TextArea/index.stories.tsx
diff --git a/airbyte-webapp/src/components/base/TextArea/index.tsx b/airbyte-webapp/src/components/ui/TextArea/index.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/TextArea/index.tsx
rename to airbyte-webapp/src/components/ui/TextArea/index.tsx
diff --git a/airbyte-webapp/src/components/ui/Toast/Toast.tsx b/airbyte-webapp/src/components/ui/Toast/Toast.tsx
index e752698e23f1..223ccd6ff66d 100644
--- a/airbyte-webapp/src/components/ui/Toast/Toast.tsx
+++ b/airbyte-webapp/src/components/ui/Toast/Toast.tsx
@@ -3,8 +3,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import styled, { keyframes } from "styled-components";
 
-import { Button, H5 } from "components";
+import { H5 } from "components/base/Titles";
 
+import { Button } from "../Button";
 import ErrorSign from "./ErrorSign";
 import styles from "./SingletonCard.module.scss";
 
diff --git a/airbyte-webapp/src/components/base/Tooltip/InfoTooltip.module.scss b/airbyte-webapp/src/components/ui/Tooltip/InfoTooltip.module.scss
similarity index 100%
rename from airbyte-webapp/src/components/base/Tooltip/InfoTooltip.module.scss
rename to airbyte-webapp/src/components/ui/Tooltip/InfoTooltip.module.scss
diff --git a/airbyte-webapp/src/components/base/Tooltip/InfoTooltip.tsx b/airbyte-webapp/src/components/ui/Tooltip/InfoTooltip.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Tooltip/InfoTooltip.tsx
rename to airbyte-webapp/src/components/ui/Tooltip/InfoTooltip.tsx
diff --git a/airbyte-webapp/src/components/base/Tooltip/Tooltip.module.scss b/airbyte-webapp/src/components/ui/Tooltip/Tooltip.module.scss
similarity index 100%
rename from airbyte-webapp/src/components/base/Tooltip/Tooltip.module.scss
rename to airbyte-webapp/src/components/ui/Tooltip/Tooltip.module.scss
diff --git a/airbyte-webapp/src/components/base/Tooltip/Tooltip.tsx b/airbyte-webapp/src/components/ui/Tooltip/Tooltip.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Tooltip/Tooltip.tsx
rename to airbyte-webapp/src/components/ui/Tooltip/Tooltip.tsx
diff --git a/airbyte-webapp/src/components/base/Tooltip/TooltipLearnMoreLink.module.scss b/airbyte-webapp/src/components/ui/Tooltip/TooltipLearnMoreLink.module.scss
similarity index 100%
rename from airbyte-webapp/src/components/base/Tooltip/TooltipLearnMoreLink.module.scss
rename to airbyte-webapp/src/components/ui/Tooltip/TooltipLearnMoreLink.module.scss
diff --git a/airbyte-webapp/src/components/base/Tooltip/TooltipLearnMoreLink.tsx b/airbyte-webapp/src/components/ui/Tooltip/TooltipLearnMoreLink.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Tooltip/TooltipLearnMoreLink.tsx
rename to airbyte-webapp/src/components/ui/Tooltip/TooltipLearnMoreLink.tsx
diff --git a/airbyte-webapp/src/components/base/Tooltip/TooltipTable.module.scss b/airbyte-webapp/src/components/ui/Tooltip/TooltipTable.module.scss
similarity index 100%
rename from airbyte-webapp/src/components/base/Tooltip/TooltipTable.module.scss
rename to airbyte-webapp/src/components/ui/Tooltip/TooltipTable.module.scss
diff --git a/airbyte-webapp/src/components/base/Tooltip/TooltipTable.tsx b/airbyte-webapp/src/components/ui/Tooltip/TooltipTable.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Tooltip/TooltipTable.tsx
rename to airbyte-webapp/src/components/ui/Tooltip/TooltipTable.tsx
diff --git a/airbyte-webapp/src/components/base/Tooltip/context.ts b/airbyte-webapp/src/components/ui/Tooltip/context.ts
similarity index 100%
rename from airbyte-webapp/src/components/base/Tooltip/context.ts
rename to airbyte-webapp/src/components/ui/Tooltip/context.ts
diff --git a/airbyte-webapp/src/components/base/Tooltip/index.stories.tsx b/airbyte-webapp/src/components/ui/Tooltip/index.stories.tsx
similarity index 100%
rename from airbyte-webapp/src/components/base/Tooltip/index.stories.tsx
rename to airbyte-webapp/src/components/ui/Tooltip/index.stories.tsx
diff --git a/airbyte-webapp/src/components/base/Tooltip/index.ts b/airbyte-webapp/src/components/ui/Tooltip/index.ts
similarity index 100%
rename from airbyte-webapp/src/components/base/Tooltip/index.ts
rename to airbyte-webapp/src/components/ui/Tooltip/index.ts
diff --git a/airbyte-webapp/src/components/base/Tooltip/types.ts b/airbyte-webapp/src/components/ui/Tooltip/types.ts
similarity index 100%
rename from airbyte-webapp/src/components/base/Tooltip/types.ts
rename to airbyte-webapp/src/components/ui/Tooltip/types.ts
diff --git a/airbyte-webapp/src/components/base/index.tsx b/airbyte-webapp/src/components/ui/index.tsx
similarity index 92%
rename from airbyte-webapp/src/components/base/index.tsx
rename to airbyte-webapp/src/components/ui/index.tsx
index 6e9bf0cdafbd..7c4d3437afe0 100644
--- a/airbyte-webapp/src/components/base/index.tsx
+++ b/airbyte-webapp/src/components/ui/index.tsx
@@ -9,4 +9,3 @@ export * from "./RadioButton";
 export * from "./TagInput";
 export * from "./Switch";
 export * from "./TextArea";
-export * from "./Titles";
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx
index ac266480f2ad..b3a24552754d 100644
--- a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Text } from "components/base/Text";
 import HeadTitle from "components/HeadTitle";
+import { Text } from "components/ui/Text";
 
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
 
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/components/CheckBoxControl.tsx b/airbyte-webapp/src/packages/cloud/views/auth/components/CheckBoxControl.tsx
index ea17dcf9e4f3..b9fec4ab9964 100644
--- a/airbyte-webapp/src/packages/cloud/views/auth/components/CheckBoxControl.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/auth/components/CheckBoxControl.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { CheckBox } from "components/base";
+import { CheckBox } from "components/ui/CheckBox";
 
 type IProps = {
   message?: React.ReactNode;
diff --git a/airbyte-webapp/src/packages/cloud/views/auth/components/FormTitle/FormTitle.tsx b/airbyte-webapp/src/packages/cloud/views/auth/components/FormTitle/FormTitle.tsx
index 6750cc06307a..110ed680e810 100644
--- a/airbyte-webapp/src/packages/cloud/views/auth/components/FormTitle/FormTitle.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/auth/components/FormTitle/FormTitle.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 
 import styles from "./FormTitle.module.scss";
 
diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx
index a3b20b81b511..2d2db8aed60e 100644
--- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx
@@ -2,8 +2,8 @@ import React, { useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 
-import { Card } from "components/base/Card";
 import { BarChart } from "components/ui/BarChart";
+import { Card } from "components/ui/Card";
 
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { useGetCloudWorkspaceUsage } from "packages/cloud/services/workspaces/CloudWorkspacesService";
diff --git a/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx b/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx
index a4c3f2b666ca..460fe334b61b 100644
--- a/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx
@@ -4,7 +4,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { Link, Outlet } from "react-router-dom";
 
 import { LoadingPage } from "components";
-import { AlertBanner } from "components/base/Banner/AlertBanner";
+import { AlertBanner } from "components/ui/Banner/AlertBanner";
 
 import { CloudRoutes } from "packages/cloud/cloudRoutes";
 import { CreditStatus } from "packages/cloud/lib/domain/cloudWorkspaces/types";
diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
index 04ae79a6e104..00ff54deb12d 100644
--- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
@@ -7,8 +7,8 @@ import { FormattedMessage, FormattedNumber } from "react-intl";
 import { NavLink } from "react-router-dom";
 
 import { Link } from "components";
-import { Text } from "components/base/Text";
 import { CreditsIcon } from "components/icons/CreditsIcon";
+import { Text } from "components/ui/Text";
 
 import { useConfig } from "config";
 import { FeatureItem, IfFeatureEnabled } from "hooks/services/Feature";
diff --git a/airbyte-webapp/src/packages/cloud/views/users/InviteUsersModal/InviteUsersModal.tsx b/airbyte-webapp/src/packages/cloud/views/users/InviteUsersModal/InviteUsersModal.tsx
index 0567b48eff64..c62ecb15b83a 100644
--- a/airbyte-webapp/src/packages/cloud/views/users/InviteUsersModal/InviteUsersModal.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/users/InviteUsersModal/InviteUsersModal.tsx
@@ -6,7 +6,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 import * as yup from "yup";
 
-import { Button, DropDown, H5, Input } from "components";
+import { Button, DropDown, Input } from "components";
+import { H5 } from "components/base/Titles";
 import { Cell, Header, Row } from "components/SimpleTableComponents";
 import { Modal } from "components/ui/Modal";
 
diff --git a/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx b/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx
index 6346fd4e3ea1..15f9ab29027d 100644
--- a/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx
@@ -5,7 +5,8 @@ import { FormattedMessage } from "react-intl";
 import { CellProps } from "react-table";
 import { useToggle } from "react-use";
 
-import { Button, H5 } from "components";
+import { H5 } from "components/base/Titles";
+import { Button } from "components/ui/Button";
 import { Table } from "components/ui/Table";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
diff --git a/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/components/RoleToolTip.tsx b/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/components/RoleToolTip.tsx
index d6bf28980d79..1bcfe77f130e 100644
--- a/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/components/RoleToolTip.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/components/RoleToolTip.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { InfoTooltip } from "components/base/Tooltip";
+import { InfoTooltip } from "components/ui/Tooltip";
 
 const LineBlock = styled.div`
   text-transform: none;
diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx
index 87834316cc64..d8f4379a2508 100644
--- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx
@@ -4,7 +4,7 @@ import { components, MenuListProps } from "react-select";
 import styled from "styled-components";
 
 import { Popout } from "components";
-import { IDataItem } from "components/base/DropDown/components/Option";
+import { IDataItem } from "components/ui/DropDown/components/Option";
 
 import { useListCloudWorkspacesAsync } from "packages/cloud/services/workspaces/CloudWorkspacesService";
 import { useCurrentWorkspace, useWorkspaceService } from "services/workspaces/WorkspacesService";
diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx
index f3f60ad74545..5982f9a047c2 100644
--- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx
@@ -4,8 +4,9 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as yup from "yup";
 
-import { Button, LabeledInput, Label, LabeledSwitch } from "components";
-import { InfoTooltip } from "components/base/Tooltip";
+import { Label, LabeledInput, LabeledSwitch } from "components";
+import { Button } from "components/ui/Button";
+import { InfoTooltip } from "components/ui/Tooltip";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useAdvancedModeSetting } from "hooks/services/useAdvancedModeSetting";
diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/WorkspacesPage.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/WorkspacesPage.tsx
index 03897e20093f..ca6ef67ed379 100644
--- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/WorkspacesPage.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/WorkspacesPage.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 
diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.tsx
index 72fe32291e5a..1c0bfe7e1cda 100644
--- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspaceItem.tsx
@@ -2,7 +2,7 @@ import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 
-import { H5 } from "components";
+import { H5 } from "components/base/Titles";
 
 import styles from "./WorkspaceItem.module.scss";
 
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionPageTitle.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionPageTitle.tsx
index 689151f327f5..816555977dcb 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionPageTitle.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionPageTitle.tsx
@@ -3,9 +3,9 @@ import React, { useCallback, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 
-import { Text } from "components/base/Text";
 import { InfoBox } from "components/ui/InfoBox";
 import { StepsMenu } from "components/ui/StepsMenu";
+import { Text } from "components/ui/Text";
 
 import { ConnectionStatus, DestinationRead, SourceRead, WebBackendConnectionRead } from "core/request/AirbyteClient";
 
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx
index 39930d555806..a90c7b810ccd 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx
@@ -5,9 +5,9 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useAsyncFn, useUnmount } from "react-use";
 import styled from "styled-components";
 
-import { Button } from "components/base/Button";
 import { LabeledSwitch } from "components/LabeledSwitch";
 import LoadingSchema from "components/LoadingSchema";
+import { Button } from "components/ui/Button";
 import { ModalBody, ModalFooter } from "components/ui/Modal";
 
 import { toWebBackendConnectionUpdate } from "core/domain/connection";
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StateBlock.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StateBlock.tsx
index b5bd764a0f0b..ec2aae125e56 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StateBlock.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StateBlock.tsx
@@ -1,7 +1,8 @@
 import React, { useMemo } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { H5, Card } from "components";
+import { H5 } from "components/base/Titles";
+import { Card } from "components/ui/Card";
 
 import { ConnectionState } from "core/request/AirbyteClient";
 import { useGetConnectionState } from "hooks/services/useConnectionHook";
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusView.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusView.tsx
index 9000bd6a76f4..536ddb4ebfbd 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusView.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusView.tsx
@@ -4,12 +4,12 @@ import React, { useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { Link, useLocation } from "react-router-dom";
 
-import { Button } from "components";
-import { Card } from "components/base/Card";
-import { Tooltip } from "components/base/Tooltip";
 import EmptyResource from "components/EmptyResourceBlock";
 import { RotateIcon } from "components/icons/RotateIcon";
 import { useAttemptLink } from "components/JobItem/attemptLinkUtils";
+import { Button } from "components/ui/Button";
+import { Card } from "components/ui/Card";
+import { Tooltip } from "components/ui/Tooltip";
 
 import { getFrequencyType } from "config/utils";
 import { Action, Namespace } from "core/analytics";
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx
index 7392db6e0320..140d8ce2cb80 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView.tsx
@@ -4,8 +4,8 @@ import { FormattedMessage } from "react-intl";
 import { useToggle } from "react-use";
 import styled from "styled-components";
 
-import { Card } from "components/base/Card";
-import { Text } from "components/base/Text";
+import { Card } from "components/ui/Card";
+import { Text } from "components/ui/Text";
 
 import { buildConnectionUpdate, NormalizationType } from "core/domain/connection";
 import {
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/ExistingEntityForm.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/ExistingEntityForm.tsx
index e4215640fe37..4a5732395984 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/ExistingEntityForm.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/ExistingEntityForm.tsx
@@ -5,8 +5,8 @@ import styled from "styled-components";
 import * as yup from "yup";
 
 import { Button, ControlLabels, DropDown } from "components";
-import { Card } from "components/base/Card";
 import { ConnectorIcon } from "components/ConnectorIcon";
+import { Card } from "components/ui/Card";
 
 import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService";
 import { useSourceDefinitionList } from "services/connector/SourceDefinitionService";
diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx
index 718285cefe63..a03f22cfb603 100644
--- a/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx
+++ b/airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 
 import { useConfig } from "config";
 import Status from "core/statuses";
diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.tsx
index 2de6f671f31e..1fb464151b63 100644
--- a/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.tsx
+++ b/airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 
 import styles from "./FirstSuccessfulSync.module.scss";
 
diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/ProgressBlock.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/ProgressBlock.tsx
index 047c4f3fa7c6..492f5c9b2fc2 100644
--- a/airbyte-webapp/src/pages/OnboardingPage/components/ProgressBlock.tsx
+++ b/airbyte-webapp/src/pages/OnboardingPage/components/ProgressBlock.tsx
@@ -4,9 +4,9 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled, { keyframes } from "styled-components";
 
-import { Button } from "components/base";
-import { Text } from "components/base/Text";
 import Link from "components/Link";
+import { Button } from "components/ui";
+import { Text } from "components/ui/Text";
 
 import Status from "core/statuses";
 
diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/TitlesBlock.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/TitlesBlock.tsx
index 7563394fe7c1..86a176600c61 100644
--- a/airbyte-webapp/src/pages/OnboardingPage/components/TitlesBlock.tsx
+++ b/airbyte-webapp/src/pages/OnboardingPage/components/TitlesBlock.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 
 import styles from "./TitlesBlock.module.scss";
 
diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/UseCaseBlock.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/UseCaseBlock.tsx
index 3626dcf70911..3e2b9c14f99f 100644
--- a/airbyte-webapp/src/pages/OnboardingPage/components/UseCaseBlock.tsx
+++ b/airbyte-webapp/src/pages/OnboardingPage/components/UseCaseBlock.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { Card } from "components/base/Card";
+import { Card } from "components/ui/Card";
 
 interface UseCaseBlockProps {
   count: number;
diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/ShowVideo.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/ShowVideo.tsx
index 0a9f991b36f9..3a594e3d7bbe 100644
--- a/airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/ShowVideo.tsx
+++ b/airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/ShowVideo.tsx
@@ -2,7 +2,7 @@ import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 
-import { Button } from "components/base";
+import { Button } from "components/ui/Button";
 import { Modal } from "components/ui/Modal";
 
 import styles from "./ShowVideo.module.scss";
diff --git a/airbyte-webapp/src/pages/PreferencesPage/PreferencesPage.tsx b/airbyte-webapp/src/pages/PreferencesPage/PreferencesPage.tsx
index f5fc7eae83a4..24055d20e496 100644
--- a/airbyte-webapp/src/pages/PreferencesPage/PreferencesPage.tsx
+++ b/airbyte-webapp/src/pages/PreferencesPage/PreferencesPage.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Text } from "components/base/Text";
 import { PageViewContainer } from "components/CenteredPageComponents";
 import HeadTitle from "components/HeadTitle";
+import { Text } from "components/ui/Text";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import useWorkspace from "hooks/services/useWorkspace";
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/AccountPage/components/AccountForm.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/AccountPage/components/AccountForm.tsx
index 41c822259d60..1c7ee01ab09b 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/AccountPage/components/AccountForm.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/AccountPage/components/AccountForm.tsx
@@ -4,9 +4,10 @@ import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 import * as yup from "yup";
 
-import { Label, LabeledInput, LabeledSwitch, Button } from "components";
-import { InfoTooltip } from "components/base/Tooltip";
+import { Label, LabeledInput, LabeledSwitch } from "components";
 import { Row, Cell } from "components/SimpleTableComponents";
+import { Button } from "components/ui/Button";
+import { InfoTooltip } from "components/ui/Tooltip";
 
 import { useAdvancedModeSetting } from "hooks/services/useAdvancedModeSetting";
 
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/ConfigurationsPage.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/ConfigurationsPage.tsx
index ed10b661f9f7..2582b07307ec 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/ConfigurationsPage.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConfigurationsPage/ConfigurationsPage.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { Card } from "components/base/Card";
 import HeadTitle from "components/HeadTitle";
+import { Card } from "components/ui/Card";
 
 import LogsContent from "./components/LogsContent";
 
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx
index ab6a49248252..31a9eaff246d 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/PageComponents.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-import { H5 } from "components";
+import { H5 } from "components/base/Titles";
 
 const Title = styled(H5)`
   color: ${({ theme }) => theme.darkPrimaryColor};
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/SettingsComponents.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/SettingsComponents.tsx
index dd4de2028878..624e503e6397 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/SettingsComponents.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/SettingsComponents.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-import { Card } from "components/base/Card";
+import { Card } from "components/ui/Card";
 
 export const SettingsCard = styled(Card)`
   width: 100%;
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopout.tsx b/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopout.tsx
index 09790601d277..3e1bae6df130 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopout.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopout.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Popout } from "components";
-import { Tooltip } from "components/base/Tooltip";
+import { Popout } from "components/ui/Popout";
+import { Tooltip } from "components/ui/Tooltip";
 
 import { Path } from "core/domain/catalog";
 
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopoutButton.tsx b/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopoutButton.tsx
index da0fb36cf6d6..91513e04d88f 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopoutButton.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogTree/components/PathPopoutButton.tsx
@@ -2,8 +2,8 @@ import { faSortDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 
-import { Text } from "components/base/Text";
-import { Tooltip } from "components/base/Tooltip";
+import { Text } from "components/ui/Text";
+import { Tooltip } from "components/ui/Tooltip";
 
 import styles from "./PathPopoutButton.module.scss";
 
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/SyncSettingsDropdown.tsx b/airbyte-webapp/src/views/Connection/CatalogTree/components/SyncSettingsDropdown.tsx
index f327a02664b1..50297f1bd3a0 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/components/SyncSettingsDropdown.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogTree/components/SyncSettingsDropdown.tsx
@@ -4,9 +4,9 @@ import { components, ControlProps } from "react-select";
 import styled from "styled-components";
 
 import { DropDown, DropdownProps } from "components";
-import { IDataItem, OptionView } from "components/base/DropDown/components/Option";
-import { IProps } from "components/base/DropDown/components/SingleValue";
-import Text from "components/base/DropDown/components/Text";
+import { IDataItem, OptionView } from "components/ui/DropDown/components/Option";
+import { IProps } from "components/ui/DropDown/components/SingleValue";
+import Text from "components/ui/DropDown/components/Text";
 
 const ValueView = styled(components.SingleValue)`
   display: flex;
diff --git a/airbyte-webapp/src/views/Connection/CollapsibleCard.tsx b/airbyte-webapp/src/views/Connection/CollapsibleCard.tsx
index 00615f411562..4b0dfdaeec9d 100644
--- a/airbyte-webapp/src/views/Connection/CollapsibleCard.tsx
+++ b/airbyte-webapp/src/views/Connection/CollapsibleCard.tsx
@@ -5,7 +5,7 @@ import React from "react";
 import { useToggle } from "react-use";
 import styled from "styled-components";
 
-import { Card } from "components/base/Card";
+import { Card } from "components/ui/Card";
 
 import styles from "./CollapsibleCard.module.scss";
 
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
index d681e80b1459..ff5bfbc3d1c1 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
@@ -4,8 +4,11 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useToggle } from "react-use";
 import styled from "styled-components";
 
-import { Card, ControlLabels, H5, Input } from "components";
+import { H5 } from "components/base/Titles";
 import { FormChangeTracker } from "components/FormChangeTracker";
+import { ControlLabels } from "components/LabeledControl";
+import { Card } from "components/ui/Card";
+import { Input } from "components/ui/Input";
 
 import { NamespaceDefinitionType } from "core/request/AirbyteClient";
 import { useConnectionFormService } from "hooks/services/Connection/ConnectionFormService";
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/OperationsSection.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/OperationsSection.tsx
index 4406a14093f5..c3e1aa731dde 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/OperationsSection.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/OperationsSection.tsx
@@ -2,7 +2,8 @@ import { Field, FieldArray } from "formik";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { Card, H5 } from "components";
+import { H5 } from "components/base/Titles";
+import { Card } from "components/ui/Card";
 
 import { useConnectionFormService } from "hooks/services/Connection/ConnectionFormService";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.tsx
index fc6ecc62b44e..cddc3b82ce14 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.tsx
@@ -1,6 +1,6 @@
 import classnames from "classnames";
 
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 
 import styles from "./ResponseMessage.module.scss";
 
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/ScheduleField.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/ScheduleField.tsx
index b6962f67a1ca..8cf83ab45b8b 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/ScheduleField.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/ScheduleField.tsx
@@ -3,7 +3,7 @@ import { ChangeEvent, useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
 
 import { ControlLabels, DropDown, DropDownRow, Input, Link } from "components";
-import { IDataItem } from "components/base/DropDown/components/Option";
+import { IDataItem } from "components/ui/DropDown/components/Option";
 
 import { Action, Namespace } from "core/analytics";
 import { ConnectionScheduleData, ConnectionScheduleType } from "core/request/AirbyteClient";
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/SyncCatalogField.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/SyncCatalogField.tsx
index 1315f988616a..d66c1045d1d2 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/SyncCatalogField.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/SyncCatalogField.tsx
@@ -4,10 +4,11 @@ import React, { useCallback, useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { CheckBox, H5 } from "components";
-import { InfoTooltip, TooltipLearnMoreLink } from "components/base/Tooltip";
+import { H5 } from "components/base/Titles";
 import { Cell, Header } from "components/SimpleTableComponents";
+import { CheckBox } from "components/ui/CheckBox";
 import { LoadingBackdrop } from "components/ui/LoadingBackdrop";
+import { InfoTooltip, TooltipLearnMoreLink } from "components/ui/Tooltip";
 
 import { useConfig } from "config";
 import { SyncSchemaStream } from "core/domain/catalog";
diff --git a/airbyte-webapp/src/views/Connection/TransformationForm/TransformationForm.tsx b/airbyte-webapp/src/views/Connection/TransformationForm/TransformationForm.tsx
index 33278e855962..2d1d6434d427 100644
--- a/airbyte-webapp/src/views/Connection/TransformationForm/TransformationForm.tsx
+++ b/airbyte-webapp/src/views/Connection/TransformationForm/TransformationForm.tsx
@@ -5,11 +5,11 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as yup from "yup";
 
-import { Button } from "components/base/Button";
-import { DropDown } from "components/base/DropDown";
-import { Input } from "components/base/Input";
 import { FormChangeTracker } from "components/FormChangeTracker";
 import { ControlLabels } from "components/LabeledControl";
+import { Button } from "components/ui/Button";
+import { DropDown } from "components/ui/DropDown";
+import { Input } from "components/ui/Input";
 import { ModalBody, ModalFooter } from "components/ui/Modal";
 
 import { useConfig } from "config";
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx
index 30e772ba43fa..a6a517498ad1 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx
@@ -6,14 +6,14 @@ import { MenuListProps } from "react-select";
 import styled from "styled-components";
 
 import { ControlLabels, DropDown, DropDownRow } from "components";
-import { IDataItem, IProps as OptionProps, OptionView } from "components/base/DropDown/components/Option";
+import { ConnectorIcon } from "components/ConnectorIcon";
+import { GAIcon } from "components/icons/GAIcon";
+import { IDataItem, IProps as OptionProps, OptionView } from "components/ui/DropDown/components/Option";
 import {
   Icon as SingleValueIcon,
   IProps as SingleValueProps,
   ItemView as SingleValueView,
-} from "components/base/DropDown/components/SingleValue";
-import { ConnectorIcon } from "components/ConnectorIcon";
-import { GAIcon } from "components/icons/GAIcon";
+} from "components/ui/DropDown/components/SingleValue";
 
 import { Action, Namespace } from "core/analytics";
 import { Connector, ConnectorDefinition } from "core/domain/connector";
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/Property/PropertyError.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/Property/PropertyError.tsx
index a85bfcf0fe29..c9c7bd7a7abd 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/Property/PropertyError.tsx
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/Property/PropertyError.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 
 import styles from "./PropertyError.module.scss";
 
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/ArraySection.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/ArraySection.tsx
index 711a0c7a280f..16643306d7a0 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/ArraySection.tsx
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/ArraySection.tsx
@@ -2,8 +2,8 @@ import { FieldArray, useField } from "formik";
 import React, { useMemo, useState } from "react";
 
 import { ArrayOfObjectsEditor } from "components";
-import { TooltipTable } from "components/base/Tooltip";
 import GroupControls from "components/GroupControls";
+import { TooltipTable } from "components/ui/Tooltip";
 
 import { FormBlock, FormGroupItem, FormObjectArrayItem } from "core/form/types";
 
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/ConditionSection.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/ConditionSection.tsx
index 98856483e8dd..595fc5f54327 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/ConditionSection.tsx
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/ConditionSection.tsx
@@ -1,9 +1,9 @@
 import { useFormikContext, setIn } from "formik";
 import React, { useCallback, useMemo } from "react";
 
-import { DropDown } from "components";
-import { IDataItem } from "components/base/DropDown/components/Option";
 import GroupControls from "components/GroupControls";
+import { DropDown } from "components/ui/DropDown";
+import { IDataItem } from "components/ui/DropDown/components/Option";
 
 import { FormBlock, FormConditionItem } from "core/form/types";
 import { isDefined } from "utils/common";
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/VariableInputFieldForm.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/VariableInputFieldForm.tsx
index 45fdbc412c93..c68d3224f32d 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/VariableInputFieldForm.tsx
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/VariableInputFieldForm.tsx
@@ -4,7 +4,7 @@ import { FormattedMessage } from "react-intl";
 import { useAsync, useEffectOnce } from "react-use";
 import * as yup from "yup";
 
-import { Button } from "components/base/Button";
+import { Button } from "components/ui/Button";
 import { ModalBody, ModalFooter } from "components/ui/Modal";
 
 import { FormGroupItem, FormObjectArrayItem } from "core/form/types";
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/AuthButton.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/AuthButton.tsx
index aa77ddf04346..5a884f21cb14 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/AuthButton.tsx
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/AuthButton.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { Button } from "components";
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 
 import { ConnectorSpecification } from "core/domain/connector";
 
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/GoogleAuthButton.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/GoogleAuthButton.tsx
index a3871e6c0788..dd85acdc1229 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/GoogleAuthButton.tsx
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/GoogleAuthButton.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { ButtonProps } from "components/base/Button/types";
+import { ButtonProps } from "components/ui/Button";
 
 const StyledButton = styled.button<ButtonProps>`
   align-items: center;
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/index.stories.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/index.stories.tsx
index c26b5dfe6585..22957445fb57 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/index.stories.tsx
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/index.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import withMock from "storybook-addon-mock";
 
-import { Card } from "components/base/Card";
+import { Card } from "components/ui/Card";
 
 import { ConnectorSpecification } from "core/domain/connector";
 import { isSourceDefinitionSpecification } from "core/domain/connector/source";
diff --git a/airbyte-webapp/src/views/common/ErrorOccurredView/ErrorOccurredView.tsx b/airbyte-webapp/src/views/common/ErrorOccurredView/ErrorOccurredView.tsx
index 50888d13f845..a715f3af23ec 100644
--- a/airbyte-webapp/src/views/common/ErrorOccurredView/ErrorOccurredView.tsx
+++ b/airbyte-webapp/src/views/common/ErrorOccurredView/ErrorOccurredView.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import { Button } from "components/base/Button";
-import { Text } from "components/base/Text";
+import { Button } from "components/ui/Button";
+import { Text } from "components/ui/Text";
 
 import styles from "./ErrorOccurredView.module.scss";
 
diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx
index 2c9dbc430c91..5823e60bd330 100644
--- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx
+++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx
@@ -7,7 +7,7 @@ import { FormattedMessage } from "react-intl";
 import { NavLink, useLocation } from "react-router-dom";
 
 import { Link } from "components";
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 import Version from "components/Version";
 
 import { useConfig } from "config";
diff --git a/airbyte-webapp/src/views/layout/SideBar/components/SidebarDropdownMenu.tsx b/airbyte-webapp/src/views/layout/SideBar/components/SidebarDropdownMenu.tsx
index 6ce486eb741b..e4c54da32b61 100644
--- a/airbyte-webapp/src/views/layout/SideBar/components/SidebarDropdownMenu.tsx
+++ b/airbyte-webapp/src/views/layout/SideBar/components/SidebarDropdownMenu.tsx
@@ -2,7 +2,7 @@ import { Menu } from "@headlessui/react";
 import classNames from "classnames";
 import React from "react";
 
-import { Text } from "components/base/Text";
+import { Text } from "components/ui/Text";
 
 import styles from "./SidebarDropdownMenu.module.scss";