diff --git a/components/callout.tsx b/components/callout.tsx
index 7b3b60a89..429b9b2ac 100644
--- a/components/callout.tsx
+++ b/components/callout.tsx
@@ -15,8 +15,8 @@ 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-[rgb(29,40,58)]  ": type === "danger",
+        "border-[rgb(29,40,58)]": type === "warning",
       })}
       {...props}
     >
diff --git a/content/docs/documentation/components.mdx b/content/docs/documentation/components.mdx
index f678b95fd..9165ba555 100644
--- a/content/docs/documentation/components.mdx
+++ b/content/docs/documentation/components.mdx
@@ -131,7 +131,7 @@ const components = {
 }
 ```
 
-This will overwrite the `<hr />` tag or `---` in Mardown with the HTML output above.
+This will overwrite the `<hr />` tag or `---` in Markdown with the HTML output above.
 
 ---