diff --git a/packages/ui/components/alert/Alert.tsx b/packages/ui/components/alert/Alert.tsx
index 384805d15a..d27899a7d5 100644
--- a/packages/ui/components/alert/Alert.tsx
+++ b/packages/ui/components/alert/Alert.tsx
@@ -24,13 +24,13 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
     <div
       ref={ref}
       className={classNames(
-        "rounded-md border border-opacity-20 p-3",
+        "rounded-md  p-3",
         props.className,
-        severity === "error" && "border-red-900 bg-red-50 text-red-800",
-        severity === "warning" && "border-yellow-700 bg-yellow-50 text-yellow-700",
-        severity === "info" && "border-sky-700 bg-sky-50 text-sky-700",
+        severity === "error" && "bg-red-100 text-red-900 dark:bg-red-900 dark:text-red-200",
+        severity === "warning" && "text-attention bg-attention dark:bg-orange-900 dark:text-orange-200",
+        severity === "info" && "bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-200",
         severity === "success" && "bg-inverted text-inverted",
-        severity === "neutral" && "bg-subtle text-default border-none"
+        severity === "neutral" && "bg-subtle text-default"
       )}>
       <div className="relative flex flex-col md:flex-row">
         {CustomIcon ? (
@@ -41,19 +41,19 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
           <div className="flex-shrink-0">
             {severity === "error" && (
               <XCircle
-                className={classNames("h-5 w-5 fill-red-400 text-white", iconClassName)}
+                className={classNames("h-5 w-5 text-red-900 dark:text-red-200", iconClassName)}
                 aria-hidden="true"
               />
             )}
             {severity === "warning" && (
               <AlertTriangle
-                className={classNames("h-5 w-5 fill-yellow-400 text-white", iconClassName)}
+                className={classNames("text-attention h-5 w-5 dark:text-orange-200", iconClassName)}
                 aria-hidden="true"
               />
             )}
             {severity === "info" && (
               <Info
-                className={classNames("h-5 w-5 fill-sky-400 text-white", iconClassName)}
+                className={classNames("h-5 w-5 text-blue-900 dark:text-blue-200", iconClassName)}
                 aria-hidden="true"
               />
             )}
@@ -65,7 +65,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
             )}
             {severity === "success" && (
               <CheckCircle2
-                className={classNames("fill-muted h-5 w-5 text-white", iconClassName)}
+                className={classNames("fill-muted text-default h-5 w-5", iconClassName)}
                 aria-hidden="true"
               />
             )}
diff --git a/packages/ui/components/alert/alert.stories.mdx b/packages/ui/components/alert/alert.stories.mdx
index ffa6c67b36..0f2186a106 100644
--- a/packages/ui/components/alert/alert.stories.mdx
+++ b/packages/ui/components/alert/alert.stories.mdx
@@ -49,6 +49,9 @@ Each alert has a state to represent neutral, positive or negative responses.
       <VariantRow variant="Neutral">
         <Alert severity="neutral" title="Summarise what happened" message="Describe what can be done about it here." />
       </VariantRow>
+      <VariantRow variant="Info">
+        <Alert severity="info" title="Summarise what happened" message="Describe what can be done about it here." />
+      </VariantRow>
     </VariantsTable>
   </Story>
 </Canvas>