diff --git a/src/components/ui/alert/Alert.vue b/src/components/ui/alert/Alert.vue
new file mode 100644
index 0000000..9feea31
--- /dev/null
+++ b/src/components/ui/alert/Alert.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { AlertVariants } from "."
+import { cn } from "@/lib/utils"
+import { alertVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: AlertVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/alert/AlertDescription.vue b/src/components/ui/alert/AlertDescription.vue
new file mode 100644
index 0000000..afeaa01
--- /dev/null
+++ b/src/components/ui/alert/AlertDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/alert/AlertTitle.vue b/src/components/ui/alert/AlertTitle.vue
new file mode 100644
index 0000000..1f98d11
--- /dev/null
+++ b/src/components/ui/alert/AlertTitle.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>
diff --git a/src/components/ui/alert/index.ts b/src/components/ui/alert/index.ts
new file mode 100644
index 0000000..1106fd0
--- /dev/null
+++ b/src/components/ui/alert/index.ts
@@ -0,0 +1,24 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Alert } from "./Alert.vue"
+export { default as AlertDescription } from "./AlertDescription.vue"
+export { default as AlertTitle } from "./AlertTitle.vue"
+
+export const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/src/views/EventsView.vue b/src/views/EventsView.vue
index 79fb3a1..b060aac 100644
--- a/src/views/EventsView.vue
+++ b/src/views/EventsView.vue
@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 
 const { t } = useI18n()
 
@@ -48,14 +49,14 @@ const events = [
         <p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
           {{ t('events.page.lede') }}
         </p>
-        <aside
-          class="mt-8 max-w-prose rounded-md border border-border bg-card p-4 text-sm text-foreground/85"
-        >
-          <p class="text-xs font-semibold uppercase tracking-wider text-accent">
+        <Alert class="mt-8 max-w-prose bg-card text-foreground/85">
+          <AlertTitle class="text-xs uppercase tracking-wider text-accent">
             {{ t('events.page.noteHeading') }}
-          </p>
-          <p class="mt-1">{{ t('events.page.calendarNote') }}</p>
-        </aside>
+          </AlertTitle>
+          <AlertDescription>
+            {{ t('events.page.calendarNote') }}
+          </AlertDescription>
+        </Alert>
       </div>
     </section>