diff --git a/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx b/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx
index 3abb2e45b..c426e5af9 100644
--- a/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx
+++ b/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx
@@ -121,12 +121,14 @@ const _GridEvent = (
                 showResizeCursor={!isPlaceholder && !isResizing && !isDragging}
                 onMouseDown={(e) => onScalerMouseDown(event, e, "startDate")}
                 top="-0.25px"
+                zIndex={ZIndex.LAYER_4}
               />
 
               <StyledEventScaler
                 bottom="-0.25px"
                 showResizeCursor={!isPlaceholder && !isResizing && !isDragging}
                 onMouseDown={(e) => onScalerMouseDown(event, e, "endDate")}
+                zIndex={ZIndex.LAYER_4}
               />
             </>
           </>
diff --git a/packages/web/src/views/Calendar/components/Event/styled.ts b/packages/web/src/views/Calendar/components/Event/styled.ts
index ce70f9d34..8532a0cda 100644
--- a/packages/web/src/views/Calendar/components/Event/styled.ts
+++ b/packages/web/src/views/Calendar/components/Event/styled.ts
@@ -114,6 +114,7 @@ export interface ScalerProps {
   showResizeCursor: boolean;
   bottom?: string;
   top?: string;
+  zIndex?: number;
 }
 
 export const StyledEventScaler = styled.div.attrs<ScalerProps>((props) => {
@@ -130,4 +131,5 @@ export const StyledEventScaler = styled.div.attrs<ScalerProps>((props) => {
   top: ${(props) => props.top};
   bottom: ${(props) => props.bottom};
   ${(props) => props.showResizeCursor && `cursor: row-resize`};
+  ${({ zIndex }) => zIndex && `z-index: ${zIndex}`}
 `;