diff --git a/web/core/components/dropdowns/date.tsx b/web/core/components/dropdowns/date.tsx
index 20714ec8021..9dba53ef443 100644
--- a/web/core/components/dropdowns/date.tsx
+++ b/web/core/components/dropdowns/date.tsx
@@ -161,7 +161,10 @@ export const DateDropdown: React.FC<Props> = (props) => {
         createPortal(
           <Combobox.Options data-prevent-outside-click static>
             <div
-              className="my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3 z-20"
+              className={cn(
+                "my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3 z-20",
+                className
+              )}
               ref={setPopperElement}
               style={styles.popper}
               {...attributes.popper}
diff --git a/web/core/components/dropdowns/member/index.tsx b/web/core/components/dropdowns/member/index.tsx
index 0559516f42c..4d068e42399 100644
--- a/web/core/components/dropdowns/member/index.tsx
+++ b/web/core/components/dropdowns/member/index.tsx
@@ -160,6 +160,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
     >
       {isOpen && (
         <MemberOptions
+          className={className}
           isOpen={isOpen}
           projectId={projectId}
           placement={placement}
diff --git a/web/core/components/dropdowns/member/member-options.tsx b/web/core/components/dropdowns/member/member-options.tsx
index 7d0c5c0b09f..380e672be72 100644
--- a/web/core/components/dropdowns/member/member-options.tsx
+++ b/web/core/components/dropdowns/member/member-options.tsx
@@ -9,12 +9,14 @@ import { usePopper } from "react-popper";
 import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 //components
+import { cn } from "@plane/editor";
 import { Avatar } from "@plane/ui";
 //store
 import { useUser, useMember } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 interface Props {
+  className? : string;
   projectId?: string;
   referenceElement: HTMLButtonElement | null;
   placement: Placement | undefined;
@@ -22,7 +24,7 @@ interface Props {
 }
 
 export const MemberOptions = observer((props: Props) => {
-  const { projectId, referenceElement, placement, isOpen } = props;
+  const { projectId, referenceElement, placement, isOpen, className="" } = props;
   // states
   const [query, setQuery] = useState("");
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -92,7 +94,8 @@ export const MemberOptions = observer((props: Props) => {
   return createPortal(
     <Combobox.Options data-prevent-outside-click static>
       <div
-        className="my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none z-20"
+        className={cn("my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none z-20",
+          className)}
         ref={setPopperElement}
         style={{
           ...styles.popper,
diff --git a/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/web/core/components/issues/issue-layouts/properties/all-properties.tsx
index 70e299fdbda..cddb16fbbe6 100644
--- a/web/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/web/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -331,6 +331,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
             disabled={isReadOnly}
+            className="z-10"
             renderByDefault={isMobile}
             showTooltip
           />
@@ -350,6 +351,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
             clearIconClassName="!text-custom-text-100"
             disabled={isReadOnly}
+            className="z-10"
             renderByDefault={isMobile}
             showTooltip
           />
@@ -369,6 +371,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             buttonClassName={issue.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
             showTooltip={issue?.assignee_ids?.length === 0}
             placeholder="Assignees"
+            className="z-10"
             tooltipContent=""
             renderByDefault={isMobile}
           />
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index 548a46970fd..5d565dd859b 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -38,6 +38,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props
         }
         buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
         buttonContainerClassName="w-full"
+        className="z-9"
         onClose={onClose}
       />
     </div>
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index 9e120bb7aae..3eaa321aae4 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -53,6 +53,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
             "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
           }
         )}
+        className="z-9"
         clearIconClassName="!text-custom-text-100"
         onClose={onClose}
       />
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index 8a8c0d268f1..46bc617fc97 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -40,6 +40,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
         buttonVariant="transparent-with-text"
         buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
         buttonContainerClassName="w-full"
+        className="z-9"
         onClose={onClose}
       />
     </div>