diff --git a/apps/design-system/content/docs/components/alert copy.mdx b/apps/design-system/content/docs/components/alert copy.mdx
deleted file mode 100644
index 1ada949fd9c..00000000000
--- a/apps/design-system/content/docs/components/alert copy.mdx	
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Alert
-description: Displays a callout for user attention.
-component: true
----
-
-<ComponentPreview name="alert-demo" peekCode wide />
-
-## Installation
-
-<Tabs defaultValue="cli">
-
-<TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
-```bash
-npx shadcn-ui@latest add alert
-```
-
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps>
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource name="alert" />
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</Tabs>
-
-## Usage
-
-```tsx
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-```
-
-```tsx
-<Alert>
-  <Terminal className="h-4 w-4" />
-  <AlertTitle>Heads up!</AlertTitle>
-  <AlertDescription>
-    You can add components and dependencies to your app using the cli.
-  </AlertDescription>
-</Alert>
-```
-
-## Examples
-
-### Default
-
-<ComponentPreview name="alert-demo" peekCode wide />
-
-### Destructive
-
-<ComponentPreview name="alert-destructive" />
diff --git a/apps/design-system/content/docs/fragments/admonition.mdx b/apps/design-system/content/docs/fragments/admonition.mdx
index 5df52e91ceb..ac4921783e2 100644
--- a/apps/design-system/content/docs/fragments/admonition.mdx
+++ b/apps/design-system/content/docs/fragments/admonition.mdx
@@ -2,9 +2,6 @@
 title: Admonition
 description: Displays a callout for user attention.
 fragment: true
-links:
-  doc: https://www.radix-ui.com/docs/primitives/components/alert
-  api: https://www.radix-ui.com/docs/primitives/components/alert#api-reference
 ---
 
 <ComponentPreview
@@ -30,6 +27,13 @@ import { Admonition } from 'ui-patterns/admonition'
 
 ## Examples
 
+### With actions
+
+<ComponentPreview
+  name="admonition-demo"
+  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
+/>
+
 ### Warning
 
 <ComponentPreview
diff --git a/apps/design-system/registry/default/example/admonition-demo.tsx b/apps/design-system/registry/default/example/admonition-demo.tsx
index 77c15eea02c..f4e7ecc3a4d 100644
--- a/apps/design-system/registry/default/example/admonition-demo.tsx
+++ b/apps/design-system/registry/default/example/admonition-demo.tsx
@@ -1,11 +1,26 @@
+import Link from 'next/link'
+import { Button } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
 
 export default function AdmonitionDemo() {
   return (
     <Admonition
       type="default"
-      title="Is it accessible?"
-      description="Yes. It adheres to the WAI-ARIA design pattern."
+      layout="horizontal"
+      className="mb-12 [&>div]:!translate-y-0"
+      title="OAuth Server is disabled"
+      description="Enable OAuth Server to make your project act as an identity provider for
+            third-party applications."
+      actions={
+        <Button asChild type="default">
+          <Link
+            href={`/`}
+            onClick={(e) => e.preventDefault()} // Just for demo
+          >
+            OAuth Server Settings
+          </Link>
+        </Button>
+      }
     />
   )
 }
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
index 7ee3f465b1f..8e77b34ab23 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
@@ -20,7 +20,6 @@ import {
   Badge,
   Button,
   Card,
-  CardContent,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -33,6 +32,7 @@ import {
   TableHeader,
   TableRow,
 } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { TimestampInfo } from 'ui-patterns/TimestampInfo'
 import { CreateOrUpdateOAuthAppSheet } from './CreateOrUpdateOAuthAppSheet'
@@ -136,34 +136,28 @@ export const OAuthAppsList = () => {
 
   return (
     <>
-      <div className="space-y-4">
+      <div className="flex flex-col gap-y-4">
         {newOAuthApp?.client_secret && (
           <NewOAuthAppBanner oauthApp={newOAuthApp} onClose={() => setNewOAuthApp(undefined)} />
         )}
         {!isOAuthServerEnabled && (
-          <div className="space-y-4">
-            <Card>
-              <CardContent className="flex flex-col md:flex-row gap-4 justify-between md:items-center">
-                <div className="flex flex-col gap-2-4">
-                  <h3 className="">OAuth Server is disabled</h3>
-                  <p className="text-foreground-light text-sm">
-                    Enable the OAuth Server to make your project act as an identity provider for
-                    third-party applications.
-                  </p>
-                </div>
-                <Button asChild>
-                  <Link href={`/project/${projectRef}/auth/oauth-server`}>
-                    Go to OAuth Server Settings
-                  </Link>
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
+          <Admonition
+            type="default"
+            layout="horizontal"
+            className="mb-8 [&>div]:!translate-y-0"
+            title="OAuth Server is disabled"
+            description="Enable OAuth Server to make your project act as an identity provider for third-party applications."
+            actions={
+              <Button asChild type="default">
+                <Link href={`/project/${projectRef}/auth/oauth-server`}>OAuth Server Settings</Link>
+              </Button>
+            }
+          />
         )}
         <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2 flex-wrap">
           <div className="flex flex-col lg:flex-row lg:items-center gap-2">
             <Input
-              placeholder="Search oAuth apps"
+              placeholder="Search OAuth apps"
               size="tiny"
               icon={<Search />}
               value={filterString}
diff --git a/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx b/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx
index 09dc1b0b337..c16b449d212 100644
--- a/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx
+++ b/apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx
@@ -22,7 +22,7 @@ export const OverviewLearnMore = () => {
   const { ref } = useParams()
   const aiSnap = useAiAssistantStateSnapshot()
   const { openSidebar } = useSidebarManagerSnapshot()
-  const { theme, resolvedTheme } = useTheme()
+  const { resolvedTheme } = useTheme()
 
   useEffect(() => {
     setIsMounted(true)
diff --git a/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx b/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx
index 7ed664f48df..4a117094690 100644
--- a/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx
+++ b/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx
@@ -1,13 +1,14 @@
 import { useQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+import { ChevronRight, ExternalLink, HelpCircle, Telescope } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
 import { useParams } from 'common'
 import { getStatusLevel } from 'components/interfaces/UnifiedLogs/UnifiedLogs.utils'
 import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { DataTableColumnStatusCode } from 'components/ui/DataTable/DataTableColumn/DataTableColumnStatusCode'
-import dayjs from 'dayjs'
-import { ChevronRight, ExternalLink, HelpCircle, Telescope } from 'lucide-react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
 import {
   Card,
   CardContent,
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx
index c5d25266166..988b684e1d8 100644
--- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx
@@ -23,7 +23,8 @@ import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { MANAGED_BY } from 'lib/constants/infrastructure'
 import { getURL } from 'lib/helpers'
-import { Alert, Button } from 'ui'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 import ChangePaymentMethodModal from './ChangePaymentMethodModal'
 import CreditCard from './CreditCard'
 import DeletePaymentMethodModal from './DeletePaymentMethodModal'
@@ -93,14 +94,16 @@ const PaymentMethods = () => {
               {isSuccess && (
                 <>
                   {subscription?.payment_method_type === 'invoice' && (
-                    <Alert
-                      withIcon
-                      variant="info"
+                    <Admonition
+                      type="note"
+                      layout="horizontal"
+                      className="mb-0"
                       title="Payment is currently by invoice"
-                      actions={[
-                        <Button key="payment-method-support" asChild type="default">
+                      description="You get a monthly invoice and payment link via email. To change your payment
+                      method, please contact us via our support form."
+                      actions={
+                        <Button asChild key="payment-method-support" type="default">
                           <SupportLink
-                            className="ml-3"
                             queryParams={{
                               category: SupportCategories.BILLING,
                               subject: 'Request to change payment method',
@@ -108,12 +111,9 @@ const PaymentMethods = () => {
                           >
                             Contact support
                           </SupportLink>
-                        </Button>,
-                      ]}
-                    >
-                      You get a monthly invoice and payment link via email. To change your payment
-                      method, please contact us via our support form.
-                    </Alert>
+                        </Button>
+                      }
+                    />
                   )}
                   <FormPanel
                     footer={
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx
index e9cd82df23e..b48ada2cdeb 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx
@@ -14,7 +14,8 @@ import { BASE_PATH, DOCS_URL, PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
 import { ChevronRight, ExternalLink } from 'lucide-react'
 import { pricing } from 'shared-data/pricing'
 import { useOrgSettingsPageStateSnapshot } from 'state/organization-settings'
-import { Alert, Button, Collapsible, SidePanel, cn } from 'ui'
+import { Button, Collapsible, SidePanel, cn } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 
 const SPEND_CAP_OPTIONS: {
   name: string
@@ -183,18 +184,17 @@ const SpendCapSidePanel = () => {
           </Collapsible>
 
           {isFreePlan && (
-            <Alert
-              withIcon
-              variant="info"
+            <Admonition
+              type="note"
+              layout="horizontal"
               title="Toggling of the spend cap is only available on the Pro Plan"
+              description="Upgrade your plan to disable the spend cap"
               actions={
                 <Button type="default" onClick={() => snap.setPanelKey('subscriptionPlan')}>
                   View available plans
                 </Button>
               }
-            >
-              Upgrade your plan to disable the spend cap
-            </Alert>
+            />
           )}
 
           <div className="!mt-8 pb-4">
@@ -239,23 +239,19 @@ const SpendCapSidePanel = () => {
           </div>
 
           {selectedOption === 'on' ? (
-            <Alert
-              withIcon
-              variant="warning"
+            <Admonition
+              type="warning"
               title="Your projects could become unresponsive or enter read only mode"
-            >
-              Exceeding the included quota allowance with spend cap enabled can cause your projects
-              to become unresponsive or enter read only mode.
-            </Alert>
+              description="Exceeding the included quota allowance with spend cap enabled can cause your projects
+              to become unresponsive or enter read only mode."
+            />
           ) : (
-            <Alert
-              withIcon
-              variant="info"
+            <Admonition
+              type="note"
               title="Charges apply for usage beyond included quota allowance"
-            >
-              Your projects will always remain responsive and active, and charges only apply when
-              exceeding the included quota limit.
-            </Alert>
+              description="Your projects will always remain responsive and active, and charges only apply when
+              exceeding the included quota limit."
+            />
           )}
 
           {hasChanges && (
diff --git a/apps/studio/components/ui/AlphaNotice.tsx b/apps/studio/components/ui/AlphaNotice.tsx
index 8ff5ea372f7..24fa14fc1f0 100644
--- a/apps/studio/components/ui/AlphaNotice.tsx
+++ b/apps/studio/components/ui/AlphaNotice.tsx
@@ -12,7 +12,7 @@ interface AlphaNoticeProps {
 
 export const AlphaNotice = ({ entity, feedbackUrl }: AlphaNoticeProps) => {
   return (
-    <Admonition showIcon={false} type="tip" className="relative mb-6 overflow-hidden">
+    <Admonition showIcon={false} type="tip" className="relative mb-8 overflow-hidden">
       <div className="absolute -inset-16 z-0 opacity-50">
         <img
           src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}
diff --git a/apps/studio/pages/project/[ref]/auth/overview.tsx b/apps/studio/pages/project/[ref]/auth/overview.tsx
index 619e0208e1c..ed86cf49022 100644
--- a/apps/studio/pages/project/[ref]/auth/overview.tsx
+++ b/apps/studio/pages/project/[ref]/auth/overview.tsx
@@ -1,14 +1,15 @@
+import { useRouter } from 'next/router'
+import { useContext, useEffect } from 'react'
+
 import { FeatureFlagContext, useFlag, useParams } from 'common'
 import { OverviewLearnMore } from 'components/interfaces/Auth/Overview/OverviewLearnMore'
 import { OverviewMetrics } from 'components/interfaces/Auth/Overview/OverviewMetrics'
 import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { DocsButton } from 'components/ui/DocsButton'
-import { DOCS_URL } from 'lib/constants'
-import { useRouter } from 'next/router'
-import { useContext, useEffect } from 'react'
-import type { NextPageWithLayout } from 'types'
 import { useAuthOverviewQuery } from 'data/auth/auth-overview-query'
+import { DOCS_URL } from 'lib/constants'
+import { NextPageWithLayout } from 'types'
 import { PageContainer } from 'ui-patterns/PageContainer'
 import {
   PageHeader,