diff --git a/src/components/EventCard.astro b/src/components/EventCard.astro
new file mode 100644
index 0000000..c953537
--- /dev/null
+++ b/src/components/EventCard.astro
@@ -0,0 +1,27 @@
+---
+import type { CommunityEvent } from '../data/events';
+
+interface Props {
+  event: CommunityEvent;
+}
+
+const { event } = Astro.props;
+---
+
+<article class:list={['event-card', event.next && 'next']}>
+  <div class="event-top">
+    <span class:list={['event-kicker', event.next && 'next']}>{event.kicker}</span>
+    <span class="event-date">{event.date}</span>
+  </div>
+  <h3 class="event-title">{event.title}</h3>
+  <p class="event-desc">{event.desc}</p>
+  {
+    event.tags.length > 0 && (
+      <div class="event-tags">
+        {event.tags.map((tag) => (
+          <span class="chip">{tag}</span>
+        ))}
+      </div>
+    )
+  }
+</article>
diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro
index 3a88e50..0c45af7 100644
--- a/src/components/PostCard.astro
+++ b/src/components/PostCard.astro
@@ -6,9 +6,20 @@ interface Props {
 }
 
 const { post } = Astro.props;
-const rkey = post.uri.split('/').pop();
-const postUrl = `https://bsky.app/profile/${post.author.handle}/post/${rkey}`;
+const bskyPost = (handle: string, uri: string) =>
+  `https://bsky.app/profile/${handle}/post/${uri.split('/').pop()}`;
+const postUrl = bskyPost(post.author.handle, post.uri);
 const date = post.createdAt.slice(0, 10);
+
+const ext = post.embed?.external;
+let extHost = '';
+try {
+  if (ext) extHost = new URL(ext.uri).hostname.replace(/^www\./, '');
+} catch {
+  extHost = '';
+}
+const quote = post.embed?.quote;
+const quoteUrl = quote ? bskyPost(quote.handle, quote.uri) : undefined;
 ---
 
 <article class="post-card">
@@ -21,6 +32,44 @@ const date = post.createdAt.slice(0, 10);
     <span class="post-name">{post.author.displayName ?? post.author.handle}</span>
     <span class="post-handle">@{post.author.handle}</span>
   </div>
-  <p class="post-text">{post.text}</p>
+
+  {post.text && <p class="post-text">{post.text}</p>}
+
+  {
+    post.embed?.images?.length && (
+      <div class="post-images" data-count={post.embed.images.length}>
+        {post.embed.images.map((im) => (
+          <img src={im.thumb} alt={im.alt} loading="lazy" />
+        ))}
+      </div>
+    )
+  }
+
+  {
+    ext && (
+      <a class="post-external" href={ext.uri} rel="noopener">
+        {ext.thumb && <img src={ext.thumb} alt="" loading="lazy" />}
+        <span class="ext-body">
+          <span class="ext-title">{ext.title || ext.uri}</span>
+          {ext.description && <span class="ext-desc">{ext.description}</span>}
+          {extHost && <span class="ext-host">{extHost}</span>}
+        </span>
+      </a>
+    )
+  }
+
+  {
+    quote && (
+      <a class="post-quote" href={quoteUrl} rel="noopener">
+        <span class="quote-head">
+          {quote.avatar && <img src={quote.avatar} alt="" width="20" height="20" loading="lazy" />}
+          <span class="quote-name">{quote.displayName ?? quote.handle}</span>
+          <span class="quote-handle">@{quote.handle}</span>
+        </span>
+        {quote.text && <span class="quote-text">{quote.text}</span>}
+      </a>
+    )
+  }
+
   <a class="post-date" href={postUrl} rel="noopener">{date}</a>
 </article>
diff --git a/src/data/events.ts b/src/data/events.ts
new file mode 100644
index 0000000..0472c42
--- /dev/null
+++ b/src/data/events.ts
@@ -0,0 +1,53 @@
+import type { Lang } from '../i18n/ui';
+
+export interface CommunityEvent {
+  kicker: string;
+  date: string;
+  title: string;
+  desc: string;
+  tags: string[];
+  next?: boolean;
+}
+
+// Illustrative placeholders — names, dates and venues are examples. Replaced when events
+// come from the standard `community.lexicon.calendar` records (see the events task).
+const events: Record<Lang, CommunityEvent[]> = {
+  en: [
+    {
+      kicker: 'Next up',
+      date: 'Thu 15 Oct',
+      title: 'Lexicon workshop',
+      desc: 'Utrecht · venue to be confirmed. Bring a laptop; we write and publish one record type together.',
+      tags: ['lexicon', 'PDS'],
+      next: true,
+    },
+    {
+      kicker: 'Amsterdam',
+      date: 'Wed 12 Nov',
+      title: 'Firehose evening',
+      desc: 'Two talks on consuming the firehose, then open floor. Suits anyone who has read the docs once.',
+      tags: ['feeds', 'moderation'],
+    },
+  ],
+  nl: [
+    {
+      kicker: 'Binnenkort',
+      date: 'do 15 okt',
+      title: 'Lexicon-workshop',
+      desc: 'Utrecht · locatie volgt. Neem een laptop mee; we schrijven en publiceren samen één recordtype.',
+      tags: ['lexicon', 'PDS'],
+      next: true,
+    },
+    {
+      kicker: 'Amsterdam',
+      date: 'wo 12 nov',
+      title: 'Firehose-avond',
+      desc: 'Twee talks over het consumeren van de firehose, daarna open floor. Voor wie de docs één keer gelezen heeft.',
+      tags: ['feeds', 'moderatie'],
+    },
+  ],
+};
+
+export function exampleEvents(lang: Lang): CommunityEvent[] {
+  return events[lang] ?? events.en;
+}
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 386e854..11eff61 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -21,6 +21,9 @@ export const ui = {
     'feed.heading': 'From the community',
     'feed.empty': 'No recent posts.',
     'card.viewProfile': 'View profile',
+    'events.heading': 'Upcoming events',
+    'events.note': 'Example programme — real events will appear here from the community calendar.',
+    'join.cta': 'Say hi on Bluesky',
   },
   nl: {
     'site.title': 'atproto.nl',
@@ -37,6 +40,9 @@ export const ui = {
     'feed.heading': 'Uit de community',
     'feed.empty': 'Nog geen recente berichten.',
     'card.viewProfile': 'Bekijk profiel',
+    'events.heading': 'Aankomende events',
+    'events.note': 'Voorbeeldprogramma — echte events verschijnen hier vanuit de community-agenda.',
+    'join.cta': 'Zeg hoi op Bluesky',
   },
 } as const;
 
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index c9daaaf..510cf0e 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -67,7 +67,7 @@ const site = Astro.site?.toString().replace(/\/$/, '') ?? 'https://atproto.nl';
         <div>
           <Wordmark class="footer-mark" />
           <div class="footer-meta">
-            @atproto.nl · source on tangled.org<br />
+            @atproto.nl · <a href="https://tangled.org/atproto.nl/website" rel="noopener">source on tangled.org</a> · open to PRs<br />
             atproto.nl is an independent community project. It is not affiliated with,
             sponsored or endorsed by Bluesky Social PBC.
           </div>
diff --git a/src/lib/atproto/client.ts b/src/lib/atproto/client.ts
index 30f2d18..4aca3b3 100644
--- a/src/lib/atproto/client.ts
+++ b/src/lib/atproto/client.ts
@@ -1,7 +1,7 @@
 // Minimal read-only AT Protocol service layer. Hits the public Bluesky AppView
 // (no auth). Components must go through this module, never fetch XRPC directly.
 
-import type { FeedPost, Profile } from './types';
+import type { FeedPost, PostEmbed, Profile } from './types';
 
 const APPVIEW = 'https://public.api.bsky.app';
 
@@ -75,6 +75,49 @@ export async function getListMembers(listUri: string, max = 200): Promise<Profil
   return out.slice(0, max);
 }
 
+/** Normalize a post's embed view (images / external card / quoted post). */
+function parseEmbed(embed?: Record<string, any>): PostEmbed | undefined {
+  if (!embed || typeof embed !== 'object') return undefined;
+  const type = String(embed.$type ?? '');
+  const readImages = (v: any) =>
+    (v?.images ?? []).map((im: any) => ({ thumb: im.thumb as string, alt: (im.alt ?? '') as string }));
+  const readExternal = (v: any) =>
+    v?.external
+      ? {
+          uri: v.external.uri as string,
+          title: (v.external.title ?? '') as string,
+          description: (v.external.description ?? '') as string,
+          thumb: v.external.thumb as string | undefined,
+        }
+      : undefined;
+  const readQuote = (rec: any) => {
+    // app.bsky.embed.record#viewRecord — skip notFound/blocked/detached
+    if (!rec || !rec.author || !rec.value || String(rec.$type ?? '').includes('viewRecord') === false) {
+      return undefined;
+    }
+    return {
+      handle: rec.author.handle as string,
+      displayName: rec.author.displayName as string | undefined,
+      avatar: rec.author.avatar as string | undefined,
+      text: (rec.value.text ?? '') as string,
+      uri: rec.uri as string,
+    };
+  };
+
+  const out: PostEmbed = {};
+  if (type.startsWith('app.bsky.embed.images')) out.images = readImages(embed);
+  else if (type.startsWith('app.bsky.embed.external')) out.external = readExternal(embed);
+  else if (type.startsWith('app.bsky.embed.record#')) out.quote = readQuote(embed.record);
+  else if (type.startsWith('app.bsky.embed.recordWithMedia')) {
+    out.quote = readQuote(embed.record?.record);
+    const media = embed.media;
+    const mtype = String(media?.$type ?? '');
+    if (mtype.startsWith('app.bsky.embed.images')) out.images = readImages(media);
+    else if (mtype.startsWith('app.bsky.embed.external')) out.external = readExternal(media);
+  }
+  return out.images?.length || out.external || out.quote ? out : undefined;
+}
+
 /** Recent top-level posts (no replies, no reposts) for one actor. Empty on failure. */
 export async function getAuthorFeed(actor: string, limit = 10): Promise<FeedPost[]> {
   const params = new URLSearchParams({
@@ -104,6 +147,7 @@ export async function getAuthorFeed(actor: string, limit = 10): Promise<FeedPost
         likeCount: (post.likeCount ?? 0) as number,
         repostCount: (post.repostCount ?? 0) as number,
         replyCount: (post.replyCount ?? 0) as number,
+        embed: parseEmbed(post.embed),
       }));
   } catch {
     return [];
diff --git a/src/lib/atproto/types.ts b/src/lib/atproto/types.ts
index 04bf011..a29adca 100644
--- a/src/lib/atproto/types.ts
+++ b/src/lib/atproto/types.ts
@@ -8,6 +8,32 @@ export interface Profile {
   avatar?: string;
 }
 
+export interface PostImage {
+  thumb: string;
+  alt: string;
+}
+
+export interface PostExternal {
+  uri: string;
+  title: string;
+  description: string;
+  thumb?: string;
+}
+
+export interface QuotedPost {
+  handle: string;
+  displayName?: string;
+  avatar?: string;
+  text: string;
+  uri: string;
+}
+
+export interface PostEmbed {
+  images?: PostImage[];
+  external?: PostExternal;
+  quote?: QuotedPost;
+}
+
 export interface FeedPost {
   uri: string;
   cid: string;
@@ -17,4 +43,5 @@ export interface FeedPost {
   likeCount: number;
   repostCount: number;
   replyCount: number;
+  embed?: PostEmbed;
 }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1f686ad..a73ccd8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,12 +3,15 @@ import Base from '../layouts/Base.astro';
 import Wordmark from '../components/Wordmark.astro';
 import MemberCard from '../components/MemberCard.astro';
 import PostCard from '../components/PostCard.astro';
+import EventCard from '../components/EventCard.astro';
 import { useTranslations } from '../i18n/ui';
 import { getCommunity } from '../lib/atproto/home';
+import { exampleEvents } from '../data/events';
 
 const lang = 'en' as const;
 const t = useTranslations(lang);
 const { members, posts } = await getCommunity();
+const events = exampleEvents(lang);
 ---
 
 <Base lang={lang}>
@@ -17,6 +20,12 @@ const { members, posts } = await getCommunity();
     <p>{t('hero.body')}</p>
   </section>
 
+  <section class="section">
+    <h2>{t('events.heading')}</h2>
+    <p class="events-note">{t('events.note')}</p>
+    <div class="events-grid">{events.map((e) => <EventCard event={e} />)}</div>
+  </section>
+
   <section class="section">
     <h2>{t('members.heading')}</h2>
     {
@@ -44,5 +53,8 @@ const { members, posts } = await getCommunity();
   <section class="section">
     <h2>{t('join.heading')}</h2>
     <p>{t('join.body')}</p>
+    <p class="join-cta">
+      <a class="btn" href="https://bsky.app/profile/atproto.nl" rel="noopener">{t('join.cta')}</a>
+    </p>
   </section>
 </Base>
diff --git a/src/pages/nl/index.astro b/src/pages/nl/index.astro
index 781079c..112e46e 100644
--- a/src/pages/nl/index.astro
+++ b/src/pages/nl/index.astro
@@ -3,12 +3,15 @@ import Base from '../../layouts/Base.astro';
 import Wordmark from '../../components/Wordmark.astro';
 import MemberCard from '../../components/MemberCard.astro';
 import PostCard from '../../components/PostCard.astro';
+import EventCard from '../../components/EventCard.astro';
 import { useTranslations } from '../../i18n/ui';
 import { getCommunity } from '../../lib/atproto/home';
+import { exampleEvents } from '../../data/events';
 
 const lang = 'nl' as const;
 const t = useTranslations(lang);
 const { members, posts } = await getCommunity();
+const events = exampleEvents(lang);
 ---
 
 <Base lang={lang}>
@@ -17,6 +20,12 @@ const { members, posts } = await getCommunity();
     <p>{t('hero.body')}</p>
   </section>
 
+  <section class="section">
+    <h2>{t('events.heading')}</h2>
+    <p class="events-note">{t('events.note')}</p>
+    <div class="events-grid">{events.map((e) => <EventCard event={e} />)}</div>
+  </section>
+
   <section class="section">
     <h2>{t('members.heading')}</h2>
     {
@@ -44,5 +53,8 @@ const { members, posts } = await getCommunity();
   <section class="section">
     <h2>{t('join.heading')}</h2>
     <p>{t('join.body')}</p>
+    <p class="join-cta">
+      <a class="btn" href="https://bsky.app/profile/atproto.nl" rel="noopener">{t('join.cta')}</a>
+    </p>
   </section>
 </Base>
diff --git a/src/styles/global.css b/src/styles/global.css
index b713fd8..8d0e7c0 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -169,8 +169,10 @@ main { display: block; }
 
 /* --- members --- */
 .member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }
-.member-card { display: flex; gap: var(--space-3); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-surface); padding: var(--space-6); }
-.member-avatar, .post-avatar { border-radius: 50%; object-fit: cover; flex: none; }
+.member-card { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-surface); padding: var(--space-6); }
+.member-avatar, .post-avatar { border-radius: 50%; object-fit: cover; flex: none; aspect-ratio: 1 / 1; }
+.member-avatar { width: 48px; height: 48px; }
+.post-avatar { width: 32px; height: 32px; }
 .member-name, .post-name { font-family: var(--mono); font-weight: 700; letter-spacing: -0.01em; color: var(--inkstrong); }
 .member-handle, .post-handle { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }
 .member-bio { font-size: 14px; line-height: 1.65; margin: var(--space-2) 0; }
@@ -182,6 +184,43 @@ main { display: block; }
 .post-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
 .post-text { margin: var(--space-2) 0; white-space: pre-wrap; }
 
+/* --- post embeds (images / external card / quote) --- */
+.post-images { display: grid; gap: 8px; margin: var(--space-3) 0; grid-template-columns: 1fr; }
+.post-images[data-count='2'], .post-images[data-count='3'], .post-images[data-count='4'] { grid-template-columns: 1fr 1fr; }
+.post-images img { width: 100%; max-height: 340px; object-fit: cover; display: block; border: 1px solid var(--rule); border-radius: var(--radius-control); }
+.post-external { display: flex; gap: var(--space-3); margin: var(--space-3) 0; text-decoration: none; color: inherit; border: 1px solid var(--rule); border-radius: var(--radius-control); overflow: hidden; }
+.post-external:hover { border-color: var(--brand); }
+.post-external img { width: 96px; height: 96px; object-fit: cover; flex: none; }
+.ext-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; min-width: 0; }
+.ext-title { font-family: var(--mono); font-weight: 500; font-size: 13px; color: var(--inkstrong); }
+.ext-desc { font-size: 13px; line-height: 1.5; color: var(--muted); }
+.ext-host { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
+.post-quote { display: block; margin: var(--space-3) 0; padding: var(--space-3); text-decoration: none; color: inherit; border: 1px solid var(--rule); border-radius: var(--radius-control); }
+.post-quote:hover { border-color: var(--brand); }
+.quote-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.quote-head img { border-radius: 50%; flex: none; }
+.quote-name { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--inkstrong); }
+.quote-handle { font-family: var(--mono); font-size: 11px; color: var(--muted); }
+.quote-text { display: block; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
+
+/* --- events --- */
+.events-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
+@media (max-width: 720px) { .events-grid { grid-template-columns: 1fr; } }
+.events-note { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); margin-bottom: var(--space-5); }
+.event-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-surface); padding: 28px; }
+.event-card.next { border: 2px solid var(--accent); }
+.event-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
+.event-kicker { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
+.event-kicker.next { color: var(--accent-text); }
+.event-date { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
+.event-title { font-family: var(--mono); font-weight: 700; font-size: 26px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--inkstrong); margin: 22px 0 0; }
+@media (max-width: 720px) { .event-title { font-size: 22px; } }
+.event-desc { font-size: 14px; line-height: 1.65; margin: 12px 0 0; }
+.event-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
+
+/* --- join --- */
+.join-cta { margin-top: var(--space-6); }
+
 /* --- footer --- */
 .site-footer { border-top: 1px solid var(--rule); padding: var(--space-8) 0; margin-top: var(--space-22); }
 .site-footer .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-6); align-items: flex-end; }