diff --git a/src/components/Card.astro b/src/components/Card.astro
index e592a8b..39f2321 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -9,7 +9,7 @@ const t = useTranslations()
 interface Props {
   index?: number // The index of the card in the list.
   title: string
-  year?: number
+  year?: number | string
   description: string
   imgSrc?: ImageMetadata | string // @todo Fix the error message.
   imgType?: string
@@ -41,7 +41,7 @@ const { index, title, year, description, imgSrc, imgType, href } = Astro.props
         {year && (
           <dl>
             <dt class="sr-only">{t('components.cards.publishedIn')}</dt>
-            <dd class="text-xs py-0 px-2 font-medium leading-6 text-gray-50 bg-gray-950 rounded-md m-1 absolute bottom-1 right-1 z-10">
+            <dd class="text-sm py-0 px-2 font-medium leading-6 text-gray-50 bg-gray-950 rounded-md m-1 absolute bottom-1 right-1 z-10">
               <FormattedYear {year} />
             </dd>
           </dl>
@@ -83,7 +83,7 @@ const { index, title, year, description, imgSrc, imgType, href } = Astro.props
     {!imgSrc &&year && (
       <dl>
         <dt class="sr-only">{t('components.cards.publishedIn')}</dt>
-        <dd class="text-xs py-0 px-2 font-medium leading-6 text-gray-50 bg-gray-950 rounded-md m-1 absolute bottom-1 right-1 z-10">
+        <dd class="text-sm py-0 px-2 font-medium leading-6 text-gray-50 bg-gray-950 rounded-md m-1 absolute bottom-1 right-1 z-10">
           <FormattedYear {year} />
         </dd>
       </dl>
diff --git a/src/components/FormattedYear.astro b/src/components/FormattedYear.astro
index d35b2b9..7750909 100644
--- a/src/components/FormattedYear.astro
+++ b/src/components/FormattedYear.astro
@@ -1,6 +1,6 @@
 ---
 interface Props {
-  year: number
+  year: number | string
 }
 
 const { year } = Astro.props
diff --git a/src/components/ListPostCover.astro b/src/components/ListPostCover.astro
index 83d24e5..8c63650 100644
--- a/src/components/ListPostCover.astro
+++ b/src/components/ListPostCover.astro
@@ -37,7 +37,7 @@ const {
   <dl>
     <dt class="sr-only">{t('components.listPostCover.publishedOn')}</dt>
     <dd
-      class="text-xs py-0 px-2 font-medium leading-6 text-gray-50 bg-gray-950 rounded-md m-1 absolute bottom-1 right-1 z-10"
+      class="text-sm py-0 px-2 font-medium leading-6 text-gray-50 bg-gray-950 rounded-md m-1 absolute bottom-1 right-1 z-10"
     >
       <FormattedDate {date} />
     </dd>
diff --git a/src/consts.ts b/src/consts.ts
index 65c4d03..87cc6cb 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -108,6 +108,7 @@ export const NAVIGATION = [
   // { href: "/tags", title: "nav.tags" },
   { href: '/apps', title: 'nav.apps' },
   { href: '/talks', title: 'nav.talks' },
+  { href: '/meetups', title: 'nav.meetups' },
   { href: '/about', title: 'nav.about' },
 ] as const
 
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 73ada73..669a039 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -30,6 +30,11 @@ export const ui = {
     'pages.talks.allApps': 'Public speaking',
     'pages.talks.showcase':
       "I am a publlic speaker at conferences, mostly technical ones. Here's a list of the most significant talks I gave.",
+    'pages.meetups.title': 'Meetups',
+    'pages.meetups.description': 'Meetups',
+    'pages.meetups.allApps': 'Meetups and social events',
+    'pages.meetups.showcase':
+      'Here is a list of some meetups and social events I organised.',
     'pages.blog.title': 'All blog posts',
     'pages.blog.description': 'All blog posts',
     'pages.404.title': '404 - Not Found',
@@ -54,6 +59,7 @@ export const ui = {
     'nav.blog': 'Blog',
     'nav.apps': 'Apps',
     'nav.talks': 'Talks',
+    'nav.meetups': 'Meetups',
     'nav.tags': 'Tags',
     'nav.about': 'About',
 
diff --git a/src/pages/meetups.astro b/src/pages/meetups.astro
new file mode 100644
index 0000000..f2b4990
--- /dev/null
+++ b/src/pages/meetups.astro
@@ -0,0 +1,84 @@
+---
+import Card from '@/components/Card.astro'
+import { useTranslations } from '@/i18n'
+import RootLayout from '@/layouts/RootLayout.astro'
+
+import organiseMeetupImg from '@/assets/covers/how-to-organise-a-meetup.jpg'
+
+const t = useTranslations()
+
+const data = [
+  {
+    title: 'An evening of Tiny Talks',
+    year: 2019,
+    description: `Meetup made of tiny talks related to web technologies, centred around underrepresented groups in the tech industry. Co-organised with Matt Barnett-Jones.`,
+    imgSrc: undefined,
+  },
+  {
+    title: 'Week of wellbeing',
+    year: 'June 2018',
+    description: `Internal event held at Twitter during Hackweek to sponsor wellbeing with sessions on sleep, nutrition, mental health and yoga. Co-organised with Chelsea Hipwood.`,
+    imgSrc: undefined,
+  },
+  {
+    title: 'Mozilla IOT Meetup',
+    year: 2016,
+    description: `A series of meetups to explore the IOT space with an emphasis on inspiring and diverse speakers rather than technical presentations.`,
+    imgSrc: undefined,
+  },
+  {
+    title: 'Firefox OS workshop',
+    year: 2015, // September
+    description: `A workshop to introduce tech people to Firefox OS. Given at JS Conf EU.`,
+    imgSrc: undefined,
+  },
+  {
+    title: 'Firefox OS meetup',
+    year: 2015,
+    description: `Meetups to socialise and discover the web technologies through the lens of Firefox OS.`,
+    imgSrc: undefined,
+  },
+  {
+    title: 'Want to organise your own meetup?',
+    description: `I wrote about what you need to organise a meetup or social event.`,
+    imgSrc: organiseMeetupImg,
+    imgType: 'default',
+    href: '/posts/how-to-organise-a-meetup',
+  },
+]
+---
+
+<RootLayout
+  title={t('pages.meetups.title')}
+  description={t('pages.meetups.description')}
+>
+  <div>
+    <div class="space-y-2 pb-8 sm:pb-12 md:pb-20 pt-6 md:space-y-5">
+      <h2
+        class="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-primary-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14"
+      >
+        {t('pages.meetups.allApps')}
+      </h2>
+      <p class="text-lg leading-7 text-gray-500 dark:text-gray-300">
+        {t('pages.meetups.showcase')}
+      </p>
+    </div>
+    <div class="grid md:grid-cols-2 gap-8">
+      {
+        data.map(
+          ({ title, year, description, imgSrc, imgType, href }, index) => (
+            <Card
+              {index}
+              {title}
+              {year}
+              {description}
+              {imgSrc}
+              {imgType}
+              {href}
+            />
+          )
+        )
+      }
+    </div>
+  </div>
+</RootLayout>