diff --git a/apps/web/components/dialog/RerouteDialog.tsx b/apps/web/components/dialog/RerouteDialog.tsx
index a430454c9c..5fb8f6da9e 100644
--- a/apps/web/components/dialog/RerouteDialog.tsx
+++ b/apps/web/components/dialog/RerouteDialog.tsx
@@ -26,7 +26,7 @@ import { trpc } from "@calcom/trpc/react";
 import type { Ensure } from "@calcom/types/utils";
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui";
 import { Button, Tooltip } from "@calcom/ui";
-import { showToast } from "@calcom/ui/components/toast";
+import { showToast } from "@calcom/ui/toast";
 
 const enum ReroutingStatusEnum {
   REROUTING_NOT_INITIATED = "not_initiated",
@@ -278,10 +278,12 @@ const NewRoutingManager = ({
   const router = useRouter();
   const bookerUrl = useBookerUrl();
   const teamMemberIdsMatchingAttributeLogic =
-    teamMembersMatchingAttributeLogic?.data?.map((member) => member.id).filter((id) => {
-      // We don't want to reroute to the same user who booked the booking
-      return id !== booking.user?.id;
-    }) || null;
+    teamMembersMatchingAttributeLogic?.data
+      ?.map((member) => member.id)
+      .filter((id) => {
+        // We don't want to reroute to the same user who booked the booking
+        return id !== booking.user?.id;
+      }) || null;
   const routedFromRoutingFormReponseId = booking.routedFromRoutingFormReponse.id;
 
   const bookingEventType = booking.eventType;
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 52d37fbdaf..d0875c2ec3 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -207,7 +207,6 @@ const nextConfig = {
     "@calcom/lib",
     "@calcom/prisma",
     "@calcom/trpc",
-    "@calcom/ui",
   ],
   modularizeImports: {
     "@calcom/features/insights/components": {
@@ -218,10 +217,6 @@ const nextConfig = {
     lodash: {
       transform: "lodash/{{member}}",
     },
-    // TODO: We need to have all components in `@calcom/ui/components` in order to use this
-    // "@calcom/ui": {
-    //   transform: "@calcom/ui/components/{{member}}",
-    // },
   },
   images: {
     unoptimized: true,
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index f9ca9f15ff..abb78cb8ce 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -8,7 +8,8 @@
       "@pages/*": ["pages/*"],
       "@lib/*": ["lib/*"],
       "@server/*": ["server/*"],
-      "@prisma/client/*": ["@calcom/prisma/client/*"]
+      "@prisma/client/*": ["@calcom/prisma/client/*"],
+      "@calcom/ui/*": ["../../packages/ui/components/*"]
     },
     "plugins": [
       {
diff --git a/packages/features/ee/teams/components/MemberList.tsx b/packages/features/ee/teams/components/MemberList.tsx
index b68c2d930c..edd09824a4 100644
--- a/packages/features/ee/teams/components/MemberList.tsx
+++ b/packages/features/ee/teams/components/MemberList.tsx
@@ -19,7 +19,6 @@ import type { Dispatch, SetStateAction } from "react";
 
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import { DynamicLink } from "@calcom/features/users/components/UserTable/BulkActions/DynamicLink";
-import { useFetchMoreOnBottomReached } from "@calcom/features/users/components/UserTable/useFetchMoreOnBottomReached";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -50,6 +49,7 @@ import {
   showToast,
   Tooltip,
 } from "@calcom/ui";
+import { useFetchMoreOnBottomReached } from "@calcom/ui/data-table";
 
 import DeleteBulkTeamMembers from "./DeleteBulkTeamMembers";
 import { EditMemberSheet } from "./EditMemberSheet";
diff --git a/packages/features/users/components/UserTable/UserListTable.tsx b/packages/features/users/components/UserTable/UserListTable.tsx
index 7e7670f37d..971f6568a4 100644
--- a/packages/features/users/components/UserTable/UserListTable.tsx
+++ b/packages/features/users/components/UserTable/UserListTable.tsx
@@ -30,6 +30,7 @@ import {
   DataTableSelectionBar,
   DataTablePagination,
 } from "@calcom/ui";
+import { useFetchMoreOnBottomReached } from "@calcom/ui/data-table";
 import { useGetUserAttributes } from "@calcom/web/components/settings/platform/hooks/useGetUserAttributes";
 
 import { DeleteBulkUsers } from "./BulkActions/DeleteBulkUsers";
@@ -44,7 +45,6 @@ import { ImpersonationMemberModal } from "./ImpersonationMemberModal";
 import { InviteMemberModal } from "./InviteMemberModal";
 import { TableActions } from "./UserTableActions";
 import type { UserTableState, UserTableAction, UserTableUser } from "./types";
-import { useFetchMoreOnBottomReached } from "./useFetchMoreOnBottomReached";
 
 type CustomColumnMeta<TData, TValue> = ColumnMeta<TData, TValue> & {
   sticky?: boolean;
diff --git a/packages/features/users/components/UserTable/useFetchMoreOnBottomReached.ts b/packages/features/users/components/UserTable/useFetchMoreOnBottomReached.ts
deleted file mode 100644
index ef224bd3c6..0000000000
--- a/packages/features/users/components/UserTable/useFetchMoreOnBottomReached.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useCallback, useEffect } from "react";
-
-export const useFetchMoreOnBottomReached = (
-  tableContainerRef: React.RefObject<HTMLDivElement>,
-  fetchNextPage: () => void,
-  isFetching: boolean,
-  totalFetched: number,
-  totalDBRowCount: number
-) => {
-  const fetchMoreOnBottomReached = useCallback(
-    (containerRefElement?: HTMLDivElement | null) => {
-      if (containerRefElement) {
-        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
-        if (scrollHeight - scrollTop - clientHeight < 300 && !isFetching && totalFetched < totalDBRowCount) {
-          fetchNextPage();
-        }
-      }
-    },
-    [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
-  );
-
-  useEffect(() => {
-    fetchMoreOnBottomReached(tableContainerRef.current);
-  }, [fetchMoreOnBottomReached, tableContainerRef]);
-
-  return fetchMoreOnBottomReached;
-};
diff --git a/packages/ui/components/alert/Alert.tsx b/packages/ui/components/alert/Alert.tsx
index 98ae1dc2f0..a98406dbca 100644
--- a/packages/ui/components/alert/Alert.tsx
+++ b/packages/ui/components/alert/Alert.tsx
@@ -2,7 +2,8 @@ import classNames from "classnames";
 import type { ReactNode } from "react";
 import { forwardRef } from "react";
 
-import { Icon, type IconName } from "../..";
+import { Icon } from "../icon";
+import type { IconName } from "../icon";
 
 export interface AlertProps {
   title?: ReactNode;
diff --git a/packages/ui/components/apps/AllApps.tsx b/packages/ui/components/apps/AllApps.tsx
index aac42617e5..2df70fa884 100644
--- a/packages/ui/components/apps/AllApps.tsx
+++ b/packages/ui/components/apps/AllApps.tsx
@@ -13,8 +13,8 @@ import type { UserAdminTeams } from "@calcom/lib/server/repository/user";
 import type { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
 
-import { Icon } from "../..";
 import { EmptyScreen } from "../empty-screen";
+import { Icon } from "../icon";
 import { AppCard } from "./AppCard";
 
 export function useShouldShowArrows() {
diff --git a/packages/ui/components/apps/Categories.tsx b/packages/ui/components/apps/Categories.tsx
index 3d6e4a8fb2..d465cfc9a2 100644
--- a/packages/ui/components/apps/Categories.tsx
+++ b/packages/ui/components/apps/Categories.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Icon } from "../..";
+import { Icon } from "../icon";
 import { SkeletonText } from "../skeleton";
 import { Slider } from "./Slider";
 
diff --git a/packages/ui/components/apps/Slider.tsx b/packages/ui/components/apps/Slider.tsx
index 07897f4e90..69512fee5d 100644
--- a/packages/ui/components/apps/Slider.tsx
+++ b/packages/ui/components/apps/Slider.tsx
@@ -9,7 +9,7 @@ import { useEffect, useRef } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Icon } from "../..";
+import { Icon } from "../icon";
 import { SkeletonText } from "../skeleton";
 
 const SliderButton: FC<ComponentProps<"button">> = (props) => {
diff --git a/packages/ui/components/arrow-button/ArrowButton.tsx b/packages/ui/components/arrow-button/ArrowButton.tsx
index f7d16a604e..01719d5e2c 100644
--- a/packages/ui/components/arrow-button/ArrowButton.tsx
+++ b/packages/ui/components/arrow-button/ArrowButton.tsx
@@ -1,4 +1,4 @@
-import { Icon } from "../..";
+import { Icon } from "../icon";
 
 export type ArrowButtonProps = {
   arrowDirection: "up" | "down";
diff --git a/packages/ui/components/badge/Badge.tsx b/packages/ui/components/badge/Badge.tsx
index 35c76e326e..a1fad26c2e 100644
--- a/packages/ui/components/badge/Badge.tsx
+++ b/packages/ui/components/badge/Badge.tsx
@@ -4,7 +4,8 @@ import React from "react";
 
 import classNames from "@calcom/lib/classNames";
 
-import { Icon, type IconName } from "../..";
+import { Icon } from "../icon";
+import type { IconName } from "../icon";
 
 export const badgeStyles = cva("font-medium inline-flex items-center justify-center rounded gap-x-1", {
   variants: {
diff --git a/packages/ui/components/badge/InfoBadge.tsx b/packages/ui/components/badge/InfoBadge.tsx
index c752820fac..c5351c9c2b 100644
--- a/packages/ui/components/badge/InfoBadge.tsx
+++ b/packages/ui/components/badge/InfoBadge.tsx
@@ -1,4 +1,4 @@
-import { Icon } from "../..";
+import { Icon } from "../icon";
 import { Tooltip } from "../tooltip/Tooltip";
 
 export function InfoBadge({ content }: { content: string }) {
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index e8376591ec..effcb7240d 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -6,7 +6,8 @@ import React, { forwardRef } from "react";
 
 import classNames from "@calcom/lib/classNames";
 
-import { Icon, type IconName } from "../..";
+import { Icon } from "../icon";
+import type { IconName } from "../icon";
 import { Tooltip } from "../tooltip";
 
 type InferredVariantProps = VariantProps<typeof buttonClasses>;
diff --git a/packages/ui/components/button/LinkIconButton.tsx b/packages/ui/components/button/LinkIconButton.tsx
index abe590ef19..7d7d8ae42d 100644
--- a/packages/ui/components/button/LinkIconButton.tsx
+++ b/packages/ui/components/button/LinkIconButton.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
-import { Icon, type IconName } from "@calcom/ui";
+import { Icon } from "../icon";
+import type { IconName } from "../icon";
 
 interface LinkIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   Icon: IconName;
diff --git a/packages/ui/components/button/index.ts b/packages/ui/components/button/index.ts
index 2d1bad9644..1d9712819e 100644
--- a/packages/ui/components/button/index.ts
+++ b/packages/ui/components/button/index.ts
@@ -1,3 +1,3 @@
 export { Button, buttonClasses } from "./Button";
-export type { ButtonBaseProps, ButtonProps } from "./Button";
+export type { ButtonBaseProps, ButtonProps, ButtonColor } from "./Button";
 export { default as LinkIconButton } from "./LinkIconButton";
diff --git a/packages/ui/components/buttonGroup/buttongroup.stories.mdx b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
index 61990db9d3..c130cc6266 100644
--- a/packages/ui/components/buttonGroup/buttongroup.stories.mdx
+++ b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
@@ -10,9 +10,9 @@ import {
   VariantRow,
 } from "@calcom/storybook/components";
 
-import { Icon } from "../..";
-import { Button } from "../button/Button";
-import { ButtonGroup } from "./ButtonGroup";
+import { Icon } from "@calcom/ui/icon";
+import { Button } from "@calcom/ui/button";
+import { ButtonGroup } from "@calcom/ui/ButtonGroup";
 
 <Meta title="UI/Button Group" component={ButtonGroup} />
 
diff --git a/packages/ui/components/calendar-switch/CalendarSwitch.tsx b/packages/ui/components/calendar-switch/CalendarSwitch.tsx
index beb056a199..d8b02de0b4 100644
--- a/packages/ui/components/calendar-switch/CalendarSwitch.tsx
+++ b/packages/ui/components/calendar-switch/CalendarSwitch.tsx
@@ -4,7 +4,8 @@ import type { ReactNode } from "react";
 
 import { type ICalendarSwitchProps } from "@calcom/features/calendars/CalendarSwitch";
 import { classNames } from "@calcom/lib";
-import { Icon } from "@calcom/ui";
+
+import { Icon } from "../icon";
 
 export function CalendarSwitchComponent(
   props: ICalendarSwitchProps & {
diff --git a/packages/ui/components/card/FormCard.tsx b/packages/ui/components/card/FormCard.tsx
index 03319e79a3..7ffbe4f69d 100644
--- a/packages/ui/components/card/FormCard.tsx
+++ b/packages/ui/components/card/FormCard.tsx
@@ -2,9 +2,10 @@ import Link from "next/link";
 
 import { classNames } from "@calcom/lib";
 
-import type { BadgeProps } from "../..";
-import { Badge, Icon } from "../..";
+import type { BadgeProps } from "../badge";
+import { Badge } from "../badge";
 import { Divider } from "../divider";
+import { Icon } from "../icon";
 
 type Action = { check: () => boolean; fn: () => void };
 export default function FormCard({
diff --git a/packages/ui/components/data-table/index.tsx b/packages/ui/components/data-table/DataTable.tsx
similarity index 96%
rename from packages/ui/components/data-table/index.tsx
rename to packages/ui/components/data-table/DataTable.tsx
index c07840f4e9..9360fedf38 100644
--- a/packages/ui/components/data-table/index.tsx
+++ b/packages/ui/components/data-table/DataTable.tsx
@@ -7,13 +7,9 @@ import { useVirtual } from "react-virtual";
 
 import classNames from "@calcom/lib/classNames";
 
-import Icon from "../icon/Icon";
+import { Icon } from "../icon";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/TableNew";
 
-// Export DataTable components under a common namespace for better clarity
-export { DataTableToolbar } from "./DataTableToolbar";
-export { DataTableFilters } from "./filters";
-
 export interface DataTableProps<TData, TValue> {
   table: ReactTableType<TData>;
   tableContainerRef: React.RefObject<HTMLDivElement>;
diff --git a/packages/ui/components/data-table/DataTableFilter.tsx b/packages/ui/components/data-table/DataTableFilter.tsx
index f5b717117a..43da78d2ec 100644
--- a/packages/ui/components/data-table/DataTableFilter.tsx
+++ b/packages/ui/components/data-table/DataTableFilter.tsx
@@ -5,8 +5,6 @@ import { useState } from "react";
 
 import { classNames } from "@calcom/lib";
 
-import type { IconName } from "../..";
-import { Icon } from "../..";
 import { Badge } from "../badge";
 import { Button } from "../button";
 import {
@@ -18,6 +16,8 @@ import {
   CommandList,
   CommandSeparator,
 } from "../command";
+import type { IconName } from "../icon";
+import { Icon } from "../icon";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 
 interface FilterOption {
diff --git a/packages/ui/components/data-table/DataTableSelectionBar.tsx b/packages/ui/components/data-table/DataTableSelectionBar.tsx
index b8ed3e1da0..df879ca6e4 100644
--- a/packages/ui/components/data-table/DataTableSelectionBar.tsx
+++ b/packages/ui/components/data-table/DataTableSelectionBar.tsx
@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 
 import { classNames } from "@calcom/lib";
 
-import type { IconName } from "../..";
+import type { IconName } from "../icon";
 
 export type ActionItem<TData> =
   | {
diff --git a/packages/ui/components/data-table/index.ts b/packages/ui/components/data-table/index.ts
new file mode 100644
index 0000000000..4b60a21365
--- /dev/null
+++ b/packages/ui/components/data-table/index.ts
@@ -0,0 +1,7 @@
+export { DataTableToolbar } from "./DataTableToolbar";
+export { DataTableSelectionBar } from "./DataTableSelectionBar";
+export { DataTablePagination } from "./DataTablePagination";
+export { DataTableFilters } from "./filters";
+export { useFetchMoreOnBottomReached } from "./useFetchMoreOnBottomReached";
+export { DataTable } from "./DataTable";
+export type { DataTableProps } from "./DataTable";
diff --git a/packages/ui/components/data-table/useFetchMoreOnBottomReached.ts b/packages/ui/components/data-table/useFetchMoreOnBottomReached.ts
index ef224bd3c6..f1407c5001 100644
--- a/packages/ui/components/data-table/useFetchMoreOnBottomReached.ts
+++ b/packages/ui/components/data-table/useFetchMoreOnBottomReached.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useEffect } from "react";
 
 export const useFetchMoreOnBottomReached = (
diff --git a/packages/ui/components/dialog/ConfirmationDialogContent.tsx b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
index f860dec77f..d196324dd1 100644
--- a/packages/ui/components/dialog/ConfirmationDialogContent.tsx
+++ b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
@@ -4,7 +4,7 @@ import React from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Icon } from "../..";
+import { Icon } from "../icon";
 import { DialogClose, DialogContent } from "./Dialog";
 
 type ConfirmBtnType =
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 48e17b04c9..886cdd6943 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -10,10 +10,10 @@ import classNames from "@calcom/lib/classNames";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import type { IconName } from "../..";
-import { Icon } from "../..";
-import type { ButtonProps } from "../../components/button";
-import { Button } from "../../components/button";
+import type { ButtonProps } from "../button";
+import { Button } from "../button";
+import type { IconName } from "../icon";
+import { Icon } from "../icon";
 
 export type DialogProps = React.ComponentProps<(typeof DialogPrimitive)["Root"]> & {
   name?: string;
@@ -99,7 +99,16 @@ type DialogContentProps = React.ComponentProps<(typeof DialogPrimitive)["Content
 // enableOverflow:- use this prop whenever content inside DialogContent could overflow and require scrollbar
 export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
   (
-    { children, title, Icon: icon, enableOverflow, forceOverlayWhenNoModal, type = "creation", preventCloseOnOutsideClick, ...props },
+    {
+      children,
+      title,
+      Icon: icon,
+      enableOverflow,
+      forceOverlayWhenNoModal,
+      type = "creation",
+      preventCloseOnOutsideClick,
+      ...props
+    },
     forwardedRef
   ) => {
     const isPlatform = useIsPlatform();
diff --git a/packages/ui/components/form/dropdown/Dropdown.tsx b/packages/ui/components/dropdown/Dropdown.tsx
similarity index 98%
rename from packages/ui/components/form/dropdown/Dropdown.tsx
rename to packages/ui/components/dropdown/Dropdown.tsx
index ec5cd432d0..0cf6aa4c63 100644
--- a/packages/ui/components/form/dropdown/Dropdown.tsx
+++ b/packages/ui/components/dropdown/Dropdown.tsx
@@ -4,9 +4,10 @@ import type { ComponentProps } from "react";
 import { forwardRef } from "react";
 
 import { classNames } from "@calcom/lib";
-import { Icon, type IconName } from "@calcom/ui";
 
-import type { ButtonColor } from "../../button/Button";
+import type { ButtonColor } from "../button";
+import { Icon } from "../icon";
+import type { IconName } from "../icon";
 
 export const Dropdown = DropdownMenuPrimitive.Root;
 
diff --git a/packages/ui/components/form/dropdown/dropdown.stories.mdx b/packages/ui/components/dropdown/dropdown.stories.mdx
similarity index 98%
rename from packages/ui/components/form/dropdown/dropdown.stories.mdx
rename to packages/ui/components/dropdown/dropdown.stories.mdx
index 9760c05587..f6bce2faa1 100644
--- a/packages/ui/components/form/dropdown/dropdown.stories.mdx
+++ b/packages/ui/components/dropdown/dropdown.stories.mdx
@@ -8,8 +8,8 @@ import {
   VariantRow,
   VariantsTable,
 } from "@calcom/storybook/components";
-import { Button } from "@calcom/ui";
-import { Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui/button";
+import { Icon } from "@calcom/ui/icon";
 
 import {
   Dropdown,
@@ -19,7 +19,7 @@ import {
   DropdownItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-} from "./Dropdown";
+} from "@calcom/ui/dropdown";
 
 <Meta title="UI/Form/Dropdown" component={Dropdown} />
 
diff --git a/packages/ui/components/form/dropdown/index.ts b/packages/ui/components/dropdown/index.ts
similarity index 100%
rename from packages/ui/components/form/dropdown/index.ts
rename to packages/ui/components/dropdown/index.ts
diff --git a/packages/ui/components/editable-heading/EditableHeading.tsx b/packages/ui/components/editable-heading/EditableHeading.tsx
index d221210532..a366cfa5cc 100644
--- a/packages/ui/components/editable-heading/EditableHeading.tsx
+++ b/packages/ui/components/editable-heading/EditableHeading.tsx
@@ -4,7 +4,7 @@ import classNames from "classnames";
 import { useState } from "react";
 import type { ControllerRenderProps } from "react-hook-form";
 
-import { Icon } from "../..";
+import { Icon } from "../icon";
 
 export const EditableHeading = function EditableHeading({
   value,
diff --git a/packages/ui/components/editable-heading/index.tsx b/packages/ui/components/editable-heading/index.ts
similarity index 100%
rename from packages/ui/components/editable-heading/index.tsx
rename to packages/ui/components/editable-heading/index.ts
diff --git a/packages/ui/components/editor/index.ts b/packages/ui/components/editor/index.ts
index 1e747c6011..82463f3619 100644
--- a/packages/ui/components/editor/index.ts
+++ b/packages/ui/components/editor/index.ts
@@ -1,2 +1,3 @@
 export { Editor } from "./Editor";
+export type { TextEditorProps } from "./Editor";
 export { AddVariablesDropdown } from "./plugins/AddVariablesDropdown";
diff --git a/packages/ui/components/editor/plugins/AddVariablesDropdown.test.tsx b/packages/ui/components/editor/plugins/AddVariablesDropdown.test.tsx
index 4905ef4bf9..605fca3d3c 100644
--- a/packages/ui/components/editor/plugins/AddVariablesDropdown.test.tsx
+++ b/packages/ui/components/editor/plugins/AddVariablesDropdown.test.tsx
@@ -10,7 +10,7 @@ vi.mock("@calcom/lib/hooks/useLocale", () => ({
 }));
 
 // Mock the Dropdown component
-vi.mock("../../form/dropdown", () => ({
+vi.mock("../../dropdown", () => ({
   Dropdown: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   DropdownMenuTrigger: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
   DropdownMenuContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
diff --git a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
index 5ab7074999..9f703660e6 100644
--- a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
+++ b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
@@ -1,7 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Icon } from "../../..";
-import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../form/dropdown";
+import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../dropdown";
+import { Icon } from "../../icon";
 
 interface IAddVariablesDropdown {
   addVariable: (variable: string) => void;
diff --git a/packages/ui/components/editor/plugins/ToolbarPlugin.test.tsx b/packages/ui/components/editor/plugins/ToolbarPlugin.test.tsx
index 2cf97dc0e3..2cc50d0b53 100644
--- a/packages/ui/components/editor/plugins/ToolbarPlugin.test.tsx
+++ b/packages/ui/components/editor/plugins/ToolbarPlugin.test.tsx
@@ -10,7 +10,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import ToolbarPlugin from "./ToolbarPlugin";
 
 // Mocks
-vi.mock("../../..", () => ({
+vi.mock("../../icon", () => ({
   Icon: ({ name }: { name: string }) => <span data-testid={`icon-${name}`}>{name}</span>,
 }));
 
@@ -23,7 +23,7 @@ vi.mock("../../button", () => ({
   ),
 }));
 
-vi.mock("../../form/dropdown", () => ({
+vi.mock("../../dropdown", () => ({
   Dropdown: ({ children }: any) => <div data-testid="dropdown">{children}</div>,
   DropdownMenuTrigger: ({ children }: any) => <div data-testid="dropdown-trigger">{children}</div>,
   DropdownMenuContent: ({ children }: any) => <div data-testid="dropdown-content">{children}</div>,
diff --git a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
index e3d51a9d0c..aafa5cf595 100644
--- a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
+++ b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
@@ -27,9 +27,9 @@ import {
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
-import { Icon } from "../../..";
 import { Button } from "../../button";
-import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../form/dropdown";
+import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../dropdown";
+import { Icon } from "../../icon";
 import type { TextEditorProps } from "../Editor";
 import { AddVariablesDropdown } from "./AddVariablesDropdown";
 
diff --git a/packages/ui/components/empty-screen/EmptyScreen.tsx b/packages/ui/components/empty-screen/EmptyScreen.tsx
index df92bbc8a1..f0db2616b2 100644
--- a/packages/ui/components/empty-screen/EmptyScreen.tsx
+++ b/packages/ui/components/empty-screen/EmptyScreen.tsx
@@ -3,9 +3,9 @@ import React from "react";
 
 import { classNames } from "@calcom/lib";
 
-import type { IconName } from "../..";
-import { Icon } from "../..";
-import { Button } from "../../components/button";
+import { Button } from "../button";
+import type { IconName } from "../icon";
+import { Icon } from "../icon";
 
 export function EmptyScreen({
   Icon: icon,
diff --git a/packages/ui/components/form/checkbox/Checkbox.tsx b/packages/ui/components/form/checkbox/Checkbox.tsx
index 7ef912e7cd..5d36db650b 100644
--- a/packages/ui/components/form/checkbox/Checkbox.tsx
+++ b/packages/ui/components/form/checkbox/Checkbox.tsx
@@ -4,7 +4,8 @@ import type { InputHTMLAttributes } from "react";
 import React, { forwardRef } from "react";
 
 import classNames from "@calcom/lib/classNames";
-import { Icon } from "@calcom/ui";
+
+import { Icon } from "../../icon";
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label?: React.ReactNode;
diff --git a/packages/ui/components/form/date-range-picker/Calendar.tsx b/packages/ui/components/form/date-range-picker/Calendar.tsx
index 69b19a46dd..7c646692a8 100644
--- a/packages/ui/components/form/date-range-picker/Calendar.tsx
+++ b/packages/ui/components/form/date-range-picker/Calendar.tsx
@@ -6,8 +6,8 @@ import { DayPicker } from "react-day-picker";
 import dayjs from "@calcom/dayjs";
 import { classNames as cn } from "@calcom/lib";
 
-import { Icon } from "../../../index";
 import { buttonClasses } from "../../button/Button";
+import { Icon } from "../../icon";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
diff --git a/packages/ui/components/form/datepicker/DatePicker.tsx b/packages/ui/components/form/datepicker/DatePicker.tsx
index f503af72aa..5b9817872f 100644
--- a/packages/ui/components/form/datepicker/DatePicker.tsx
+++ b/packages/ui/components/form/datepicker/DatePicker.tsx
@@ -4,7 +4,7 @@ import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
 
 import classNames from "@calcom/lib/classNames";
 
-import { Icon } from "../../..";
+import { Icon } from "../../icon";
 
 type Props = {
   date: Date;
diff --git a/packages/ui/components/form/index.ts b/packages/ui/components/form/index.ts
index 7eea6030f3..78614d41d7 100644
--- a/packages/ui/components/form/index.ts
+++ b/packages/ui/components/form/index.ts
@@ -34,20 +34,4 @@ export { DatePicker } from "./datepicker";
 export { FormStep, Steps, Stepper } from "./step";
 export { WizardForm } from "./wizard";
 export { default as ColorPicker } from "./color-picker/colorpicker";
-export {
-  Dropdown,
-  ButtonOrLink,
-  DropdownItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  DropdownMenuTriggerItem,
-} from "./dropdown";
 export { SettingsToggle, Switch } from "./switch";
diff --git a/packages/ui/components/form/inputs/Form.tsx b/packages/ui/components/form/inputs/Form.tsx
index ca3a3270dc..a97e79318f 100644
--- a/packages/ui/components/form/inputs/Form.tsx
+++ b/packages/ui/components/form/inputs/Form.tsx
@@ -5,7 +5,7 @@ import { FormProvider } from "react-hook-form";
 
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 
-import { showToast } from "../../..";
+import { showToast } from "../../toast";
 
 type FormProps<T extends object> = { form: UseFormReturn<T>; handleSubmit: SubmitHandler<T> } & Omit<
   JSX.IntrinsicElements["form"],
diff --git a/packages/ui/components/form/inputs/HintOrErrors.tsx b/packages/ui/components/form/inputs/HintOrErrors.tsx
index 9b88a80873..46d17b9ae3 100644
--- a/packages/ui/components/form/inputs/HintOrErrors.tsx
+++ b/packages/ui/components/form/inputs/HintOrErrors.tsx
@@ -1,7 +1,7 @@
 import type { FieldValues } from "react-hook-form";
 import { useFormContext } from "react-hook-form";
 
-import { Icon } from "../../..";
+import { Icon } from "../../icon";
 import { InputError } from "./InputError";
 
 type hintsOrErrorsProps = {
diff --git a/packages/ui/components/form/inputs/Input.tsx b/packages/ui/components/form/inputs/Input.tsx
index 4983ba4ea0..1344fa3de5 100644
--- a/packages/ui/components/form/inputs/Input.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -7,7 +7,10 @@ import { useFormContext } from "react-hook-form";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Alert, Icon, Input, InputField, Tooltip } from "../../..";
+import { Alert } from "../../alert";
+import { Icon } from "../../icon";
+import { Tooltip } from "../../tooltip";
+import { Input, InputField } from "../inputs/TextField";
 import { Label } from "./Label";
 import type { InputFieldProps } from "./types";
 
diff --git a/packages/ui/components/form/inputs/InputError.tsx b/packages/ui/components/form/inputs/InputError.tsx
index 7e0975ce63..1925da16a2 100644
--- a/packages/ui/components/form/inputs/InputError.tsx
+++ b/packages/ui/components/form/inputs/InputError.tsx
@@ -1,4 +1,4 @@
-import { Icon } from "../../..";
+import { Icon } from "../../icon";
 
 type InputErrorProp = {
   message: string;
diff --git a/packages/ui/components/form/inputs/InputFieldWithSelect.tsx b/packages/ui/components/form/inputs/InputFieldWithSelect.tsx
index 72b0cd550f..f6703f5884 100644
--- a/packages/ui/components/form/inputs/InputFieldWithSelect.tsx
+++ b/packages/ui/components/form/inputs/InputFieldWithSelect.tsx
@@ -1,6 +1,7 @@
 import React, { forwardRef } from "react";
 
-import { InputField, UnstyledSelect } from "../../..";
+import { UnstyledSelect } from "../../../form/Select";
+import { InputField } from "./TextField";
 import type { InputFieldProps } from "./types";
 
 export const InputFieldWithSelect = forwardRef<
diff --git a/packages/ui/components/form/inputs/TextField.tsx b/packages/ui/components/form/inputs/TextField.tsx
index 720d0cf1d7..cb29d55687 100644
--- a/packages/ui/components/form/inputs/TextField.tsx
+++ b/packages/ui/components/form/inputs/TextField.tsx
@@ -5,7 +5,8 @@ import React, { forwardRef, useId, useState } from "react";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Icon, Skeleton } from "../../..";
+import { Icon } from "../../icon";
+import { Skeleton } from "../../skeleton";
 import { HintsOrErrors } from "./HintOrErrors";
 import { Label } from "./Label";
 import type { InputFieldProps, InputProps } from "./types";
diff --git a/packages/ui/components/form/select/components.tsx b/packages/ui/components/form/select/components.tsx
index d41557ea9c..74dbaba846 100644
--- a/packages/ui/components/form/select/components.tsx
+++ b/packages/ui/components/form/select/components.tsx
@@ -3,8 +3,8 @@ import { components as reactSelectComponents } from "react-select";
 
 import { classNames } from "@calcom/lib";
 
-import { Icon } from "../../..";
 import { UpgradeTeamsBadge } from "../../badge";
+import { Icon } from "../../icon";
 import type { SelectProps } from "./Select";
 
 export const InputComponent = <
diff --git a/packages/ui/components/form/switch/SettingsToggle.tsx b/packages/ui/components/form/switch/SettingsToggle.tsx
index 255cb7506a..1611950aaf 100644
--- a/packages/ui/components/form/switch/SettingsToggle.tsx
+++ b/packages/ui/components/form/switch/SettingsToggle.tsx
@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 
 import { classNames } from "@calcom/lib";
 
-import { Label } from "..";
+import { Label } from "../inputs/Label";
 import Switch from "./Switch";
 
 type Props = {
diff --git a/packages/ui/components/form/toggleGroup/toggleGroup.stories.mdx b/packages/ui/components/form/toggleGroup/toggleGroup.stories.mdx
index e618fe6c3e..223e04b009 100644
--- a/packages/ui/components/form/toggleGroup/toggleGroup.stories.mdx
+++ b/packages/ui/components/form/toggleGroup/toggleGroup.stories.mdx
@@ -9,7 +9,7 @@ import {
   VariantsTable,
   VariantRow,
 } from "@calcom/storybook/components";
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/icon";
 
 import { ToggleGroup } from "./ToggleGroup";
 
diff --git a/packages/ui/components/form/wizard/WizardForm.tsx b/packages/ui/components/form/wizard/WizardForm.tsx
index c51481daa0..ea9a297452 100644
--- a/packages/ui/components/form/wizard/WizardForm.tsx
+++ b/packages/ui/components/form/wizard/WizardForm.tsx
@@ -9,7 +9,8 @@ import { useEffect, useState } from "react";
 import classNames from "@calcom/lib/classNames";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 
-import { Button, Steps } from "../../..";
+import { Button } from "../../button";
+import { Steps } from "../../form/step";
 
 type DefaultStep = {
   title: string;
diff --git a/packages/ui/components/icon/index.ts b/packages/ui/components/icon/index.ts
new file mode 100644
index 0000000000..9df602e16b
--- /dev/null
+++ b/packages/ui/components/icon/index.ts
@@ -0,0 +1,3 @@
+export { default as Icon } from "./Icon";
+export type { IconName } from "./icon-names";
+export { IconSprites } from "./IconSprites";
diff --git a/packages/ui/components/image-uploader/BannerUploader.tsx b/packages/ui/components/image-uploader/BannerUploader.tsx
index 48894c9a31..a1ec88df4e 100644
--- a/packages/ui/components/image-uploader/BannerUploader.tsx
+++ b/packages/ui/components/image-uploader/BannerUploader.tsx
@@ -6,8 +6,9 @@ import Cropper from "react-easy-crop";
 import checkIfItFallbackImage from "@calcom/lib/checkIfItFallbackImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import type { ButtonColor } from "../..";
-import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, DialogFooter } from "../..";
+import type { ButtonColor } from "../button";
+import { Button } from "../button";
+import { Dialog, DialogClose, DialogContent, DialogTrigger, DialogFooter } from "../dialog";
 import { showToast } from "../toast";
 import { useFileReader, createImage, Slider } from "./Common";
 import type { FileEvent, Area } from "./Common";
diff --git a/packages/ui/components/image-uploader/ImageUploader.tsx b/packages/ui/components/image-uploader/ImageUploader.tsx
index 928e12cfc2..ad2cc4d0c8 100644
--- a/packages/ui/components/image-uploader/ImageUploader.tsx
+++ b/packages/ui/components/image-uploader/ImageUploader.tsx
@@ -6,8 +6,9 @@ import Cropper from "react-easy-crop";
 import checkIfItFallbackImage from "@calcom/lib/checkIfItFallbackImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import type { ButtonColor } from "../..";
-import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, DialogFooter } from "../..";
+import type { ButtonColor } from "../button";
+import { Button } from "../button";
+import { Dialog, DialogClose, DialogContent, DialogTrigger, DialogFooter } from "../dialog";
 import { showToast } from "../toast";
 import { useFileReader, createImage, Slider } from "./Common";
 import type { FileEvent, Area } from "./Common";
diff --git a/packages/ui/components/navigation/index.tsx b/packages/ui/components/navigation/index.ts
similarity index 100%
rename from packages/ui/components/navigation/index.tsx
rename to packages/ui/components/navigation/index.ts
diff --git a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
index 7d2ba86a3d..7d97de3b3d 100644
--- a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
@@ -4,8 +4,9 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useUrlMatchesCurrentUrl } from "@calcom/lib/hooks/useUrlMatchesCurrentUrl";
 
-import { Icon, type IconName } from "../../..";
 import { Avatar } from "../../avatar";
+import { Icon } from "../../icon";
+import type { IconName } from "../../icon";
 import { SkeletonText } from "../../skeleton";
 
 export type HorizontalTabItemProps = {
diff --git a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
index 4085511674..bb58bbb117 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
@@ -5,7 +5,8 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useUrlMatchesCurrentUrl } from "@calcom/lib/hooks/useUrlMatchesCurrentUrl";
 
-import { Icon, type IconName } from "../../..";
+import { Icon } from "../../icon";
+import type { IconName } from "../../icon";
 import { Skeleton } from "../../skeleton";
 
 export type VerticalTabItemProps = {
diff --git a/packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx b/packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx
index 2bec7cc859..9ca85f8107 100644
--- a/packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx
+++ b/packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx
@@ -8,7 +8,7 @@ import {
   Examples,
   Example,
 } from "@calcom/storybook/components";
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/icon";
 
 import HorizontalTabs from "../HorizontalTabs";
 
diff --git a/packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx b/packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx
index 09595cb8b1..774b890010 100644
--- a/packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx
+++ b/packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx
@@ -8,7 +8,7 @@ import {
   VariantsTable,
   VariantRow,
 } from "@calcom/storybook/components";
-import { Icon } from "@calcom/ui";
+import { Icon } from "@calcom/ui/icon";
 
 import VerticalTabs from "../VerticalTabs";
 
diff --git a/packages/ui/components/popover/AnimatedPopover.tsx b/packages/ui/components/popover/AnimatedPopover.tsx
index 7a025df6ba..0fb686c315 100644
--- a/packages/ui/components/popover/AnimatedPopover.tsx
+++ b/packages/ui/components/popover/AnimatedPopover.tsx
@@ -2,9 +2,9 @@ import * as Popover from "@radix-ui/react-popover";
 import React from "react";
 
 import { classNames } from "@calcom/lib";
-import { Tooltip } from "@calcom/ui";
 
-import { Icon } from "../..";
+import { Icon } from "../icon";
+import { Tooltip } from "../tooltip";
 
 export const AnimatedPopover = ({
   text,
diff --git a/packages/ui/components/popover/MeetingTimeInTimezones.tsx b/packages/ui/components/popover/MeetingTimeInTimezones.tsx
index af711ee836..ad849ccd91 100644
--- a/packages/ui/components/popover/MeetingTimeInTimezones.tsx
+++ b/packages/ui/components/popover/MeetingTimeInTimezones.tsx
@@ -8,7 +8,7 @@ import {
   sortByTimezone,
 } from "@calcom/lib/date-fns";
 
-import { Icon } from "../..";
+import { Icon } from "../icon";
 
 type Attendee = {
   id: number;
diff --git a/packages/ui/components/popover/index.tsx b/packages/ui/components/popover/Popover.tsx
similarity index 87%
rename from packages/ui/components/popover/index.tsx
rename to packages/ui/components/popover/Popover.tsx
index 2841491d7e..748915e780 100644
--- a/packages/ui/components/popover/index.tsx
+++ b/packages/ui/components/popover/Popover.tsx
@@ -24,9 +24,7 @@ const PopoverContent = React.forwardRef<
     />
   </PopoverPrimitive.Portal>
 ));
+
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent };
-
-export { AnimatedPopover } from "./AnimatedPopover";
-export { default as MeetingTimeInTimezones } from "./MeetingTimeInTimezones";
diff --git a/packages/ui/components/popover/index.ts b/packages/ui/components/popover/index.ts
new file mode 100644
index 0000000000..642bf9ea56
--- /dev/null
+++ b/packages/ui/components/popover/index.ts
@@ -0,0 +1,4 @@
+export { Popover, PopoverTrigger, PopoverContent } from "./Popover";
+
+export { AnimatedPopover } from "./AnimatedPopover";
+export { default as MeetingTimeInTimezones } from "./MeetingTimeInTimezones";
diff --git a/packages/ui/components/scrollable/index.ts b/packages/ui/components/scrollable/index.ts
new file mode 100644
index 0000000000..98951ee31a
--- /dev/null
+++ b/packages/ui/components/scrollable/index.ts
@@ -0,0 +1 @@
+export { ScrollableArea } from "./ScrollableArea";
diff --git a/packages/ui/components/sheet/sheet.tsx b/packages/ui/components/sheet/Sheet.tsx
similarity index 100%
rename from packages/ui/components/sheet/sheet.tsx
rename to packages/ui/components/sheet/Sheet.tsx
diff --git a/packages/ui/components/sheet/index.ts b/packages/ui/components/sheet/index.ts
new file mode 100644
index 0000000000..1ca8103bb6
--- /dev/null
+++ b/packages/ui/components/sheet/index.ts
@@ -0,0 +1,11 @@
+export {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./Sheet";
diff --git a/packages/ui/components/skeleton/index.tsx b/packages/ui/components/skeleton/Skeleton.tsx
similarity index 98%
rename from packages/ui/components/skeleton/index.tsx
rename to packages/ui/components/skeleton/Skeleton.tsx
index b540243444..5d21ebb8f9 100644
--- a/packages/ui/components/skeleton/index.tsx
+++ b/packages/ui/components/skeleton/Skeleton.tsx
@@ -114,4 +114,3 @@ const SelectSkeletonLoader: React.FC<SkeletonLoaderProps> = ({ className }) => {
 };
 
 export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer, SelectSkeletonLoader };
-export { default as Loader } from "./Loader";
diff --git a/packages/ui/components/skeleton/index.ts b/packages/ui/components/skeleton/index.ts
new file mode 100644
index 0000000000..65475fae41
--- /dev/null
+++ b/packages/ui/components/skeleton/index.ts
@@ -0,0 +1,9 @@
+export {
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonText,
+  SkeletonButton,
+  SkeletonContainer,
+  SelectSkeletonLoader,
+} from "./Skeleton";
+export { default as Loader } from "./Loader";
diff --git a/packages/ui/components/table/TableActions.tsx b/packages/ui/components/table/TableActions.tsx
index 517ad10542..52cd566201 100644
--- a/packages/ui/components/table/TableActions.tsx
+++ b/packages/ui/components/table/TableActions.tsx
@@ -1,7 +1,6 @@
 import type { FC } from "react";
 import React from "react";
 
-import type { IconName } from "../..";
 import type { ButtonBaseProps } from "../button";
 import { Button } from "../button";
 import {
@@ -11,7 +10,8 @@ import {
   DropdownMenuItem,
   DropdownMenuPortal,
   DropdownMenuTrigger,
-} from "../form/dropdown";
+} from "../dropdown";
+import type { IconName } from "../icon";
 
 export type ActionType = {
   id: string;
diff --git a/packages/ui/components/table/index.ts b/packages/ui/components/table/index.ts
new file mode 100644
index 0000000000..4ce6c429ed
--- /dev/null
+++ b/packages/ui/components/table/index.ts
@@ -0,0 +1,11 @@
+export { Table } from "./Table";
+export {
+  Table as TableNew,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./TableNew";
diff --git a/packages/ui/components/test-setup.ts b/packages/ui/components/test-setup.ts
index 0650038897..1b09e2d3e5 100644
--- a/packages/ui/components/test-setup.ts
+++ b/packages/ui/components/test-setup.ts
@@ -6,12 +6,6 @@ import { afterEach, expect, vi } from "vitest";
 // For next.js webapp compponent that use "preserve" for jsx in tsconfig.json
 global.React = React;
 
-vi.mock("next-auth/react", () => ({
-  useSession() {
-    return {};
-  },
-}));
-
 vi.mock("@calcom/features/ee/organizations/hooks", () => ({
   useOrgBrandingValues() {
     return {};
diff --git a/packages/ui/components/toast/index.tsx b/packages/ui/components/toast/index.ts
similarity index 100%
rename from packages/ui/components/toast/index.tsx
rename to packages/ui/components/toast/index.ts
diff --git a/packages/ui/components/toast/showToast.tsx b/packages/ui/components/toast/showToast.tsx
index 9d6a51b24c..5076d1a6c8 100644
--- a/packages/ui/components/toast/showToast.tsx
+++ b/packages/ui/components/toast/showToast.tsx
@@ -2,7 +2,7 @@ import classNames from "classnames";
 import type { ToastOptions, Toast } from "react-hot-toast";
 import toast from "react-hot-toast";
 
-import { Icon } from "../..";
+import { Icon } from "../icon";
 
 type IToast = {
   message: string;
diff --git a/packages/ui/components/top-banner/TopBanner.tsx b/packages/ui/components/top-banner/TopBanner.tsx
index bd21f9d63c..bbe05204cc 100644
--- a/packages/ui/components/top-banner/TopBanner.tsx
+++ b/packages/ui/components/top-banner/TopBanner.tsx
@@ -3,7 +3,8 @@ import type { ReactNode } from "react";
 
 import { TOP_BANNER_HEIGHT } from "@calcom/lib/constants";
 
-import { Icon, type IconName } from "../..";
+import { Icon } from "../icon";
+import type { IconName } from "../icon";
 
 export type TopBannerProps = {
   icon?: IconName;
diff --git a/packages/ui/form/AddressInput.tsx b/packages/ui/form/AddressInput.tsx
index 087a8c05a2..78de4c58e4 100644
--- a/packages/ui/form/AddressInput.tsx
+++ b/packages/ui/form/AddressInput.tsx
@@ -1,7 +1,7 @@
 import cx from "@calcom/lib/classNames";
 
-import { Icon } from "..";
 import { Input } from "../components/form";
+import { Icon } from "../components/icon";
 
 export type AddressInputProps = {
   value: string;
diff --git a/packages/ui/form/MultiEmail.tsx b/packages/ui/form/MultiEmail.tsx
index d06b7c5782..3528397347 100644
--- a/packages/ui/form/MultiEmail.tsx
+++ b/packages/ui/form/MultiEmail.tsx
@@ -1,5 +1,9 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, EmailField, Icon, Tooltip } from "@calcom/ui";
+
+import { Button } from "../components/button";
+import { EmailField } from "../components/form";
+import { Icon } from "../components/icon";
+import { Tooltip } from "../components/tooltip";
 
 interface MultiEmailProps {
   value: string[];
diff --git a/packages/ui/form/fields.tsx b/packages/ui/form/fields.tsx
index f1c0dedc41..a11ea5a98f 100644
--- a/packages/ui/form/fields.tsx
+++ b/packages/ui/form/fields.tsx
@@ -8,7 +8,8 @@ import classNames from "@calcom/lib/classNames";
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Alert, showToast } from "../";
+import { Alert } from "../components/alert";
+import { showToast } from "../components/toast";
 
 type InputProps = Omit<JSX.IntrinsicElements["input"], "name"> & { name: string };
 
diff --git a/packages/ui/index.tsx b/packages/ui/index.ts
similarity index 80%
rename from packages/ui/index.tsx
rename to packages/ui/index.ts
index b21a462c41..6deb373607 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.ts
@@ -48,20 +48,6 @@ export {
   ColorPicker,
   FormStep,
   FilterSearchField,
-  Dropdown,
-  DropdownItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  ButtonOrLink,
-  DropdownMenuGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTriggerItem,
   Steps,
   WizardForm,
   SettingsToggle,
@@ -70,6 +56,7 @@ export {
   NumberInput,
   InputError,
 } from "./components/form";
+
 export type {
   ITimezone,
   ITimezoneOption,
@@ -90,17 +77,6 @@ export {
 export { TopBanner } from "./components/top-banner";
 export type { TopBannerProps } from "./components/top-banner";
 export { AnimatedPopover, MeetingTimeInTimezones } from "./components/popover";
-export { Table } from "./components/table/Table";
-export {
-  Table as TableNew,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "./components/table/TableNew";
 export { TableActions, DropdownActions } from "./components/table/TableActions";
 export type { ActionType } from "./components/table/TableActions";
 export { ErrorBoundary } from "./components/errorBoundary";
@@ -173,20 +149,14 @@ export type { ButtonColor } from "./components/button/Button";
 export { CreateButton, CreateButtonWithTeamsList } from "./components/createButton";
 
 export { useCalcomTheme } from "./styles/useCalcomTheme";
-export { ScrollableArea } from "./components/scrollable/ScrollableArea";
+export { ScrollableArea } from "./components/scrollable";
 export { WizardLayout } from "./layouts/WizardLayout";
-export { DataTable } from "./components/data-table";
-export {
-  Sheet,
-  SheetBody,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "./components/sheet/sheet";
+export * from "./components/data-table";
+export * from "./components/sheet";
+export * from "./components/table";
+export * from "./components/popover";
+export * from "./components/dropdown";
+export * from "./components/icon";
 export {
   Command,
   CommandDialog,
@@ -199,16 +169,7 @@ export {
   CommandShortcut,
 } from "./components/command";
 
-export { Popover, PopoverContent, PopoverTrigger } from "./components/popover";
 export { OrgBanner } from "./components/organization-banner";
 export type { OrgBannerProps } from "./components/organization-banner";
 
 export { StorybookTrpcProvider } from "./components/mocks/trpc";
-export { default as Icon } from "./components/icon/Icon";
-export type { IconName } from "./components/icon/icon-names";
-export { IconSprites } from "./components/icon/IconSprites";
-
-export { DataTableSelectionBar } from "./components/data-table/DataTableSelectionBar";
-export { DataTableToolbar } from "./components/data-table/DataTableToolbar";
-export { DataTableFilters } from "./components/data-table/filters";
-export { DataTablePagination } from "./components/data-table/DataTablePagination";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 71a0250515..47a5b73e38 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -3,15 +3,52 @@
   "private": true,
   "sideEffects": false,
   "version": "0.0.0",
-  "main": "./index.tsx",
+  "main": "./index.ts",
   "exports": {
-    ".": "./index.tsx",
+    ".": "./index.ts",
+    "./alert": "./components/alert/index.ts",
+    "./app-list-card": "./components/app-list-card/index.ts",
+    "./apps": "./components/apps/index.ts",
+    "./arrow-button": "./components/arrow-button/index.ts",
+    "./avatar": "./components/avatar/index.ts",
+    "./badge": "./components/badge/index.ts",
+    "./breadcrumb": "./components/breadcrumb/index.ts",
     "./button": "./components/button/index.ts",
+    "./buttonGroup": "./components/buttonGroup/index.ts",
+    "./calendar-switch": "./components/calendar-switch/index.ts",
+    "./card": "./components/card/index.ts",
+    "./command": "./components/command/index.ts",
+    "./createButton": "./components/createButton/index.ts",
+    "./credits": "./components/credits/index.ts",
+    "./data-table": "./components/data-table/index.ts",
+    "./dialog": "./components/dialog/index.ts",
+    "./disconnect-calendar-integration": "./components/disconnect-calendar-integration/index.ts",
+    "./divider": "./components/divider/index.ts",
+    "./dropdown": "./components/dropdown/index.ts",
+    "./editable-heading": "./components/editable-heading/index.ts",
+    "./editor": "./components/editor/index.ts",
+    "./empty-screen": "./components/empty-screen/index.ts",
+    "./errorBoundary": "./components/errorBoundary/index.ts",
+    "./form": "./components/form/index.ts",
     "./form/timezone-select": "./components/form/timezone-select/index.ts",
-    "./toast": "./components/toast/index.tsx",
+    "./head-seo": "./components/head-seo/index.ts",
     "./icon": "./components/icon/index.ts",
+    "./image-uploader": "./components/image-uploader/index.ts",
+    "./layout": "./components/layout/index.ts",
+    "./list": "./components/list/index.ts",
+    "./logo": "./components/logo/index.ts",
+    "./meta": "./components/meta/index.ts",
+    "./navigation": "./components/navigation/index.ts",
+    "./organization-banner": "./components/organization-banner/index.ts",
+    "./popover": "./components/popover/index.ts",
+    "./scrollable": "./components/scrollable/index.ts",
+    "./sheet": "./components/sheet/index.ts",
+    "./skeleton": "./components/skeleton/index.ts",
+    "./table": "./components/table/index.ts",
+    "./toast": "./components/toast/index.ts",
+    "./tooltip": "./components/tooltip/index.ts",
+    "./top-banner": "./components/top-banner/index.ts",
     "./unpublished-entity/UnpublishedEntity": "./components/unpublished-entity/index.ts",
-    "./components/toast": "./components/toast/index.tsx",
     "./components/icon": "./components/icon/index.ts",
     "./components/icon/SatSymbol": "./components/icon/SatSymbol.tsx",
     "./components/icon/Spinner": "./components/icon/Spinner.tsx",
@@ -19,7 +56,6 @@
     "./components/form/timezone-select/TimezoneSelect": "./components/form/timezone-select/index.ts",
     "./__mocks__/ui": "./__mocks__/ui.tsx"
   },
-  "types": "./index.tsx",
   "license": "MIT",
   "scripts": {
     "lint": "eslint .",