diff --git a/apps/web/components/booking/TimeOptions.tsx b/apps/web/components/booking/TimeOptions.tsx
index 502a068313..9fe3dea4bd 100644
--- a/apps/web/components/booking/TimeOptions.tsx
+++ b/apps/web/components/booking/TimeOptions.tsx
@@ -1,8 +1,8 @@
 import { FC, useEffect, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import TimezoneSelect, { ITimezoneOption } from "@calcom/ui/form/TimezoneSelect";
 import { Switch } from "@calcom/ui/v2";
+import TimezoneSelect, { ITimezoneOption } from "@calcom/ui/v2/core/TimezoneSelect";
 
 import { is24h, timeZone } from "../../lib/clock";
 
diff --git a/apps/web/components/v2/apps/AdditionalCalendarSelector.tsx b/apps/web/components/v2/apps/AdditionalCalendarSelector.tsx
index dfc3ac9e69..2d16bc1084 100644
--- a/apps/web/components/v2/apps/AdditionalCalendarSelector.tsx
+++ b/apps/web/components/v2/apps/AdditionalCalendarSelector.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import Select from "react-select";
 import { OptionProps } from "react-select";
 
 import { InstallAppButton } from "@calcom/app-store/components";
@@ -8,6 +7,7 @@ import { trpc } from "@calcom/trpc/react";
 import type { App } from "@calcom/types/App";
 import { Button } from "@calcom/ui";
 import { Icon } from "@calcom/ui/Icon";
+import { Select } from "@calcom/ui/v2";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -65,23 +65,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
             name="additionalCalendar"
             placeholder={t("install_another")}
             options={options}
-            styles={{
-              placeholder: (defaultStyles) => {
-                return {
-                  ...defaultStyles,
-                  color: "#3E3E3E",
-                  marginLeft: "3px",
-                };
-              },
-              control: (defaultStyles) => {
-                return {
-                  ...defaultStyles,
-                  borderRadius: "6px",
-                };
-              },
-            }}
             isSearchable={false}
-            className="min-w-52 block w-full flex-1 rounded-none rounded-r-sm border-gray-300 text-sm font-medium text-gray-700"
             isLoading={isLoading}
             components={{ Option: ImageOption }}
           />
diff --git a/apps/web/components/v2/eventtype/AvailabilityTab.tsx b/apps/web/components/v2/eventtype/AvailabilityTab.tsx
index 5ae9e0cbf3..8be0d029ab 100644
--- a/apps/web/components/v2/eventtype/AvailabilityTab.tsx
+++ b/apps/web/components/v2/eventtype/AvailabilityTab.tsx
@@ -8,7 +8,7 @@ import { weekdayNames } from "@calcom/lib/weekday";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
 import Button from "@calcom/ui/v2/core/Button";
-import Select from "@calcom/ui/v2/core/form/Select";
+import Select from "@calcom/ui/v2/core/form/select";
 import { SkeletonText } from "@calcom/ui/v2/core/skeleton";
 
 import { SelectSkeletonLoader } from "@components/v2/availability/SkeletonLoader";
diff --git a/apps/web/pages/v2/availability/[schedule].tsx b/apps/web/pages/v2/availability/[schedule].tsx
index 761575a8a5..6aa7c30fd1 100644
--- a/apps/web/pages/v2/availability/[schedule].tsx
+++ b/apps/web/pages/v2/availability/[schedule].tsx
@@ -12,10 +12,10 @@ import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import type { Schedule as ScheduleType } from "@calcom/types/schedule";
 import { Icon } from "@calcom/ui";
-import TimezoneSelect from "@calcom/ui/form/TimezoneSelect";
 import Button from "@calcom/ui/v2/core/Button";
 import Shell from "@calcom/ui/v2/core/Shell";
 import Switch from "@calcom/ui/v2/core/Switch";
+import TimezoneSelect from "@calcom/ui/v2/core/TimezoneSelect";
 import VerticalDivider from "@calcom/ui/v2/core/VerticalDivider";
 import { Form, Label } from "@calcom/ui/v2/core/form/fields";
 import showToast from "@calcom/ui/v2/core/notifications";
diff --git a/apps/web/pages/v2/settings/my-account/general.tsx b/apps/web/pages/v2/settings/my-account/general.tsx
index 9d0b041062..47ced1ea6f 100644
--- a/apps/web/pages/v2/settings/my-account/general.tsx
+++ b/apps/web/pages/v2/settings/my-account/general.tsx
@@ -8,8 +8,8 @@ import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/v2/core/Button";
 import Meta from "@calcom/ui/v2/core/Meta";
 import TimezoneSelect from "@calcom/ui/v2/core/TimezoneSelect";
-import Select from "@calcom/ui/v2/core/form/Select";
 import { Form, Label } from "@calcom/ui/v2/core/form/fields";
+import Select from "@calcom/ui/v2/core/form/select";
 import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
 import { SkeletonContainer, SkeletonText, SkeletonButton } from "@calcom/ui/v2/core/skeleton";
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 9e8752ed57..d21de8b6f3 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -197,11 +197,6 @@ button[role="switch"][data-state="checked"] {
     box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
   }
 
-  /* React Select V2 */
-  .cal-react-select-container .cal-react-select__control {
-    @apply bg-white min-h-[36px] h-[36px] text-sm leading-4 border-gray-300 hover:border-neutral-400 focus-within:ring-2 focus-within:ring-neutral-800 focus-within:border-0 placeholder:text-gray-400 placeholder:text-sm placeholder:font-normal;
-  }
-
 }
 
 /* !important to style multi-email input */
diff --git a/packages/app-store/ee/routing-forms/pages/routing-link/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/routing-link/[...appPages].tsx
index d8a98d6d67..0686cafb07 100644
--- a/packages/app-store/ee/routing-forms/pages/routing-link/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/routing-link/[...appPages].tsx
@@ -170,7 +170,11 @@ function RoutingForm({ form, profile }: inferSSRProps<typeof getServerSideProps>
                       );
                     })}
                     <div className="mt-4 flex justify-end space-x-2 rtl:space-x-reverse">
-                      <Button loading={responseMutation.isLoading} type="submit" color="primary">
+                      <Button
+                        className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast dark:hover:border-darkmodebrandcontrast dark:border-transparent"
+                        loading={responseMutation.isLoading}
+                        type="submit"
+                        color="primary">
                         {t("submit")}
                       </Button>
                     </div>
diff --git a/packages/config/package.json b/packages/config/package.json
index d654e71fee..6e65ef0b7f 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -26,6 +26,7 @@
     "eslint": "^8.22.0",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
+    "tailwind-scrollbar": "^2.0.1",
     "tailwindcss": "^3.1.8",
     "typescript": "^4.7.4"
   }
diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js
index 2f514c4b68..19a7f1e16d 100644
--- a/packages/config/tailwind-preset.js
+++ b/packages/config/tailwind-preset.js
@@ -209,6 +209,7 @@ module.exports = {
     require("@tailwindcss/forms"),
     require("@tailwindcss/typography"),
     require("@tailwindcss/line-clamp"),
+    require("tailwind-scrollbar"),
     require("tailwindcss-radix")(),
     plugin(({ addVariant }) => {
       addVariant("mac", ".mac &");
@@ -216,4 +217,7 @@ module.exports = {
       addVariant("ios", ".ios &");
     }),
   ],
+  variants: {
+    scrollbar: ["rounded", "dark"],
+  },
 };
diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index 4211c9cf44..116399649e 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -19,8 +19,8 @@ import { Icon } from "@calcom/ui/Icon";
 import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
 import { Button, DialogClose, DialogContent } from "@calcom/ui/v2";
 import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
-import Select from "@calcom/ui/v2/core/form/Select";
 import { EmailField, Label, TextArea } from "@calcom/ui/v2/core/form/fields";
+import Select from "@calcom/ui/v2/core/form/select";
 
 import { AddVariablesDropdown } from "../../components/v2/AddVariablesDropdown";
 import {
diff --git a/packages/features/webhooks/components/WebhookForm.tsx b/packages/features/webhooks/components/WebhookForm.tsx
index 3b6404b308..f7b2a039df 100644
--- a/packages/features/webhooks/components/WebhookForm.tsx
+++ b/packages/features/webhooks/components/WebhookForm.tsx
@@ -8,8 +8,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput } from "@calcom/trpc/react";
 import Button from "@calcom/ui/v2/core/Button";
 import Switch from "@calcom/ui/v2/core/Switch";
-import Select from "@calcom/ui/v2/core/form/Select";
 import { Form, Label, TextArea, TextField } from "@calcom/ui/v2/core/form/fields";
+import Select from "@calcom/ui/v2/core/form/select";
 
 import customTemplate, { hasTemplateIntegration } from "../utils/integrationTemplate";
 import WebhookTestDisclosure from "./WebhookTestDisclosure";
diff --git a/packages/ui/form/TimezoneSelect.tsx b/packages/ui/form/TimezoneSelect.tsx
index aa2f5f767b..741d7b241e 100644
--- a/packages/ui/form/TimezoneSelect.tsx
+++ b/packages/ui/form/TimezoneSelect.tsx
@@ -7,7 +7,7 @@ import BaseSelect, {
   Props as SelectProps,
 } from "react-timezone-select";
 
-import { InputComponent } from "@calcom/ui/v2/core/form/Select";
+import { InputComponent } from "@calcom/ui/v2/core/form/select/components";
 
 function TimezoneSelect({ className, ...props }: SelectProps) {
   // @TODO: remove borderRadius and haveRoundedClassName logic from theme so we use only new style
diff --git a/packages/ui/v2/core/TimezoneSelect.tsx b/packages/ui/v2/core/TimezoneSelect.tsx
index d902c25076..4eff91daec 100644
--- a/packages/ui/v2/core/TimezoneSelect.tsx
+++ b/packages/ui/v2/core/TimezoneSelect.tsx
@@ -1,5 +1,4 @@
-import classNames from "classnames";
-import { components } from "react-select";
+import { useMemo } from "react";
 import BaseSelect, {
   allTimezones,
   ITimezoneOption,
@@ -7,42 +6,20 @@ import BaseSelect, {
   Props as SelectProps,
 } from "react-timezone-select";
 
-import { InputComponent } from "./form/Select";
+import { getReactSelectProps } from "@calcom/ui/v2/core/form/select";
+
+function TimezoneSelect({ className, components, ...props }: SelectProps) {
+  const reactSelectProps = useMemo(() => {
+    return getReactSelectProps({ className, components: components || {} });
+  }, [className, components]);
 
-function TimezoneSelect({ className, ...props }: SelectProps) {
   return (
     <BaseSelect
-      theme={(theme) => ({
-        ...theme,
-        borderRadius: 6,
-        colors: {
-          ...theme.colors,
-          primary: "var(--brand-color)",
-
-          primary50: "rgba(209 , 213, 219, var(--tw-bg-opacity))",
-          primary25: "rgba(244, 245, 246, var(--tw-bg-opacity))",
-        },
-      })}
-      styles={{
-        option: (provided, state) => ({
-          ...provided,
-          color: state.isSelected ? "var(--brand-text-color)" : "black",
-          ":active": {
-            backgroundColor: state.isSelected ? "" : "var(--brand-color)",
-            color: "var(--brand-text-color)",
-          },
-        }),
-      }}
+      {...reactSelectProps}
       timezones={{
         ...allTimezones,
         "America/Asuncion": "Asuncion",
       }}
-      components={{
-        ...components,
-        IndicatorSeparator: () => null,
-        Input: InputComponent,
-      }}
-      className={classNames("text-sm", className)}
       {...props}
     />
   );
diff --git a/packages/ui/v2/core/form/MultiSelectCheckboxes.tsx b/packages/ui/v2/core/form/MultiSelectCheckboxes.tsx
index 1e2e9c24b0..b7a8ac9335 100644
--- a/packages/ui/v2/core/form/MultiSelectCheckboxes.tsx
+++ b/packages/ui/v2/core/form/MultiSelectCheckboxes.tsx
@@ -5,7 +5,7 @@ import { Props } from "react-select";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import Select from "./Select";
+import Select from "./select";
 
 export type Option = {
   value: string;
@@ -18,22 +18,21 @@ const InputOption: React.FC<OptionProps<any, boolean, GroupBase<any>>> = ({
   isSelected,
   children,
   innerProps,
+  className,
   ...rest
 }) => {
-  const style = {
-    alignItems: "center",
-    backgroundColor: isFocused ? "rgba(244, 245, 246, var(--tw-bg-opacity))" : "transparent",
-    color: "inherit",
-    display: "flex ",
-  };
-
   const props = {
     ...innerProps,
-    style,
   };
 
   return (
     <components.Option
+      className={classNames(
+        className,
+        "dark:bg-darkgray-100 text-[inherit] !flex !cursor-pointer !py-3",
+        isFocused && "dark:!bg-darkgray-200 !bg-gray-100",
+        isSelected && "dark:!bg-darkgray-300 !bg-neutral-900"
+      )}
       {...rest}
       isDisabled={isDisabled}
       isFocused={isFocused}
@@ -75,17 +74,6 @@ export default function MultiSelectCheckboxes({
 
   return (
     <Select
-      theme={(theme) => ({
-        ...theme,
-        borderRadius: 6,
-        colors: {
-          ...theme.colors,
-          primary: "var(--brand-color)",
-
-          primary50: "rgba(209 , 213, 219, var(--tw-bg-opacity))",
-          primary25: "rgba(244, 245, 246, var(--tw-bg-opacity))",
-        },
-      })}
       value={selected}
       onChange={(s: any) => {
         setSelected(s);
diff --git a/packages/ui/v2/core/form/index.ts b/packages/ui/v2/core/form/index.ts
index 1c5bde2140..3e18b80a33 100644
--- a/packages/ui/v2/core/form/index.ts
+++ b/packages/ui/v2/core/form/index.ts
@@ -2,6 +2,6 @@ export * from "./radio-area";
 export * from "./fields";
 export { default as Checkbox } from "./Checkbox";
 export { default as DatePicker } from "./DatePicker";
-export { default as Select, SelectWithValidation, SelectField } from "./Select";
+export { default as Select, SelectWithValidation, SelectField, getReactSelectProps } from "./select";
 
 export { default as FormStep } from "./FormStep";
diff --git a/packages/ui/v2/core/form/Select.tsx b/packages/ui/v2/core/form/select/Select.tsx
similarity index 56%
rename from packages/ui/v2/core/form/Select.tsx
rename to packages/ui/v2/core/form/select/Select.tsx
index d04c727180..bb93f6d952 100644
--- a/packages/ui/v2/core/form/Select.tsx
+++ b/packages/ui/v2/core/form/select/Select.tsx
@@ -1,20 +1,28 @@
 import { useId } from "@radix-ui/react-id";
 import * as React from "react";
 import ReactSelect, {
-  components,
+  components as reactSelectComponents,
   GroupBase,
-  InputProps,
   Props,
   SingleValue,
   MultiValue,
-  OptionProps,
+  SelectComponentsConfig,
 } from "react-select";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
 
-import { Label } from "./fields";
+import { Label } from "../fields";
+import {
+  ControlComponent,
+  InputComponent,
+  MenuComponent,
+  MenuListComponent,
+  OptionComponent,
+  SingleValueComponent,
+  ValueContainerComponent,
+  MultiValueComponent,
+} from "./components";
 
 export type SelectProps<
   Option,
@@ -22,85 +30,53 @@ export type SelectProps<
   Group extends GroupBase<Option> = GroupBase<Option>
 > = Props<Option, IsMulti, Group>;
 
-export const InputComponent = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({
-  inputClassName,
-  ...props
-}: InputProps<Option, IsMulti, Group>) => {
-  return (
-    <components.Input
-      // disables our default form focus hightlight on the react-select input element
-      inputClassName={classNames("focus:ring-0 focus:ring-offset-0", inputClassName)}
-      {...props}
-    />
-  );
-};
-
-const OptionComponent = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({
-  className,
-  ...props
-}: OptionProps<Option, IsMulti, Group>) => {
-  return (
-    <components.Option className={classNames("!flex justify-between", className)} {...props}>
-      <span>{props.label}</span> {props.isSelected && <Icon.FiCheck className="h-5 w-5" />}
-    </components.Option>
-  );
-};
-
-function Select<
+export const getReactSelectProps = <
   Option,
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>
->({ className, ...props }: SelectProps<Option, IsMulti, Group>) {
-  return (
-    <ReactSelect
-      className={classNames(
-        "cal-react-select-container block h-[36px] w-full min-w-0 flex-1 rounded-md text-sm",
-        className
-      )}
-      classNamePrefix="cal-react-select"
-      theme={(theme) => ({
-        ...theme,
-        borderRadius: 6,
-        colors: {
-          ...theme.colors,
-          primary: "rgba(229, 231, 235, var(--tw-bg-opacity))",
-          primary50: "rgba(209 , 213, 219, var(--tw-bg-opacity))",
-          primary25: "rgba(244, 245, 246, var(--tw-bg-opacity))",
-        },
-      })}
-      styles={{
-        control: (base) => ({
-          ...base,
-          // Brute force to remove focus outline of input
-          "& .react-select__input": {
-            borderWidth: 0,
-            boxShadow: "none",
-          },
-        }),
-        option: (provided, state) => ({
-          ...provided,
-          color: "black",
-          ":active": {
-            backgroundColor: state.isSelected ? "" : "rgba(229, 231, 235, var(--tw-bg-opacity))",
-            color: "rgba(51, 15, 51, var(--tw-bg-opacity))",
-          },
-        }),
-      }}
-      components={{
-        ...components,
-        IndicatorSeparator: () => null,
-        Input: InputComponent,
-        Option: OptionComponent,
-        ...props.components,
-      }}
-      {...props}
-    />
-  );
-}
+>({
+  className,
+  components,
+}: {
+  className?: string;
+  components: SelectComponentsConfig<Option, IsMulti, Group>;
+}) => ({
+  className: classNames("block h-[36px] w-full min-w-0 flex-1 rounded-md", className),
+  classNamePrefix: "cal-react-select",
+  components: {
+    ...reactSelectComponents,
+    IndicatorSeparator: () => null,
+    Input: InputComponent,
+    Option: OptionComponent,
+    Control: ControlComponent,
+    SingleValue: SingleValueComponent,
+    Menu: MenuComponent,
+    MenuList: MenuListComponent,
+    ValueContainer: ValueContainerComponent,
+    MultiValue: MultiValueComponent,
+    ...components,
+  },
+});
+
+const Select = <
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
+  className,
+  components,
+  ...props
+}: SelectProps<Option, IsMulti, Group>) => {
+  const reactSelectProps = React.useMemo(() => {
+    return getReactSelectProps<Option, IsMulti, Group>({ className, components: components || {} });
+  }, [className, components]);
+
+  return <ReactSelect {...reactSelectProps} {...props} />;
+};
 
 export const SelectField = function SelectField<
   Option,
-  isMulti extends boolean = false,
+  IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>
 >(
   props: {
@@ -110,7 +86,7 @@ export const SelectField = function SelectField<
     labelProps?: React.ComponentProps<typeof Label>;
     className?: string;
     error?: string;
-  } & SelectProps<Option, isMulti, Group>
+  } & SelectProps<Option, IsMulti, Group>
 ) {
   const { t } = useLocale();
   const { label = t(props.name || ""), containerClassName, labelProps, className, ...passThrough } = props;
@@ -134,14 +110,14 @@ export const SelectField = function SelectField<
  */
 export function SelectWithValidation<
   Option extends { label: string; value: string },
-  isMulti extends boolean = false,
+  IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>
 >({
   required = false,
   onChange,
   value,
   ...remainingProps
-}: SelectProps<Option, isMulti, Group> & { required?: boolean }) {
+}: SelectProps<Option, IsMulti, Group> & { required?: boolean }) {
   const [hiddenInputValue, _setHiddenInputValue] = React.useState(() => {
     if (value instanceof Array || !value) {
       return;
diff --git a/packages/ui/v2/core/form/select/components.tsx b/packages/ui/v2/core/form/select/components.tsx
new file mode 100644
index 0000000000..8610c767bb
--- /dev/null
+++ b/packages/ui/v2/core/form/select/components.tsx
@@ -0,0 +1,159 @@
+import {
+  components as reactSelectComponents,
+  ControlProps,
+  GroupBase,
+  InputProps,
+  MenuListProps,
+  MenuProps,
+  MultiValueProps,
+  OptionProps,
+  SingleValueProps,
+  ValueContainerProps,
+} from "react-select";
+
+import { classNames } from "@calcom/lib";
+import { Icon } from "@calcom/ui/Icon";
+
+export const InputComponent = <
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
+  inputClassName,
+  ...props
+}: InputProps<Option, IsMulti, Group>) => {
+  return (
+    <reactSelectComponents.Input
+      // disables our default form focus hightlight on the react-select input element
+      inputClassName={classNames(
+        "focus:ring-0 focus:ring-offset-0 dark:!text-darkgray-900 !text-black",
+        inputClassName
+      )}
+      {...props}
+    />
+  );
+};
+
+export const OptionComponent = <
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
+  className,
+  ...props
+}: OptionProps<Option, IsMulti, Group>) => {
+  return (
+    <reactSelectComponents.Option
+      {...props}
+      className={classNames(
+        className,
+        "dark:bg-darkgray-100 !flex !cursor-pointer justify-between !py-3",
+        props.isFocused && "dark:!bg-darkgray-200 !bg-gray-100",
+        props.isSelected && "dark:!bg-darkgray-300 !bg-neutral-900"
+      )}>
+      <span>{props.label}</span> {props.isSelected && <Icon.FiCheck className="h-4 w-4" />}
+    </reactSelectComponents.Option>
+  );
+};
+
+export const ControlComponent = <
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
+  className,
+  ...props
+}: ControlProps<Option, IsMulti, Group>) => (
+  <reactSelectComponents.Control
+    {...props}
+    className={classNames(
+      className,
+      "dark:bg-darkgray-100 dark:border-darkgray-300 border-gray-300 bg-white text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:border-0 focus-within:ring-2 focus-within:ring-neutral-800 hover:border-neutral-400 dark:focus-within:ring-white"
+    )}
+  />
+);
+
+export const SingleValueComponent = <
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
+  className,
+  ...props
+}: SingleValueProps<Option, IsMulti, Group>) => (
+  <reactSelectComponents.SingleValue
+    {...props}
+    className={classNames(
+      className,
+      "dark:text-darkgray-900 dark:placeholder:text-darkgray-500 text-black placeholder:text-gray-400"
+    )}
+  />
+);
+
+export const ValueContainerComponent = <
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
+  className,
+  ...props
+}: ValueContainerProps<Option, IsMulti, Group>) => (
+  <reactSelectComponents.ValueContainer
+    {...props}
+    className={classNames(
+      "dark:text-darkgray-900 dark:placeholder:text-darkgray-500 text-black placeholder:text-gray-400",
+      className
+    )}
+  />
+);
+
+export const MultiValueComponent = <
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
+  className,
+  ...props
+}: MultiValueProps<Option, IsMulti, Group>) => (
+  <reactSelectComponents.MultiValue
+    {...props}
+    className={classNames(
+      "dark:bg-darkgray-200 dark:text-darkgray-900 !rounded-md bg-gray-100 text-gray-700",
+      className
+    )}
+  />
+);
+
+export const MenuComponent = <
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
+  className,
+  ...props
+}: MenuProps<Option, IsMulti, Group>) => (
+  <reactSelectComponents.Menu
+    {...props}
+    className={classNames(
+      "dark:bg-darkgray-100 dark:border-darkgray-300 border-1 !rounded-md border-gray-900 bg-white text-sm leading-4 dark:text-white",
+      className
+    )}
+  />
+);
+
+export const MenuListComponent = <
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
+  className,
+  ...props
+}: MenuListProps<Option, IsMulti, Group>) => (
+  <reactSelectComponents.MenuList
+    {...props}
+    className={classNames(
+      "scrollbar-thin scrollbar-thumb-rounded-md dark:scrollbar-thumb-darkgray-300 scrollbar-thumb-gray-300 scrollbar-track-transparent scrollbar-track-w-[80px] rounded-md",
+      className
+    )}
+  />
+);
diff --git a/packages/ui/v2/core/form/select/index.ts b/packages/ui/v2/core/form/select/index.ts
new file mode 100644
index 0000000000..083890bac7
--- /dev/null
+++ b/packages/ui/v2/core/form/select/index.ts
@@ -0,0 +1,4 @@
+import Select from "./Select";
+
+export default Select;
+export { SelectWithValidation, SelectField, getReactSelectProps } from "./Select";
diff --git a/packages/ui/v2/modules/event-types/DestinationCalendarSelector.tsx b/packages/ui/v2/modules/event-types/DestinationCalendarSelector.tsx
index 340f5d0106..bc8e71d999 100644
--- a/packages/ui/v2/modules/event-types/DestinationCalendarSelector.tsx
+++ b/packages/ui/v2/modules/event-types/DestinationCalendarSelector.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { DestinationCalendar } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import Select from "@calcom/ui/v2/core/form/Select";
+import Select from "@calcom/ui/v2/core/form/select";
 
 interface Props {
   onChange: (value: { externalId: string; integration: string }) => void;
diff --git a/yarn.lock b/yarn.lock
index a35780c143..b336c1c770 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2803,9 +2803,9 @@
   integrity sha512-7jGciNJ2bQ4eZLSNlSZ+VAyW63kALf420CvkEpK4lEsUfWJq9odqimci0YCiyNyMUFB+pWHwLYyNc57dijYsCg==
 
 "@headlessui/react@^1.5.0":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.2.tgz#e6a6a8d38342064a53182f1eb2bf6d9c1e53ba6a"
-  integrity sha512-snLv2lxwsf2HNTOBNgHYdvoYZ3ChJE8QszPi1d/hl9js8KrFrUulTaQBfSyPbJP5BybVreWh9DxCgz9S0Z6hKQ==
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.3.tgz#853c598ff47b37cdd192c5cbee890d9b610c3ec0"
+  integrity sha512-LGp06SrGv7BMaIQlTs8s2G06moqkI0cb0b8stgq7KZ3xcHdH3qMP+cRyV7qe5x4XEW/IGY48BW4fLesD6NQLng==
 
 "@heroicons/react@^1.0.6":
   version "1.0.6"
@@ -6285,10 +6285,10 @@
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.3.8.tgz#d5f07c1d9d4f83f16f0bed7f3b245fa0e557b037"
   integrity sha512-AEUWtCNBIImFZ9tMt/P8V86kIhMHpfoJqAI1auGOLR8Wzeq7Ymiue789PJG0rKYcyViUicBZeHjggMqyEQVMfQ==
 
-"@tanstack/query-core@4.7.2":
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.7.2.tgz#5e8f0bc632b9c5423e5c5ca6d147c386b64dfec7"
-  integrity sha512-1zQuFsKShMhLY6rQYBEmkYiK9Zcb3lQcCVOTIgQcvliKIxPyZFaE/8LMtaITEEfgGF5qwYqHdm61+BUtpyNsrg==
+"@tanstack/query-core@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.9.0.tgz#ffc057b664f952bf3d4925fd924a12403646f6a2"
+  integrity sha512-Vl0jAWJR3A1md0PoPMoEd6+H1dlRB5NqXDBNF+MZEgjQsR0Nly2kJgJj0Zh6eRDndnn7VlspxTWoOpt+dwDdAA==
 
 "@tanstack/query-sync-storage-persister@^4.0.10":
   version "4.2.3"
@@ -6310,11 +6310,11 @@
     use-sync-external-store "^1.2.0"
 
 "@tanstack/react-query@^4.2.3":
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.7.2.tgz#ce020c4e0261e16b99d24322d1598ffc28974472"
-  integrity sha512-4nJ0HxU2kxkaHZ/swJw39io3Bb3liiggJBsCCdFOydZOl8AJDRCor1E3GsOBrtn53HT01R9EIP4PY/6fyYdKsw==
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.9.0.tgz#e0e8894b9b7415608c488d68793826113d61224d"
+  integrity sha512-M4utYjk9BRDUYbbprSsa0eExdC9NjqQ0deuHXYxQkT8l8BIVyw6yv02LQUGBdOnn/6w5xXFyQRG2slo+JhqeBg==
   dependencies:
-    "@tanstack/query-core" "4.7.2"
+    "@tanstack/query-core" "4.9.0"
     use-sync-external-store "^1.2.0"
 
 "@tanstack/react-query@^4.3.9":
@@ -6889,16 +6889,11 @@
   dependencies:
     "@types/node" "*"
 
-"@types/node@*", "@types/node@16.9.1", "@types/node@>=12.0.0", "@types/node@>=8.1.0", "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0":
+"@types/node@*", "@types/node@16.9.1", "@types/node@>=12.0.0", "@types/node@>=8.1.0", "@types/node@^12.12.54", "@types/node@^12.12.6", "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0":
   version "16.9.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.1.tgz#0611b37db4246c937feef529ddcc018cf8e35708"
   integrity sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==
 
-"@types/node@^12.12.54", "@types/node@^12.12.6":
-  version "12.20.55"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
-  integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
-
 "@types/nodemailer@^6.4.5":
   version "6.4.5"
   resolved "https://registry.yarnpkg.com/@types/nodemailer/-/nodemailer-6.4.5.tgz#09011ac73259245475d1688e4ba101860567dc39"
@@ -23326,6 +23321,11 @@ synchronous-promise@^2.0.15:
   resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e"
   integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
 
+tailwind-scrollbar@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/tailwind-scrollbar/-/tailwind-scrollbar-2.0.1.tgz#f08721173d513f1406a44601640b79726e3f9728"
+  integrity sha512-OcR7qHBbux4k+k6bWqnEQFYFooLK/F4dhkBz6nvswIoaA9ancZ5h20e0tyV7ifSWLDCUBtpG+1NHRA8HMRH/wg==
+
 tailwindcss-radix@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/tailwindcss-radix/-/tailwindcss-radix-2.6.0.tgz#4948f477454b4441b4411c436f897c3f305c915b"