diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 39d46c65d..2f6e72d25 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -84,6 +84,7 @@ const config: Config = {
         {to: '/blog', label: 'Blog', position: 'left'},
         {to: '/research', label: 'Research', position: 'left'},
         {to: '/community', label: 'Community', position: 'left'},
+        {to: '/events', label: 'Events', position: 'left'},
         {
           type: 'docsVersionDropdown',
           position: 'right',
diff --git a/src/components/Events/events.tsx b/src/components/Events/events.tsx
new file mode 100644
index 000000000..cc14851b9
--- /dev/null
+++ b/src/components/Events/events.tsx
@@ -0,0 +1,92 @@
+export interface Event {
+  title: string;
+  date: string;
+  endDate?: string;
+  location: string;
+  description: string;
+  link?: string;
+  type: "conference" | "workshop" | "meetup" | "webinar" | "hackathon" | "tutorial";
+  isUpcoming: boolean;
+  isExternal?: boolean; // true if link goes to external site
+}
+
+// Add your events here
+// Events are automatically sorted by date
+export const events: Event[] = [
+  // Upcoming Events
+  {
+    title: "ReCPS: Workshop on Reactive Cyber-Physical Systems",
+    date: "2026-04-20",
+    endDate: "2026-04-22",
+    location: "Verona, Italy (DATE 2026 Conference)",
+    description:
+      "Workshop on Reactive Cyber-Physical Systems: Design, Simulation, and Coordination, co-located with the Design, Automation and Test in Europe (DATE) Conference 2026.",
+    link: "/events/recps-2026",
+    type: "workshop",
+    isUpcoming: true,
+  },
+  // Past Events
+  {
+    title: "TCRS '25: Time-Centric Reactive Software",
+    date: "2025-10-02",
+    location: "Taipei, Taiwan (ESWEEK 2025)",
+    description:
+      "Third edition of the workshop on Time-Centric Reactive Software, co-located with Embedded Systems Week (ESWEEK) 2025 at the Taipei International Convention Center.",
+    link: "https://www.tcrs.io/",
+    type: "workshop",
+    isUpcoming: false,
+    isExternal: true,
+  },
+  {
+    title: "TCRS '24: Time-Centric Reactive Software",
+    date: "2024-10-03",
+    location: "Raleigh, NC, USA (ESWEEK 2024)",
+    description:
+      "Second edition of the workshop on Time-Centric Reactive Software, co-located with Embedded Systems Week (ESWEEK) 2024.",
+    link: "https://www.tcrs.io/2024/",
+    type: "workshop",
+    isUpcoming: false,
+    isExternal: true,
+  },
+  {
+    title: "TCRS '23: Time-Centric Reactive Software",
+    date: "2023-05-09",
+    location: "San Antonio, Texas (CPS-IoT Week 2023)",
+    description:
+      "First edition of the workshop on Time-Centric Reactive Software, co-located with ACM/IEEE CPS-IoT Week 2023.",
+    link: "https://www.tcrs.io/2023/",
+    type: "workshop",
+    isUpcoming: false,
+    isExternal: true,
+  },
+  {
+    title: "Lingua Franca Tutorial at ESWEEK 2021",
+    date: "2021-10-08",
+    location: "Online (EMSOFT Conference)",
+    description:
+      "A comprehensive tutorial introducing Lingua Franca, a polyglot coordination language for concurrent and time-sensitive applications. Part of the Embedded Systems Week (ESWEEK) 2021.",
+    link: "/events/esweek-2021-tutorial",
+    type: "tutorial",
+    isUpcoming: false,
+  },
+];
+
+// Helper to sort events by date
+export const sortEventsByDate = (eventList: Event[], ascending = true): Event[] => {
+  return [...eventList].sort((a, b) => {
+    const dateA = new Date(a.date).getTime();
+    const dateB = new Date(b.date).getTime();
+    return ascending ? dateA - dateB : dateB - dateA;
+  });
+};
+
+export const upcomingEvents = sortEventsByDate(
+  events.filter((e) => e.isUpcoming),
+  true
+);
+
+export const pastEvents = sortEventsByDate(
+  events.filter((e) => !e.isUpcoming),
+  false
+);
+
diff --git a/src/components/Events/index.tsx b/src/components/Events/index.tsx
new file mode 100644
index 000000000..55e313ffe
--- /dev/null
+++ b/src/components/Events/index.tsx
@@ -0,0 +1,231 @@
+import clsx from "clsx";
+
+import Translate from "@docusaurus/Translate";
+import Layout from "@theme/Layout";
+import Heading from "@theme/Heading";
+import Link from "@docusaurus/Link";
+
+import { Event, upcomingEvents, pastEvents } from "./events";
+import styles from "./styles.module.css";
+
+// Calendar icon
+const CalendarIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+    <line x1="16" y1="2" x2="16" y2="6" />
+    <line x1="8" y1="2" x2="8" y2="6" />
+    <line x1="3" y1="10" x2="21" y2="10" />
+  </svg>
+);
+
+// Location pin icon
+const LocationIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+    <circle cx="12" cy="10" r="3" />
+  </svg>
+);
+
+// Empty calendar icon
+const EmptyCalendarIcon = () => (
+  <svg
+    width="64"
+    height="64"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+    <line x1="16" y1="2" x2="16" y2="6" />
+    <line x1="8" y1="2" x2="8" y2="6" />
+    <line x1="3" y1="10" x2="21" y2="10" />
+  </svg>
+);
+
+const formatDate = (dateStr: string, endDateStr?: string): string => {
+  const options: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  };
+  const startDate = new Date(dateStr).toLocaleDateString("en-US", options);
+
+  if (endDateStr) {
+    const endDate = new Date(endDateStr).toLocaleDateString("en-US", options);
+    return `${startDate} - ${endDate}`;
+  }
+
+  return startDate;
+};
+
+// External link icon
+const ExternalLinkIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{ marginLeft: "4px", verticalAlign: "middle" }}
+  >
+    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    <polyline points="15 3 21 3 21 9" />
+    <line x1="10" y1="14" x2="21" y2="3" />
+  </svg>
+);
+
+const EventCard = ({ event }: { event: Event }) => {
+  const typeClassName = styles[event.type] || "";
+  const linkProps = event.isExternal
+    ? { target: "_blank", rel: "noopener noreferrer" }
+    : {};
+
+  return (
+    <div className={clsx("card", "margin-bottom--md", styles.eventCard)}>
+      <div className="card__header">
+        <div className="row">
+          <div className="col">
+            <span className={clsx(styles.eventType, typeClassName)}>
+              {event.type}
+            </span>
+            <Heading as="h3" className="margin-top--sm margin-bottom--none">
+              {event.link ? (
+                <Link href={event.link} {...linkProps}>
+                  {event.title}
+                  {event.isExternal && <ExternalLinkIcon />}
+                </Link>
+              ) : (
+                event.title
+              )}
+            </Heading>
+          </div>
+        </div>
+      </div>
+      <div className="card__body">
+        <p>{event.description}</p>
+        <div className={styles.eventMeta}>
+          <span>
+            <CalendarIcon /> {formatDate(event.date, event.endDate)}
+          </span>
+          <span>
+            <LocationIcon /> {event.location}
+          </span>
+        </div>
+      </div>
+      {event.link && (
+        <div className="card__footer">
+          <Link
+            className="button button--primary button--sm"
+            href={event.link}
+            {...linkProps}
+          >
+            <Translate>{event.isExternal ? "Visit Website" : "Learn More"}</Translate>
+            {event.isExternal && <ExternalLinkIcon />}
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const EmptyState = ({ message }: { message: string }) => (
+  <div className={styles.emptyState}>
+    <EmptyCalendarIcon />
+    <p>{message}</p>
+  </div>
+);
+
+export default function Events(): JSX.Element {
+  return (
+    <Layout
+      title="Events"
+      description="Lingua Franca events, workshops, and conferences"
+    >
+      {/* Hero Section */}
+      <div className={styles.heroSection}>
+        <div className="container">
+          <Heading as="h1" className={styles.heroTitle}>
+            <Translate>Events</Translate>
+          </Heading>
+          <p className={styles.heroSubtitle}>
+            <Translate>
+              Join us at conferences, workshops, and tutorials to learn more about
+              Lingua Franca and connect with the community.
+            </Translate>
+          </p>
+        </div>
+      </div>
+
+      {/* Upcoming Events */}
+      <div className="section">
+        <div className="container">
+          <Heading
+            as="h2"
+            className={clsx("margin-bottom--lg", "text--center")}
+          >
+            <Translate>Upcoming Events</Translate>
+          </Heading>
+          {upcomingEvents.length > 0 ? (
+            <div className="row">
+              <div className="col col--8 col--offset-2">
+                {upcomingEvents.map((event, idx) => (
+                  <EventCard key={idx} event={event} />
+                ))}
+              </div>
+            </div>
+          ) : (
+            <EmptyState message="No upcoming events scheduled. Check back soon or follow us on Zulip for announcements!" />
+          )}
+        </div>
+      </div>
+
+      {/* Past Events */}
+      <div className="section sectionAlt">
+        <div className="container">
+          <Heading
+            as="h2"
+            className={clsx("margin-bottom--lg", "text--center")}
+          >
+            <Translate>Past Events</Translate>
+          </Heading>
+          {pastEvents.length > 0 ? (
+            <div className="row">
+              <div className="col col--8 col--offset-2">
+                {pastEvents.map((event, idx) => (
+                  <EventCard key={idx} event={event} />
+                ))}
+              </div>
+            </div>
+          ) : (
+            <EmptyState message="No past events to display yet." />
+          )}
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
diff --git a/src/components/Events/styles.module.css b/src/components/Events/styles.module.css
new file mode 100644
index 000000000..809202199
--- /dev/null
+++ b/src/components/Events/styles.module.css
@@ -0,0 +1,136 @@
+/**
+ * Events page styles
+ */
+
+.eventCard {
+  border-left: 4px solid var(--ifm-color-primary);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.eventCard:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="dark"] .eventCard:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.eventType {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.conference {
+  background-color: #e3f2fd;
+  color: #1565c0;
+}
+
+[data-theme="dark"] .conference {
+  background-color: #1565c0;
+  color: #e3f2fd;
+}
+
+.workshop {
+  background-color: #f3e5f5;
+  color: #7b1fa2;
+}
+
+[data-theme="dark"] .workshop {
+  background-color: #7b1fa2;
+  color: #f3e5f5;
+}
+
+.meetup {
+  background-color: #e8f5e9;
+  color: #2e7d32;
+}
+
+[data-theme="dark"] .meetup {
+  background-color: #2e7d32;
+  color: #e8f5e9;
+}
+
+.webinar {
+  background-color: #fff3e0;
+  color: #ef6c00;
+}
+
+[data-theme="dark"] .webinar {
+  background-color: #ef6c00;
+  color: #fff3e0;
+}
+
+.hackathon {
+  background-color: #fce4ec;
+  color: #c2185b;
+}
+
+[data-theme="dark"] .hackathon {
+  background-color: #c2185b;
+  color: #fce4ec;
+}
+
+.tutorial {
+  background-color: #e0f7fa;
+  color: #00838f;
+}
+
+[data-theme="dark"] .tutorial {
+  background-color: #00838f;
+  color: #e0f7fa;
+}
+
+.eventMeta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 8px;
+  font-size: 0.9rem;
+  color: var(--ifm-color-emphasis-700);
+}
+
+.eventMeta svg {
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.emptyState {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.emptyState svg {
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.heroSection {
+  background: linear-gradient(135deg, var(--ifm-color-primary-darker) 0%, var(--ifm-color-primary) 100%);
+  color: white;
+  padding: 60px 0;
+  text-align: center;
+}
+
+[data-theme="dark"] .heroSection {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+}
+
+.heroTitle {
+  color: white;
+  margin-bottom: 16px;
+}
+
+.heroSubtitle {
+  opacity: 0.9;
+  max-width: 600px;
+  margin: 0 auto;
+  font-size: 1.1rem;
+}
+
diff --git a/src/pages/events.tsx b/src/pages/events.tsx
new file mode 100644
index 000000000..4f1495983
--- /dev/null
+++ b/src/pages/events.tsx
@@ -0,0 +1,3 @@
+import Events from "@site/src/components/Events";
+export default Events;
+
diff --git a/src/pages/events/esweek-2021-tutorial.tsx b/src/pages/events/esweek-2021-tutorial.tsx
new file mode 100644
index 000000000..80c441d7c
--- /dev/null
+++ b/src/pages/events/esweek-2021-tutorial.tsx
@@ -0,0 +1,339 @@
+import clsx from "clsx";
+import Layout from "@theme/Layout";
+import Heading from "@theme/Heading";
+import Link from "@docusaurus/Link";
+
+import styles from "./event-page.module.css";
+
+interface VideoSection {
+  title: string;
+  description: string;
+  videoUrl: string;
+  topics: { name: string; timestamp: string; url: string }[];
+}
+
+const videoSections: VideoSection[] = [
+  {
+    title: "Part I: Introduction",
+    description:
+      "This part briefly describes the background of the project and explains how to get started with the software.",
+    videoUrl:
+      "https://www.youtube.com/watch?v=7vkhX5tS_oI&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=1",
+    topics: [
+      {
+        name: "Introduction",
+        timestamp: "0:00",
+        url: "https://www.youtube.com/watch?v=7vkhX5tS_oI&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=1&t=0s",
+      },
+      {
+        name: "Motivation",
+        timestamp: "1:01",
+        url: "https://www.youtube.com/watch?v=7vkhX5tS_oI&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=1&t=61s",
+      },
+      {
+        name: "Overview of this tutorial",
+        timestamp: "3:05",
+        url: "https://www.youtube.com/watch?v=7vkhX5tS_oI&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=1&t=185s",
+      },
+      {
+        name: "History of the project",
+        timestamp: "11:08",
+        url: "https://www.youtube.com/watch?v=7vkhX5tS_oI&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=1&t=668s",
+      },
+      {
+        name: "Participating",
+        timestamp: "14:57",
+        url: "https://www.youtube.com/watch?v=7vkhX5tS_oI&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=1&t=897s",
+      },
+      {
+        name: "Getting started",
+        timestamp: "15:25",
+        url: "https://www.youtube.com/watch?v=7vkhX5tS_oI&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=1&t=925s",
+      },
+      {
+        name: "Native releases (Epoch IDE and lfc)",
+        timestamp: "17:43",
+        url: "https://www.youtube.com/watch?v=7vkhX5tS_oI&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=1&t=1063s",
+      },
+      {
+        name: "Virtual Machine with LF pre-installed",
+        timestamp: "21:51",
+        url: "https://www.youtube.com/watch?v=7vkhX5tS_oI&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=1&t=1311s",
+      },
+    ],
+  },
+  {
+    title: "Part II: Hello World",
+    description:
+      "This part introduces the language with a simple example.",
+    videoUrl:
+      "https://www.youtube.com/watch?v=GNwaf4OpfPM&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=2",
+    topics: [
+      {
+        name: "Open Epoch and create a project",
+        timestamp: "0:00",
+        url: "https://www.youtube.com/watch?v=GNwaf4OpfPM&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=2&t=0s",
+      },
+      {
+        name: "Hello World",
+        timestamp: "1:44",
+        url: "https://www.youtube.com/watch?v=GNwaf4OpfPM&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=2&t=104s",
+      },
+      {
+        name: "Adding a timer",
+        timestamp: "4:44",
+        url: "https://www.youtube.com/watch?v=GNwaf4OpfPM&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=2&t=284s",
+      },
+    ],
+  },
+  {
+    title: "Part III: Target Languages",
+    description:
+      "This part describes how different target languages work with Lingua Franca.",
+    videoUrl:
+      "https://www.youtube.com/watch?v=k0LtpH9VFCE&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=3",
+    topics: [],
+  },
+  {
+    title: "Part IV: Basic Concepts",
+    description:
+      "This part covers fundamental concepts including composing reactors, parameters, state variables, and physical actions.",
+    videoUrl:
+      "https://www.youtube.com/watch?v=tl3F_jgc248&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=4",
+    topics: [],
+  },
+  {
+    title: "Part V: Concurrency",
+    description:
+      "This part focuses on how the language expresses concurrency, exploits multicore, and supports distributed execution.",
+    videoUrl:
+      "https://www.youtube.com/watch?v=MoTf8L0jOD0&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=5",
+    topics: [
+      {
+        name: "Introduction",
+        timestamp: "0:00",
+        url: "https://www.youtube.com/watch?v=MoTf8L0jOD0&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=5&t=0s",
+      },
+      {
+        name: "Banks and Multiports",
+        timestamp: "0:39",
+        url: "https://www.youtube.com/watch?v=MoTf8L0jOD0&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=5&t=39s",
+      },
+      {
+        name: "Utilizing Multicore",
+        timestamp: "9:29",
+        url: "https://www.youtube.com/watch?v=MoTf8L0jOD0&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=5&t=569s",
+      },
+      {
+        name: "Tracing",
+        timestamp: "17:49",
+        url: "https://www.youtube.com/watch?v=MoTf8L0jOD0&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=5&t=1069s",
+      },
+      {
+        name: "Performance",
+        timestamp: "23:40",
+        url: "https://www.youtube.com/watch?v=MoTf8L0jOD0&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=5&t=1420s",
+      },
+      {
+        name: "Federated Execution",
+        timestamp: "29:25",
+        url: "https://www.youtube.com/watch?v=MoTf8L0jOD0&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=5&t=1765s",
+      },
+    ],
+  },
+  {
+    title: "Part VI: Research Overview",
+    description:
+      "This part focuses on a few of the research projects that have been stimulated by the Lingua Franca project.",
+    videoUrl:
+      "https://www.youtube.com/watch?v=afJowM35YHg&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=6",
+    topics: [
+      {
+        name: "Introduction",
+        timestamp: "0:00",
+        url: "https://www.youtube.com/watch?v=afJowM35YHg&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=6&t=0s",
+      },
+      {
+        name: "AUTOSAR",
+        timestamp: "6:15",
+        url: "https://www.youtube.com/watch?v=afJowM35YHg&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=6&t=375s",
+      },
+      {
+        name: "Autoware/Carla",
+        timestamp: "14:27",
+        url: "https://www.youtube.com/watch?v=afJowM35YHg&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=6&t=867s",
+      },
+      {
+        name: "Bare Iron Platforms",
+        timestamp: "27:43",
+        url: "https://www.youtube.com/watch?v=afJowM35YHg&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=6&t=1663s",
+      },
+      {
+        name: "Modal Models",
+        timestamp: "34:36",
+        url: "https://www.youtube.com/watch?v=afJowM35YHg&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=6&t=2076s",
+      },
+      {
+        name: "Automated Verification",
+        timestamp: "40:32",
+        url: "https://www.youtube.com/watch?v=afJowM35YHg&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=6&t=2432s",
+      },
+      {
+        name: "Secure Federated Execution",
+        timestamp: "47:57",
+        url: "https://www.youtube.com/watch?v=afJowM35YHg&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=6&t=2877s",
+      },
+      {
+        name: "LF Language Server",
+        timestamp: "54:07",
+        url: "https://www.youtube.com/watch?v=afJowM35YHg&list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o&index=6&t=3247s",
+      },
+    ],
+  },
+];
+
+const VideoCard = ({ section }: { section: VideoSection }) => (
+  <div className={clsx("card", "margin-bottom--lg", styles.videoCard)}>
+    <div className="card__header">
+      <Heading as="h3">{section.title}</Heading>
+    </div>
+    <div className="card__body">
+      <p>{section.description}</p>
+      {section.topics.length > 0 && (
+        <div className={styles.topicList}>
+          <strong>Topics covered:</strong>
+          <ul>
+            {section.topics.map((topic, idx) => (
+              <li key={idx}>
+                <Link href={topic.url}>
+                  {topic.name} ({topic.timestamp})
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+    <div className="card__footer">
+      <Link
+        className="button button--primary button--sm"
+        href={section.videoUrl}
+      >
+        Watch Video
+      </Link>
+    </div>
+  </div>
+);
+
+export default function ESWEEKTutorial() {
+  return (
+    <Layout
+      title="ESWEEK 2021 Tutorial"
+      description="Lingua Franca Tutorial at EMSOFT/ESWEEK 2021"
+    >
+      {/* Hero Section */}
+      <div className={styles.heroSection}>
+        <div className="container">
+          <div className={styles.eventBadge}>Past Event</div>
+          <Heading as="h1" className={styles.heroTitle}>
+            Lingua Franca Tutorial
+          </Heading>
+          <p className={styles.heroSubtitle}>
+            EMSOFT Conference at Embedded Systems Week (ESWEEK) 2021
+          </p>
+          <div className={styles.eventMeta}>
+            <span>📅 October 8, 2021</span>
+            <span>📍 Online</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Overview Section */}
+      <div className="section">
+        <div className="container">
+          <div className="row">
+            <div className="col col--8 col--offset-2">
+              <Heading as="h2">About This Tutorial</Heading>
+              <p>
+                Lingua Franca (LF) is a polyglot coordination language for
+                concurrent and possibly time-sensitive applications ranging from
+                low-level embedded code to distributed cloud and edge
+                applications. This tutorial was offered on October 8, 2021, as
+                part of the EMSOFT conference at ESWEEK (Embedded Systems Week).
+              </p>
+              <p>
+                The complete tutorial is available as a{" "}
+                <Link href="https://www.youtube.com/playlist?list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o">
+                  video playlist on YouTube
+                </Link>
+                , organized into six segments covering everything from basic
+                concepts to advanced research topics.
+              </p>
+
+              <div className={styles.resourceLinks}>
+                <Heading as="h3">Quick Links</Heading>
+                <ul>
+                  <li>
+                    <Link href="https://www.youtube.com/playlist?list=PL4zzL7roKtfXyKE3k8lOwPub9YEjulS4o">
+                      Complete Video Playlist
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href="https://github.com/lf-lang/lingua-franca/wiki/Tutorial">
+                      Original Tutorial Wiki Page
+                    </Link>
+                  </li>
+                  <li>
+                    <Link href="/docs/">Current Lingua Franca Documentation</Link>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Video Sections */}
+      <div className="section sectionAlt">
+        <div className="container">
+          <Heading
+            as="h2"
+            className={clsx("margin-bottom--lg", "text--center")}
+          >
+            Tutorial Videos
+          </Heading>
+          <div className="row">
+            <div className="col col--8 col--offset-2">
+              {videoSections.map((section, idx) => (
+                <VideoCard key={idx} section={section} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Call to Action */}
+      <div className="section">
+        <div className="container text--center">
+          <Heading as="h2">Ready to Get Started?</Heading>
+          <p>
+            Check out our up-to-date documentation and start building with
+            Lingua Franca today.
+          </p>
+          <div className={styles.ctaButtons}>
+            <Link className="button button--primary button--lg" href="/docs/installation">
+              Install Lingua Franca
+            </Link>
+            <Link
+              className="button button--secondary button--lg"
+              href="/docs/"
+            >
+              Read the Docs
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
diff --git a/src/pages/events/event-page.module.css b/src/pages/events/event-page.module.css
new file mode 100644
index 000000000..662cbe43b
--- /dev/null
+++ b/src/pages/events/event-page.module.css
@@ -0,0 +1,202 @@
+/**
+ * Shared styles for individual event pages
+ */
+
+.heroSection {
+  background: linear-gradient(
+    135deg,
+    var(--ifm-color-primary-darker) 0%,
+    var(--ifm-color-primary) 100%
+  );
+  color: white;
+  padding: 80px 0;
+  text-align: center;
+}
+
+[data-theme="dark"] .heroSection {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+}
+
+.heroTitle {
+  color: white;
+  margin-bottom: 8px;
+  font-size: 3rem;
+}
+
+.heroSubtitle {
+  opacity: 0.95;
+  max-width: 700px;
+  margin: 0 auto 24px;
+  font-size: 1.25rem;
+}
+
+.eventBadge {
+  display: inline-block;
+  padding: 4px 16px;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 16px;
+  background-color: rgba(255, 255, 255, 0.2);
+  color: white;
+}
+
+.eventBadge.upcoming {
+  background-color: #4caf50;
+}
+
+.eventMeta {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 24px;
+  margin-top: 24px;
+  font-size: 1.1rem;
+}
+
+.eventMeta span {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.heroLink {
+  color: white;
+  text-decoration: underline;
+}
+
+.heroLink:hover {
+  color: rgba(255, 255, 255, 0.85);
+}
+
+/* Video card styles */
+.videoCard {
+  border-left: 4px solid var(--ifm-color-primary);
+}
+
+.topicList {
+  margin-top: 16px;
+}
+
+.topicList ul {
+  margin-top: 8px;
+  margin-bottom: 0;
+}
+
+.topicList li {
+  margin-bottom: 4px;
+}
+
+/* Resource links */
+.resourceLinks {
+  margin-top: 32px;
+  padding: 24px;
+  background-color: var(--ifm-color-emphasis-100);
+  border-radius: 8px;
+}
+
+.resourceLinks ul {
+  margin-bottom: 0;
+}
+
+/* CTA buttons */
+.ctaButtons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 24px;
+}
+
+/* Info box for upcoming events */
+.infoBox {
+  margin-top: 32px;
+  padding: 24px;
+  background-color: #e3f2fd;
+  border-left: 4px solid var(--ifm-color-primary);
+  border-radius: 4px;
+}
+
+[data-theme="dark"] .infoBox {
+  background-color: rgba(33, 150, 243, 0.15);
+}
+
+.infoBox h3 {
+  margin-top: 0;
+}
+
+.infoBox p:last-child {
+  margin-bottom: 0;
+}
+
+/* Placeholder cards */
+.placeholderCard {
+  height: 100%;
+  text-align: center;
+}
+
+.placeholderCard .card__body {
+  color: var(--ifm-color-emphasis-600);
+  font-style: italic;
+}
+
+/* Dates list */
+.datesList {
+  list-style: none;
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+.datesList li {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.datesList li:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.datesList li:first-child {
+  padding-top: 0;
+}
+
+/* Organizers list */
+.organizersList {
+  list-style: none;
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+.organizersList li {
+  padding: 8px 0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .heroTitle {
+    font-size: 2rem;
+  }
+
+  .heroSubtitle {
+    font-size: 1rem;
+  }
+
+  .eventMeta {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .ctaButtons {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .ctaButtons .button {
+    width: 100%;
+    max-width: 280px;
+  }
+}
+
diff --git a/src/pages/events/recps-2026.tsx b/src/pages/events/recps-2026.tsx
new file mode 100644
index 000000000..f3dbfad73
--- /dev/null
+++ b/src/pages/events/recps-2026.tsx
@@ -0,0 +1,278 @@
+import clsx from "clsx";
+import Layout from "@theme/Layout";
+import Heading from "@theme/Heading";
+import Link from "@docusaurus/Link";
+
+import styles from "./event-page.module.css";
+
+export default function ReCPS2026() {
+  return (
+    <Layout
+      title="ReCPS Workshop at DATE 2026"
+      description="Reactive CPS (ReCPS): Workshop on Reactive Cyber-Physical Systems: Design, Simulation, and Coordination at DATE 2026"
+    >
+      {/* Hero Section */}
+      <div className={styles.heroSection}>
+        <div className="container">
+          <div className={clsx(styles.eventBadge, styles.upcoming)}>
+            Upcoming Event
+          </div>
+          <Heading as="h1" className={styles.heroTitle}>
+            Reactive CPS (ReCPS)
+          </Heading>
+          <p className={styles.heroSubtitle}>
+            Workshop on Reactive Cyber-Physical Systems: Design, Simulation, and
+            Coordination
+          </p>
+          <div className={styles.eventMeta}>
+            <span>📅 April 20-22, 2026</span>
+            <span>📍 Verona, Italy</span>
+            <span>
+              🎯 Co-located with{" "}
+              <Link
+                href="https://www.date-conference.com/"
+                className={styles.heroLink}
+              >
+                DATE 2026
+              </Link>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* About Section */}
+      <div className="section">
+        <div className="container">
+          <div className="row">
+            <div className="col col--8 col--offset-2">
+              <Heading as="h2">About the Workshop</Heading>
+              <p>
+                The Reactive CPS (ReCPS) Workshop at{" "}
+                <Link href="https://www.date-conference.com/">DATE 2026</Link>{" "}
+                is a new workshop dedicated to the modeling, design, simulation,
+                analysis, and verification of reactive cyber-physical systems
+                (CPS). ReCPS emphasizes reactive CPS architectures that
+                continuously interact with their environment in real time,
+                leveraging methodologies and tools such as the reactor model of
+                computation and the{" "}
+                <Link href="/docs/">Lingua Franca</Link> coordination language.
+              </p>
+
+              <Heading as="h3" className="margin-top--lg">
+                Tentative Workshop Program
+              </Heading>
+              <p>The workshop program will feature:</p>
+              <ul>
+                <li>
+                  <strong>Keynote talk by Prof. Edward A. Lee, UC Berkeley</strong>
+                </li>
+                <li>
+                  <strong>Presentations of technical papers</strong>
+                </li>
+                <li>
+                  <strong>Demo sessions</strong>
+                </li>
+              </ul>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Organizers Section */}
+      <div className="section sectionAlt">
+        <div className="container">
+          <div className="row">
+            <div className="col col--8 col--offset-2">
+              <Heading as="h2" className="text--center margin-bottom--lg">
+                👥 Organizers
+              </Heading>
+              <div className="card">
+                <div className="card__body">
+                  <ul className={styles.organizersList}>
+                    <li>
+                      <strong>General Chair:</strong> Hokeun Kim (Arizona State
+                      University, United States)
+                    </li>
+                    <li>
+                      <strong>Program Chair:</strong> Sebastiano Gaiardelli
+                      (University of Verona, Italy)
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Important Dates Section */}
+      <div className="section">
+        <div className="container">
+          <div className="row">
+            <div className="col col--8 col--offset-2">
+              <Heading as="h2" className="text--center margin-bottom--lg">
+                📅 Important Dates
+              </Heading>
+              <div className="card">
+                <div className="card__body">
+                  <ul className={styles.datesList}>
+                    <li>
+                      <strong>February 16, 2026:</strong> Research papers and
+                      demo abstracts submission deadline
+                    </li>
+                    <li>
+                      <strong>March 2, 2026:</strong> Notification of acceptance
+                    </li>
+                    <li>
+                      <strong>April 20-22, 2026:</strong> Workshop at DATE 2026,
+                      Verona, Italy
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Topics Section */}
+      <div className="section sectionAlt">
+        <div className="container">
+          <div className="row">
+            <div className="col col--8 col--offset-2">
+              <Heading as="h2" className="text--center margin-bottom--lg">
+                📋 Topics of Interest
+              </Heading>
+              <p>Scope and topics to be considered include:</p>
+              <div className="card">
+                <div className="card__body">
+                  <div className="row">
+                    <div className="col col--6">
+                      <ul>
+                        <li>Cyber-physical production systems (CPPS)</li>
+                        <li>Safety-critical CPS</li>
+                        <li>Distributed CPS</li>
+                        <li>Real-time scheduling and coordination</li>
+                        <li>Simulation of CPS</li>
+                        <li>Digital twins</li>
+                      </ul>
+                    </div>
+                    <div className="col col--6">
+                      <ul>
+                        <li>Verification and testing of CPS</li>
+                        <li>Predictability and determinism of CPS</li>
+                        <li>Integration and deployment of CPS</li>
+                        <li>AI/ML-driven autonomous CPS</li>
+                        <li>Modeling & simulation of human-in-the-loop CPS</li>
+                        <li>CPS-human interaction via LLMs</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Submission Section */}
+      <div className="section">
+        <div className="container">
+          <div className="row">
+            <div className="col col--8 col--offset-2">
+              <Heading as="h2" className="text--center margin-bottom--lg">
+                📝 Submission Guidelines
+              </Heading>
+              <p>We invite the following types of contributions:</p>
+
+              <div className={clsx("card", "margin-bottom--md")}>
+                <div className="card__header">
+                  <Heading as="h4">Research Papers</Heading>
+                </div>
+                <div className="card__body">
+                  <p>
+                    Original research contributions on topics related to
+                    reactive cyber-physical systems design, simulation,
+                    verification, and deployment.
+                  </p>
+                  <ul className="margin-bottom--none">
+                    <li>
+                      <strong>Page limit:</strong> 4 pages (including references)
+                    </li>
+                    <li>
+                      <strong>Format:</strong> IEEE conference format
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              <div className={clsx("card", "margin-bottom--md")}>
+                <div className="card__header">
+                  <Heading as="h4">Demo Abstracts</Heading>
+                </div>
+                <div className="card__body">
+                  <p>
+                    Short abstracts describing working prototypes, tools, or
+                    demonstrations related to reactive CPS and the Lingua Franca
+                    ecosystem.
+                  </p>
+                  <ul className="margin-bottom--none">
+                    <li>
+                      <strong>Page limit:</strong> 2 pages (including references)
+                    </li>
+                    <li>
+                      <strong>Format:</strong> IEEE conference format
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              <div className="card">
+                <div className="card__header">
+                  <Heading as="h4">Review Process</Heading>
+                </div>
+                <div className="card__body">
+                  <p>
+                    Single blind review (no need to anonymize submissions) by a program committee with acceptance
+                    decisions.
+                  </p>
+                  <p className="margin-bottom--none">
+                    <strong>Submission system:</strong> EasyChair (link coming
+                    soon)
+                  </p>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Related Links */}
+      <div className="section sectionAlt">
+        <div className="container text--center">
+          <Heading as="h2">Related Resources</Heading>
+          <p>Learn more about reactive programming and Lingua Franca.</p>
+          <div className={styles.ctaButtons}>
+            <Link
+              className="button button--primary button--lg"
+              href="https://www.date-conference.com/"
+            >
+              DATE 2026 Conference
+            </Link>
+            <Link className="button button--secondary button--lg" href="/docs/">
+              Lingua Franca Docs
+            </Link>
+            <Link
+              className="button button--secondary button--lg"
+              href="/research"
+            >
+              Research Publications
+            </Link>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}