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 9ac67d1a..c892b6dd 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
@@ -18,7 +18,10 @@ import {
 import { getPosition } from "@web/views/Calendar/hooks/event/getPosition";
 import { getLineClamp } from "@web/common/utils/grid.util";
 import { getTimesLabel } from "@web/common/utils/web.date.util";
-import { ZIndex } from "@web/common/constants/web.constants";
+import {
+  ID_OPTIMISTIC_PREFIX,
+  ZIndex,
+} from "@web/common/constants/web.constants";
 import { Text } from "@web/components/Text";
 
 import { StyledEvent, StyledEventScaler, StyledEventTitle } from "../../styled";
@@ -56,6 +59,7 @@ const _GridEvent = (
   const { component } = weekProps;
 
   const isInPast = dayjs().isAfter(dayjs(_event.endDate));
+  const isOptimistic = _event._id?.startsWith(ID_OPTIMISTIC_PREFIX);
   const event = _event;
 
   const position = getPosition(
@@ -79,10 +83,13 @@ const _GridEvent = (
       isDragging={isDragging}
       isInPast={isInPast}
       isPlaceholder={isPlaceholder}
+      isOptimistic={isOptimistic}
       isResizing={isResizing}
       left={position.left}
       lineClamp={lineClamp}
       onMouseDown={(e) => {
+        if (isOptimistic) return;
+
         onEventMouseDown(event, e);
       }}
       priority={event.priority}
diff --git a/packages/web/src/views/Calendar/components/Event/styled.ts b/packages/web/src/views/Calendar/components/Event/styled.ts
index cd13042b..ce70f9d3 100644
--- a/packages/web/src/views/Calendar/components/Event/styled.ts
+++ b/packages/web/src/views/Calendar/components/Event/styled.ts
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { Priority } from "@core/constants/core.constants";
-import { brighten } from "@core/util/color.utils";
+import { brighten, darken } from "@core/util/color.utils";
 import { Text } from "@web/components/Text";
 import { ZIndex } from "@web/common/constants/web.constants";
 import {
@@ -17,6 +17,7 @@ interface StyledEventProps {
   isInPast: boolean;
   isResizing: boolean;
   isPlaceholder: boolean;
+  isOptimistic: boolean;
   left: number;
   lineClamp: number;
   opacity?: number;
@@ -71,13 +72,21 @@ export const StyledEvent = styled.div.attrs<StyledEventProps>((props) => {
   &:hover {
     transition: background-color 0.35s linear;
 
-    ${({ isPlaceholder, isResizing, hoverColor, theme }) =>
+    ${({
+      backgroundColor,
+      isOptimistic,
+      isPlaceholder,
+      isResizing,
+      hoverColor,
+      theme,
+    }) =>
       !isPlaceholder &&
       !isResizing &&
       `
-      background-color: ${hoverColor};
+      background-color: ${isOptimistic ? darken(backgroundColor) : hoverColor};
+      cursor: ${isOptimistic ? "wait" : "pointer"};
       drop-shadow(2px 4px 4px ${theme.color.shadow.default});
-      `};
+     `};
   }
 
   &.active {