diff --git a/packages/ui/components/form/selectimproved/components/Select.tsx b/packages/ui/components/form/selectimproved/components/Select.tsx
index 8db99e6e06..81f08bc926 100755
--- a/packages/ui/components/form/selectimproved/components/Select.tsx
+++ b/packages/ui/components/form/selectimproved/components/Select.tsx
@@ -1,8 +1,7 @@
+import * as Popover from "@radix-ui/react-popover";
 import React, { useCallback, useRef, useState } from "react";
 
 import { classNames as cn } from "@calcom/lib";
-import { useKeyPress } from "@calcom/lib/hooks/useKeyPress";
-import useOnClickOutside from "@calcom/lib/hooks/useOnclickOutside";
 
 import { FiX, FiChevronDown } from "../../../icon";
 import Options from "./Options";
@@ -55,41 +54,12 @@ function Select<T extends Option>({
   menuIsOpen = false,
   classNames,
 }: SelectProps<T>) {
-  const [open, setOpen] = useState<boolean>(menuIsOpen);
   const [inputValue, setInputValue] = useState<string>("");
-  const ref = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(menuIsOpen);
   const searchBoxRef = useRef<HTMLInputElement>(null);
 
   const isMultipleValue = Array.isArray(selectedItems) && isMultiple;
 
-  const toggle = useCallback(() => {
-    if (!isDisabled) {
-      setOpen(!open);
-    }
-  }, [isDisabled, open]);
-
-  const closeDropDown = useCallback(() => {
-    if (open) setOpen(false);
-  }, [open]);
-
-  useOnClickOutside(ref, () => {
-    closeDropDown();
-  });
-
-  useKeyPress("Escape", undefined, () => {
-    closeDropDown();
-  });
-
-  const onPressEnterOrSpace = useCallback(
-    (e: React.KeyboardEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      if ((e.code === "Enter" || e.code === "Space") && !isDisabled) {
-        toggle();
-      }
-    },
-    [isDisabled, toggle]
-  );
-
   const removeItem = useCallback(
     (item: Option) => {
       // remove the item from the selected items
@@ -103,6 +73,11 @@ function Select<T extends Option>({
     [onChange, selectedItems]
   );
 
+  const closeDropDown = useCallback(() => {
+    console.log({ open });
+    if (open) setOpen(false);
+  }, [open]);
+
   const handleValueChange = useCallback(
     (selected: Option) => {
       function update() {
@@ -148,106 +123,108 @@ function Select<T extends Option>({
       }}
       selectedItems={selectedItems}
       handleValueChange={handleValueChange}>
-      <div className="relative w-full" ref={ref}>
-        <div
-          tabIndex={0}
-          aria-expanded={open}
-          onKeyDown={onPressEnterOrSpace}
-          onClick={toggle}
-          className={cn(
-            "flex max-h-[36px] items-center justify-between rounded-md border border-gray-300 text-sm text-gray-400 transition-all duration-300 focus:outline-none",
-            isDisabled
-              ? " dark:bg-darkgray-200 dark:border-darkgray-300 border-gray-200 bg-gray-100 text-gray-400 dark:text-gray-500"
-              : "dark:border-darkgray-300 dark:bg-darkgray-50 dark:text-darkgray-500 dark:focus:border-darkgray-700 dark:focus:bg-darkgray-100 dark:focus:text-darkgray-900 dark:hover:text-darkgray-900 bg-white hover:border-gray-600 focus:border-gray-900"
-          )}>
-          <div className="flex w-full grow-0 items-center gap-1 overflow-x-hidden">
-            <>
-              {((isMultipleValue && selectedItems.length === 0) || selectedItems === null) && (
-                <div className="py-2.5 px-3 text-gray-400 dark:text-current">
-                  <p>{placeholder}</p>
-                </div>
-              )}
-
-              {Array.isArray(selectedItems) ? (
-                <div className="over-flow-x flex gap-1 p-1 ">
-                  {selectedItems.map((item, index) => (
-                    <div
-                      className={cn(
-                        "dark:bg-darkgray-200 flex items-center space-x-2 rounded bg-gray-200 px-2 py-[6px]"
-                      )}
-                      key={index}>
-                      <p
-                        className={cn(
-                          classNames?.tagItemText ??
-                            "dark:text-darkgray-900 cursor-default select-none truncate text-sm leading-none text-gray-700"
-                        )}>
-                        {item.label}
-                      </p>
-                      {!isDisabled && (
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            removeItem(item);
-                          }}>
-                          <FiX
-                            className={
-                              classNames?.tagItemIcon ??
-                              "dark:text-darkgray-700 dark:hover:text-darkgray-900 h-4 w-4 text-gray-500 hover:text-gray-900"
-                            }
-                          />
-                        </button>
-                      )}
+      <div className="relative w-full">
+        <Popover.Root>
+          <Popover.Trigger>
+            <div
+              className={cn(
+                "min-w-64 flex max-h-[36px] items-center justify-between rounded-md border border-gray-300 text-sm text-gray-400 transition-all duration-300 focus:outline-none",
+                isDisabled
+                  ? " dark:bg-darkgray-200 dark:border-darkgray-300 border-gray-200 bg-gray-100 text-gray-400 dark:text-gray-500"
+                  : "dark:border-darkgray-300 dark:bg-darkgray-50 dark:text-darkgray-500 dark:focus:border-darkgray-700 dark:focus:bg-darkgray-100 dark:focus:text-darkgray-900 dark:hover:text-darkgray-900 bg-white hover:border-gray-600 focus:border-gray-900"
+              )}>
+              <div className="flex w-full grow-0 items-center gap-1 overflow-x-hidden">
+                <>
+                  {((isMultipleValue && selectedItems.length === 0) || selectedItems === null) && (
+                    <div className="py-2.5 px-3 text-gray-400 dark:text-current">
+                      <p>{placeholder}</p>
                     </div>
-                  ))}
-                </div>
-              ) : (
-                <div className="dark:text-darkgray-900 py-2.5 px-3 text-sm leading-none text-gray-900">
-                  <p>{selectedItems?.label}</p>
-                </div>
-              )}
-            </>
-          </div>
+                  )}
 
-          <div className="dark:text-darkgray-900 flex flex-none items-center rounded-[6px] p-1.5 text-gray-900 opacity-75 ">
-            {isClearable && !isDisabled && selectedItems !== null && (
-              <div className="cursor-pointer" onClick={clearValue}>
-                <FiX
-                  className={classNames && classNames.closeIcon ? classNames.closeIcon : "h-5 w-5 p-0.5"}
+                  {Array.isArray(selectedItems) ? (
+                    <div className="flex gap-1 overflow-x-scroll p-1 ">
+                      {selectedItems.map((item, index) => (
+                        <div
+                          className={cn(
+                            "dark:bg-darkgray-200 flex items-center space-x-2 rounded bg-gray-200 px-2 py-[6px]"
+                          )}
+                          key={index}>
+                          <p
+                            className={cn(
+                              classNames?.tagItemText ??
+                                "dark:text-darkgray-900 cursor-default select-none truncate text-sm leading-none text-gray-700"
+                            )}>
+                            {item.label}
+                          </p>
+                          {!isDisabled && (
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                removeItem(item);
+                              }}>
+                              <FiX
+                                className={
+                                  classNames?.tagItemIcon ??
+                                  "dark:text-darkgray-700 dark:hover:text-darkgray-900 h-4 w-4 text-gray-500 hover:text-gray-900"
+                                }
+                              />
+                            </button>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="dark:text-darkgray-900 py-2.5 px-3 text-sm leading-none text-gray-900">
+                      <p>{selectedItems?.label}</p>
+                    </div>
+                  )}
+                </>
+              </div>
+
+              <div className="dark:text-darkgray-900 flex flex-none items-center rounded-[6px] p-1.5 text-gray-900 opacity-75 ">
+                <>
+                  {isClearable && !isDisabled && selectedItems !== null && (
+                    <div className="cursor-pointer" onClick={clearValue}>
+                      <FiX
+                        className={
+                          classNames && classNames.closeIcon ? classNames.closeIcon : "h-5 w-5 p-0.5"
+                        }
+                      />
+                    </div>
+                  )}
+
+                  <FiChevronDown className={cn("h-5 w-5 transition duration-300")} />
+                </>
+              </div>
+            </div>
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Content>
+              <div
+                className={
+                  classNames?.menu ??
+                  "dark:bg-darkgray-100 dark:border-darkgray-300 min-w-64 z-10 mt-1.5 overflow-x-hidden rounded border bg-white py-1 text-sm text-gray-700 shadow-sm"
+                }>
+                {isSearchable && (
+                  <SearchInput
+                    searchInputRef={searchBoxRef}
+                    value={inputValue}
+                    placeholder={searchInputPlaceholder}
+                    onChange={(e) => setInputValue(e.target.value)}
+                  />
+                )}
+
+                <Options
+                  searchBoxRef={searchBoxRef}
+                  list={options}
+                  inputValue={inputValue}
+                  isMultiple={isMultiple}
+                  selected={selectedItems}
                 />
               </div>
-            )}
-
-            <FiChevronDown
-              className={cn("h-5 w-5 transition duration-300", open && " rotate-180 transform")}
-            />
-          </div>
-        </div>
-
-        {open && !isDisabled && (
-          <div
-            tabIndex={-1}
-            className={
-              classNames?.menu ??
-              "dark:bg-darkgray-100 dark:border-darkgray-300 absolute z-10 mt-1.5 w-full max-w-[256px] overflow-x-hidden rounded border bg-white py-1 text-sm text-gray-700 shadow-sm"
-            }>
-            {isSearchable && (
-              <SearchInput
-                searchInputRef={searchBoxRef}
-                value={inputValue}
-                placeholder={searchInputPlaceholder}
-                onChange={(e) => setInputValue(e.target.value)}
-              />
-            )}
-
-            <Options
-              searchBoxRef={searchBoxRef}
-              list={options}
-              inputValue={inputValue}
-              isMultiple={isMultiple}
-              selected={selectedItems}
-            />
-          </div>
-        )}
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
       </div>
     </SelectProvider>
   );
diff --git a/packages/ui/components/layout/spacing.stories.mdx b/packages/ui/components/layout/spacing.stories.mdx
index 8d8d63ed1b..3832920e6b 100644
--- a/packages/ui/components/layout/spacing.stories.mdx
+++ b/packages/ui/components/layout/spacing.stories.mdx
@@ -14,7 +14,6 @@ import {
 
 import { Tooltip } from "../tooltip";
 import { FiPlus, FiX } from "../icon";
-import { Flex } from "./Flex";
 
 <Meta title="Layout/Spacing" />