diff --git a/components/callout.tsx b/components/callout.tsx
index 7b3b60a..707d171 100644
--- a/components/callout.tsx
+++ b/components/callout.tsx
@@ -15,8 +15,9 @@ export function Callout({
   return (
     <div
       className={cn("my-6 flex items-start rounded-md border border-l-4 p-4", {
-        "border-red-900 bg-red-50": type === "danger",
-        "border-yellow-900 bg-yellow-50": type === "warning",
+        "border-red-900 bg-red-50 dark:bg-red-900/[.5]": type === "danger",
+        "border-yellow-900 bg-yellow-50 dark:bg-yellow-900/[.5]":
+          type === "warning",
       })}
       {...props}
     >