diff --git a/apps/web/components/team/TeamListItem.tsx b/apps/web/components/team/TeamListItem.tsx
index a705abbf37..65cc1cec56 100644
--- a/apps/web/components/team/TeamListItem.tsx
+++ b/apps/web/components/team/TeamListItem.tsx
@@ -99,7 +99,7 @@ export default function TeamListItem(props: Props) {
             </>
           )}
           {!isInvitee && (
-            <div className="flex space-x-2 rtl:space-x-reverse">
+            <div className="flex rtl:space-x-reverse">
               <TeamRole role={team.role} />
 
               <Tooltip content={t("copy_link_team")}>
diff --git a/apps/web/components/ui/Dropdown.tsx b/apps/web/components/ui/Dropdown.tsx
index 6abe0e3d68..4a1b4a82c9 100644
--- a/apps/web/components/ui/Dropdown.tsx
+++ b/apps/web/components/ui/Dropdown.tsx
@@ -25,8 +25,11 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
   ({ children, ...props }, forwardedRef) => {
     return (
       <DropdownMenuPrimitive.Content
+        portalled={false}
         {...props}
-        className="z-10 mt-1 w-48 origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        className={`${
+          props.portalled ? `` : `md:-ml-[55px]`
+        } z-10 mt-1 -ml-0 w-48 origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none lg:-ml-56`}
         ref={forwardedRef}>
         {children}
       </DropdownMenuPrimitive.Content>
diff --git a/apps/web/components/ui/TableActions.tsx b/apps/web/components/ui/TableActions.tsx
index cf81ead593..de093aa003 100644
--- a/apps/web/components/ui/TableActions.tsx
+++ b/apps/web/components/ui/TableActions.tsx
@@ -1,11 +1,15 @@
-import { Menu, Transition } from "@headlessui/react";
 import { DotsHorizontalIcon } from "@heroicons/react/solid";
-import React, { FC, Fragment } from "react";
+import React, { FC } from "react";
 
-import classNames from "@lib/classNames";
 import { useLocale } from "@lib/hooks/useLocale";
 import { SVGComponent } from "@lib/types/SVGComponent";
 
+import Dropdown, {
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@components/ui/Dropdown";
+
 import Button from "./Button";
 
 export type ActionType = {
@@ -38,57 +42,28 @@ const TableActions: FC<Props> = ({ actions }) => {
           </Button>
         ))}
       </div>
-      <Menu as="div" className="inline-block text-left lg:hidden ">
-        {({ open }) => (
-          <>
-            <div>
-              <Menu.Button className="mt-1 border border-transparent p-2 text-neutral-400 hover:border-gray-200">
-                <span className="sr-only">{t("open_options")}</span>
-                <DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
-              </Menu.Button>
-            </div>
-
-            <Transition
-              show={open}
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95">
-              <Menu.Items
-                static
-                className="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-neutral-100 rounded-sm bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                <div className="py-1">
-                  {actions.map((action) => {
-                    const Element = typeof action.onClick === "function" ? "span" : "a";
-                    return (
-                      <Menu.Item key={action.id} disabled={action.disabled}>
-                        {({ active }) => (
-                          <Element
-                            href={action.href}
-                            onClick={action.onClick}
-                            className={classNames(
-                              active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
-                              "group flex items-center px-4 py-2 text-sm font-medium"
-                            )}>
-                            <action.icon
-                              className="h-5 w-5 text-neutral-400 group-hover:text-neutral-500 ltr:mr-3"
-                              aria-hidden="true"
-                            />
-                            {action.label}
-                          </Element>
-                        )}
-                      </Menu.Item>
-                    );
-                  })}
-                </div>
-              </Menu.Items>
-            </Transition>
-          </>
-        )}
-      </Menu>
+      <div className="inline-block text-left lg:hidden">
+        <Dropdown>
+          <DropdownMenuTrigger className="h-[38px] w-[38px] cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
+            <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent portalled>
+            {actions.map((action) => (
+              <DropdownMenuItem key={action.id}>
+                <Button
+                  type="button"
+                  color="minimal"
+                  className="w-full font-normal"
+                  href={action.href}
+                  StartIcon={action.icon}
+                  onClick={action.onClick}>
+                  {action.label}
+                </Button>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </Dropdown>
+      </div>
     </>
   );
 };
diff --git a/apps/web/package.json b/apps/web/package.json
index 16d25b6b6e..27ccabd1cd 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -34,7 +34,6 @@
     "@calcom/tsconfig": "*",
     "@calcom/ui": "*",
     "@daily-co/daily-js": "^0.21.0",
-    "@headlessui/react": "^1.4.2",
     "@heroicons/react": "^1.0.5",
     "@hookform/error-message": "^2.0.0",
     "@hookform/resolvers": "^2.8.5",
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 0b83952dbd..4ab84b12ca 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -1,5 +1,3 @@
-// TODO: replace headlessui with radix-ui
-import { Menu, Transition } from "@headlessui/react";
 import {
   ArrowDownIcon,
   ArrowUpIcon,
@@ -15,6 +13,8 @@ import Head from "next/head";
 import Link from "next/link";
 import React, { Fragment, useEffect, useState } from "react";
 
+import { Button } from "@calcom/ui";
+
 import { QueryCell } from "@lib/QueryCell";
 import classNames from "@lib/classNames";
 import { useLocale } from "@lib/hooks/useLocale";
@@ -29,6 +29,11 @@ import { Alert } from "@components/ui/Alert";
 import Avatar from "@components/ui/Avatar";
 import AvatarGroup from "@components/ui/AvatarGroup";
 import Badge from "@components/ui/Badge";
+import Dropdown, {
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@components/ui/Dropdown";
 import UserCalendarIllustration from "@components/ui/svg/UserCalendarIllustration";
 
 type Profiles = inferQueryOutput<"viewer.eventTypes">["profiles"];
@@ -194,101 +199,60 @@ const EventTypeList = ({ readOnly, types, profile }: EventTypeListProps): JSX.El
                 </div>
               </div>
               <div className="mr-5 flex flex-shrink-0 sm:hidden">
-                <Menu as="div" className="inline-block text-left">
-                  {({ open }) => (
-                    <>
-                      <div>
-                        <Menu.Button className="mt-1 border border-transparent p-2 text-neutral-400 hover:border-gray-200">
-                          <span className="sr-only">{t("open_options")}</span>
-                          <DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
-                        </Menu.Button>
-                      </div>
-
-                      <Transition
-                        show={open}
-                        as={Fragment}
-                        enter="transition ease-out duration-100"
-                        enterFrom="transform opacity-0 scale-95"
-                        enterTo="transform opacity-100 scale-100"
-                        leave="transition ease-in duration-75"
-                        leaveFrom="transform opacity-100 scale-100"
-                        leaveTo="transform opacity-0 scale-95">
-                        <Menu.Items
-                          static
-                          className="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-neutral-100 rounded-sm bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                          <div className="py-1">
-                            <Menu.Item>
-                              {({ active }) => (
-                                <a
-                                  href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}
-                                  target="_blank"
-                                  rel="noreferrer"
-                                  className={classNames(
-                                    active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
-                                    "group flex items-center px-4 py-2 text-sm font-medium"
-                                  )}>
-                                  <ExternalLinkIcon
-                                    className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
-                                    aria-hidden="true"
-                                  />
-                                  {t("preview")}
-                                </a>
-                              )}
-                            </Menu.Item>
-                            <Menu.Item>
-                              {({ active }) => (
-                                <button
-                                  onClick={() => {
-                                    navigator.clipboard.writeText(
-                                      `${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
-                                    );
-                                    showToast(t("link_copied"), "success");
-                                  }}
-                                  className={classNames(
-                                    active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
-                                    "group flex w-full items-center px-4 py-2 text-sm font-medium"
-                                  )}>
-                                  <ClipboardCopyIcon
-                                    className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
-                                    aria-hidden="true"
-                                  />
-                                  {t("copy_link")}
-                                </button>
-                              )}
-                            </Menu.Item>
-                            {isNativeShare ? (
-                              <Menu.Item>
-                                {({ active }) => (
-                                  <button
-                                    onClick={() => {
-                                      navigator
-                                        .share({
-                                          title: t("share"),
-                                          text: t("share_event"),
-                                          url: `${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`,
-                                        })
-                                        .then(() => showToast(t("link_shared"), "success"))
-                                        .catch(() => showToast(t("failed"), "error"));
-                                    }}
-                                    className={classNames(
-                                      active ? "bg-neutral-100 text-neutral-900" : "text-neutral-700",
-                                      "group flex w-full items-center px-4 py-2 text-sm font-medium"
-                                    )}>
-                                    <UploadIcon
-                                      className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
-                                      aria-hidden="true"
-                                    />
-                                    {t("share")}
-                                  </button>
-                                )}
-                              </Menu.Item>
-                            ) : null}
-                          </div>
-                        </Menu.Items>
-                      </Transition>
-                    </>
-                  )}
-                </Menu>
+                <Dropdown>
+                  <DropdownMenuTrigger className="h-[38px] w-[38px] cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
+                    <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent portalled>
+                    <DropdownMenuItem>
+                      <Link href={`${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`}>
+                        <a target="_blank">
+                          <Button color="minimal" StartIcon={ExternalLinkIcon} className="w-full font-normal">
+                            {t("preview")}
+                          </Button>
+                        </a>
+                      </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <Button
+                        type="button"
+                        color="minimal"
+                        className="w-full font-normal"
+                        data-testid={"event-type-duplicate-" + type.id}
+                        StartIcon={ClipboardCopyIcon}
+                        onClick={() => {
+                          navigator.clipboard.writeText(
+                            `${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`
+                          );
+                          showToast(t("link_copied"), "success");
+                        }}>
+                        {t("copy_link")}
+                      </Button>
+                    </DropdownMenuItem>
+                    {isNativeShare ? (
+                      <DropdownMenuItem>
+                        <Button
+                          type="button"
+                          color="minimal"
+                          className="w-full font-normal"
+                          data-testid={"event-type-duplicate-" + type.id}
+                          StartIcon={UploadIcon}
+                          onClick={() => {
+                            navigator
+                              .share({
+                                title: t("share"),
+                                text: t("share_event"),
+                                url: `${process.env.NEXT_PUBLIC_APP_URL}/${profile.slug}/${type.slug}`,
+                              })
+                              .then(() => showToast(t("link_shared"), "success"))
+                              .catch(() => showToast(t("failed"), "error"));
+                          }}>
+                          {t("share")}
+                        </Button>
+                      </DropdownMenuItem>
+                    ) : null}
+                  </DropdownMenuContent>
+                </Dropdown>
               </div>
             </div>
           </li>
diff --git a/yarn.lock b/yarn.lock
index 6bcb007bca..dd25b0b4b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -969,11 +969,6 @@
     intl-messageformat "9.11.4"
     tslib "^2.1.0"
 
-"@headlessui/react@^1.4.2":
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.4.3.tgz#f77c6bb5cb4a614a5d730fb880cab502d48abf37"
-  integrity sha512-n2IQkaaw0aAAlQS5MEXsM4uRK+w18CrM72EqnGRl/UBOQeQajad8oiKXR9Nk15jOzTFQjpxzrZMf1NxHidFBiw==
-
 "@heroicons/react@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.5.tgz#2fe4df9d33eb6ce6d5178a0f862e97b61c01e27d"