diff --git a/apps/docs/docs/ref/self-hosting-analytics/introduction.mdx b/apps/docs/docs/ref/self-hosting-analytics/introduction.mdx
index 73005d3edfc..52d62115deb 100644
--- a/apps/docs/docs/ref/self-hosting-analytics/introduction.mdx
+++ b/apps/docs/docs/ref/self-hosting-analytics/introduction.mdx
@@ -19,7 +19,7 @@ The Supabase Analytics server is a Logflare self-hostable instance that manages
 When self-hosting the Analytics server, the full logging experience matching that of the Supabase Platform is available in the Studio instance, allowing for an integrated and enhanced development experience.
 However, it's important to note that certain [differences](#differences) may arise due to the platform's infrastructure.
 
-<Admonition type="info" label="Logflare Technical Docs">
+<Admonition type="note" label="Logflare Technical Docs">
 
 All Logflare technical documentation is available at https://docs.logflare.app.
 
diff --git a/apps/docs/docs/ref/self-hosting-functions/introduction.mdx b/apps/docs/docs/ref/self-hosting-functions/introduction.mdx
index 80975270f02..9bc0dceb654 100644
--- a/apps/docs/docs/ref/self-hosting-functions/introduction.mdx
+++ b/apps/docs/docs/ref/self-hosting-functions/introduction.mdx
@@ -21,7 +21,7 @@ You can use it to:
 - Locally test and self-host Supabase's Edge Functions (or any Deno Edge Function)
 - As a programmable HTTP Proxy: You can intercept / route HTTP requests
 
-<Admonition type="info" label="Beta Version">
+<Admonition type="note" label="Beta Version">
 
 Self hosted Edge functions are in beta. There will be breaking changes to APIs / Configuration Options.
 
diff --git a/apps/docs/lib/mdx/plugins/remarkAdmonition.ts b/apps/docs/lib/mdx/plugins/remarkAdmonition.ts
index 33b8110dfa0..79fee5702aa 100644
--- a/apps/docs/lib/mdx/plugins/remarkAdmonition.ts
+++ b/apps/docs/lib/mdx/plugins/remarkAdmonition.ts
@@ -109,7 +109,7 @@ function mapAdmonitionType(type: string): AdmonitionProps['type'] {
     case 'question':
     case 'info':
     default:
-      return 'info'
+      return 'note'
   }
 }
 
diff --git a/apps/docs/pages/guides/ai/hugging-face.mdx b/apps/docs/pages/guides/ai/hugging-face.mdx
index ef076440a05..dc77e055c39 100644
--- a/apps/docs/pages/guides/ai/hugging-face.mdx
+++ b/apps/docs/pages/guides/ai/hugging-face.mdx
@@ -57,7 +57,7 @@ Name your token based on the app its being used for and the environment. For exa
 
 Since we will be using this token for the inference API, choose the `read` role.
 
-<Admonition type="info">
+<Admonition type="note">
 
 Though it is possible to use the Hugging Face inference API today without an access token, [you may be rate limited](https://huggingface.co/docs/huggingface.js/inference/README#usage).
 
@@ -69,7 +69,7 @@ To ensure you don't experience any unexpected downtime or errors, we recommend c
 
 Edge Functions are server-side TypeScript functions that run on-demand. Since Edge Functions run on a server, you can safely give them access to your Hugging Face access token.
 
-<Admonition type="info">
+<Admonition type="note">
 
 You will need the `supabase` CLI [installed](/docs/guides/cli) for the following commands to work.
 
@@ -136,7 +136,7 @@ supabase functions serve --env-file .env.local --no-verify-jwt
 
 Remember to pass in the `.env.local` file using the `--env-file` parameter so that the Edge Function can access the `HUGGING_FACE_ACCESS_TOKEN`.
 
-<Admonition type="info">
+<Admonition type="note">
 
 For demo purposes we set `--no-verify-jwt` to make it easy to test the Edge Function without passing in a JWT token. In a real application you will need to pass the JWT as a `Bearer` token in the `Authorization` header.
 
diff --git a/apps/docs/pages/guides/auth/auth-email.mdx b/apps/docs/pages/guides/auth/auth-email.mdx
index 1acab83572a..f6cb45692c9 100644
--- a/apps/docs/pages/guides/auth/auth-email.mdx
+++ b/apps/docs/pages/guides/auth/auth-email.mdx
@@ -12,7 +12,7 @@ Set up Email Logins for your Supabase application.
 - Configure the Site URL and any additional redirect URLs in the [authentication management tab](/dashboard/project/_/auth/url-configuration).
 - The Site URL represents the default URL that the user will be redirected to after clicking on the email signup confirmation link.
 
-<Admonition type="info" label="Self hosting">
+<Admonition type="note" label="Self hosting">
 
 For self-hosting, you can update your project configuration using the files and environment variables provided.
 
diff --git a/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx b/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
index e496b224e2a..9addce53a5f 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
@@ -161,7 +161,7 @@ const App = () => (
 )
 ```
 
-<Admonition type="info">
+<Admonition type="note">
 
 Currently there is only one predefined theme available, but we plan to add more.
 
diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
index 97d52c3dad4..f8af0c03171 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
@@ -721,7 +721,7 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
 </TabPanel>
 </Tabs>
 
-<Admonition type="info">
+<Admonition type="note">
 
 Check out the [Next.js auth example repo](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs) for more examples, including [realtime subscriptions](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/realtime-posts.tsx).
 
@@ -802,7 +802,7 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
 </TabPanel>
 </Tabs>
 
-<Admonition type="info">
+<Admonition type="note">
 
 Check out the [Next.js auth example repo](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs) for more examples, including redirecting unauthenticated users - [protected pages](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/[id]/page.tsx).
 
diff --git a/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx b/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
index c28ab08a07b..9ca4d096366 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
@@ -122,7 +122,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 </TabPanel>
 </Tabs>
 
-<Admonition type="info">
+<Admonition type="note">
 
 Note that we are specifying filterSerializedResponseHeaders here. We need to tell SvelteKit that supabase needs the content-range header.
 
@@ -209,7 +209,7 @@ declare global {
 
 Authentication can be initiated [client](/docs/guides/auth/auth-helpers/sveltekit#client-side) or [server-side](/docs/guides/auth/auth-helpers/sveltekit#server-side). All of the [supabase-js authentication strategies](/docs/reference/javascript/auth-api) are supported with the Auth Helpers client.
 
-<Admonition type="info">
+<Admonition type="note">
 
 Note: The authentication flow requires the [Code Exchange Route](/docs/guides/auth/auth-helpers/sveltekit#code-exchange-route) to exchange a `code` for the user's `session`.
 
@@ -318,7 +318,7 @@ export const load = async ({ fetch, data, depends }) => {
 }
 ```
 
-<Admonition type="info">
+<Admonition type="note">
 
 TypeScript types can be [generated with the Supabase CLI](https://supabase.com/docs/reference/javascript/typescript-support) and passed to `createSupabaseLoadClient` to add type support to the Supabase client.
 
diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx
index 12516dae018..98b16a07138 100644
--- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx
+++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx
@@ -114,7 +114,7 @@ Note: for "Twilio Message Service SID" you can use the Sender Phone Number gener
 
 Now the backend should be setup, we can proceed to add our client-side code!
 
-<Admonition type="info">
+<Admonition type="note">
   The `Twilio Content SID` field is specific to Twilio Programmable Messaging (WhatsApp) senders.
   Disregard this field if you are only sending SMS messages. Refer to the section on WhatsApp OTP
   Logins for further details.
diff --git a/apps/docs/pages/guides/auth/server-side-rendering.mdx b/apps/docs/pages/guides/auth/server-side-rendering.mdx
index 566cbfedffb..0cf7a39608f 100644
--- a/apps/docs/pages/guides/auth/server-side-rendering.mdx
+++ b/apps/docs/pages/guides/auth/server-side-rendering.mdx
@@ -65,7 +65,7 @@ Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The
 
         The client libraries are designed to listen for this type of URL, extract the access token, refresh token and some extra information from it, and finally persist it in local storage for further use by the library and your app.
 
-        <Admonition type="info">
+        <Admonition type="note">
 
         Web browsers do not send the URL fragment to the server they're making the request to. Since you may not be hosting the single-page app on a server under your direct control (such as on GitHub Pages or other freemium hosting providers), we want to prevent hosting services from getting access to your user's authorization credentials by default.
         
@@ -87,7 +87,7 @@ Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The
         ```
         The `code` parameter is commonly known as the Auth Code and can be exchanged for an access token by calling `exchangeCodeForSession(code)`.
 
-        <Admonition type="info">
+        <Admonition type="note">
 
         For security purposes, the code has a validity of 5 minutes and can only be exchanged for an access token once. You will need to restart the authentication flow from scratch if you wish to obtain a new access token.
         
diff --git a/apps/docs/pages/guides/platform/database-size.mdx b/apps/docs/pages/guides/platform/database-size.mdx
index 1f1dd324127..503bb3c79ae 100644
--- a/apps/docs/pages/guides/platform/database-size.mdx
+++ b/apps/docs/pages/guides/platform/database-size.mdx
@@ -63,7 +63,7 @@ Disk Storage expands automatically when the database reaches 90% of the disk siz
 
 The Disk Storage Size can also be manually expanded on the [Database settings page](https://supabase.com/dashboard/project/_/settings/database). The maximum default you can expand the Disk Storage to is 200GB. If you wish to manually expand it to any more than 200GB, please [contact us](https://supabase.com/dashboard/support/new) to discuss expanding the 200GB limit.
 
-<Admonition type="info">
+<Admonition type="note">
 
 You may want to import a lot of data into your database which requires multiple disk expansions; for example, uploading more than 1.5x the current size of your database storage will put your database into [read-only mode](#read-only-mode). If so, it is highly recommended you increase the Disk Storage Size manually on the [Database settings page](https://supabase.com/dashboard/project/_/settings/database).
 
@@ -71,7 +71,7 @@ Due to provider restrictions, disk expansions can occur only once every six hour
 
 </Admonition>
 
-<Admonition type="info">
+<Admonition type="note">
 
 A Supabase (or Postgres) update will "right-size" your disk based on the current size of the database. For example, if your database is 100GB in size, and you have a 200GB disk, a Supabase update will reduce the disk size to 120GB (1.2x the size of your database).
 
diff --git a/packages/ui/src/components/Admonition/index.tsx b/packages/ui/src/components/Admonition/index.tsx
index 869cf845791..6e47c324176 100644
--- a/packages/ui/src/components/Admonition/index.tsx
+++ b/packages/ui/src/components/Admonition/index.tsx
@@ -1,52 +1,36 @@
 import { PropsWithChildren } from 'react'
-import { IconAlertTriangle, IconHelpCircle, IconInfo } from 'ui'
-
+import { Alert, AlertVariant } from '../Alert'
 export interface AdmonitionProps {
-  type: 'note' | 'tip' | 'info' | 'caution' | 'danger'
+  type: 'note' | 'tip' | 'caution' | 'danger' | 'deprecation'
   label?: string
 }
 
+const admonitionToAlertMapping: Record<AdmonitionProps['type'], AlertVariant> = {
+  note: 'info',
+  tip: 'info',
+  caution: 'warning',
+  danger: 'danger',
+  deprecation: 'warning',
+}
+
 export const Admonition = ({
   type = 'note',
   label,
   children,
 }: PropsWithChildren<AdmonitionProps>) => {
   return (
-    <div
-      className={[
-        'shadow p-4 rounded border-l-[5px] space-y-2 my-4',
-        `${
-          type === 'note'
-            ? 'bg-surface-200 border-stronger'
-            : type === 'info'
-            ? 'bg-surface-300 border-stronger'
-            : type === 'tip'
-            ? 'bg-brand-300 border-brand-300'
-            : type === 'caution'
-            ? 'bg-yellow-400 border-yellow-800'
-            : type === 'danger'
-            ? 'bg-red-500 border-red-800'
-            : 'bg-surface-300 border-stronger'
-        }`,
-      ].join(' ')}
+    <Alert
+      className="not-prose"
+      variant={admonitionToAlertMapping[type]}
+      title={
+        <span className="flex gap-2">
+          <span className="uppercase">{`${type}${label ? ':' : ''}`}</span>
+          {label}
+        </span>
+      }
+      withIcon
     >
-      <div className="flex items-center space-x-2">
-        {type === 'note' ? (
-          <IconInfo className="text-foreground" size={18} strokeWidth={1.5} />
-        ) : type === 'info' ? (
-          <IconInfo className="text-foreground" size={18} strokeWidth={1.5} />
-        ) : type === 'tip' ? (
-          <IconHelpCircle className="text-foreground" size={18} strokeWidth={1.5} />
-        ) : type === 'caution' ? (
-          <IconAlertTriangle className="text-foreground" size={18} strokeWidth={1.5} />
-        ) : type === 'danger' ? (
-          <IconAlertTriangle className="text-foreground" size={18} strokeWidth={1.5} />
-        ) : (
-          <IconInfo className="text-foreground" size={18} strokeWidth={1.5} />
-        )}
-        <p className="text-sm text-foreground uppercase my-0 font-bold">{label || type}</p>
-      </div>
-      <div className="admonition-content text-foreground text-base space-y-1">{children}</div>
-    </div>
+      {children}
+    </Alert>
   )
 }