diff --git a/src/lib/feature/post/media/PostEvent.svelte b/src/lib/feature/post/media/PostEvent.svelte
new file mode 100644
index 00000000..2a280746
--- /dev/null
+++ b/src/lib/feature/post/media/PostEvent.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+  import type { Post, PostEvent } from '$lib/api/types'
+  import { locale, t } from '$lib/app/i18n'
+  import Blobs from '$lib/ui/generic/Blobs.svelte'
+  import { publishedToDate } from '$lib/ui/util/date'
+  import RelativeDate from '$lib/ui/util/RelativeDate.svelte'
+  import { Material } from 'mono-svelte'
+  import {
+    Calendar,
+    Clock,
+    CurrencyDollar,
+    Icon,
+    MapPin,
+  } from 'svelte-hero-icons/dist'
+
+  interface Props {
+    post: Post & { event: PostEvent }
+  }
+
+  let { post }: Props = $props()
+</script>
+
+<div class="grid grid-cols-2 gap-4">
+  <Material
+    rounding="2xl"
+    color="info"
+    class="relative z-0 flex flex-col overflow-hidden col-span-2"
+  >
+    <div class="-m-4 mask-b-from-0 scale-125 -z-10">
+      <Blobs seed={post.name} />
+    </div>
+    <h3 class="font-display text-3xl tracking-tight">
+      {post.name}
+    </h3>
+  </Material>
+  {#if post.event.start}
+    {@const startDate = publishedToDate(post.event.start)}
+    <Material rounding="2xl" color="info" class="space-y-1">
+      <Icon src={Calendar} size="20" mini />
+      <h4 class="capitalize text-xl font-display">
+        <date>
+          {startDate.toLocaleDateString($locale, {
+            dateStyle: 'long',
+          })}
+        </date>
+      </h4>
+      <RelativeDate options={{ style: 'long' }} date={startDate} />
+    </Material>
+    <Material rounding="2xl" color="info" class="space-y-1">
+      <Icon src={Clock} size="20" mini />
+      <h4 class="capitalize text-xl font-display">
+        <time>
+          {startDate.toLocaleTimeString($locale, {
+            timeStyle: 'long',
+          })}
+        </time>
+      </h4>
+      <time>
+        {startDate.toLocaleTimeString($locale, {
+          timeZone: 'GMT',
+          timeStyle: 'long',
+        })}
+      </time>
+    </Material>
+  {/if}
+  {#if post.event.event_fee_amount}
+    <Material rounding="2xl" color="info" class="space-y-1">
+      <Icon src={CurrencyDollar} size="20" mini />
+      <h5 class="capitalize text-lg font-display">
+        {post.event.event_fee_amount}
+        {post.event.event_fee_currency ?? ''}
+      </h5>
+    </Material>
+  {/if}
+  {#if post.event.location && Object.keys(post.event.location).length > 0}
+    <Material rounding="2xl" color="info" class="space-y-1">
+      <Icon src={MapPin} size="20" mini />
+      <h4 class="capitalize text-xl font-display">
+        {$t('filter.location.label')}
+      </h4>
+      <dl class="space-y-2">
+        {#each Object.keys(post.event.location) as key}
+          <div class="flex flex-row justify-between flex-wrap">
+            <dt class="capitalize font-medium">{key}</dt>
+            <dd>{post.event.location[key]}</dd>
+          </div>
+        {/each}
+      </dl>
+    </Material>
+  {/if}
+</div>
diff --git a/src/lib/feature/post/media/PostMedia.svelte b/src/lib/feature/post/media/PostMedia.svelte
index 01461aa3..3cc9f84d 100644
--- a/src/lib/feature/post/media/PostMedia.svelte
+++ b/src/lib/feature/post/media/PostMedia.svelte
@@ -3,6 +3,7 @@
   import { settings, type View } from '$lib/app/settings.svelte'
   import { PostIframe, PostImage, PostLink } from '..'
   import { iframeType, type MediaType } from '../helpers'
+  import PostEvent from './PostEvent.svelte'
   import PostPoll from './PostPoll.svelte'
 
   interface Props {
@@ -41,6 +42,10 @@
     title={post.name}
     {...rest}
   />
+{:else if type == 'poll' && post.poll && view == 'cozy'}
+  <PostPoll post={{ ...post, poll: post.poll! }} />
+{:else if type == 'event' && post.event && view == 'cozy'}
+  <PostEvent post={{ ...post, event: post.event! }} />
 {:else if type == 'embed' && post.url}
   <PostLink
     url={post.url}
@@ -50,6 +55,4 @@
     {view}
     {...rest}
   />
-{:else if type == 'poll' && post.poll}
-  <PostPoll post={{ ...post, poll: post.poll! }} />
 {/if}
diff --git a/src/lib/feature/post/media/PostMediaCompact.svelte b/src/lib/feature/post/media/PostMediaCompact.svelte
index 9c155b5e..7fa2dea5 100644
--- a/src/lib/feature/post/media/PostMediaCompact.svelte
+++ b/src/lib/feature/post/media/PostMediaCompact.svelte
@@ -5,11 +5,13 @@
   import { showImage } from '$lib/ui/generic/ExpandableImage.svelte'
   import { Button, modal } from 'mono-svelte'
   import {
+    Calendar,
     DocumentText,
     ExclamationTriangle,
     Icon,
     Link,
     Photo,
+    PresentationChartBar,
     VideoCamera,
   } from 'svelte-hero-icons/dist'
   import { bestImageURL, postLink, type MediaType } from '../helpers'
@@ -109,21 +111,19 @@
           </div>
         {/if}
       {:else}
+        {@const typeIconMap = new Map([
+          ['embed', Link],
+          ['iframe', VideoCamera],
+          ['poll', PresentationChartBar],
+          ['event', Calendar],
+        ])}
         <div
           class={[
             'bg-slate-100 dark:bg-zinc-900 w-full h-full rounded-xl grid place-items-center',
             'text-slate-600 dark:text-zinc-400',
           ]}
         >
-          <Icon
-            src={type == 'embed'
-              ? Link
-              : type == 'iframe'
-                ? VideoCamera
-                : DocumentText}
-            solid
-            size="32"
-          />
+          <Icon src={typeIconMap.get(type) ?? DocumentText} solid size="32" />
         </div>
       {/if}
     </div>
diff --git a/src/lib/ui/shared/materials/Material.svelte b/src/lib/ui/shared/materials/Material.svelte
index cfe2d642..911e39e4 100644
--- a/src/lib/ui/shared/materials/Material.svelte
+++ b/src/lib/ui/shared/materials/Material.svelte
@@ -40,11 +40,10 @@
     distinct: 'material-distinct',
     transparent: 'material-transparent',
     uniform: 'material-uniform',
-    none: '',
-  }
-
-  const interactiveClass = {
-    interactive: 'material-int',
+    info: 'material-info',
+    warning: 'material-warning',
+    success: 'material-success',
+    error: 'material-error',
     none: '',
   }
 
diff --git a/src/lib/ui/util/RelativeDate.svelte b/src/lib/ui/util/RelativeDate.svelte
index 4776cbd1..45ecfa5c 100644
--- a/src/lib/ui/util/RelativeDate.svelte
+++ b/src/lib/ui/util/RelativeDate.svelte
@@ -7,6 +7,7 @@
     options: Intl.RelativeTimeFormatOptions,
     locale?: string,
     relativeTo?: Date,
+    absolute?: boolean,
   ) {
     try {
       const now = relativeTo?.getTime() ?? Date.now()
@@ -29,7 +30,7 @@
 
           let language = locale ?? 'en'
 
-          if (settings.absoluteDates) {
+          if (absolute) {
             const rtf = new Intl.DateTimeFormat(language, {
               ...options,
               timeStyle: 'short',
@@ -62,6 +63,7 @@
     date: Date
     relativeTo?: Date | undefined
     options?: Intl.RelativeTimeFormatOptions
+    absolute?: boolean
     style?: string
     class?: string
   }
@@ -73,6 +75,7 @@
       numeric: 'always',
       style: 'narrow',
     },
+    absolute = settings.absoluteDates,
     style = '',
     class: clazz = '',
   }: Props = $props()
@@ -81,5 +84,5 @@
 </script>
 
 <time datetime={dateTime} title={dateTime} class={clazz} {style}>
-  {formatRelativeDate(date, options, $locale, relativeTo)}
+  {formatRelativeDate(date, options, $locale, relativeTo, absolute)}
 </time>