diff --git a/airbyte-webapp/src/components/ArrayOfObjectsEditor/ArrayOfObjectsEditor.tsx b/airbyte-webapp/src/components/ArrayOfObjectsEditor/ArrayOfObjectsEditor.tsx
index 130ac6357010..67641397aa92 100644
--- a/airbyte-webapp/src/components/ArrayOfObjectsEditor/ArrayOfObjectsEditor.tsx
+++ b/airbyte-webapp/src/components/ArrayOfObjectsEditor/ArrayOfObjectsEditor.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import Modal, { ModalProps } from "components/Modal";
+import { Modal, ModalProps } from "components/ui/Modal";
 
 import { ConnectionFormMode } from "views/Connection/ConnectionForm/ConnectionForm";
 
diff --git a/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx b/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx
index ab48e88fc16c..33fa91108113 100644
--- a/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx
+++ b/airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx
@@ -4,7 +4,7 @@ import styled from "styled-components";
 
 import { LoadingButton } from "components";
 import { Button } from "components/base/Button";
-import Modal from "components/Modal";
+import { Modal } from "components/ui/Modal";
 
 import useLoadingState from "../../hooks/useLoadingState";
 
diff --git a/airbyte-webapp/src/components/Modal/index.stories.tsx b/airbyte-webapp/src/components/Modal/index.stories.tsx
deleted file mode 100644
index 27be1dcd1d4a..000000000000
--- a/airbyte-webapp/src/components/Modal/index.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import { Modal, ModalBody, ModalFooter } from "./";
-
-export default {
-  title: "Ui/Modal",
-  component: Modal,
-  argTypes: {
-    title: { type: { name: "string", required: false } },
-  },
-} as ComponentMeta<typeof Modal>;
-
-const Template: ComponentStory<typeof Modal> = (args) => {
-  if (args.cardless) {
-    return <Modal {...args} />;
-  }
-
-  return (
-    <Modal {...args}>
-      <ModalBody>{args.children}</ModalBody>
-      <ModalFooter>
-        <button>Button 1</button>
-        <button>Button 2</button>
-      </ModalFooter>
-    </Modal>
-  );
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  children: "Modal children go here.",
-  title: "Modal Title",
-};
diff --git a/airbyte-webapp/src/components/index.tsx b/airbyte-webapp/src/components/index.tsx
index 6487d818c053..7b71c30e627d 100644
--- a/airbyte-webapp/src/components/index.tsx
+++ b/airbyte-webapp/src/components/index.tsx
@@ -10,7 +10,6 @@ export * from "./LabeledSwitch";
 export * from "./Link";
 export * from "./LoadingPage";
 export * from "./MainPageWithScroll";
-export * from "./Modal";
 export * from "./PageTitle";
 export * from "./SimpleTableComponents";
 export * from "./StatusIcon";
diff --git a/airbyte-webapp/src/components/Modal/Modal.module.scss b/airbyte-webapp/src/components/ui/Modal/Modal.module.scss
similarity index 90%
rename from airbyte-webapp/src/components/Modal/Modal.module.scss
rename to airbyte-webapp/src/components/ui/Modal/Modal.module.scss
index 9308fbfad374..290d12289781 100644
--- a/airbyte-webapp/src/components/Modal/Modal.module.scss
+++ b/airbyte-webapp/src/components/ui/Modal/Modal.module.scss
@@ -1,6 +1,6 @@
-@use "../../scss/colors";
-@use "../../scss/variables";
-@use "../../scss/z-indices";
+@use "../../../scss/colors";
+@use "../../../scss/variables";
+@use "../../../scss/z-indices";
 
 @keyframes fade-in-container {
   from {
diff --git a/airbyte-webapp/src/components/Modal/Modal.tsx b/airbyte-webapp/src/components/ui/Modal/Modal.tsx
similarity index 85%
rename from airbyte-webapp/src/components/Modal/Modal.tsx
rename to airbyte-webapp/src/components/ui/Modal/Modal.tsx
index 5d28e4131a33..880c41b5ca64 100644
--- a/airbyte-webapp/src/components/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 "../../base/Card";
 import styles from "./Modal.module.scss";
 
 export interface ModalProps {
@@ -20,7 +20,14 @@ const cardStyleBySize = {
   xl: styles.xl,
 };
 
-const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({ children, title, size, onClose, cardless, testId }) => {
+export const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
+  children,
+  title,
+  size,
+  onClose,
+  cardless,
+  testId,
+}) => {
   const [isOpen, setIsOpen] = useState(true);
 
   const onModalClose = () => {
@@ -45,5 +52,3 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({ children, title,
     </Dialog>
   );
 };
-
-export default Modal;
diff --git a/airbyte-webapp/src/components/Modal/ModalBody.module.scss b/airbyte-webapp/src/components/ui/Modal/ModalBody.module.scss
similarity index 82%
rename from airbyte-webapp/src/components/Modal/ModalBody.module.scss
rename to airbyte-webapp/src/components/ui/Modal/ModalBody.module.scss
index 59bdadf221e1..7b457231639c 100644
--- a/airbyte-webapp/src/components/Modal/ModalBody.module.scss
+++ b/airbyte-webapp/src/components/ui/Modal/ModalBody.module.scss
@@ -1,4 +1,4 @@
-@use "../../scss/variables";
+@use "../../../scss/variables";
 
 .modalBody {
   padding: variables.$spacing-lg variables.$spacing-xl;
diff --git a/airbyte-webapp/src/components/Modal/ModalBody.tsx b/airbyte-webapp/src/components/ui/Modal/ModalBody.tsx
similarity index 100%
rename from airbyte-webapp/src/components/Modal/ModalBody.tsx
rename to airbyte-webapp/src/components/ui/Modal/ModalBody.tsx
diff --git a/airbyte-webapp/src/components/Modal/ModalFooter.module.scss b/airbyte-webapp/src/components/ui/Modal/ModalFooter.module.scss
similarity index 79%
rename from airbyte-webapp/src/components/Modal/ModalFooter.module.scss
rename to airbyte-webapp/src/components/ui/Modal/ModalFooter.module.scss
index 34d54676f947..cd7410568d2b 100644
--- a/airbyte-webapp/src/components/Modal/ModalFooter.module.scss
+++ b/airbyte-webapp/src/components/ui/Modal/ModalFooter.module.scss
@@ -1,5 +1,5 @@
-@use "../../scss/colors";
-@use "../../scss/variables";
+@use "../../../scss/colors";
+@use "../../../scss/variables";
 
 .modalFooter {
   display: flex;
diff --git a/airbyte-webapp/src/components/Modal/ModalFooter.tsx b/airbyte-webapp/src/components/ui/Modal/ModalFooter.tsx
similarity index 100%
rename from airbyte-webapp/src/components/Modal/ModalFooter.tsx
rename to airbyte-webapp/src/components/ui/Modal/ModalFooter.tsx
diff --git a/airbyte-webapp/src/components/ui/Modal/index.stories.tsx b/airbyte-webapp/src/components/ui/Modal/index.stories.tsx
new file mode 100644
index 000000000000..c57c0e930040
--- /dev/null
+++ b/airbyte-webapp/src/components/ui/Modal/index.stories.tsx
@@ -0,0 +1,48 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Button } from "components/base/Button";
+
+import { Modal, ModalBody, ModalFooter } from ".";
+
+export default {
+  title: "UI/Modal",
+  component: Modal,
+  argTypes: {
+    title: { type: { name: "string", required: false } },
+  },
+} as ComponentMeta<typeof Modal>;
+
+const Template: ComponentStory<typeof Modal> = (args) => {
+  if (args.cardless) {
+    return <Modal {...args} />;
+  }
+
+  return (
+    <Modal {...args}>
+      <ModalBody>{args.children}</ModalBody>
+      <ModalFooter>
+        <Button>Lorem</Button>
+        <Button>Ipsum</Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  size: "md",
+  children: (
+    <div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </div>
+  ),
+  title: "Modal Title",
+};
diff --git a/airbyte-webapp/src/components/Modal/index.tsx b/airbyte-webapp/src/components/ui/Modal/index.ts
similarity index 54%
rename from airbyte-webapp/src/components/Modal/index.tsx
rename to airbyte-webapp/src/components/ui/Modal/index.ts
index 3e1b7bb02d9c..4385b7301025 100644
--- a/airbyte-webapp/src/components/Modal/index.tsx
+++ b/airbyte-webapp/src/components/ui/Modal/index.ts
@@ -1,8 +1,3 @@
-import Modal from "./Modal";
-
 export * from "./Modal";
 export * from "./ModalBody";
 export * from "./ModalFooter";
-
-export { Modal };
-export default Modal;
diff --git a/airbyte-webapp/src/hooks/services/Modal/ModalService.tsx b/airbyte-webapp/src/hooks/services/Modal/ModalService.tsx
index 4be479df6bea..0e565979b307 100644
--- a/airbyte-webapp/src/hooks/services/Modal/ModalService.tsx
+++ b/airbyte-webapp/src/hooks/services/Modal/ModalService.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useMemo, useRef, useState } from "react";
 import { firstValueFrom, Subject } from "rxjs";
 
-import { Modal } from "components";
+import { Modal } from "components/ui/Modal";
 
 import { ModalOptions, ModalResult, ModalServiceContext } from "./types";
 
diff --git a/airbyte-webapp/src/hooks/services/Modal/types.ts b/airbyte-webapp/src/hooks/services/Modal/types.ts
index 6ebd200d50e8..4a16f3cab709 100644
--- a/airbyte-webapp/src/hooks/services/Modal/types.ts
+++ b/airbyte-webapp/src/hooks/services/Modal/types.ts
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ModalProps } from "components/Modal/Modal";
+import { ModalProps } from "components/ui/Modal";
 
 export interface ModalOptions<T> {
   title: ModalProps["title"];
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 7a9be4d44ed6..7d528fbc52c6 100644
--- a/airbyte-webapp/src/packages/cloud/views/users/InviteUsersModal/InviteUsersModal.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/users/InviteUsersModal/InviteUsersModal.tsx
@@ -6,8 +6,9 @@ import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 import * as yup from "yup";
 
-import { Button, DropDown, H5, Input, LoadingButton, Modal } from "components";
+import { Button, DropDown, H5, Input, LoadingButton } from "components";
 import { Cell, Header, Row } from "components/SimpleTableComponents";
+import { Modal } from "components/ui/Modal";
 
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { useUserHook } from "packages/cloud/services/users/UseUserHook";
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 229b9046fa2e..14a557a40bf4 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx
@@ -5,8 +5,10 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useAsyncFn, useUnmount } from "react-use";
 import styled from "styled-components";
 
-import { Button, LabeledSwitch, ModalBody, ModalFooter } from "components";
+import { Button } from "components/base/Button";
+import { LabeledSwitch } from "components/LabeledSwitch";
 import LoadingSchema from "components/LoadingSchema";
+import { ModalBody, ModalFooter } from "components/ui/Modal";
 
 import { toWebBackendConnectionUpdate } from "core/domain/connection";
 import { ConnectionStateType, ConnectionStatus } from "core/request/AirbyteClient";
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 75cd12c0e2c5..21ed9d47fcb6 100644
--- a/airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/ShowVideo.tsx
+++ b/airbyte-webapp/src/pages/OnboardingPage/components/VideoItem/components/ShowVideo.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import styled from "styled-components";
 
 import { Button } from "components/base";
-import Modal from "components/Modal";
+import { Modal } from "components/ui/Modal";
 
 interface ShowVideoProps {
   videoId?: string;
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx
index 1c3f06318ac6..f6b5d47ebec4 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx
@@ -4,7 +4,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 import * as yup from "yup";
 
-import { Button, LabeledInput, Link, Modal, StatusIcon } from "components";
+import { Button, LabeledInput, Link, StatusIcon } from "components";
+import { Modal } from "components/ui/Modal";
 
 import { useConfig } from "config";
 
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx
index a616f9173a12..56b0dde20b50 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/CatalogDiffModal.tsx
@@ -5,7 +5,7 @@ import { Button } from "components";
 
 import { AirbyteCatalog, CatalogDiff } from "core/request/AirbyteClient";
 
-import { ModalBody, ModalFooter } from "../../../components/Modal";
+import { ModalBody, ModalFooter } from "../../../components/ui/Modal";
 import styles from "./CatalogDiffModal.module.scss";
 import { DiffSection } from "./components/DiffSection";
 import { FieldSection } from "./components/FieldSection";
diff --git a/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx b/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx
index df63e1ed9258..b1a496ec1873 100644
--- a/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogDiffModal/index.stories.tsx
@@ -1,7 +1,7 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { FormattedMessage } from "react-intl";
 
-import Modal from "components/Modal";
+import { Modal } from "components/ui/Modal";
 
 import { CatalogDiffModal } from "./CatalogDiffModal";
 
diff --git a/airbyte-webapp/src/views/Connection/TransformationForm/TransformationForm.tsx b/airbyte-webapp/src/views/Connection/TransformationForm/TransformationForm.tsx
index a2c0615015d9..3725a962f314 100644
--- a/airbyte-webapp/src/views/Connection/TransformationForm/TransformationForm.tsx
+++ b/airbyte-webapp/src/views/Connection/TransformationForm/TransformationForm.tsx
@@ -5,8 +5,12 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as yup from "yup";
 
-import { Button, ControlLabels, DropDown, Input, ModalBody, ModalFooter } from "components";
+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 { ModalBody, ModalFooter } from "components/ui/Modal";
 
 import { useConfig } from "config";
 import { OperationService } from "core/domain/connection";
diff --git a/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.tsx b/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.tsx
index 1970ca531c61..b3320f88ea76 100644
--- a/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.tsx
+++ b/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import { Modal } from "components";
+import { Modal } from "components/ui/Modal";
 
 import useRequestConnector from "hooks/services/useRequestConnector";
 import { useCurrentWorkspace } from "services/workspaces/WorkspacesService";
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 fc05419d7d71..ac69c032b7d0 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,8 @@ import { FormattedMessage } from "react-intl";
 import { useAsync, useEffectOnce } from "react-use";
 import * as yup from "yup";
 
-import { Button, ModalBody, ModalFooter } from "components";
+import { Button } from "components/base/Button";
+import { ModalBody, ModalFooter } from "components/ui/Modal";
 
 import { FormGroupItem, FormObjectArrayItem } from "core/form/types";