diff --git a/lib/experimental/Information/Avatars/DateAvatar/index.stories.tsx b/lib/experimental/Information/Avatars/DateAvatar/index.stories.tsx
index 318f325e0..553ec2c43 100644
--- a/lib/experimental/Information/Avatars/DateAvatar/index.stories.tsx
+++ b/lib/experimental/Information/Avatars/DateAvatar/index.stories.tsx
@@ -10,8 +10,11 @@ export default meta
 
 type Story = StoryObj<typeof DateAvatar>
 
+// Fixed date for the example stories
+const exampleDate = new Date(2024, 11, 13, 20, 0)
+
 export const Default: Story = {
   args: {
-    date: new Date(2024, 0, 15),
+    date: exampleDate,
   },
 }
diff --git a/lib/experimental/Information/Communities/Celebration/index.stories.tsx b/lib/experimental/Information/Communities/Celebration/index.stories.tsx
index 28ec2cb2a..dba0b0f53 100644
--- a/lib/experimental/Information/Communities/Celebration/index.stories.tsx
+++ b/lib/experimental/Information/Communities/Celebration/index.stories.tsx
@@ -12,6 +12,9 @@ export default meta
 
 type Story = StoryObj<typeof Celebration>
 
+// Fixed date for the example stories
+const exampleDate = new Date(2024, 11, 13, 20, 0)
+
 export const Default: Story = {
   decorators: [
     (Story) => (
@@ -30,7 +33,7 @@ export const Default: Story = {
           src="https://github.com/josepjaume.png"
           type="birthday"
           typeLabel="Birthday"
-          date={new Date(2024, 10, 29)}
+          date={exampleDate}
         />
       </div>
       <div className="w-48">
@@ -41,7 +44,7 @@ export const Default: Story = {
           src="https://github.com/nlopin.png"
           type="anniversary"
           typeLabel="Anniversary"
-          date={new Date(2024, 11, 4)}
+          date={exampleDate}
         />
       </div>
     </>
@@ -63,7 +66,7 @@ export const NoImage: Story = {
     canReact: false,
     type: "first-day",
     typeLabel: "First day very long name",
-    date: new Date(2024, 11, 15),
+    date: exampleDate,
   },
 }
 
diff --git a/lib/experimental/Information/Communities/Post/PostEvent/index.stories.tsx b/lib/experimental/Information/Communities/Post/PostEvent/index.stories.tsx
new file mode 100644
index 000000000..a791ba330
--- /dev/null
+++ b/lib/experimental/Information/Communities/Post/PostEvent/index.stories.tsx
@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { PostEvent } from "."
+
+const meta: Meta<typeof PostEvent> = {
+  component: PostEvent,
+}
+
+export default meta
+
+type Story = StoryObj<typeof PostEvent>
+
+// Fixed date for the example stories
+const eventDate = new Date(2024, 11, 13, 20, 0)
+
+export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <div className="max-w-[480px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    title: "End of the Year Dinner!",
+    place: "Poble Espanyol",
+    imageUrl: "https://cataas.com/cat",
+    date: eventDate,
+  },
+}
+
+export const NoImage: Story = {
+  decorators: [
+    (Story) => (
+      <div className="max-w-96">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    title: "End of the Year Dinner!",
+    place: "Poble Espanyol",
+    date: eventDate,
+  },
+}
+
+export const Skeleton: Story = {
+  decorators: [
+    (Story) => (
+      <div className="max-w-96">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {},
+  render: () => <PostEvent.Skeleton />,
+}
diff --git a/lib/experimental/Information/Communities/Post/PostEvent/index.tsx b/lib/experimental/Information/Communities/Post/PostEvent/index.tsx
new file mode 100644
index 000000000..615673935
--- /dev/null
+++ b/lib/experimental/Information/Communities/Post/PostEvent/index.tsx
@@ -0,0 +1,71 @@
+import { CalendarEvent } from "@/experimental/Widgets/Content/CalendarEvent"
+import { formatTime } from "@/lib/date"
+import { withSkeleton } from "@/lib/skeleton"
+import { f1Colors } from "@/tokens/colors"
+import { Skeleton } from "@/ui/skeleton"
+
+type PostEventProps = {
+  title: string
+  imageUrl?: string
+  place?: string
+  date: Date
+}
+
+export const BasePostEvent = ({
+  title,
+  imageUrl,
+  place,
+  date,
+}: PostEventProps) => {
+  let description = formatTime(date)
+
+  if (place) {
+    description = `${description} · ${place}`
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-1 rounded-xl border border-solid border-f1-border-secondary bg-f1-background-inverse-secondary p-1 shadow">
+      {imageUrl && (
+        <div className="relative aspect-video w-full">
+          <img
+            src={imageUrl}
+            role="presentation"
+            loading="lazy"
+            className="aspect-video h-full w-full rounded-md object-cover"
+          />
+          <Skeleton className="absolute inset-0 h-full w-full rounded-md" />
+        </div>
+      )}
+      <CalendarEvent
+        title={title}
+        description={description}
+        color={f1Colors["special-highlight"]}
+        isPending={false}
+        toDate={date}
+        noBackground
+      />
+    </div>
+  )
+}
+
+export const PostEventSkeleton = () => (
+  <div
+    className="flex w-full flex-col gap-1 rounded-xl border border-solid border-f1-border-secondary bg-f1-background-inverse-secondary p-1"
+    role="status"
+    aria-busy="true"
+    aria-live="polite"
+  >
+    <div>
+      <Skeleton className="aspect-video h-full w-full rounded-lg" />
+    </div>
+    <div className="flex h-full flex-row gap-3 p-2">
+      <Skeleton className="w-1 shrink-0 self-stretch rounded-full" />
+      <div className="flex grow flex-col gap-1.5 py-1">
+        <Skeleton className="mt-px h-3 w-1/2" />
+        <Skeleton className="mb-px h-3 w-1/4" />
+      </div>
+    </div>
+  </div>
+)
+
+export const PostEvent = withSkeleton(BasePostEvent, PostEventSkeleton)
diff --git a/lib/lib/date.ts b/lib/lib/date.ts
index c7eea46e6..c8f9403ae 100644
--- a/lib/lib/date.ts
+++ b/lib/lib/date.ts
@@ -1,6 +1,6 @@
 import { format } from "date-fns"
 
-export function getUITime(date: Date) {
+export function formatTime(date: Date) {
   return format(date, "p")
 }