diff --git a/web/src/components/ErrorCallout.tsx b/web/src/components/ErrorCallout.tsx
index 497412d033d..3726c09e307 100644
--- a/web/src/components/ErrorCallout.tsx
+++ b/web/src/components/ErrorCallout.tsx
@@ -1,4 +1,5 @@
 import { Callout } from "@/components/ui/callout";
+import { FiAlertTriangle } from "react-icons/fi";
 
 export function ErrorCallout({
   errorTitle,
@@ -12,7 +13,7 @@ export function ErrorCallout({
       <Callout
         className="mt-4"
         title={errorTitle || "Page not found"}
-        icon="alert"
+        icon={<FiAlertTriangle className="text-red-500 h-5 w-5" />}
         type="danger"
       >
         {errorMsg}
diff --git a/web/src/components/ui/callout.tsx b/web/src/components/ui/callout.tsx
index 99dbc31c900..5b45aab72ed 100644
--- a/web/src/components/ui/callout.tsx
+++ b/web/src/components/ui/callout.tsx
@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils";
 
 interface CalloutProps {
-  icon?: string;
+  icon?: React.ReactNode;
   children?: React.ReactNode;
   type?: "default" | "warning" | "danger" | "notice";
   className?: string;
@@ -29,8 +29,10 @@ export function Callout({
       {...props}
     >
       {icon && <span className="mr-4 text-2xl">{icon}</span>}
-      <div>
-        {title && <div className="font-medium mb-1">{title}</div>}
+      <div className="flex-1">
+        {title && (
+          <div className="font-medium mb-1 flex items-center">{title}</div>
+        )}
         {children}
       </div>
     </div>