diff --git a/components/Shell.tsx b/components/Shell.tsx
index 8ab86ae475..8326a106f2 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -1,4 +1,3 @@
-import { Menu, Transition } from "@headlessui/react";
 import { SelectorIcon } from "@heroicons/react/outline";
 import {
   CalendarIcon,
@@ -25,6 +24,12 @@ import { trpc } from "@lib/trpc";
 
 import { HeadSeo } from "@components/seo/head-seo";
 import Avatar from "@components/ui/Avatar";
+import Dropdown, {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@components/ui/Dropdown";
 
 import Logo from "./Logo";
 
@@ -66,12 +71,12 @@ export function ShellSubHeading(props: {
   return (
     <div className={classNames("block sm:flex justify-between mb-3", props.className)}>
       <div>
-        <h2 className="text-lg font-bold text-gray-900 flex items-center content-center space-x-2">
+        <h2 className="flex items-center content-center space-x-2 text-lg font-bold text-gray-900">
           {props.title}
         </h2>
-        {props.subtitle && <p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>}
+        {props.subtitle && <p className="mr-4 text-sm text-neutral-500">{props.subtitle}</p>}
       </div>
-      {props.actions && <div className="mb-4 flex-shrink-0">{props.actions}</div>}
+      {props.actions && <div className="flex-shrink-0 mb-4">{props.actions}</div>}
     </div>
   );
 }
@@ -159,17 +164,17 @@ export default function Shell(props: {
         <Toaster position="bottom-right" />
       </div>
 
-      <div className="h-screen flex overflow-hidden bg-gray-100">
+      <div className="flex h-screen overflow-hidden bg-gray-100">
         <div className="hidden md:flex md:flex-shrink-0">
           <div className="flex flex-col w-56">
-            <div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
-              <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
+            <div className="flex flex-col flex-1 h-0 bg-white border-r border-gray-200">
+              <div className="flex flex-col flex-1 pt-5 pb-4 overflow-y-auto">
                 <Link href="/event-types">
                   <a className="px-4">
                     <Logo small />
                   </a>
                 </Link>
-                <nav className="mt-5 flex-1 px-2 bg-white space-y-1">
+                <nav className="flex-1 px-2 mt-5 space-y-1 bg-white">
                   {navigation.map((item) => (
                     <Link key={item.name} href={item.href}>
                       <a
@@ -194,49 +199,47 @@ export default function Shell(props: {
                   ))}
                 </nav>
               </div>
-              <div className="flex-shrink-0 flex p-4">
+              <div className="p-4 pt-2 pr-2">
                 <UserDropdown />
               </div>
             </div>
           </div>
         </div>
 
-        <div className="flex flex-col w-0 flex-1 overflow-hidden">
+        <div className="flex flex-col flex-1 w-0 overflow-hidden">
           <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none max-w-[1700px]">
             {/* show top navigation for md and smaller (tablet and phones) */}
-            <nav className="md:hidden bg-white shadow p-4 flex justify-between items-center">
+            <nav className="flex items-center justify-between p-4 bg-white shadow md:hidden">
               <Link href="/event-types">
                 <a>
                   <Logo />
                 </a>
               </Link>
-              <div className="flex gap-3 items-center self-center">
-                <button className="bg-white p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
+              <div className="flex items-center self-center gap-3">
+                <button className="p-2 text-gray-400 bg-white rounded-full hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
                   <span className="sr-only">View notifications</span>
                   <Link href="/settings/profile">
                     <a>
-                      <CogIcon className="h-6 w-6" aria-hidden="true" />
+                      <CogIcon className="w-6 h-6" aria-hidden="true" />
                     </a>
                   </Link>
                 </button>
-                <div className="mt-1">
-                  <UserDropdown small bottom />
-                </div>
+                <UserDropdown small />
               </div>
             </nav>
             <div className={classNames(props.centered && "md:max-w-5xl mx-auto", "py-8")}>
               <div className="block sm:flex justify-between px-4 sm:px-6 md:px-8 min-h-[80px]">
-                <div className="mb-8 w-full">
-                  <h1 className="font-cal text-xl font-bold text-gray-900 tracking-wide mb-1">
+                <div className="w-full mb-8">
+                  <h1 className="mb-1 text-xl font-bold tracking-wide text-gray-900 font-cal">
                     {props.heading}
                   </h1>
-                  <p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>
+                  <p className="mr-4 text-sm text-neutral-500">{props.subtitle}</p>
                 </div>
-                <div className="mb-4 flex-shrink-0">{props.CTA}</div>
+                <div className="flex-shrink-0 mb-4">{props.CTA}</div>
               </div>
               <div className="px-4 sm:px-6 md:px-8">{props.children}</div>
               {/* show bottom navigation for md and smaller (tablet and phones) */}
-              <nav className="bottom-nav md:hidden flex fixed bottom-0 bg-white w-full shadow">
+              <nav className="fixed bottom-0 flex w-full bg-white shadow bottom-nav md:hidden">
                 {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
                 {navigation.flatMap((item, itemIdx) =>
                   item.name === "Settings" ? (
@@ -265,7 +268,7 @@ export default function Shell(props: {
                 )}
               </nav>
               {/* add padding to content for mobile navigation*/}
-              <div className="block md:hidden pt-12" />
+              <div className="block pt-12 md:hidden" />
             </div>
             <LicenseBanner />
           </main>
@@ -275,134 +278,97 @@ export default function Shell(props: {
   );
 }
 
-function UserDropdown({ small, bottom }: { small?: boolean; bottom?: boolean }) {
+function UserDropdown({ small }: { small?: boolean }) {
   const query = useMeQuery();
   const user = query.data;
 
   return (
-    <Menu as="div" className="w-full relative inline-block text-left">
-      {({ open }) => (
-        <>
-          <div>
-            {user && (
-              <Menu.Button className="group w-full rounded-md text-sm text-left font-medium text-gray-700 focus:outline-none">
-                <span className="flex w-full justify-between items-center">
-                  <span className="flex min-w-0 items-center justify-between space-x-3">
-                    <Avatar
-                      imageSrc={user.avatar}
-                      alt={user.username}
-                      className={classNames(
-                        small ? "w-8 h-8" : "w-10 h-10",
-                        "bg-gray-300 rounded-full flex-shrink-0"
-                      )}
-                    />
-                    {!small && (
-                      <span className="flex-1 flex flex-col min-w-0">
-                        <span className="text-gray-900 text-sm font-medium truncate">{user.name}</span>
-                        <span className="text-neutral-500 font-normal text-sm truncate">
-                          /{user.username}
-                        </span>
-                      </span>
-                    )}
-                  </span>
-                  {!small && (
-                    <SelectorIcon
-                      className="flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                      aria-hidden="true"
-                    />
-                  )}
+    !!user && (
+      <Dropdown>
+        <DropdownMenuTrigger asChild>
+          <div className="flex items-center space-x-2 cursor-pointer group">
+            <Avatar
+              imageSrc={user.avatar}
+              alt={user.username}
+              className={classNames(
+                small ? "w-8 h-8" : "w-10 h-10",
+                "bg-gray-300 rounded-full flex-shrink-0"
+              )}
+            />
+            {!small && (
+              <>
+                <span className="flex-grow text-sm">
+                  <span className="block font-medium text-gray-900 truncate">{user.name}</span>
+                  <span className="block font-normal truncate text-neutral-500">/{user.username}</span>
                 </span>
-              </Menu.Button>
+                <SelectorIcon
+                  className="flex-shrink-0 w-5 h-5 text-gray-400 group-hover:text-gray-500"
+                  aria-hidden="true"
+                />
+              </>
             )}
           </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={classNames(
-                bottom ? "origin-top top-1 right-0" : "origin-bottom bottom-14 left-0",
-                "w-64 z-10 absolute mt-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none"
-              )}>
-              <div className="py-1">
-                <a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href={`${process.env.NEXT_PUBLIC_APP_URL}/${user?.username || ""}`}
-                  className="flex px-4 py-2 text-sm text-neutral-500">
-                  View public page <ExternalLinkIcon className="ml-1 mt-1 w-3 h-3 text-neutral-400" />
-                </a>
-              </div>
-              <div className="py-1">
-                <Menu.Item>
-                  {({ active }) => (
-                    <a
-                      href="https://cal.com/slack"
-                      target="_blank"
-                      rel="noreferrer"
-                      className={classNames(
-                        active ? "bg-gray-100 text-gray-900" : "text-neutral-700",
-                        "flex px-4 py-2 text-sm font-medium"
-                      )}>
-                      <svg
-                        viewBox="0 0 2447.6 2452.5"
-                        className={classNames(
-                          "text-neutral-400 group-hover:text-neutral-500",
-                          "mt-0.5 mr-3 flex-shrink-0 h-4 w-4"
-                        )}
-                        xmlns="http://www.w3.org/2000/svg">
-                        <g clipRule="evenodd" fillRule="evenodd">
-                          <path
-                            d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-                            fill="#9BA6B6"></path>
-                          <path
-                            d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-                            fill="#9BA6B6"></path>
-                          <path
-                            d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-                            fill="#9BA6B6"></path>
-                          <path
-                            d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-                            fill="#9BA6B6"></path>
-                        </g>
-                      </svg>
-                      Join our Slack
-                    </a>
-                  )}
-                </Menu.Item>
-                <HelpMenuItemDynamic />
-              </div>
-              <div className="py-1">
-                <Menu.Item>
-                  {({ active }) => (
-                    <a
-                      onClick={() => signOut({ callbackUrl: "/auth/logout" })}
-                      className={classNames(
-                        active ? "bg-gray-100 text-gray-900" : "text-gray-700",
-                        "flex px-4 py-2 text-sm font-medium"
-                      )}>
-                      <LogoutIcon
-                        className={classNames(
-                          "text-neutral-400 group-hover:text-neutral-500",
-                          "mr-2 flex-shrink-0 h-5 w-5"
-                        )}
-                        aria-hidden="true"
-                      />
-                      Sign out
-                    </a>
-                  )}
-                </Menu.Item>
-              </div>
-            </Menu.Items>
-          </Transition>
-        </>
-      )}
-    </Menu>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href={`${process.env.NEXT_PUBLIC_APP_URL}/${user?.username || ""}`}
+              className="flex px-4 py-2 text-sm text-neutral-500">
+              View public page <ExternalLinkIcon className="w-3 h-3 mt-1 ml-1 text-neutral-400" />
+            </a>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator className="h-px bg-gray-200" />
+          <DropdownMenuItem>
+            <a
+              href="https://cal.com/slack"
+              target="_blank"
+              rel="noreferrer"
+              className="flex px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900">
+              <svg
+                viewBox="0 0 2447.6 2452.5"
+                className={classNames(
+                  "text-neutral-400 group-hover:text-neutral-500",
+                  "mt-0.5 mr-3 flex-shrink-0 h-4 w-4"
+                )}
+                xmlns="http://www.w3.org/2000/svg">
+                <g clipRule="evenodd" fillRule="evenodd">
+                  <path
+                    d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
+                    fill="#9BA6B6"></path>
+                  <path
+                    d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
+                    fill="#9BA6B6"></path>
+                  <path
+                    d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
+                    fill="#9BA6B6"></path>
+                  <path
+                    d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
+                    fill="#9BA6B6"></path>
+                </g>
+              </svg>
+              Join our Slack
+            </a>
+          </DropdownMenuItem>
+          <HelpMenuItemDynamic />
+          <DropdownMenuSeparator className="h-px bg-gray-200" />
+          <DropdownMenuItem>
+            <a
+              onClick={() => signOut({ callbackUrl: "/auth/logout" })}
+              className="flex px-4 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 hover:text-gray-900">
+              <LogoutIcon
+                className={classNames(
+                  "text-neutral-400 group-hover:text-neutral-500",
+                  "mr-2 flex-shrink-0 h-5 w-5"
+                )}
+                aria-hidden="true"
+              />
+              Sign out
+            </a>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </Dropdown>
+    )
   );
 }
diff --git a/ee/lib/intercom/HelpMenuItem.tsx b/ee/lib/intercom/HelpMenuItem.tsx
index 053393a3b1..e84709db47 100644
--- a/ee/lib/intercom/HelpMenuItem.tsx
+++ b/ee/lib/intercom/HelpMenuItem.tsx
@@ -1,34 +1,30 @@
-import { Menu } from "@headlessui/react";
 import { ChatAltIcon } from "@heroicons/react/solid";
 import { useIntercom } from "react-use-intercom";
 
 import classNames from "@lib/classNames";
 
+import { DropdownMenuItem } from "@components/ui/Dropdown";
+
 const HelpMenuItem = () => {
   const { boot, show } = useIntercom();
   return (
-    <Menu.Item>
-      {({ active }) => (
-        <button
-          onClick={() => {
-            boot();
-            show();
-          }}
+    <DropdownMenuItem>
+      <button
+        onClick={() => {
+          boot();
+          show();
+        }}
+        className="flex w-full px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900">
+        <ChatAltIcon
           className={classNames(
-            active ? "bg-gray-100 text-gray-900" : "text-neutral-700",
-            "w-full flex px-4 py-2 text-sm font-medium"
-          )}>
-          <ChatAltIcon
-            className={classNames(
-              "text-neutral-400 group-hover:text-neutral-500",
-              "mr-2 flex-shrink-0 h-5 w-5"
-            )}
-            aria-hidden="true"
-          />
-          Help
-        </button>
-      )}
-    </Menu.Item>
+            "text-neutral-400 group-hover:text-neutral-500",
+            "mr-2 flex-shrink-0 h-5 w-5"
+          )}
+          aria-hidden="true"
+        />
+        Help
+      </button>
+    </DropdownMenuItem>
   );
 };