diff --git a/apps/web/package.json b/apps/web/package.json
index 08f6b8380..fb5a2e3a6 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -54,7 +54,7 @@
     "@platejs/list": "^49.2.0",
     "@platejs/resizable": "^49.0.0",
     "@platejs/selection": "^49.1.12",
-    "@posthog/nextjs-config": "^1.0.2",
+    "@posthog/nextjs-config": "^1.1.0",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-collapsible": "^1.1.11",
diff --git a/apps/web/src/components/ui/report/AppReport.stories.tsx b/apps/web/src/components/ui/report/AppReport.stories.tsx
index 3371d0cd1..099d50df1 100644
--- a/apps/web/src/components/ui/report/AppReport.stories.tsx
+++ b/apps/web/src/components/ui/report/AppReport.stories.tsx
@@ -136,15 +136,7 @@ LIMIT 5;`
     ],
     type: 'ul'
   },
-  {
-    children: [
-      {
-        children: [{ text: 'Multiple heading levels' }],
-        type: 'li'
-      }
-    ],
-    type: 'ul'
-  },
+
   {
     children: [
       {
diff --git a/apps/web/src/components/ui/report/elements/CalloutNode.tsx b/apps/web/src/components/ui/report/elements/CalloutNode.tsx
index b702e8d68..eb9733864 100644
--- a/apps/web/src/components/ui/report/elements/CalloutNode.tsx
+++ b/apps/web/src/components/ui/report/elements/CalloutNode.tsx
@@ -4,19 +4,26 @@ import * as React from 'react';
 
 import { useCalloutEmojiPicker } from '@platejs/callout/react';
 import { useEmojiDropdownMenuState } from '@platejs/emoji/react';
+import type { TElement } from 'platejs';
 import { PlateElement } from 'platejs/react';
+import type { PlateElementProps } from 'platejs/react';
 
 import { Button } from '@/components/ui/buttons';
 import { cn } from '@/lib/utils';
 
 import { EmojiPicker, EmojiPopover } from './EmojiToolbarButton';
 
+// Define the custom element type with your specific properties
+interface TCalloutElement extends TElement {
+  backgroundColor?: string;
+  icon?: string;
+}
+
 export function CalloutElement({
   attributes,
   children,
-  className,
   ...props
-}: React.ComponentProps<typeof PlateElement>) {
+}: PlateElementProps<TCalloutElement>) {
   const { emojiPickerState, isOpen, setIsOpen } = useEmojiDropdownMenuState({
     closeOnSelect: true
   });
@@ -28,8 +35,9 @@ export function CalloutElement({
 
   return (
     <PlateElement
-      className={cn('bg-muted my-1 flex rounded-sm p-4 pl-3', className)}
+      className={cn('bg-muted my-1 flex rounded-sm p-4 pl-3', attributes.className)}
       style={{
+        ...attributes.style,
         backgroundColor: props.element.backgroundColor
       }}
       attributes={{