diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 6eb2fdbb8c..cc876ab3e1 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -16,10 +16,11 @@ import {
   ButtonGroup,
   ConfirmationDialogContent,
   Dialog,
-  Divider,
+  DropdownMenuSeparator,
   Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownItem,
   DropdownMenuTrigger,
   HorizontalTabs,
   Icon,
@@ -246,32 +247,36 @@ function EventTypeSingleLayout({
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               <DropdownMenuItem className="focus:ring-gray-100">
-                <Button
-                  color="minimal"
-                  StartIcon={Icon.FiExternalLink}
+                <DropdownItem
                   target="_blank"
+                  type="button"
+                  StartIcon={Icon.FiExternalLink}
                   href={permalink}
-                  rel="noreferrer"
-                  className="min-w-full">
+                  rel="noreferrer">
                   {t("preview")}
-                </Button>
+                </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuItem className="focus:ring-gray-100">
-                <Button color="minimal" StartIcon={Icon.FiLink}>
+                <DropdownItem
+                  type="button"
+                  StartIcon={Icon.FiLink}
+                  onClick={() => {
+                    navigator.clipboard.writeText(permalink);
+                    showToast("Link copied!", "success");
+                  }}>
                   {t("copy_link")}
-                </Button>
+                </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuItem className="focus:ring-gray-100">
-                <Button
-                  color="minimal"
+                <DropdownItem
+                  type="button"
                   StartIcon={Icon.FiTrash}
                   disabled={!hasPermsToDelete}
-                  onClick={() => setDeleteDialogOpen(true)}
-                  className="min-w-full">
+                  onClick={() => setDeleteDialogOpen(true)}>
                   {t("delete")}
-                </Button>
+                </DropdownItem>
               </DropdownMenuItem>
-              <Divider />
+              <DropdownMenuSeparator className="block sm:hidden" />
               <div className="flex items-center rounded-md py-1.5 px-4 sm:hidden sm:hover:bg-gray-100">
                 <Skeleton
                   as={Label}
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 46168176ee..952729516c 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -370,11 +370,12 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                   {t("embed")}
                                 </EmbedButton>
                               </DropdownMenuItem>
-                              <DropdownMenuSeparator className="h-px bg-gray-200" />
+                              <DropdownMenuSeparator />
                               {/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
                               {(group.metadata?.readOnly === false || group.metadata.readOnly === null) && (
                                 <DropdownMenuItem>
                                   <DropdownItem
+                                    color="destructive"
                                     onClick={() => {
                                       setDeleteDialogOpen(true);
                                       setDeleteDialogTypeId(type.id);
@@ -466,7 +467,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                             {t("duplicate")}
                           </Button>
                         </DropdownMenuItem>
-                        <DropdownMenuSeparator className="h-px bg-gray-200" />
+                        <DropdownMenuSeparator />
                         <DropdownMenuItem className="outline-none">
                           <Button
                             onClick={() => {
diff --git a/apps/web/pages/settings/my-account/conferencing.tsx b/apps/web/pages/settings/my-account/conferencing.tsx
index d124ea2b0f..76e7935202 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -13,6 +13,7 @@ import {
   Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownItem,
   DropdownMenuTrigger,
   Icon,
   List,
@@ -94,16 +95,17 @@ const ConferencingLayout = () => {
                       </DropdownMenuTrigger>
                       <DropdownMenuContent>
                         <DropdownMenuItem>
-                          <Button
+                          <DropdownItem
+                            type="button"
                             color="destructive"
-                            StartIcon={Icon.FiTrash}
                             disabled={app.isGlobal}
+                            StartIcon={Icon.FiTrash}
                             onClick={() => {
                               setDeleteCredentialId(app.credentialIds[0]);
                               setDeleteAppModal(true);
                             }}>
                             {t("remove_app")}
-                          </Button>
+                          </DropdownItem>
                         </DropdownMenuItem>
                       </DropdownMenuContent>
                     </Dropdown>
diff --git a/packages/app-store/ee/routing-forms/components/SingleForm.tsx b/packages/app-store/ee/routing-forms/components/SingleForm.tsx
index 41db7dacf0..f54d97163f 100644
--- a/packages/app-store/ee/routing-forms/components/SingleForm.tsx
+++ b/packages/app-store/ee/routing-forms/components/SingleForm.tsx
@@ -109,7 +109,7 @@ const Actions = ({
           StartIcon={Icon.FiCode}
           tooltip={t("embed")}
         />
-        <DropdownMenuSeparator className="h-px bg-gray-200" />
+        <DropdownMenuSeparator />
         <FormAction
           routingForm={form}
           action="_delete"
diff --git a/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
index 632984b165..aa9fa79175 100644
--- a/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
@@ -144,7 +144,7 @@ export default function RoutingForms({
                                     {t("Copy Typeform Redirect Url")}
                                   </FormAction>
                                 ) : null}
-                                <DropdownMenuSeparator className="h-px bg-gray-200" />
+                                <DropdownMenuSeparator />
                                 <FormAction
                                   action="_delete"
                                   routingForm={form}
diff --git a/packages/features/ee/teams/components/MemberListItem.tsx b/packages/features/ee/teams/components/MemberListItem.tsx
index 05c000d803..02dc669c2c 100644
--- a/packages/features/ee/teams/components/MemberListItem.tsx
+++ b/packages/features/ee/teams/components/MemberListItem.tsx
@@ -165,21 +165,20 @@ export default function MemberListItem(props: Props) {
                         type="button"
                         onClick={() => setShowChangeMemberRoleModal(true)}
                         StartIcon={Icon.FiEdit2}>
-                        {t("edit") as string}
+                        {t("edit")}
                       </DropdownItem>
                     </DropdownMenuItem>
                     {impersonationMode && (
                       <>
                         <DropdownMenuItem>
-                          <Button
+                          <DropdownItem
+                            type="button"
                             onClick={() => setShowImpersonateModal(true)}
-                            color="minimal"
-                            StartIcon={Icon.FiLock}
-                            className="w-full flex-shrink-0 font-normal">
+                            StartIcon={Icon.FiLock}>
                             {t("impersonate")}
-                          </Button>
+                          </DropdownItem>
                         </DropdownMenuItem>
-                        <DropdownMenuSeparator className="h-px bg-gray-200" />
+                        <DropdownMenuSeparator />
                       </>
                     )}
                     <DropdownMenuItem>
diff --git a/packages/features/ee/teams/components/TeamInviteListItem.tsx b/packages/features/ee/teams/components/TeamInviteListItem.tsx
index 68d515c6ee..80e89e22e1 100644
--- a/packages/features/ee/teams/components/TeamInviteListItem.tsx
+++ b/packages/features/ee/teams/components/TeamInviteListItem.tsx
@@ -10,6 +10,7 @@ import {
   Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownItem,
   DropdownMenuTrigger,
   Icon,
 } from "@calcom/ui";
@@ -110,22 +111,18 @@ export default function TeamInviteListItem(props: Props) {
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuItem>
-                    <Button
-                      color="destructive"
-                      className="w-full rounded-none font-medium"
-                      StartIcon={Icon.FiCheck}
-                      onClick={acceptInvite}>
+                    <DropdownItem type="button" StartIcon={Icon.FiCheck} onClick={acceptInvite}>
                       {t("accept")}
-                    </Button>
+                    </DropdownItem>
                   </DropdownMenuItem>
                   <DropdownMenuItem>
-                    <Button
+                    <DropdownItem
                       color="destructive"
-                      className="w-full rounded-none font-medium"
+                      type="button"
                       StartIcon={Icon.FiX}
                       onClick={declineInvite}>
                       {t("reject")}
-                    </Button>
+                    </DropdownItem>
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </Dropdown>
diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx
index 3f5f5070a4..38cea12ce2 100644
--- a/packages/features/ee/teams/components/TeamListItem.tsx
+++ b/packages/features/ee/teams/components/TeamListItem.tsx
@@ -119,22 +119,18 @@ export default function TeamListItem(props: Props) {
                   </DropdownMenuTrigger>
                   <DropdownMenuContent>
                     <DropdownMenuItem>
-                      <Button
-                        color="minimal"
-                        className="w-full rounded-none font-medium"
-                        StartIcon={Icon.FiCheck}
-                        onClick={acceptInvite}>
+                      <DropdownItem type="button" StartIcon={Icon.FiCheck} onClick={acceptInvite}>
                         {t("accept")}
-                      </Button>
+                      </DropdownItem>
                     </DropdownMenuItem>
                     <DropdownMenuItem>
-                      <Button
+                      <DropdownItem
                         color="destructive"
-                        className="w-full rounded-none font-medium"
+                        type="button"
                         StartIcon={Icon.FiX}
                         onClick={declineInvite}>
                         {t("reject")}
-                      </Button>
+                      </DropdownItem>
                     </DropdownMenuItem>
                   </DropdownMenuContent>
                 </Dropdown>
@@ -186,20 +182,20 @@ export default function TeamListItem(props: Props) {
                         </DropdownItem>
                       </DropdownMenuItem>
                     )}
-                    <DropdownMenuSeparator className="h-px bg-gray-200" />
+                    <DropdownMenuSeparator />
                     {isOwner && (
                       <DropdownMenuItem>
                         <Dialog open={hideDropdown} onOpenChange={setHideDropdown}>
                           <DialogTrigger asChild>
-                            <Button
+                            <DropdownItem
+                              color="destructive"
+                              type="button"
+                              StartIcon={Icon.FiTrash}
                               onClick={(e) => {
                                 e.stopPropagation();
-                              }}
-                              color="destructive"
-                              className="rounded-none px-3 font-normal"
-                              StartIcon={Icon.FiTrash}>
+                              }}>
                               {t("disband_team")}
-                            </Button>
+                            </DropdownItem>
                           </DialogTrigger>
                           <ConfirmationDialogContent
                             variety="danger"
diff --git a/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx b/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
index b9a0a01e71..987ad6a6b1 100644
--- a/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
+++ b/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
@@ -6,6 +6,7 @@ import {
   Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownItem,
   DropdownMenuTrigger,
   Icon,
   TextField,
@@ -54,7 +55,7 @@ export const TimeTimeUnitInput = (props: Props) => {
           <DropdownMenuContent>
             {timeUnitOptions.map((option, index) => (
               <DropdownMenuItem key={index} className="outline-none">
-                <button
+                {/* <button
                   key={index}
                   type="button"
                   className="h-8 w-20 justify-start pl-3 text-left text-sm"
@@ -63,7 +64,16 @@ export const TimeTimeUnitInput = (props: Props) => {
                     form.setValue("timeUnit", option.value);
                   }}>
                   {option.label}
-                </button>
+                </button> */}
+                <DropdownItem
+                  key={index}
+                  type="button"
+                  onClick={() => {
+                    setTimeUnit(option.value);
+                    form.setValue("timeUnit", option.value);
+                  }}>
+                  {option.label}
+                </DropdownItem>
               </DropdownMenuItem>
             ))}
           </DropdownMenuContent>
diff --git a/packages/features/ee/workflows/components/WorkflowListPage.tsx b/packages/features/ee/workflows/components/WorkflowListPage.tsx
index f826a88278..766e7f17a1 100644
--- a/packages/features/ee/workflows/components/WorkflowListPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowListPage.tsx
@@ -13,6 +13,7 @@ import {
   Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownItem,
   DropdownMenuTrigger,
   Icon,
   showToast,
@@ -172,24 +173,24 @@ export default function WorkflowListPage({ workflows }: Props) {
                         </DropdownMenuTrigger>
                         <DropdownMenuContent>
                           <DropdownMenuItem>
-                            <Button
+                            <DropdownItem
                               type="button"
-                              color="minimal"
                               StartIcon={Icon.FiEdit2}
                               onClick={async () => await router.replace("/workflows/" + workflow.id)}>
                               {t("edit")}
-                            </Button>
+                            </DropdownItem>
                           </DropdownMenuItem>
                           <DropdownMenuItem>
-                            <Button
+                            <DropdownItem
+                              type="button"
+                              color="destructive"
+                              StartIcon={Icon.FiTrash2}
                               onClick={() => {
                                 setDeleteDialogOpen(true);
                                 setwWorkflowToDeleteId(workflow.id);
-                              }}
-                              color="minimal"
-                              StartIcon={Icon.FiTrash2}>
+                              }}>
                               {t("delete")}
-                            </Button>
+                            </DropdownItem>
                           </DropdownMenuItem>
                         </DropdownMenuContent>
                       </Dropdown>
diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index 032d9f25d7..a498574750 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -25,6 +25,7 @@ import {
   Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownItem,
   DropdownMenuTrigger,
   EmailField,
   Icon,
@@ -298,7 +299,10 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
                       <DropdownMenuItem>
-                        <Button
+                        <DropdownItem
+                          type="button"
+                          StartIcon={Icon.FiTrash2}
+                          color="destructive"
                           onClick={() => {
                             const steps = form.getValues("steps");
                             const updatedSteps = steps
@@ -314,13 +318,9 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                             if (setReload) {
                               setReload(!reload);
                             }
-                          }}
-                          color="secondary"
-                          size="base"
-                          StartIcon={Icon.FiTrash2}
-                          className="w-full rounded-none">
+                          }}>
                           {t("delete")}
-                        </Button>
+                        </DropdownItem>
                       </DropdownMenuItem>
                     </DropdownMenuContent>
                   </Dropdown>
diff --git a/packages/features/eventtypes/components/CreateEventTypeButton.tsx b/packages/features/eventtypes/components/CreateEventTypeButton.tsx
index 3ce476bc5c..81f3e8f998 100644
--- a/packages/features/eventtypes/components/CreateEventTypeButton.tsx
+++ b/packages/features/eventtypes/components/CreateEventTypeButton.tsx
@@ -24,6 +24,7 @@ import {
   Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
@@ -304,19 +305,22 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
             <DropdownMenuLabel>
               <div className="max-w-48">{t("new_event_subtitle")}</div>
             </DropdownMenuLabel>
-            <DropdownMenuSeparator className="h-px bg-gray-200" />
+            <DropdownMenuSeparator />
             {props.options.map((option) => (
-              <DropdownMenuItem
-                key={option.slug}
-                className="flex cursor-pointer items-center px-3 py-2 hover:bg-neutral-100 focus:outline-none"
-                onSelect={() => openModal(option)}>
-                <Avatar
-                  alt={option.name || ""}
-                  imageSrc={option.image || `${WEBAPP_URL}/${option.slug}/avatar.png`} // if no image, use default avatar
-                  size="sm"
-                  className="inline ltr:mr-4 rtl:ml-4"
-                />
-                <span className="px-4">{option.name ? option.name : option.slug}</span>
+              <DropdownMenuItem key={option.slug}>
+                <DropdownItem
+                  type="button"
+                  StartIcon={(props: any) => (
+                    <Avatar
+                      alt={option.name || ""}
+                      imageSrc={option.image || `${WEBAPP_URL}/${option.slug}/avatar.png`} // if no image, use default avatar
+                      size="sm"
+                      {...props}
+                    />
+                  )}
+                  onClick={() => openModal(option)}>
+                  <span>{option.name ? option.name : option.slug}</span>
+                </DropdownItem>
               </DropdownMenuItem>
             ))}
           </DropdownMenuContent>
@@ -359,7 +363,7 @@ export function CreateEventTypeTrigger(props: CreateEventTypeTrigger) {
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
             <DropdownMenuLabel>{t("new_event_subtitle")}</DropdownMenuLabel>
-            <DropdownMenuSeparator className="h-px bg-gray-200" />
+            <DropdownMenuSeparator />
             {props.options.map((option) => (
               <CreateEventTeamsItem
                 key={option.slug}
diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx
index 6efe0c0659..b59c42957a 100644
--- a/packages/features/schedules/components/ScheduleListItem.tsx
+++ b/packages/features/schedules/components/ScheduleListItem.tsx
@@ -2,18 +2,16 @@ import Link from "next/link";
 import { Fragment } from "react";
 
 import { availabilityAsString } from "@calcom/lib/availability";
-import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Availability } from "@calcom/prisma/client";
 import { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
-import { Schedule } from "@calcom/types/schedule";
 import {
   Badge,
   Button,
   Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownItem,
   DropdownMenuTrigger,
   Icon,
 } from "@calcom/ui";
@@ -81,11 +79,8 @@ export function ScheduleListItem({
             <DropdownMenuContent>
               <DropdownMenuItem className="min-w-40 focus:ring-gray-100">
                 {!schedule.isDefault && (
-                  <Button
+                  <DropdownItem
                     type="button"
-                    color="minimal"
-                    className="w-full rounded-b-none border-none font-normal"
-                    disabled={schedule.isDefault}
                     onClick={() => {
                       updateDefault({
                         scheduleId: schedule.id,
@@ -93,24 +88,20 @@ export function ScheduleListItem({
                       });
                     }}>
                     {t("set_as_default")}
-                  </Button>
+                  </DropdownItem>
                 )}
               </DropdownMenuItem>
               <DropdownMenuItem className="min-w-40 focus:ring-gray-100">
-                <Button
+                <DropdownItem
+                  type="button"
+                  color="destructive"
                   onClick={() => {
                     deleteFunction({
                       scheduleId: schedule.id,
                     });
-                  }}
-                  type="button"
-                  color="destructive"
-                  className={classNames(
-                    "w-full border-none font-normal",
-                    !schedule.isDefault && "rounded-t-none"
-                  )}>
+                  }}>
                   {t("delete")}
-                </Button>
+                </DropdownItem>
               </DropdownMenuItem>
             </DropdownMenuContent>
           )}
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index be6fa72ffa..48156d34b4 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -30,6 +30,7 @@ import {
   Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownItem,
   DropdownMenuPortal,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
@@ -295,114 +296,96 @@ function UserDropdown({ small }: { small?: boolean }) {
           ) : (
             <>
               <DropdownMenuItem>
-                <button
+                <DropdownItem
+                  type="button"
+                  StartIcon={(props) => (
+                    <Icon.FiMoon
+                      className={classNames(
+                        user.away
+                          ? "text-purple-500 group-hover:text-purple-700"
+                          : "text-gray-500 group-hover:text-gray-700",
+                        props.className
+                      )}
+                      aria-hidden="true"
+                    />
+                  )}
                   onClick={() => {
                     mutation.mutate({ away: !user?.away });
                     utils.viewer.me.invalidate();
-                  }}
-                  className="flex w-full min-w-max cursor-pointer items-center px-4 py-2 text-sm ltr:flex-row rtl:flex-row-reverse">
-                  <Icon.FiMoon
-                    className={classNames(
-                      user.away
-                        ? "text-purple-500 group-hover:text-purple-700"
-                        : "text-gray-500 group-hover:text-gray-700",
-                      "h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2"
-                    )}
-                    aria-hidden="true"
-                  />
+                  }}>
                   {user.away ? t("set_as_free") : t("set_as_away")}
-                </button>
+                </DropdownItem>
               </DropdownMenuItem>
-              <DropdownMenuSeparator className="h-px bg-gray-200" />
+              <DropdownMenuSeparator />
               {user.username && (
                 <>
                   <DropdownMenuItem>
-                    <a
+                    <DropdownItem
                       target="_blank"
                       rel="noopener noreferrer"
                       href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}`}
-                      className="flex items-center px-4 py-2 text-sm text-gray-700 ltr:flex-row rtl:flex-row-reverse">
-                      <Icon.FiExternalLink className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />{" "}
+                      StartIcon={Icon.FiExternalLink}>
                       {t("view_public_page")}
-                    </a>
+                    </DropdownItem>
                   </DropdownMenuItem>
                   <DropdownMenuItem>
-                    <a
-                      href="#"
+                    <DropdownItem
+                      type="button"
+                      StartIcon={Icon.FiLink}
                       onClick={(e) => {
                         e.preventDefault();
                         navigator.clipboard.writeText(
                           `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}`
                         );
                         showToast(t("link_copied"), "success");
-                      }}
-                      className="flex items-center px-4 py-2 text-sm text-gray-700 ltr:flex-row rtl:flex-row-reverse">
-                      <Icon.FiLink className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />{" "}
+                      }}>
                       {t("copy_public_page_link")}
-                    </a>
+                    </DropdownItem>
                   </DropdownMenuItem>
                 </>
               )}
-              <DropdownMenuSeparator className="h-px bg-gray-200" />
+              <DropdownMenuSeparator />
               <DropdownMenuItem>
-                <a
-                  href={JOIN_SLACK}
+                <DropdownItem
+                  StartIcon={(props) => <Icon.FiSlack strokeWidth={1.5} {...props} />}
                   target="_blank"
                   rel="noreferrer"
-                  className="flex items-center px-4 py-2 text-sm text-gray-700 ltr:flex-row rtl:flex-row-reverse">
-                  <Icon.FiSlack strokeWidth={1.5} className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />{" "}
+                  href={JOIN_SLACK}>
                   {t("join_our_slack")}
-                </a>
+                </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuItem>
-                <a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href={ROADMAP}
-                  className="flex items-center px-4 py-2 text-sm text-gray-700 ltr:flex-row rtl:flex-row-reverse">
-                  <Icon.FiMap className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" /> {t("visit_roadmap")}
-                </a>
+                <DropdownItem StartIcon={Icon.FiMap} target="_blank" href={ROADMAP}>
+                  {t("visit_roadmap")}
+                </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuItem>
-                <button
-                  onClick={() => setHelpOpen(true)}
-                  className="flex w-full items-center px-4 py-2 text-sm text-gray-700 ltr:flex-row rtl:flex-row-reverse">
-                  <Icon.FiHelpCircle
-                    className={classNames(
-                      "text-gray-500 group-hover:text-gray-500",
-                      "h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2"
-                    )}
-                    aria-hidden="true"
-                  />
-
+                <DropdownItem
+                  type="button"
+                  StartIcon={(props) => <Icon.FiHelpCircle aria-hidden="true" {...props} />}
+                  onClick={() => setHelpOpen(true)}>
                   {t("help")}
-                </button>
+                </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuItem>
-                <a
+                <DropdownItem
+                  StartIcon={Icon.FiDownload}
                   target="_blank"
-                  rel="noopener noreferrer"
-                  href={DESKTOP_APP_LINK}
-                  className="desktop-hidden hidden items-center px-4 py-2 text-sm text-gray-700 ltr:flex-row rtl:flex-row-reverse lg:flex">
-                  <Icon.FiDownload className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />{" "}
+                  rel="noreferrer"
+                  className="desktop-hidden hidden lg:flex"
+                  href={DESKTOP_APP_LINK}>
                   {t("download_desktop_app")}
-                </a>
+                </DropdownItem>
               </DropdownMenuItem>
 
-              <DropdownMenuSeparator className="h-px bg-gray-200" />
+              <DropdownMenuSeparator />
               <DropdownMenuItem>
-                <a
-                  onClick={() => signOut({ callbackUrl: "/auth/logout" })}
-                  className="flex cursor-pointer items-center px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 ltr:flex-row rtl:flex-row-reverse">
-                  <Icon.FiLogOut
-                    className={classNames(
-                      "text-gray-500 group-hover:text-gray-700",
-                      "h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2"
-                    )}
-                    aria-hidden="true"
-                  />
+                <DropdownItem
+                  type="button"
+                  StartIcon={(props) => <Icon.FiLogOut aria-hidden="true" {...props} />}
+                  onClick={() => signOut({ callbackUrl: "/auth/logout" })}>
                   {t("sign_out")}
-                </a>
+                </DropdownItem>
               </DropdownMenuItem>
             </>
           )}
diff --git a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
index 233649ca10..ec9fad5513 100644
--- a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
+++ b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
@@ -34,6 +34,7 @@ import {
   Dropdown,
   DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownItem,
   DropdownMenuContent,
   Button,
 } from "@calcom/ui";
@@ -393,7 +394,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
       editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
     }
   }, [editor, isLink]);
-
+  console.log("TEST", blockTypeToBlockName[blockType]);
   return (
     <div className="toolbar flex" ref={toolbarRef}>
       <>
diff --git a/packages/ui/components/form/dropdown/Dropdown.tsx b/packages/ui/components/form/dropdown/Dropdown.tsx
index df22a301e9..a17784efd9 100644
--- a/packages/ui/components/form/dropdown/Dropdown.tsx
+++ b/packages/ui/components/form/dropdown/Dropdown.tsx
@@ -5,6 +5,7 @@ import { ComponentProps, forwardRef } from "react";
 
 import { classNames } from "@calcom/lib";
 import { SVGComponent } from "@calcom/types/SVGComponent";
+import { ButtonProps } from "@calcom/ui";
 
 export const Dropdown = DropdownMenuPrimitive.Root;
 
@@ -36,7 +37,10 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
         align={align}
         {...props}
         sideOffset={sideOffset}
-        className="shadow-dropdown w-50 relative z-10 origin-top-right rounded-md border border-gray-200 bg-white text-sm"
+        className={classNames(
+          "shadow-dropdown w-50 relative z-10 origin-top-right rounded-md border border-gray-200 bg-white text-sm",
+          "[&>*:first-child]:mt-1 [&>*:last-child]:mb-1"
+        )}
         ref={forwardedRef}>
         {children}
       </DropdownMenuPrimitive.Content>
@@ -98,7 +102,7 @@ DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
 
 type DropdownItemProps = {
   children: React.ReactNode;
-  color?: "destructive";
+  color?: ButtonProps["color"];
   StartIcon?: SVGComponent;
   EndIcon?: SVGComponent;
   href?: string;
@@ -131,17 +135,29 @@ export const DropdownItem = (props: DropdownItemProps) => {
       {...props}
       className={classNames(
         "inline-flex w-full items-center px-3 py-2 text-gray-700 hover:text-gray-900",
-        props.color === "destructive" ? "hover:bg-red-100 hover:text-red-700" : " hover:bg-gray-100"
+        props.color === "destructive" ? "hover:bg-red-100 hover:text-red-700" : "hover:bg-gray-100"
       )}>
       <>
-        {StartIcon && <StartIcon />}
-        <div className="mx-2">{props.children}</div>
-        {EndIcon && <EndIcon />}
+        {StartIcon && <StartIcon className="h-4 w-4" />}
+        <div className="mx-3 text-sm font-medium leading-5">{props.children}</div>
+        {EndIcon && <EndIcon className="h-4 w-4" />}
       </>
     </ButtonOrLink>
   );
 };
 
-export const DropdownMenuSeparator = DropdownMenuPrimitive.Separator;
+type DropdownMenuSeparatorProps = ComponentProps<typeof DropdownMenuPrimitive["Separator"]>;
+export const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(
+  ({ className = "", ...props }, forwardedRef) => {
+    return (
+      <DropdownMenuPrimitive.Separator
+        className={classNames("my-1 h-px bg-gray-200", className)}
+        {...props}
+        ref={forwardedRef}
+      />
+    );
+  }
+);
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 
 export default Dropdown;
diff --git a/packages/ui/components/table/TableActions.tsx b/packages/ui/components/table/TableActions.tsx
index ff8f480444..0e4cb1d2d6 100644
--- a/packages/ui/components/table/TableActions.tsx
+++ b/packages/ui/components/table/TableActions.tsx
@@ -6,6 +6,7 @@ import {
   Dropdown,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownItem,
   DropdownMenuPortal,
   DropdownMenuTrigger,
   ButtonBaseProps,
@@ -53,16 +54,15 @@ export const DropdownActions = ({
         <DropdownMenuContent>
           {actions.map((action) => (
             <DropdownMenuItem key={action.id}>
-              <Button
+              <DropdownItem
                 type="button"
-                color={action.color || "minimal"}
-                className="w-full rounded-none font-normal"
-                href={action.href}
+                color={action.color}
+                data-testid={action.id}
                 StartIcon={action.icon}
-                onClick={action.onClick || defaultAction}
-                data-testid={action.id}>
+                href={action.href}
+                onClick={action.onClick || defaultAction}>
                 {action.label}
-              </Button>
+              </DropdownItem>
             </DropdownMenuItem>
           ))}
         </DropdownMenuContent>