diff --git a/src/assets/icons/warning.svg b/src/assets/icons/warning.svg
new file mode 100644
index 0000000..905f5a2
--- /dev/null
+++ b/src/assets/icons/warning.svg
@@ -0,0 +1,9 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M7.50005 9.75003C8.14235 9.75006 8.67697 10.2356 8.74322 10.8662L8.75005 10.9942L8.74419 11.1231C8.68144 11.7565 8.14495 12.2471 7.50005 12.2471C6.81203 12.2471 6.24773 11.6888 6.25005 10.9942L6.25689 10.8662C6.32313 10.2356 6.85775 9.75006 7.50005 9.75003Z"
+    fill="currentColor" />
+  <path d="M8.25005 9.00003H6.75005V4.50003H8.25005V9.00003Z" fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M7.55767 0.50101C7.57657 0.501737 7.5959 0.502541 7.61431 0.503939C7.65134 0.50677 7.68788 0.511449 7.72271 0.516635C7.79241 0.527039 7.85809 0.541533 7.91802 0.558627C8.03722 0.592689 8.1409 0.638063 8.22564 0.68265C8.38961 0.769027 8.52253 0.873767 8.62603 0.967807C8.82972 1.15299 9.04466 1.41128 9.29205 1.76468C9.79297 2.48031 10.5814 3.80813 11.8419 6.32913C13.4473 9.54016 14.0899 10.9212 14.3506 11.5186C14.5554 11.9878 14.5808 12.5576 14.3301 13.0791C14.0758 13.6077 13.6004 13.9535 13.0743 14.0762C12.2895 14.2591 10.6646 14.5 7.50005 14.5C4.18614 14.5 2.55983 14.2357 1.81744 14.0498C1.36482 13.9365 0.917231 13.6436 0.65435 13.1543C0.389433 12.661 0.392545 12.1166 0.561577 11.6651L0.667046 11.3965C0.963221 10.673 1.63205 9.23202 3.1729 6.30179C4.49492 3.78773 5.27467 2.47974 5.74224 1.78617C5.97214 1.44518 6.15884 1.20466 6.32525 1.03324C6.40784 0.948188 6.52292 0.840814 6.67095 0.746127C6.74782 0.696988 6.85262 0.639096 6.98248 0.59183C7.04858 0.567797 7.12546 0.545099 7.21099 0.528353C7.25398 0.51996 7.30067 0.512726 7.34869 0.507846C7.37242 0.505441 7.39704 0.503287 7.42193 0.501986C7.43447 0.501346 7.44819 0.501348 7.46099 0.50101C7.46746 0.500838 7.47737 0.500079 7.48052 0.500033C7.49011 0.500729 7.49953 0.534954 7.50005 2.00003C7.49978 0.500164 7.50739 0.499981 7.5147 0.500033C7.51743 0.500048 7.52472 0.499951 7.52935 0.500033C7.53874 0.50022 7.54838 0.500655 7.55767 0.50101ZM7.50005 2.00003C7.48866 2.00115 7.08963 2.07547 4.50005 7.00003L3.89458 8.16214C2.60252 10.6641 2.13562 11.7399 1.96685 12.1905C1.8975 12.3757 1.98984 12.5467 2.18169 12.5948C2.76072 12.7397 4.25298 13 7.50005 13C10.212 13 11.7002 12.8182 12.4542 12.6739L12.7335 12.6153C12.9373 12.5676 13.043 12.3914 13.002 12.2012L12.9756 12.1192C12.7926 11.6997 12.3939 10.8341 11.5294 9.07425L10.5001 7.00003C8.03488 2.06959 7.51405 2.00099 7.50005 2.00003Z"
+    fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/src/components/Callout.astro b/src/components/Callout.astro
index 1eba5c1..d4891da 100644
--- a/src/components/Callout.astro
+++ b/src/components/Callout.astro
@@ -1,16 +1,28 @@
 ---
 import Information from "@assets/icons/information.svg";
+import Warning from "@assets/icons/warning.svg";
 
 type Props = {
   title?: string;
-  variant?: "note";
+  variant?: "note" | "warning";
 };
 
 const { title, variant = "note" } = Astro.props;
+
+let Icon: (_props: astroHTML.JSX.SVGAttributes) => any;
+
+switch (variant) {
+  case "note":
+    Icon = Information;
+    break;
+  case "warning":
+    Icon = Warning;
+    break;
+}
 ---
 
 <div class="callout" data-variant={variant}>
-  {variant === "note" ? <Information /> : ""}
+  <Icon />
 
   <div class="text">
     {title && <p class="title heading-3">{title}</p>}
@@ -21,6 +33,15 @@ const { title, variant = "note" } = Astro.props;
 
 <style lang="scss">
   .callout {
+    &[data-variant="note"] {
+    }
+    &[data-variant="warning"] {
+      --base-hue: 30;
+    }
+
+    --color-100: oklch(0.9 0.07 calc(var(--base-hue) + 8));
+    --color-800: oklch(0.2 0.1 calc(var(--base-hue) + 9));
+
     display: flex;
     gap: 1rem;
     background-color: var(--color-100);
@@ -42,8 +63,5 @@ const { title, variant = "note" } = Astro.props;
         margin-bottom: 0;
       }
     }
-
-    &[data-variant="note"] {
-    }
   }
 </style>