diff --git a/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx b/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx
index 1306de25e53..af78b93ba15 100644
--- a/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx
+++ b/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx
@@ -2,9 +2,8 @@ import { SupportCategories } from '@supabase/shared-types/out/constants'
 import { DatabaseUpgradeStatus } from '@supabase/shared-types/out/events'
 import { useParams } from 'common'
 import dayjs from 'dayjs'
-import { X } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import { Alert, Button } from 'ui'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns'
 
 import { InlineLink } from './InlineLink'
 import { SupportLink } from '@/components/interfaces/Support/SupportLink'
@@ -19,13 +18,6 @@ export const ProjectUpgradeFailedBanner = () => {
   const { data } = useProjectUpgradingStatusQuery({ projectRef: ref }, { enabled: IS_PLATFORM })
   const { status, initiated_at, latest_status_at, error } = data?.databaseUpgradeStatus ?? {}
 
-  const key = `supabase-upgrade-${ref}-${initiated_at}`
-
-  const [hasDismissed, setHasDismissed] = useState(false)
-  useEffect(() => {
-    setHasDismissed(localStorage?.getItem(key) === 'true')
-  }, [key])
-
   const isFailed = status === DatabaseUpgradeStatus.Failed
   const initiatedAt = dayjs
     .utc(initiated_at ?? 0)
@@ -46,40 +38,26 @@ export const ProjectUpgradeFailedBanner = () => {
   )
   const timestampFilter = `its=${initiatedAtEncoded}&ite=${latestStatusAtEncoded}`
 
-  const acknowledgeMessage = () => {
-    setHasDismissed(true)
-    localStorage.setItem(key, 'true')
-  }
-
-  if (!isFailed || hasDismissed) return null
+  if (!isFailed) return null
 
   return (
     <div className="max-w-7xl">
-      <Alert
-        withIcon
-        variant={'warning'}
+      <Admonition
+        type="warning"
         title={`Postgres version upgrade was not successful (Initiated at ${initiatedAt})`}
         actions={
-          <div className="flex items-center h-full space-x-4">
-            <Button asChild type="default">
-              <SupportLink
-                queryParams={{
-                  category: SupportCategories.DATABASE_UNRESPONSIVE,
-                  projectRef: ref,
-                  subject,
-                  message,
-                }}
-              >
-                Contact support
-              </SupportLink>
-            </Button>
-            <Button
-              type="text"
-              className="px-1"
-              icon={<X size={16} strokeWidth={1.5} />}
-              onClick={() => acknowledgeMessage()}
-            />
-          </div>
+          <Button asChild type="default">
+            <SupportLink
+              queryParams={{
+                category: SupportCategories.DATABASE_UNRESPONSIVE,
+                projectRef: ref,
+                subject,
+                message,
+              }}
+            >
+              Contact support
+            </SupportLink>
+          </Button>
         }
       >
         <div>
@@ -93,7 +71,7 @@ export const ProjectUpgradeFailedBanner = () => {
           </InlineLink>
           .
         </div>
-      </Alert>
+      </Admonition>
     </div>
   )
 }
diff --git a/packages/ui/src/components/shadcn/ui/sonner.tsx b/packages/ui/src/components/shadcn/ui/sonner.tsx
index 49a91b3065a..87d43b6fee1 100644
--- a/packages/ui/src/components/shadcn/ui/sonner.tsx
+++ b/packages/ui/src/components/shadcn/ui/sonner.tsx
@@ -53,11 +53,11 @@ const SonnerToaster = ({ toastOptions, ...props }: ToasterProps) => {
             'group toast group-[.toaster]:!bg-destructive-200 group-[.toaster]:!border-destructive-500',
           closeButton: cn(
             // unset all styles set from sonner
-            'absolute right-2 top-2 rounded-md text-foreground/50 opacity-0 transition-opacity',
-            'hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100',
+            'absolute right-2 top-2 size-6 flex items-center justify-center rounded-md text-foreground-light opacity-0 transition',
+            'hover:text-foreground hover:bg-surface-200 focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100',
             'group-[.destructive]:text-destructive-300 group-[.destructive]:hover:text-destructive-50',
             'group-[.destructive]:focus:ring-destructive-400 group-[.destructive]:focus:ring-offset-destructive-600',
-            'left-auto transform-none bg-transparent border-0 border-transparent hover:bg-transparent! hover:border-transparent'
+            'left-auto transform-none border-0 border-transparent'
           ),
           content: 'grow',
           //group-[.toaster]:bg-overlay group-[.toaster]:text-foreground group-[.toaster]:border group-[.toaster]:border-overlay