diff --git a/src/lib/components/fakeModal.svelte b/src/lib/components/fakeModal.svelte
index 13a40cb2d..7de186864 100644
--- a/src/lib/components/fakeModal.svelte
+++ b/src/lib/components/fakeModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
     import Form from '$lib/elements/forms/form.svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -112,14 +112,14 @@
                 <div class="modal-content">
                     <div class="modal-content-spacer u-flex-vertical u-gap-24 u-width-full-line">
                         {#if error}
-                            <Alert
+                            <Alert.Inline
+                                status="warning"
                                 dismissible
-                                type="warning"
                                 on:dismiss={() => {
                                     error = null;
                                 }}>
                                 {error}
-                            </Alert>
+                            </Alert.Inline>
                         {/if}
                         <slot />
                     </div>
diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index 83654a708..df92d9894 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { Alert, DropList } from '$lib/components';
+    import { DropList } from '$lib/components';
     import { BillingPlan } from '$lib/constants';
     import { Link, Pill } from '$lib/elements';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import {
         checkForProjectLimitation,
         checkForUsageFees,
@@ -95,16 +96,16 @@
     {#if services.length}
         <slot name="alert" {limit} {tier} {title} {upgradeMethod} {hasUsageFees} {services}>
             {#if $organization?.billingPlan !== BillingPlan.FREE && hasUsageFees}
-                <Alert type="info" isStandalone>
+                <Alert.Inline status="info">
                     <span class="text">
                         You've reached the {services} limit for the {tier} plan.
                         <Link on:mousedown={() => ($showUsageRatesModal = true)}
                             >Excess usage fees will apply</Link
                         >.
                     </span>
-                </Alert>
+                </Alert.Inline>
             {:else}
-                <Alert type={alertType} isStandalone>
+                <Alert.Inline status={alertType === 'default' ? 'info' : alertType}>
                     <span class="text">
                         You've reached the {services} limit for the {tier} plan. <Link
                             href={$upgradeURL}
@@ -112,7 +113,7 @@
                             eventData={{ from: 'event', source: 'inline_alert' }}>Upgrade</Link> your
                         organization for additional resources.
                     </span>
-                </Alert>
+                </Alert.Inline>
             {/if}
         </slot>
     {/if}
diff --git a/src/routes/(console)/organization-[organization]/settings/deleteOrganizationEstimation.svelte b/src/routes/(console)/organization-[organization]/settings/deleteOrganizationEstimation.svelte
index e96fe0295..e521985a5 100644
--- a/src/routes/(console)/organization-[organization]/settings/deleteOrganizationEstimation.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/deleteOrganizationEstimation.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import type { EstimationDeleteOrganization } from '$lib/sdk/billing';
     import InvoicesTable from './invoicesTable.svelte';
     export let estimation: EstimationDeleteOrganization;
@@ -7,10 +7,10 @@
 
 {#if estimation}
     {#if estimation.unpaidInvoices?.length > 0}
-        <Alert type="warning">
+        <Alert.Inline status="warning">
             This organization has unresolved invoices that must be settled before it can be deleted.
             Please review and resolve these invoices to proceed.
-        </Alert>
+        </Alert.Inline>
 
         <InvoicesTable invoices={estimation.unpaidInvoices} showActions={false} />
     {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
index e131ce7ad..bf44759f1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -3,7 +3,8 @@
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert, Confirm, Id } from '$lib/components';
+    import { Confirm, Id } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { Dependencies } from '$lib/constants';
     import { Button as ConsoleButton, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -343,7 +344,8 @@
                 {/each}
             </Table.Root>
             <div class="u-flex u-flex-vertical u-gap-16">
-                <Alert>To change the selection edit the relationship settings.</Alert>
+                <Alert.Inline status="info"
+                    >To change the selection edit the relationship settings.</Alert.Inline>
 
                 <ul>
                     <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
index fb956a65f..b840c9266 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte
@@ -13,7 +13,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
     import { invalidate } from '$app/navigation';
-    import { Alert } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import UpdateRepository from './updateRepository.svelte';
@@ -55,8 +55,8 @@
 
 <Container>
     {#if data.function.version === 'v2' && showAlert}
-        <Alert
-            type="warning"
+        <Alert.Inline
+            status="warning"
             dismissible
             class="u-margin-block-start-24"
             on:dismiss={() => (showAlert = false)}>
@@ -69,7 +69,7 @@
                 rel="noopener noreferrer"
                 class="link">documentation</a
             >.
-            <svelte:fragment slot="buttons">
+            <svelte:fragment slot="actions">
                 <Button
                     on:click={() =>
                         trackEvent(Click.WebsiteOpenClick, {
@@ -83,7 +83,7 @@
                     Learn more
                 </Button>
             </svelte:fragment>
-        </Alert>
+        </Alert.Inline>
     {/if}
     <ExecuteFunction />
     <UpdateName />
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/importSiteVariablesModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/importSiteVariablesModal.svelte
index 16237068a..db776b05d 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/importSiteVariablesModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/importSiteVariablesModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import Alert from '$lib/components/alert.svelte';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
@@ -75,9 +75,9 @@
                 </Layout.Stack>
             </Upload.Dropzone>
             {#if variables?.length > 0}
-                <Alert type="info" dismissible>
+                <Alert.Inline status="info" dismissible>
                     This action can create and update variables but can not delete them.
-                </Alert>
+                </Alert.Inline>
             {/if}
         </Layout.Stack>
         <Selector.Checkbox
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
index 62bbb8c4b..2cd9ad4a5 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { Click, Submit, trackEvent } from '$lib/actions/analytics';
-    import { Alert, CardGrid } from '$lib/components';
+    import { CardGrid } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { BillingPlan } from '$lib/constants';
     import { Button, Form, InputNumber, InputSelect } from '$lib/elements/forms';
     import { humanFileSize, sizeToBytes } from '$lib/helpers/sizeConvertion';
@@ -45,7 +46,7 @@
         <svelte:fragment slot="aside">
             {#if isCloud}
                 {@const size = humanFileSize(sizeToBytes(service, 'MB', 1000))}
-                <Alert type="info">
+                <Alert.Inline status="info">
                     <p class="text">
                         The {currentPlan.name} plan has a maximum upload file size limit of {Math.floor(
                             parseInt(size.value)
@@ -54,7 +55,7 @@
                             Upgrade to allow files of a larger size.
                         {/if}
                     </p>
-                    <svelte:fragment slot="action">
+                    <svelte:fragment slot="actions">
                         {#if $organization?.billingPlan === BillingPlan.FREE}
                             <div class="alert-buttons u-flex">
                                 <Button
@@ -68,7 +69,7 @@
                             </div>
                         {/if}
                     </svelte:fragment>
-                </Alert>
+                </Alert.Inline>
             {/if}
             <InputNumber
                 required