diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConditionalLogic.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConditionalLogic.tsx
index 283b6f23a4..e8b2d4e814 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConditionalLogic.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConditionalLogic.tsx
@@ -141,37 +141,33 @@ export function ConditionalLogic({
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuItem
-                    className="flex items-center gap-2"
                     onClick={() => {
                       duplicateLogic(logicItemIdx);
-                    }}>
-                    <CopyIcon className="h-4 w-4" />
+                    }}
+                    icon={<CopyIcon className="h-4 w-4" />}>
                     Duplicate
                   </DropdownMenuItem>
                   <DropdownMenuItem
-                    className="flex items-center gap-2"
                     disabled={logicItemIdx === 0}
                     onClick={() => {
                       moveLogic(logicItemIdx, logicItemIdx - 1);
-                    }}>
-                    <ArrowUpIcon className="h-4 w-4" />
+                    }}
+                    icon={<ArrowUpIcon className="h-4 w-4" />}>
                     Move up
                   </DropdownMenuItem>
                   <DropdownMenuItem
-                    className="flex items-center gap-2"
                     disabled={logicItemIdx === (question.logic ?? []).length - 1}
                     onClick={() => {
                       moveLogic(logicItemIdx, logicItemIdx + 1);
-                    }}>
-                    <ArrowDownIcon className="h-4 w-4" />
+                    }}
+                    icon={<ArrowDownIcon className="h-4 w-4" />}>
                     Move down
                   </DropdownMenuItem>
                   <DropdownMenuItem
-                    className="flex items-center gap-2"
                     onClick={() => {
                       handleRemoveLogic(logicItemIdx);
-                    }}>
-                    <TrashIcon className="h-4 w-4" />
+                    }}
+                    icon={<TrashIcon className="h-4 w-4" />}>
                     Remove
                   </DropdownMenuItem>
                 </DropdownMenuContent>
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditorCardMenu.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditorCardMenu.tsx
index bede5a1cf1..e898baea65 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditorCardMenu.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/EditorCardMenu.tsx
@@ -162,7 +162,7 @@ export const EditorCardMenu = ({
           <EllipsisIcon className="h-4 w-4 text-slate-500 hover:text-slate-600" />
         </DropdownMenuTrigger>
 
-        <DropdownMenuContent className="border border-slate-200">
+        <DropdownMenuContent>
           <div className="flex flex-col">
             {cardType === "question" && (
               <DropdownMenuSub>
@@ -170,13 +170,12 @@ export const EditorCardMenu = ({
                   Change question type
                 </DropdownMenuSubTrigger>
 
-                <DropdownMenuSubContent className="ml-2 border border-slate-200 text-slate-600 hover:text-slate-700">
+                <DropdownMenuSubContent className="ml-2">
                   {Object.entries(availableQuestionTypes).map(([type, name]) => {
                     if (type === card.type) return null;
                     return (
                       <DropdownMenuItem
                         key={type}
-                        className="min-h-8 cursor-pointer"
                         onClick={() => {
                           setChangeToType(type as TSurveyQuestionTypeEnum);
                           if ((card as TSurveyQuestion).logic) {
@@ -185,8 +184,8 @@ export const EditorCardMenu = ({
                           }
 
                           changeQuestionType(type as TSurveyQuestionTypeEnum);
-                        }}>
-                        {QUESTIONS_ICON_MAP[type as TSurveyQuestionTypeEnum]}
+                        }}
+                        icon={QUESTIONS_ICON_MAP[type as TSurveyQuestionTypeEnum]}>
                         <span className="ml-2">{name}</span>
                       </DropdownMenuItem>
                     );
@@ -196,7 +195,7 @@ export const EditorCardMenu = ({
             )}
             {cardType === "ending" && (
               <DropdownMenuItem
-                className="flex min-h-8 cursor-pointer justify-between text-slate-600 hover:text-slate-700"
+                className="min-h-8 justify-between"
                 onClick={(e) => {
                   e.preventDefault();
                   addEndingCardBelow();
@@ -211,12 +210,12 @@ export const EditorCardMenu = ({
                   Add question below
                 </DropdownMenuSubTrigger>
 
-                <DropdownMenuSubContent className="ml-4 border border-slate-200">
+                <DropdownMenuSubContent className="ml-2">
                   {Object.entries(availableQuestionTypes).map(([type, name]) => {
                     return (
                       <DropdownMenuItem
                         key={type}
-                        className="min-h-8 cursor-pointer"
+                        className="min-h-8"
                         onClick={(e) => {
                           e.stopPropagation();
                           if (cardType === "question") {
@@ -232,33 +231,27 @@ export const EditorCardMenu = ({
               </DropdownMenuSub>
             )}
             <DropdownMenuItem
-              className={`flex min-h-8 cursor-pointer justify-between text-slate-600 hover:text-slate-700 ${
-                cardIdx === 0 ? "opacity-50" : ""
-              }`}
               onClick={(e) => {
                 if (cardIdx !== 0) {
                   e.stopPropagation();
                   moveCard(cardIdx, true);
                 }
               }}
+              icon={<ArrowUpIcon className="h-4 w-4" />}
               disabled={cardIdx === 0}>
-              <span className="text-sm">Move up</span>
-              <ArrowUpIcon className="h-4 w-4" />
+              <span>Move up</span>
             </DropdownMenuItem>
 
             <DropdownMenuItem
-              className={`flex min-h-8 cursor-pointer justify-between text-slate-600 hover:text-slate-700 ${
-                lastCard ? "opacity-50" : ""
-              }`}
               onClick={(e) => {
                 if (!lastCard) {
                   e.stopPropagation();
                   moveCard(cardIdx, false);
                 }
               }}
+              icon={<ArrowDownIcon className="h-4 w-4" />}
               disabled={lastCard}>
-              <span className="text-sm text-slate-600 hover:text-slate-700">Move down</span>
-              <ArrowDownIcon className="h-4 w-4" />
+              <span>Move down</span>
             </DropdownMenuItem>
           </div>
         </DropdownMenuContent>
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditorActions.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditorActions.tsx
index 0db655d32e..2128c46d4a 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditorActions.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditorActions.tsx
@@ -200,30 +200,27 @@ export function LogicEditorActions({
 
               <DropdownMenuContent>
                 <DropdownMenuItem
-                  className="flex items-center gap-2"
                   onClick={() => {
                     handleActionsChange("addBelow", idx);
-                  }}>
-                  <PlusIcon className="h-4 w-4" />
+                  }}
+                  icon={<PlusIcon className="h-4 w-4" />}>
                   Add action below
                 </DropdownMenuItem>
 
                 <DropdownMenuItem
-                  className="flex items-center gap-2"
                   disabled={actions.length === 1}
                   onClick={() => {
                     handleActionsChange("remove", idx);
-                  }}>
-                  <TrashIcon className="h-4 w-4" />
+                  }}
+                  icon={<TrashIcon className="h-4 w-4" />}>
                   Remove
                 </DropdownMenuItem>
 
                 <DropdownMenuItem
-                  className="flex items-center gap-2"
                   onClick={() => {
                     handleActionsChange("duplicate", idx);
-                  }}>
-                  <CopyIcon className="h-4 w-4" />
+                  }}
+                  icon={<CopyIcon className="h-4 w-4" />}>
                   Duplicate
                 </DropdownMenuItem>
               </DropdownMenuContent>
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditorConditions.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditorConditions.tsx
index 559ca7598d..684d9f8448 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditorConditions.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditorConditions.tsx
@@ -216,18 +216,16 @@ export function LogicEditorConditions({
               </DropdownMenuTrigger>
               <DropdownMenuContent>
                 <DropdownMenuItem
-                  className="flex items-center gap-2"
                   onClick={() => {
                     handleAddConditionBelow(condition.id);
-                  }}>
-                  <PlusIcon className="h-4 w-4" />
+                  }}
+                  icon={<PlusIcon className="h-4 w-4" />}>
                   Add condition below
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  className="flex items-center gap-2"
                   disabled={depth === 0 && conditions.conditions.length === 1}
-                  onClick={() => handleRemoveCondition(condition.id)}>
-                  <TrashIcon className="h-4 w-4" />
+                  onClick={() => handleRemoveCondition(condition.id)}
+                  icon={<TrashIcon className="h-4 w-4" />}>
                   Remove
                 </DropdownMenuItem>
               </DropdownMenuContent>
@@ -307,30 +305,26 @@ export function LogicEditorConditions({
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem
-              className="flex items-center gap-2"
               onClick={() => {
                 handleAddConditionBelow(condition.id);
-              }}>
-              <PlusIcon className="h-4 w-4" />
+              }}
+              icon={<PlusIcon className="h-4 w-4" />}>
               Add condition below
             </DropdownMenuItem>
             <DropdownMenuItem
-              className="flex items-center gap-2"
               disabled={depth === 0 && conditions.conditions.length === 1}
-              onClick={() => handleRemoveCondition(condition.id)}>
-              <TrashIcon className="h-4 w-4" />
+              onClick={() => handleRemoveCondition(condition.id)}
+              icon={<TrashIcon className="h-4 w-4" />}>
               Remove
             </DropdownMenuItem>
             <DropdownMenuItem
-              className="flex items-center gap-2"
-              onClick={() => handleDuplicateCondition(condition.id)}>
-              <CopyIcon className="h-4 w-4" />
+              onClick={() => handleDuplicateCondition(condition.id)}
+              icon={<CopyIcon className="h-4 w-4" />}>
               Duplicate
             </DropdownMenuItem>
             <DropdownMenuItem
-              className="flex items-center gap-2"
-              onClick={() => handleCreateGroup(condition.id)}>
-              <WorkflowIcon className="h-4 w-4" />
+              onClick={() => handleCreateGroup(condition.id)}
+              icon={<WorkflowIcon className="h-4 w-4" />}>
               Create group
             </DropdownMenuItem>
           </DropdownMenuContent>
diff --git a/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx b/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx
index b74bb2cc4a..4b4a10bc39 100644
--- a/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx
@@ -323,7 +323,10 @@ export const MainNavigation = ({
             )}
 
             <DropdownMenu>
-              <DropdownMenuTrigger asChild id="productDropdownTrigger">
+              <DropdownMenuTrigger
+                asChild
+                id="productDropdownTrigger"
+                className="w-full rounded-br-xl border-t py-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
                 <div
                   tabIndex={0}
                   className={cn(
@@ -403,8 +406,9 @@ export const MainNavigation = ({
                 </DropdownMenuRadioGroup>
                 <DropdownMenuSeparator />
                 {isOwnerOrAdmin && (
-                  <DropdownMenuItem onClick={() => handleAddProduct(organization.id)}>
-                    <PlusIcon className="mr-2 h-4 w-4" />
+                  <DropdownMenuItem
+                    onClick={() => handleAddProduct(organization.id)}
+                    icon={<PlusIcon className="mr-2 h-4 w-4" />}>
                     <span>Add product</span>
                   </DropdownMenuItem>
                 )}
@@ -463,8 +467,9 @@ export const MainNavigation = ({
                           target={link.target}
                           key={link.label}
                           className="flex items-center">
-                          <DropdownMenuItem key={link.label}>
-                            <link.icon className="h-4 w-4" strokeWidth={1.5} />
+                          <DropdownMenuItem
+                            key={link.label}
+                            icon={<link.icon className="h-4 w-4" strokeWidth={1.5} />}>
                             {link.label}
                           </DropdownMenuItem>
                         </Link>
@@ -477,8 +482,8 @@ export const MainNavigation = ({
                     onClick={async () => {
                       await signOut({ callbackUrl: "/auth/login" });
                       await formbricksLogout();
-                    }}>
-                    <LogOutIcon className="h-4 w-4" strokeWidth={1.5} />
+                    }}
+                    icon={<LogOutIcon className="h-4 w-4" strokeWidth={1.5} />}>
                     Logout
                   </DropdownMenuItem>
 
@@ -510,8 +515,9 @@ export const MainNavigation = ({
                           </DropdownMenuRadioGroup>
                           <DropdownMenuSeparator />
                           {isMultiOrgEnabled && (
-                            <DropdownMenuItem onClick={() => setShowCreateOrganizationModal(true)}>
-                              <PlusIcon className="mr-2 h-4 w-4" />
+                            <DropdownMenuItem
+                              onClick={() => setShowCreateOrganizationModal(true)}
+                              icon={<PlusIcon className="mr-2 h-4 w-4" />}>
                               <span>Create new organization</span>
                             </DropdownMenuItem>
                           )}
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx
index d4e96c3b59..286deb058d 100755
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter.tsx
@@ -223,7 +223,6 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               <DropdownMenuItem
-                className="hover:ring-0"
                 onClick={() => {
                   setFilterRange(FilterDropDownLabels.ALL_TIME);
                   setDateRange({ from: undefined, to: getTodayDate() });
@@ -231,7 +230,6 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
                 <p className="text-slate-700">All time</p>
               </DropdownMenuItem>
               <DropdownMenuItem
-                className="hover:ring-0"
                 onClick={() => {
                   setFilterRange(FilterDropDownLabels.LAST_7_DAYS);
                   setDateRange({ from: startOfDay(subDays(new Date(), 7)), to: getTodayDate() });
@@ -239,7 +237,6 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
                 <p className="text-slate-700">Last 7 days</p>
               </DropdownMenuItem>
               <DropdownMenuItem
-                className="hover:ring-0"
                 onClick={() => {
                   setFilterRange(FilterDropDownLabels.LAST_30_DAYS);
                   setDateRange({ from: startOfDay(subDays(new Date(), 30)), to: getTodayDate() });
@@ -247,7 +244,6 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
                 <p className="text-slate-700">Last 30 days</p>
               </DropdownMenuItem>
               <DropdownMenuItem
-                className="hover:ring-0"
                 onClick={() => {
                   setIsDatePickerOpen(true);
                   setFilterRange(FilterDropDownLabels.CUSTOM_RANGE);
@@ -274,28 +270,24 @@ export const CustomFilter = ({ survey }: CustomFilterProps) => {
 
               <DropdownMenuContent align="start">
                 <DropdownMenuItem
-                  className="hover:ring-0"
                   onClick={() => {
                     handleDowndloadResponses(FilterDownload.ALL, "csv");
                   }}>
                   <p className="text-slate-700">All responses (CSV)</p>
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  className="hover:ring-0"
                   onClick={() => {
                     handleDowndloadResponses(FilterDownload.ALL, "xlsx");
                   }}>
                   <p className="text-slate-700">All responses (Excel)</p>
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  className="hover:ring-0"
                   onClick={() => {
                     handleDowndloadResponses(FilterDownload.FILTER, "csv");
                   }}>
                   <p className="text-slate-700">Current selection (CSV)</p>
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  className="hover:ring-0"
                   onClick={() => {
                     handleDowndloadResponses(FilterDownload.FILTER, "xlsx");
                   }}>
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResultsShareButton.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResultsShareButton.tsx
index 2d3246c4e0..4573a7a360 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResultsShareButton.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/ResultsShareButton.tsx
@@ -98,34 +98,29 @@ export const ResultsShareButton = ({ survey, webAppUrl }: ResultsShareButtonProp
         <DropdownMenuContent align="start">
           {survey.resultShareKey ? (
             <DropdownMenuItem
-              className="hover:ring-0"
               onClick={() => {
                 navigator.clipboard.writeText(surveyUrl);
                 toast.success("Link to public results copied");
-              }}>
-              <p className="text-slate-700">
-                Copy link to public results <CopyIcon className="ml-1.5 inline h-4 w-4" />
-              </p>
+              }}
+              icon={<CopyIcon className="ml-1.5 inline h-4 w-4" />}>
+              <p className="text-slate-700">Copy link to public results</p>
             </DropdownMenuItem>
           ) : (
             <DropdownMenuItem
-              className="text-slate-700 hover:ring-0"
               onClick={() => {
                 copyUrlToClipboard();
-              }}>
-              <p className="flex items-center text-slate-700">
-                Copy link <CopyIcon className="ml-1.5 h-4 w-4" />
-              </p>
+              }}
+              icon={<CopyIcon className="ml-1.5 h-4 w-4" />}>
+              <p className="flex items-center text-slate-700">Copy link</p>
             </DropdownMenuItem>
           )}
           <DropdownMenuItem
-            className="hover:ring-0"
             onClick={() => {
               setShowResultsLinkModal(true);
-            }}>
+            }}
+            icon={<GlobeIcon className="ml-1.5 h-4 w-4" />}>
             <p className="flex items-center text-slate-700">
               {survey.resultShareKey ? "Unpublish from web" : "Publish to web"}
-              <GlobeIcon className="ml-1.5 h-4 w-4" />
             </p>
           </DropdownMenuItem>
         </DropdownMenuContent>
diff --git a/packages/ee/advanced-targeting/components/segment-editor.tsx b/packages/ee/advanced-targeting/components/segment-editor.tsx
index 435fbc1a36..4ee733f091 100644
--- a/packages/ee/advanced-targeting/components/segment-editor.tsx
+++ b/packages/ee/advanced-targeting/components/segment-editor.tsx
@@ -1,4 +1,4 @@
-import { MoreVertical, Trash2 } from "lucide-react";
+import { ArrowDownIcon, ArrowUpIcon, MoreVertical, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { cn } from "@formbricks/lib/cn";
 import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
@@ -224,7 +224,8 @@ export function SegmentEditor({
                     <DropdownMenuItem
                       onClick={() => {
                         handleMoveResource(groupId, "up");
-                      }}>
+                      }}
+                      icon={<ArrowUpIcon className="h-4 w-4" />}>
                       Move up
                     </DropdownMenuItem>
 
@@ -232,7 +233,8 @@ export function SegmentEditor({
                       onClick={() => {
                         if (viewOnly) return;
                         handleMoveResource(groupId, "down");
-                      }}>
+                      }}
+                      icon={<ArrowDownIcon className="h-4 w-4" />}>
                       Move down
                     </DropdownMenuItem>
                   </DropdownMenuContent>
diff --git a/packages/ee/advanced-targeting/components/segment-filter.tsx b/packages/ee/advanced-targeting/components/segment-filter.tsx
index f80e9596e6..3c04143428 100644
--- a/packages/ee/advanced-targeting/components/segment-filter.tsx
+++ b/packages/ee/advanced-targeting/components/segment-filter.tsx
@@ -1,4 +1,6 @@
 import {
+  ArrowDownIcon,
+  ArrowUpIcon,
   FingerprintIcon,
   MonitorSmartphoneIcon,
   MoreVertical,
@@ -161,13 +163,15 @@ function SegmentFilterItemContextMenu({
           <DropdownMenuItem
             onClick={() => {
               onMoveFilter(filterId, "up");
-            }}>
+            }}
+            icon={<ArrowUpIcon className="h-4 w-4" />}>
             Move up
           </DropdownMenuItem>
           <DropdownMenuItem
             onClick={() => {
               onMoveFilter(filterId, "down");
-            }}>
+            }}
+            icon={<ArrowDownIcon className="h-4 w-4" />}>
             Move down
           </DropdownMenuItem>
         </DropdownMenuContent>
diff --git a/packages/ui/components/BasicSegmentEditor/components/SegmentFilterItemContextMenu.tsx b/packages/ui/components/BasicSegmentEditor/components/SegmentFilterItemContextMenu.tsx
index 51a5de0a19..971e94805c 100644
--- a/packages/ui/components/BasicSegmentEditor/components/SegmentFilterItemContextMenu.tsx
+++ b/packages/ui/components/BasicSegmentEditor/components/SegmentFilterItemContextMenu.tsx
@@ -1,4 +1,4 @@
-import { EllipsisVerticalIcon, Trash2Icon } from "lucide-react";
+import { ArrowDownIcon, ArrowUpIcon, EllipsisVerticalIcon, Trash2Icon } from "lucide-react";
 import { cn } from "@formbricks/lib/cn";
 import { Button } from "../../Button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../DropdownMenu";
@@ -24,8 +24,16 @@ export const SegmentFilterItemContextMenu = ({
         </DropdownMenuTrigger>
 
         <DropdownMenuContent>
-          <DropdownMenuItem onClick={() => onMoveFilter(filterId, "up")}>Move up</DropdownMenuItem>
-          <DropdownMenuItem onClick={() => onMoveFilter(filterId, "down")}>Move down</DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => onMoveFilter(filterId, "up")}
+            icon={<ArrowUpIcon className="h-4 w-4" />}>
+            Move up
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => onMoveFilter(filterId, "down")}
+            icon={<ArrowDownIcon className="h-4 w-4" />}>
+            Move down
+          </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
 
diff --git a/packages/ui/components/DataTable/components/ColumnSettingsDropdown.tsx b/packages/ui/components/DataTable/components/ColumnSettingsDropdown.tsx
index a1bd402a30..17484420c8 100644
--- a/packages/ui/components/DataTable/components/ColumnSettingsDropdown.tsx
+++ b/packages/ui/components/DataTable/components/ColumnSettingsDropdown.tsx
@@ -23,15 +23,17 @@ export const ColumnSettingsDropdown = <T,>({
           className="capitalize"
           onClick={() => {
             column.toggleVisibility(false);
-          }}>
+          }}
+          icon={<EyeOffIcon className="h-4 w-4" />}>
           <div className="flex items-center space-x-2">
-            <EyeOffIcon className="h-4 w-4" />
             <span>Hide column</span>
           </div>
         </DropdownMenuItem>
-        <DropdownMenuItem className="capitalize" onClick={() => setIsTableSettingsModalOpen(true)}>
+        <DropdownMenuItem
+          className="capitalize"
+          onClick={() => setIsTableSettingsModalOpen(true)}
+          icon={<SettingsIcon className="h-4 w-4" />}>
           <div className="flex items-center space-x-2">
-            <SettingsIcon className="h-4 w-4" />
             <span>Table settings</span>
           </div>
         </DropdownMenuItem>
diff --git a/packages/ui/components/DropdownMenu/index.tsx b/packages/ui/components/DropdownMenu/index.tsx
index 0209c2c739..9d8cd9d9c0 100644
--- a/packages/ui/components/DropdownMenu/index.tsx
+++ b/packages/ui/components/DropdownMenu/index.tsx
@@ -67,7 +67,7 @@ const DropdownMenuContent: React.ComponentType<DropdownMenuPrimitive.DropdownMen
           ref={ref}
           sideOffset={sideOffset}
           className={cn(
-            "animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-56 min-w-[8rem] overflow-hidden rounded-xl border border-slate-200 bg-white p-1 text-slate-700 shadow-sm",
+            "animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-xl border border-slate-200 bg-white p-1 text-slate-700 shadow-sm",
             className
           )}
           {...props}
@@ -80,13 +80,15 @@ DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem: React.ForwardRefExoticComponent<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
+    icon?: React.ReactNode;
   } & React.RefAttributes<React.ElementRef<typeof DropdownMenuPrimitive.Item>>
 > = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
+    icon?: React.ReactNode;
   }
->(({ className, inset, ...props }, ref) => (
+>(({ className, children, inset, icon, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
@@ -94,8 +96,10 @@ const DropdownMenuItem: React.ForwardRefExoticComponent<
       inset && "pl-8",
       className
     )}
-    {...props}
-  />
+    {...props}>
+    {icon}
+    {children}
+  </DropdownMenuPrimitive.Item>
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
diff --git a/packages/ui/components/Editor/components/AddVariablesDropdown.tsx b/packages/ui/components/Editor/components/AddVariablesDropdown.tsx
index a4604de426..2eb07c109c 100644
--- a/packages/ui/components/Editor/components/AddVariablesDropdown.tsx
+++ b/packages/ui/components/Editor/components/AddVariablesDropdown.tsx
@@ -35,7 +35,7 @@ export const AddVariablesDropdown: React.FC<IAddVariablesDropdown> = (props) =>
           </div>
           <div className="h-64 overflow-scroll md:h-80">
             {props.variables.map((variable) => (
-              <DropdownMenuItem key={variable} className="hover:ring-0">
+              <DropdownMenuItem key={variable}>
                 <button
                   key={variable}
                   type="button"
diff --git a/packages/ui/components/Editor/components/ToolbarPlugin.tsx b/packages/ui/components/Editor/components/ToolbarPlugin.tsx
index d53d929bde..49f903aa57 100644
--- a/packages/ui/components/Editor/components/ToolbarPlugin.tsx
+++ b/packages/ui/components/Editor/components/ToolbarPlugin.tsx
@@ -468,7 +468,7 @@ export const ToolbarPlugin = (props: TextEditorProps) => {
               <DropdownMenuContent align="start">
                 {Object.keys(blockTypeToBlockName).map((key) => {
                   return (
-                    <DropdownMenuItem key={key} className="outline-none hover:ring-0 focus:ring-0">
+                    <DropdownMenuItem key={key}>
                       <Button
                         color="minimal"
                         type="button"
diff --git a/packages/ui/components/QuestionFormInput/components/RecallItemSelect.tsx b/packages/ui/components/QuestionFormInput/components/RecallItemSelect.tsx
index 7f66d386de..41e8e73cb6 100644
--- a/packages/ui/components/QuestionFormInput/components/RecallItemSelect.tsx
+++ b/packages/ui/components/QuestionFormInput/components/RecallItemSelect.tsx
@@ -213,7 +213,6 @@ export const RecallItemSelect = ({
                     setShowRecallItemSelect(false);
                   }}
                   autoFocus={false}
-                  className="flex w-full cursor-pointer rounded-md p-2 focus:bg-slate-200 focus:outline-none"
                   onKeyDown={(e) => {
                     if (e.key === "ArrowUp" && index === 0) {
                       document.getElementById("recallItemSearchInput")?.focus();