diff --git a/apps/web/core/components/command-palette/shortcuts-modal/modal.tsx b/apps/web/core/components/command-palette/shortcuts-modal/modal.tsx
index f4076db4cf..0cf5f3ab9f 100644
--- a/apps/web/core/components/command-palette/shortcuts-modal/modal.tsx
+++ b/apps/web/core/components/command-palette/shortcuts-modal/modal.tsx
@@ -25,7 +25,7 @@ export const ShortcutsModal: FC<Props> = (props) => {
 
   return (
     <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+      <Dialog as="div" className="relative z-30" onClose={handleClose}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -38,7 +38,7 @@ export const ShortcutsModal: FC<Props> = (props) => {
           <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-20 overflow-y-auto">
+        <div className="fixed inset-0 z-30 overflow-y-auto">
           <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
             <Transition.Child
               as={Fragment}
diff --git a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
index 4ab6fe0143..b516d96af8 100644
--- a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
+++ b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
@@ -128,7 +128,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
   return (
     <>
       <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
-        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Dialog as="div" className="relative z-30" onClose={handleClose}>
           <Transition.Child
             as={React.Fragment}
             enter="ease-out duration-300"
@@ -141,7 +141,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
             <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
           </Transition.Child>
 
-          <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
+          <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
diff --git a/apps/web/core/components/dropdowns/date.tsx b/apps/web/core/components/dropdowns/date.tsx
index 1dd0105ad1..803a606e3d 100644
--- a/apps/web/core/components/dropdowns/date.tsx
+++ b/apps/web/core/components/dropdowns/date.tsx
@@ -170,7 +170,7 @@ export const DateDropdown: React.FC<Props> = observer((props) => {
           <Combobox.Options data-prevent-outside-click static>
             <div
               className={cn(
-                "my-1 bg-custom-background-100 shadow-custom-shadow-rg border-[0.5px] border-custom-border-300 rounded-md overflow-hidden z-20",
+                "my-1 bg-custom-background-100 shadow-custom-shadow-rg border-[0.5px] border-custom-border-300 rounded-md overflow-hidden z-30",
                 optionsClassName
               )}
               ref={setPopperElement}
diff --git a/apps/web/core/components/dropdowns/member/member-options.tsx b/apps/web/core/components/dropdowns/member/member-options.tsx
index f2cea10fab..189778d46f 100644
--- a/apps/web/core/components/dropdowns/member/member-options.tsx
+++ b/apps/web/core/components/dropdowns/member/member-options.tsx
@@ -114,7 +114,7 @@ export const MemberOptions: React.FC<Props> = observer((props: Props) => {
     <Combobox.Options data-prevent-outside-click static>
       <div
         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",
+          "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-30",
           optionsClassName
         )}
         ref={setPopperElement}
diff --git a/apps/web/core/components/inbox/modals/select-duplicate.tsx b/apps/web/core/components/inbox/modals/select-duplicate.tsx
index d0484ce66f..7d0fcd9e16 100644
--- a/apps/web/core/components/inbox/modals/select-duplicate.tsx
+++ b/apps/web/core/components/inbox/modals/select-duplicate.tsx
@@ -123,7 +123,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
     <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
       <div className="flex flex-wrap items-start">
         <div className="space-y-1 sm:basis-1/2">
-          <Dialog as="div" className="relative z-20" onClose={handleClose}>
+          <Dialog as="div" className="relative z-30" onClose={handleClose}>
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
diff --git a/apps/web/core/components/issues/archive-issue-modal.tsx b/apps/web/core/components/issues/archive-issue-modal.tsx
index e058be8a40..7bb56a88cd 100644
--- a/apps/web/core/components/issues/archive-issue-modal.tsx
+++ b/apps/web/core/components/issues/archive-issue-modal.tsx
@@ -66,7 +66,7 @@ export const ArchiveIssueModal: React.FC<Props> = (props) => {
 
   return (
     <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
+      <Dialog as="div" className="relative z-30" onClose={onClose}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -79,7 +79,7 @@ export const ArchiveIssueModal: React.FC<Props> = (props) => {
           <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+        <div className="fixed inset-0 z-30 overflow-y-auto">
           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <Transition.Child
               as={Fragment}
diff --git a/apps/web/core/components/issues/confirm-issue-discard.tsx b/apps/web/core/components/issues/confirm-issue-discard.tsx
index 7630af303b..8714f02f79 100644
--- a/apps/web/core/components/issues/confirm-issue-discard.tsx
+++ b/apps/web/core/components/issues/confirm-issue-discard.tsx
@@ -32,7 +32,7 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+      <Dialog as="div" className="relative z-30" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
diff --git a/apps/web/core/components/issues/parent-issues-list-modal.tsx b/apps/web/core/components/issues/parent-issues-list-modal.tsx
index 6996771ef9..72160fdcb4 100644
--- a/apps/web/core/components/issues/parent-issues-list-modal.tsx
+++ b/apps/web/core/components/issues/parent-issues-list-modal.tsx
@@ -92,7 +92,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
   return (
     <>
       <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
-        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Dialog as="div" className="relative z-30" onClose={handleClose}>
           <Transition.Child
             as={React.Fragment}
             enter="ease-out duration-300"
@@ -105,7 +105,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
             <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
           </Transition.Child>
 
-          <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
+          <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
diff --git a/apps/web/ee/components/command-palette/shortcuts-modal/modal.tsx b/apps/web/ee/components/command-palette/shortcuts-modal/modal.tsx
index c5ab8c918a..ba784bb961 100644
--- a/apps/web/ee/components/command-palette/shortcuts-modal/modal.tsx
+++ b/apps/web/ee/components/command-palette/shortcuts-modal/modal.tsx
@@ -23,7 +23,7 @@ export const PagesAppShortcutsModal: FC<Props> = (props) => {
 
   return (
     <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+      <Dialog as="div" className="relative z-30" onClose={handleClose}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -36,7 +36,7 @@ export const PagesAppShortcutsModal: FC<Props> = (props) => {
           <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-20 overflow-y-auto">
+        <div className="fixed inset-0 z-30 overflow-y-auto">
           <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
             <Transition.Child
               as={Fragment}
diff --git a/apps/web/ee/components/epics/peek-overview/view.tsx b/apps/web/ee/components/epics/peek-overview/view.tsx
index f2ddfce80e..6d86e94447 100644
--- a/apps/web/ee/components/epics/peek-overview/view.tsx
+++ b/apps/web/ee/components/epics/peek-overview/view.tsx
@@ -17,6 +17,7 @@ import { EpicDetailRoot } from "../details/root";
 import { EpicPeekOverviewError } from "./error";
 import { EpicPeekOverviewHeader, TPeekModes } from "./header";
 import { EpicPeekOverviewLoader } from "./loader";
+import { createPortal } from "react-dom";
 
 interface IEpicView {
   workspaceSlug: string;
@@ -117,19 +118,24 @@ export const EpicView: FC<IEpicView> = observer((props) => {
 
   const peekOverviewIssueClassName = cn(
     !embedIssue
-      ? "fixed z-20 flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300"
+      ? "fixed z-[25] flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300"
       : `w-full h-full`,
     !embedIssue && {
       "bottom-0 right-0 top-0 w-full lg:w-[1024px] border-0 border-l": peekMode === "side-peek",
       "size-5/6 top-[8.33%] left-[8.33%]": peekMode === "modal",
-      "inset-0 m-4": peekMode === "full-screen",
+      "inset-0 m-4 absolute": peekMode === "full-screen",
     }
   );
 
   const toggleEditEpicModal = (value: boolean) => setEditEpicModal(value);
   const toggleDeleteEpicModal = (value: boolean) => setDeleteEpicModal(value);
   const toggleDuplicateEpicModal = (value: boolean) => setDuplicateEpicModal(value);
-  return (
+
+  const shouldUsePortal = !embedIssue && peekMode === "full-screen";
+
+  const portalElement = document.getElementById("full-screen-portal");
+
+  const content = (
     <>
       {issueId && (
         <div
@@ -178,4 +184,6 @@ export const EpicView: FC<IEpicView> = observer((props) => {
       )}
     </>
   );
+
+  return shouldUsePortal && portalElement ? createPortal(content, portalElement) : content;
 });
diff --git a/apps/web/ee/components/initiatives/details/main/collapsible-section/epics/workspace-epic-modal.tsx b/apps/web/ee/components/initiatives/details/main/collapsible-section/epics/workspace-epic-modal.tsx
index a8eac920fb..1364b05473 100644
--- a/apps/web/ee/components/initiatives/details/main/collapsible-section/epics/workspace-epic-modal.tsx
+++ b/apps/web/ee/components/initiatives/details/main/collapsible-section/epics/workspace-epic-modal.tsx
@@ -98,7 +98,7 @@ export const WorkspaceEpicsListModal: React.FC<Props> = observer((props) => {
   return (
     <>
       <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
-        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Dialog as="div" className="relative z-30" onClose={handleClose}>
           <Transition.Child
             as={React.Fragment}
             enter="ease-out duration-300"
@@ -111,7 +111,7 @@ export const WorkspaceEpicsListModal: React.FC<Props> = observer((props) => {
             <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
           </Transition.Child>
 
-          <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
+          <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
diff --git a/apps/web/ee/components/issues/issue-details/sidebar/preview.tsx b/apps/web/ee/components/issues/issue-details/sidebar/preview.tsx
index fa80e1394f..88defb19e8 100644
--- a/apps/web/ee/components/issues/issue-details/sidebar/preview.tsx
+++ b/apps/web/ee/components/issues/issue-details/sidebar/preview.tsx
@@ -26,7 +26,7 @@ export const CustomerPreview: FC<TProps> = (props) => {
   const stage = CUSTOMER_STAGES.find((stage) => stage.value === customer?.stage);
   return (
     <div className="bg-custom-background-90/40">
-      <div ref={setPopperElement} className={"min-w-[350px] max-w-[400px] z-20"} style={styles.popper}>
+      <div ref={setPopperElement} className={"min-w-[350px] max-w-[400px] z-30"} style={styles.popper}>
         <div className="bg-custom-background-100 border border-custom-border-200 rounded-lg p-5 shadow-custom-shadow-sm">
           <div className="flex justify-between items-center">
             <div className="flex gap-2 items-center truncate">
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index d043ced70c..7321f12b8d 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -414,7 +414,7 @@ const SubMenu: React.FC<ICustomSubMenuProps> = (props) => {
             style={styles.popper}
             {...attributes.popper}
             className={cn(
-              "fixed z-[20] min-w-[12rem] overflow-hidden rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 p-1 text-xs shadow-custom-shadow-lg",
+              "fixed z-30 min-w-[12rem] overflow-hidden rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 p-1 text-xs shadow-custom-shadow-lg",
               "ring-1 ring-black ring-opacity-5", // Additional styling to make it stand out
               contentClassName
             )}
diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
index d26163e695..68fb90cb5d 100644
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -138,7 +138,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                 <Combobox.Options data-prevent-outside-click static>
                   <div
                     className={cn(
-                      "my-1 overflow-y-scroll rounded-md 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 min-w-48 whitespace-nowrap z-20",
+                      "my-1 overflow-y-scroll rounded-md 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 min-w-48 whitespace-nowrap z-30",
                       optionsClassName
                     )}
                     ref={setPopperElement}
diff --git a/packages/ui/src/modals/modal-core.tsx b/packages/ui/src/modals/modal-core.tsx
index 534cb27ce1..798917481d 100644
--- a/packages/ui/src/modals/modal-core.tsx
+++ b/packages/ui/src/modals/modal-core.tsx
@@ -25,7 +25,7 @@ export const ModalCore: React.FC<Props> = (props) => {
 
   return (
     <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={() => handleClose && handleClose()}>
+      <Dialog as="div" className="relative z-30" onClose={() => handleClose && handleClose()}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -38,7 +38,7 @@ export const ModalCore: React.FC<Props> = (props) => {
           <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-20 overflow-y-auto">
+        <div className="fixed inset-0 z-30 overflow-y-auto">
           <div className={position}>
             <Transition.Child
               as={Fragment}