diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx
index 13bf71bbfec..be588279c70 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx
@@ -4,7 +4,8 @@ import { ExternalLink } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import Link from 'next/link'
-import { Alert, Alert_Shadcn_, AlertTitle_Shadcn_, Button } from 'ui'
+import { Alert_Shadcn_, AlertTitle_Shadcn_, Button } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { ProjectUpdateDisabledTooltip } from '../ProjectUpdateDisabledTooltip'
@@ -118,23 +119,28 @@ const CostControl = ({}: CostControlProps) => {
               {isSuccess && !costControlDisabled && (
                 <div className="space-y-6">
                   {['team', 'enterprise', 'platform'].includes(currentPlan?.id || '') ? (
-                    <Alert
-                      withIcon
-                      variant="info"
-                      title={`You will be charged for any additional usage on the ${
-                        currentPlan?.name || ''
-                      } plan`}
-                    >
-                      {currentPlan?.name || ''} plan requires you to have spend cap off at all
-                      times. Your projects will never become unresponsive. Only when your{' '}
-                      <Link
-                        href={`/org/${slug}/usage`}
-                        className="text-green-900 transition hover:text-green-1000"
-                      >
-                        included usage
-                      </Link>{' '}
-                      is exceeded will you be charged for any additional usage.
-                    </Alert>
+                    <>
+                      <Admonition
+                        type="default"
+                        layout="horizontal"
+                        title={`You will be charged for any additional usage on the ${
+                          currentPlan?.name || ''
+                        } plan`}
+                        description={
+                          <>
+                            {currentPlan?.name || ''} plan requires you to have spend cap off at all
+                            times. Your projects will never become unresponsive. Only when your{' '}
+                            <Link
+                              href={`/org/${slug}/usage`}
+                              className="text-green-900 transition hover:text-green-1000"
+                            >
+                              included usage
+                            </Link>{' '}
+                            is exceeded will you be charged for any additional usage.
+                          </>
+                        }
+                      />
+                    </>
                   ) : (
                     <p className="text-sm text-foreground-light">
                       If you need to go beyond the included quota, simply switch off your spend cap
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx
index 2c52ed8cc0b..2b8c6a68239 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx
@@ -151,8 +151,8 @@ export const ExitSurveyModal = ({ visible, projects, onClose }: ExitSurveyModalP
           </div>
           {hasProjectsWithComputeDowngrade && (
             <Admonition
-              layout="horizontal"
               type="warning"
+              layout="horizontal"
               title={`${projectsWithComputeDowngrade.length} of your projects will be restarted upon clicking confirm,`}
               description={
                 <>
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
index c24380673ed..30817aa61a7 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
@@ -1,8 +1,8 @@
 import { PermissionAction, SupportCategories } from '@supabase/shared-types/out/constants'
 import { useFlag, useParams } from 'common'
 import Link from 'next/link'
-import { Alert, Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { ProjectUpdateDisabledTooltip } from '../ProjectUpdateDisabledTooltip'
@@ -95,22 +95,20 @@ const Subscription = () => {
                         </Button>
                       </ProjectUpdateDisabledTooltip>
                     ) : projectUpdateDisabled ? (
-                      <Alert
-                        className="mt-2"
-                        withIcon
-                        variant="info"
+                      <Admonition
+                        type="default"
+                        layout="horizontal"
                         title={`Unable to update plan from ${planName}`}
-                      >
-                        We have temporarily disabled project and subscription changes - our
-                        engineers are working on a fix.
-                      </Alert>
+                        description="We have temporarily disabled project and subscription changes - our
+                          engineers are working on a fix."
+                      />
                     ) : (
-                      <Alert
-                        withIcon
-                        className="mt-2"
-                        variant="info"
+                      <Admonition
+                        type="default"
+                        layout="horizontal"
                         title={`Unable to update plan from ${planName}`}
-                        actions={[
+                        description="Please contact us if you'd like to change your plan."
+                        actions={
                           <Button asChild key="contact-support" type="default">
                             <SupportLink
                               queryParams={{
@@ -120,11 +118,9 @@ const Subscription = () => {
                             >
                               Contact support
                             </SupportLink>
-                          </Button>,
-                        ]}
-                      >
-                        Please contact us if you'd like to change your plan.
-                      </Alert>
+                          </Button>
+                        }
+                      />
                     )}
                   </div>
 
diff --git a/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
index 3c79ccdba71..1a78a50ab25 100644
--- a/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
@@ -5,7 +5,6 @@ import { Download, Loader2 } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 import {
-  Alert,
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -23,14 +22,15 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+import { FormLayout } from 'ui-patterns/form/Layout/FormLayout'
 import {
   PageSection,
   PageSectionContent,
   PageSectionMeta,
   PageSectionSummary,
   PageSectionTitle,
-} from 'ui-patterns'
-import { FormLayout } from 'ui-patterns/form/Layout/FormLayout'
+} from 'ui-patterns/PageSection'
 
 import { SupportLink } from '@/components/interfaces/Support/SupportLink'
 import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
@@ -186,15 +186,18 @@ export const SSLConfiguration = () => {
               </AlertDialog>
             </FormLayout>
             {isSuccess && !sslEnforcementConfiguration?.appliedSuccessfully && (
-              <Alert
-                withIcon
-                variant="warning"
+              <Admonition
+                type="warning"
+                layout="horizontal"
                 title="SSL enforcement was not updated successfully"
-              >
-                Please try updating again, or contact{' '}
-                <SupportLink className={InlineLinkClassName}>support</SupportLink> if this error
-                persists
-              </Alert>
+                description={
+                  <>
+                    Please try updating again, or contact{' '}
+                    <SupportLink className={InlineLinkClassName}>support</SupportLink> if this error
+                    persists
+                  </>
+                }
+              />
             )}
           </CardContent>
           <CardContent>
diff --git a/apps/studio/components/interfaces/Storage/StorageBucketsError.tsx b/apps/studio/components/interfaces/Storage/StorageBucketsError.tsx
index 0a113519f26..7b27228196c 100644
--- a/apps/studio/components/interfaces/Storage/StorageBucketsError.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageBucketsError.tsx
@@ -1,6 +1,7 @@
 import { SupportCategories } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
-import { Alert, Button } from 'ui'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 
 import { SupportLink } from '../Support/SupportLink'
 import type { ResponseError } from '@/types'
@@ -15,11 +16,19 @@ const StorageBucketsError = ({ error }: StorageBucketsErrorProps) => {
   return (
     <div className="storage-container flex items-center justify-center grow">
       <div>
-        <Alert
-          withIcon
-          variant="warning"
+        <Admonition
+          type="warning"
+          layout="horizontal"
           title="Failed to fetch buckets"
-          actions={[
+          description={
+            <>
+              <p className="mb-1">
+                Please try refreshing your browser, or contact support if the issue persists
+              </p>
+              <p>Error: {(error as any)?.message ?? 'Unknown'}</p>
+            </>
+          }
+          actions={
             <Button key="contact-support" asChild type="default" className="ml-4">
               <SupportLink
                 queryParams={{
@@ -30,14 +39,9 @@ const StorageBucketsError = ({ error }: StorageBucketsErrorProps) => {
               >
                 Contact support
               </SupportLink>
-            </Button>,
-          ]}
-        >
-          <p className="mb-1">
-            Please try refreshing your browser, or contact support if the issue persists
-          </p>
-          <p>Error: {(error as any)?.message ?? 'Unknown'}</p>
-        </Alert>
+            </Button>
+          }
+        />
       </div>
     </div>
   )
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/RLSDisableModal.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/RLSDisableModal.tsx
index c5c4680fad3..deba5b3c1e0 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/RLSDisableModal.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/RLSDisableModal.tsx
@@ -1,5 +1,5 @@
 import { AlertOctagon, Lock, ShieldOff } from 'lucide-react'
-import { Alert } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 
 import { DocsButton } from '@/components/ui/DocsButton'
 import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
@@ -11,14 +11,11 @@ export function RLSDisableModalContent() {
   return (
     <div className="text-sm text-foreground-light grid gap-4">
       <div className="grid gap-1">
-        <Alert
-          variant="warning"
-          className="px-4! py-3!"
-          title="This table will be publicly readable and writable"
-          withIcon
-        >
-          <p>Anyone can edit or delete data in this table.</p>
-        </Alert>
+        <Admonition
+          type="warning"
+          layout="horizontal"
+          description="This table will be publicly readable and writable. Anyone can edit or delete data in this table."
+        />
         <ul className="mt-4 space-y-5">
           <li className="flex gap-3">
             <AlertOctagon size={14} />
diff --git a/apps/studio/components/to-be-cleaned/AlphaPreview.tsx b/apps/studio/components/to-be-cleaned/AlphaPreview.tsx
deleted file mode 100644
index 51f47dc1604..00000000000
--- a/apps/studio/components/to-be-cleaned/AlphaPreview.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Alert } from 'ui'
-
-const AlphaPreview = () => {
-  return (
-    <Alert title="Alpha preview" withIcon variant="warning">
-      This is not suitable for production
-    </Alert>
-  )
-}
-
-export default AlphaPreview
diff --git a/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx b/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
index 1ec16ac058d..f1032a86d13 100644
--- a/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
+++ b/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
@@ -3,7 +3,6 @@ import { ChangeEvent, useEffect, useState } from 'react'
 import { AWS_REGIONS } from 'shared-data'
 import { toast } from 'sonner'
 import {
-  Alert,
   Button,
   Checkbox,
   Input,
@@ -13,6 +12,7 @@ import {
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
 } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { isVercelUrl } from '@/components/interfaces/Integrations/Vercel/VercelIntegration.utils'
@@ -53,11 +53,12 @@ const VercelIntegration: NextPageWithLayout = () => {
             />
           </header>
           <CreateProject />
-          <Alert withIcon variant="info" title="You can uninstall this Integration at any time.">
-            <Markdown
-              content={`You can remove this integration at any time via Vercel or the Supabase dashboard.`}
-            />
-          </Alert>
+          <Admonition
+            type="default"
+            layout="horizontal"
+            title="You can uninstall this Integration at any time."
+            description="You can remove this integration at any time via Vercel or the Supabase dashboard"
+          />
         </ScaffoldColumn>
       </ScaffoldContainer>
     </>
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 40befcc14fe..b0b625d5fd2 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -6,7 +6,6 @@ export * from './src/components/Icon/IconBackground'
 // DISPLAYS
 
 export * from './src/components/Tabs'
-export * from './src/components/Alert'
 export * from './src/components/Accordion'
 export * from './src/components/Collapsible'
 
diff --git a/packages/ui/src/components/Alert/Alert.module.css b/packages/ui/src/components/Alert/Alert.module.css
deleted file mode 100644
index f42ba7f333e..00000000000
--- a/packages/ui/src/components/Alert/Alert.module.css
+++ /dev/null
@@ -1,63 +0,0 @@
-/* .sbui-alert-container {
-  @apply rounded-md p-4;
-}
-
-.sbui-alert-container--danger {
-  @apply bg-red-600/10 text-red-600;
-}
-
-.sbui-alert-container--warning {
-  @apply bg-yellow-600/10 text-yellow-600;
-}
-
-.sbui-alert-container--info {
-  @apply bg-blue-600/10 text-blue-600;
-}
-
-.sbui-alert-container--success {
-  @apply bg-green-600/10 text-green-600;
-} */
-
-/* .sbui-alert-title {
-  @apply m-0 text-sm font-medium;
-}
-
-.sbui-alert-description {
-  @apply mt-2 text-sm;
-}
-
-.sbui-alert-description--danger {
-  @apply text-red-500;
-}
-
-.sbui-alert-description--warning {
-  @apply text-yellow-500;
-}
-
-.sbui-alert-description--info {
-  @apply text-blue-500;
-}
-
-.sbui-alert-description--success {
-  @apply text-green-500;
-}
-
-.sbui-close-button {
-  @apply cursor-pointer inline-flex transition ease-in-out duration-200 bg-transparent border-transparent rounded-md p-1.5 focus:outline-hidden;
-}
-
-.sbui-close-button--success {
-  @apply text-green-500 hover:bg-green-600 hover:bg-green-600/10;
-}
-
-.sbui-close-button--danger {
-  @apply text-red-500 hover:bg-red-600 hover:bg-red-600/10;
-}
-
-.sbui-close-button--warning {
-  @apply text-yellow-500 hover:bg-yellow-600 hover:bg-yellow-600/10;
-}
-
-.sbui-close-button--info {
-  @apply text-blue-500 hover:bg-blue-600 hover:bg-blue-600/10;
-} */
diff --git a/packages/ui/src/components/Alert/Alert.test.tsx b/packages/ui/src/components/Alert/Alert.test.tsx
deleted file mode 100644
index 9def28fde71..00000000000
--- a/packages/ui/src/components/Alert/Alert.test.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import defaultTheme from '../../lib/theme/defaultTheme'
-import { Alert, AlertVariant } from './Alert'
-
-const VARIANTS: AlertVariant[] = ['success', 'danger', 'warning', 'info', 'neutral']
-
-describe('#Alert', () => {
-  it('should render title and description', () => {
-    render(<Alert title="Required Title">Description</Alert>)
-
-    expect(screen.queryByText('Required Title')).toBeInTheDocument()
-    expect(screen.queryByText('Description')).toBeInTheDocument()
-  })
-
-  it('should add custom classes to container div', () => {
-    const className = 'custom classes'
-
-    const { container } = render(
-      <Alert title="Required Title" className={className}>
-        Description
-      </Alert>
-    )
-    const alert = container.querySelector('div')
-
-    expect(alert?.className).toStrictEqual(expect.stringContaining(className))
-  })
-
-  it('should close alert when close button clicked', () => {
-    render(
-      <Alert title="Required Title" closable>
-        Description
-      </Alert>
-    )
-
-    const closeButton = screen.getByRole('button')
-    fireEvent.click(closeButton)
-
-    expect(screen.queryByText('Description')).not.toBeInTheDocument()
-  })
-
-  describe('when withIcon is true', () => {
-    describe("when variant is not 'neutral'", () => {
-      it('should render an icon', () => {
-        const { container } = render(
-          <Alert title="Required Title" withIcon={true} variant="danger">
-            Description
-          </Alert>
-        )
-
-        expect(container.querySelector('svg')).toBeInTheDocument()
-      })
-    })
-
-    describe("when variant is 'neutral'", () => {
-      it('should not render an icon', () => {
-        const { container } = render(
-          <Alert title="Required Title" withIcon={true} variant="neutral">
-            Description
-          </Alert>
-        )
-
-        expect(container.querySelector('svg')).toBeNull()
-      })
-    })
-  })
-
-  describe('when withIcon is false', () => {
-    it('should not render an icon', () => {
-      const { container } = render(
-        <Alert title="Required Title" withIcon={false} variant="danger">
-          Description
-        </Alert>
-      )
-
-      expect(container.querySelector('svg')).toBeNull()
-    })
-  })
-
-  it.each(VARIANTS)('should have class %p from theme', (variant) => {
-    const expected = defaultTheme.alert.variant[variant].base
-    const { container } = render(
-      <Alert title="Required Title" variant={variant}>
-        Description
-      </Alert>
-    )
-    const alert = container.querySelector('div')
-
-    expect(alert?.className).toStrictEqual(expect.stringContaining(expected))
-  })
-})
diff --git a/packages/ui/src/components/Alert/Alert.tsx b/packages/ui/src/components/Alert/Alert.tsx
deleted file mode 100644
index 0d29e9a7bfb..00000000000
--- a/packages/ui/src/components/Alert/Alert.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-'use client'
-
-import { AlertOctagon, AlertTriangle, CheckCircle, Info, X } from 'lucide-react'
-import React, { useState } from 'react'
-
-import styleHandler from '../../lib/theme/styleHandler'
-
-export interface AlertProps {
-  variant?: AlertVariant
-  className?: string
-  title: string | React.ReactNode
-  withIcon?: boolean
-  closable?: boolean
-  children?: React.ReactNode
-  icon?: React.ReactNode
-  actions?: React.ReactNode
-}
-
-export type AlertVariant = 'success' | 'danger' | 'warning' | 'info' | 'neutral'
-
-const icons: Record<AlertVariant, React.ReactElement> = {
-  danger: <AlertOctagon strokeWidth={1.5} size={18} />,
-  success: <CheckCircle strokeWidth={1.5} size={18} />,
-  warning: <AlertTriangle strokeWidth={1.5} size={18} />,
-  info: <Info strokeWidth={1.5} size={18} />,
-  neutral: <></>,
-}
-
-/**
- * @deprecated Use `import { Alert_Shadcn_ } from "ui"` instead. For studio use `Admonition`
- */
-export function Alert({
-  variant = 'neutral',
-  className,
-  title,
-  withIcon,
-  closable,
-  children,
-  icon,
-  actions,
-}: AlertProps) {
-  let __styles = styleHandler('alert')
-
-  const [visible, setVisible] = useState(true)
-
-  let containerClasses = [__styles.base]
-  containerClasses.push(__styles.variant[variant].base)
-
-  if (className) containerClasses.push(className)
-
-  let descriptionClasses = [__styles.description, __styles.variant[variant].description]
-  let closeButtonClasses = [__styles.close]
-
-  return (
-    <>
-      {visible && (
-        <div className={containerClasses.join(' ')}>
-          {withIcon ? (
-            <div className={__styles.variant[variant].icon}>{withIcon && icons[variant]}</div>
-          ) : null}
-          {icon && icon}
-          <div className="flex flex-1 items-center justify-between">
-            <div>
-              <h3 className={[__styles.variant[variant].header, __styles.header].join(' ')}>
-                {title}
-              </h3>
-              <div className={descriptionClasses.join(' ')}>{children}</div>
-            </div>
-            {actions}
-          </div>
-          {closable && (
-            <button
-              aria-label="Close alert"
-              onClick={() => setVisible(false)}
-              className={closeButtonClasses.join(' ')}
-            >
-              <X strokeWidth={2} size={16} />
-            </button>
-          )}
-        </div>
-      )}
-    </>
-  )
-}
diff --git a/packages/ui/src/components/Alert/index.tsx b/packages/ui/src/components/Alert/index.tsx
deleted file mode 100644
index 1d5a733b147..00000000000
--- a/packages/ui/src/components/Alert/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Alert'
diff --git a/packages/ui/src/lib/theme/defaultTheme.ts b/packages/ui/src/lib/theme/defaultTheme.ts
index 17948b2a865..8b7f12808ec 100644
--- a/packages/ui/src/lib/theme/defaultTheme.ts
+++ b/packages/ui/src/lib/theme/defaultTheme.ts
@@ -206,60 +206,6 @@ export default {
     },
   },
 
-  /*
-   * Alert
-   *
-   */
-
-  alert: {
-    base: `
-      relative rounded-md border py-4 px-6
-      flex space-x-4 items-start
-    `,
-    header: 'block text-sm font-normal mb-1',
-    description: `text-xs`,
-    variant: {
-      danger: {
-        base: `bg-red-200 text-red-1200 border-red-700`,
-        icon: `text-red-900`,
-        header: `text-red-1200`,
-        description: `text-red-1100`,
-      },
-      warning: {
-        base: `bg-amber-200 border-amber-700`,
-        icon: `text-amber-900`,
-        header: `text-amber-1200`,
-        description: `text-amber-1100`,
-      },
-      info: {
-        base: `bg-alternative border`,
-        icon: `text-foreground-lighter`,
-        header: `text-foreground`,
-        description: `text-foreground-light`,
-      },
-      success: {
-        base: `bg-brand-300 border-brand-400`,
-        icon: `text-brand`,
-        header: `text-brand-600`,
-        description: `text-brand-600`,
-      },
-      neutral: {
-        base: `bg-surface-100 border-default`,
-        icon: `text-foreground-muted`,
-        header: `text-foreground`,
-        description: `text-foreground-light`,
-      },
-    },
-    close: `
-      absolute
-      right-6 top-4
-      p-0 m-0
-      text-foreground-muted
-      cursor-pointer transition ease-in-out
-      bg-transparent border-transparent focus:outline-hidden
-      opacity-50 hover:opacity-100`,
-  },
-
   /*
    * Card
    */