diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index f08dee3da..9e4e11636 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -8,7 +8,8 @@
 </script>
 
 <script lang="ts">
-    import { Pill } from '$lib/elements';
+    import { Badge, Icon } from '@appwrite.io/pink-svelte';
+    import { IconCode, IconAndroid, IconFlutter, IconApple } from '@appwrite.io/pink-icons-svelte';
     import Prism from 'prismjs';
     import 'prismjs/components/prism-dart';
     import 'prismjs/components/prism-kotlin';
@@ -24,6 +25,21 @@
 
     export let label: string = null;
     export let labelIcon: 'code' | 'android' | 'flutter' | 'apple' = null;
+
+    function getIcon(iconName: string) {
+        switch (iconName) {
+            case 'code':
+                return IconCode;
+            case 'android':
+                return IconAndroid;
+            case 'flutter':
+                return IconFlutter;
+            case 'apple':
+                return IconApple;
+            default:
+                return null;
+        }
+    }
     export let code: string;
     export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml' | 'swift';
     export let withLineNumbers = false;
@@ -49,12 +65,11 @@
     <div
         class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}
-            <Pill>
+            <Badge variant="secondary" content={label}>
                 {#if labelIcon}
-                    <span class={`icon-${labelIcon}`} aria-hidden="true"></span>
+                    <Icon icon={getIcon(labelIcon)} size="s" slot="start" />
                 {/if}
-                {label}
-            </Pill>
+            </Badge>
         {/if}
         {#if withCopy}
             <Copy value={code}>
diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index db94a7142..b18b29f73 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
     import { Modal } from '$lib/components';
-    import { Pill } from '$lib/elements';
     import { createEventDispatcher } from 'svelte';
     import { at, empty } from '$lib/helpers/array';
     import { singular } from '$lib/helpers/string';
@@ -295,13 +294,12 @@
             <Typography.Text variant="m-500">Choose an attribute (optional)</Typography.Text>
             <Layout.Stack gap="s" wrap="wrap" direction="row">
                 {#each available.attributes as attribute}
-                    <Pill
+                    <Tag
                         disabled={showInput}
                         selected={selected.attribute === attribute}
-                        button
                         on:click={() => select('attribute', attribute)}>
                         {attribute}
-                    </Pill>
+                    </Tag>
                 {/each}
             </Layout.Stack>
         </Layout.Stack>
diff --git a/src/lib/elements/index.ts b/src/lib/elements/index.ts
index d534f5b4e..e87a1df87 100644
--- a/src/lib/elements/index.ts
+++ b/src/lib/elements/index.ts
@@ -1,4 +1,3 @@
-export { default as Pill } from './pill.svelte';
 export { default as SelectSearchItem } from './selectSearchItem.svelte';
 export { default as Flag } from './flag.svelte';
 export { default as SelectSearchCheckbox } from './selectSearchCheckbox.svelte';
diff --git a/src/lib/elements/pill.svelte b/src/lib/elements/pill.svelte
deleted file mode 100644
index 47dd471fa..000000000
--- a/src/lib/elements/pill.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-    import { trackEvent } from '$lib/actions/analytics';
-
-    export let disabled = false;
-    export let selected = false;
-    export let success = false;
-    export let warning = false;
-    export let danger = false;
-    export let info = false;
-    export let button = false;
-    export let submit = false;
-    export let external = false;
-    export let href: string = null;
-    export let event: string = null;
-    export let eventData: Record<string, unknown> = {};
-    export let style = '';
-    let classes = '';
-    export { classes as class };
-
-    function track() {
-        if (!event) {
-            return;
-        }
-
-        trackEvent(`click_${event}`, {
-            from: 'tag',
-            ...eventData
-        });
-    }
-</script>
-
-{#if href}
-    <a
-        {style}
-        {href}
-        target={external ? '_blank' : '_self'}
-        rel={external ? 'noopener noreferrer' : ''}
-        class="tag {classes}"
-        class:is-disabled={disabled}
-        class:is-selected={selected}
-        class:is-success={success}
-        class:is-warning={warning}
-        class:is-danger={danger}
-        class:is-info={info}>
-        <slot />
-    </a>
-{:else if button}
-    <button
-        on:click
-        on:click={track}
-        {style}
-        {disabled}
-        type={submit ? 'submit' : 'button'}
-        class="tag {classes}"
-        class:is-disabled={disabled}
-        class:is-selected={selected}
-        class:is-success={success}
-        class:is-warning={warning}
-        class:is-danger={danger}
-        class:is-info={info}>
-        <slot />
-    </button>
-{:else}
-    <div
-        class="tag {classes}"
-        {style}
-        class:is-disabled={disabled}
-        class:is-selected={selected}
-        class:is-success={success}
-        class:is-warning={warning}
-        class:is-danger={danger}
-        class:is-info={info}>
-        <slot />
-    </div>
-{/if}
-
-<style>
-    /* button and anchor tags seem to have special dimens, this should be auto fixed in pink2. */
-    :global(.tag):where(button, a) {
-        --p-tag-height: 2.125rem;
-        --p-tag-content-height: 2.024rem;
-    }
-</style>
diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index c33adf668..1e5a9fb95 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
     import { DropList } from '$lib/components';
     import { BillingPlan } from '$lib/constants';
-    import { Link, Pill } from '$lib/elements';
+    import { Link } from '$lib/elements';
+    import { Badge, Icon } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import { Alert } from '@appwrite.io/pink-svelte';
     import {
         checkForProjectLimitation,
@@ -125,13 +127,19 @@
         {#if isCloud && isLimited}
             <DropList bind:show={showDropdown} width="16">
                 {#if hasProjectLimitation}
-                    <Pill button on:click={() => (showDropdown = !showDropdown)}>
-                        <span class="icon-info"></span>{total}/{limit} created
-                    </Pill>
+                    <Badge
+                        variant="secondary"
+                        content={`${total}/${limit} created`}
+                        on:click={() => (showDropdown = !showDropdown)}>
+                        <Icon icon={IconInfo} size="s" slot="start" />
+                    </Badge>
                 {:else if $organization?.billingPlan !== BillingPlan.SCALE}
-                    <Pill button on:click={() => (showDropdown = !showDropdown)}>
-                        <span class="icon-info"></span>Limits applied
-                    </Pill>
+                    <Badge
+                        variant="secondary"
+                        content="Limits applied"
+                        on:click={() => (showDropdown = !showDropdown)}>
+                        <Icon icon={IconInfo} size="s" slot="start" />
+                    </Badge>
                 {/if}
                 <svelte:fragment slot="list">
                     <slot name="tooltip" {limit} {tier} {title} {upgradeMethod} {hasUsageFees}>
diff --git a/src/routes/(console)/account/organizations/+page.svelte b/src/routes/(console)/account/organizations/+page.svelte
index ff59cad50..a6e6197a9 100644
--- a/src/routes/(console)/account/organizations/+page.svelte
+++ b/src/routes/(console)/account/organizations/+page.svelte
@@ -13,7 +13,7 @@
     import { sdk } from '$lib/stores/sdk';
     import type { PageData } from './$types';
     import { isCloud } from '$lib/system';
-    import { Pill } from '$lib/elements';
+    import { Badge } from '@appwrite.io/pink-svelte';
     import type { Models } from '@appwrite.io/console';
     import type { Organization } from '$lib/stores/organization';
     import { daysLeftInTrial, plansInfo, tierToPlan } from '$lib/stores/billing';
@@ -75,8 +75,10 @@
                             {#if organization?.billingPlan === BillingPlan.FREE || organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
                                 <Tooltip>
                                     <div class="u-flex u-cross-center">
-                                        <Pill class="eyebrow-heading-3"
-                                            >{tierToPlan(organization?.billingPlan)?.name}</Pill>
+                                        <Badge
+                                            variant="secondary"
+                                            content={tierToPlan(organization?.billingPlan)?.name}
+                                            class="eyebrow-heading-3" />
                                     </div>
                                     <span slot="tooltip"
                                         >You are limited to 1 free organization per account</span>
@@ -85,7 +87,10 @@
                             {#if organization?.billingTrialStartDate && $daysLeftInTrial > 0 && organization.billingPlan !== BillingPlan.FREE && $plansInfo.get(organization.billingPlan)?.trialDays}
                                 <Tooltip>
                                     <div class="u-flex u-cross-center">
-                                        <Pill class="eyebrow-heading-3">TRIAL</Pill>
+                                        <Badge
+                                            class="eyebrow-heading-3"
+                                            variant="secondary"
+                                            content="TRIAL" />
                                     </div>
                                     <span slot="tooltip"
                                         >{`Your trial ends on ${toLocaleDate(
diff --git a/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte b/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
index 386a253f4..1bb41f4f2 100644
--- a/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
@@ -14,7 +14,7 @@
     import { BillingPlan } from '$lib/constants';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import { upgradeURL } from '$lib/stores/billing';
-    import { Pill } from '$lib/elements';
+
     import { Alert, Badge, Icon, Link, Table, Tooltip, Typography } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
@@ -152,7 +152,7 @@
                                 {#if credit.status === 'expired'}
                                     <Tooltip>
                                         <span>
-                                            <Pill>Expired</Pill>
+                                            <Badge variant="secondary" content="Expired" />
                                         </span>
                                         <span slot="tooltip"
                                             >{toLocaleDate(credit.expiration)}</span>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte
index 55116fda4..f39e39bca 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/sessions/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { EmptySearch } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { Badge } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import {
         TableBody,
@@ -77,7 +77,10 @@
                                     {session.osVersion}
                                 </p>
                                 {#if session.current}
-                                    <Pill success>current session</Pill>
+                                    <Badge
+                                        variant="secondary"
+                                        type="success"
+                                        content="current session" />
                                 {/if}
                             </div>
                         </TableCell>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/create.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/create.svelte
index 90cd57c6e..ec4ad5ff4 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/create.svelte
@@ -4,7 +4,8 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Modal, CustomId } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Pill } from '$lib/elements';
+    import { Badge, Icon } from '@appwrite.io/pink-svelte';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
     import { Button, InputText, InputSelect, InputPhone } from '$lib/elements/forms';
     import InputEmail from '$lib/elements/forms/inputEmail.svelte';
     import { addNotification } from '$lib/stores/notifications';
@@ -116,10 +117,12 @@
 
     {#if !showCustomId}
         <div>
-            <Pill button on:click={() => (showCustomId = !showCustomId)}
-                ><span class="icon-pencil" aria-hidden="true"></span><span class="text">
-                    Target ID
-                </span></Pill>
+            <Badge
+                variant="secondary"
+                content="Target ID"
+                on:click={() => (showCustomId = !showCustomId)}>
+                <Icon icon={IconPencil} size="s" slot="start" />
+            </Badge>
         </div>
     {:else}
         <CustomId bind:show={showCustomId} name="Target" bind:id autofocus={false} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte
index 9e529e857..9df266290 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/containerHeader.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { Pill } from '$lib/elements';
     import { DropList } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { IconInfo, IconPlus } from '@appwrite.io/pink-icons-svelte';
@@ -41,12 +40,12 @@
         {#if title === 'Policies' && policiesCreated >= maxPolicies}
             <div style:height="40px;" style:padding-block-start="4px">
                 <DropList bind:show={showDropdown} width="16">
-                    <Pill disabled={buttonDisabled} button on:click={() => (showDropdown = true)}>
-                        <Layout.Stack direction="row" gap="xs" alignItems="center" inline>
-                            <Icon icon={IconInfo} size="s" />
-                            {policiesCreated}/{maxPolicies} created
-                        </Layout.Stack>
-                    </Pill>
+                    <Badge
+                        variant="secondary"
+                        content={`${policiesCreated}/${maxPolicies} created`}
+                        on:click={() => (showDropdown = true)}>
+                        <Icon icon={IconInfo} size="s" slot="start" />
+                    </Badge>
                     <svelte:fragment slot="list">
                         <slot name="tooltip">
                             <span>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/grid.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/grid.svelte
index 822203307..d8a738eff 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/grid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/grid.svelte
@@ -2,7 +2,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { CardContainer, GridItem1, Id } from '$lib/components';
-    import { Pill } from '$lib/elements';
+    import { Badge } from '@appwrite.io/pink-svelte';
     import { canWriteCollections } from '$lib/stores/roles';
     import type { PageData } from './$types';
     export let data: PageData;
@@ -22,7 +22,7 @@
             <svelte:fragment slot="title">{collection.name}</svelte:fragment>
             <svelte:fragment slot="status">
                 {#if !collection.enabled}
-                    <Pill>disabled</Pill>
+                    <Badge variant="secondary" content="disabled" />
                 {/if}</svelte:fragment>
 
             <Id value={collection.$id}>{collection.$id}</Id>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte
index 5bea03bd1..bcb285001 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/wizard/provider.svelte
@@ -4,7 +4,8 @@
     import { CustomId, LabelCard } from '$lib/components';
     import { providers } from '../store';
     import { InputText } from '$lib/elements/forms';
-    import { Pill } from '$lib/elements';
+    import { Badge, Icon } from '@appwrite.io/pink-svelte';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
     import { Providers } from '../../provider.svelte';
     import { SmtpEncryption } from '@appwrite.io/console';
 
@@ -151,10 +152,12 @@
 
     {#if !showCustomId}
         <div>
-            <Pill button on:click={() => (showCustomId = !showCustomId)}
-                ><span class="icon-pencil" aria-hidden="true"></span><span class="text">
-                    Provider ID
-                </span></Pill>
+            <Badge
+                variant="secondary"
+                content="Provider ID"
+                on:click={() => (showCustomId = !showCustomId)}>
+                <Icon icon={IconPencil} size="s" slot="start" />
+            </Badge>
         </div>
     {:else}
         <CustomId bind:show={showCustomId} name="Provider" bind:id autofocus={false} />
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/wizard/emailFormList.svelte b/src/routes/(console)/project-[region]-[project]/messaging/wizard/emailFormList.svelte
index 5c1db90e1..cd303f39d 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/wizard/emailFormList.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/wizard/emailFormList.svelte
@@ -8,7 +8,8 @@
         InputText,
         InputTextarea
     } from '$lib/elements/forms';
-    import { Pill } from '$lib/elements';
+    import { Badge, Icon } from '@appwrite.io/pink-svelte';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
     import { CustomId, Modal } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { clickOnEnter } from '$lib/helpers/a11y';
@@ -104,10 +105,12 @@
 </InputSwitch>
 {#if !showCustomId}
     <div>
-        <Pill button on:click={() => (showCustomId = !showCustomId)}
-            ><span class="icon-pencil" aria-hidden="true"></span><span class="text">
-                Message ID
-            </span></Pill>
+        <Badge
+            variant="secondary"
+            content="Message ID"
+            on:click={() => (showCustomId = !showCustomId)}>
+            <Icon icon={IconPencil} size="s" slot="start" />
+        </Badge>
     </div>
 {:else}
     <CustomId
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/wizard/pushFormList.svelte b/src/routes/(console)/project-[region]-[project]/messaging/wizard/pushFormList.svelte
index 3a849dc70..53ad5245d 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/wizard/pushFormList.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/wizard/pushFormList.svelte
@@ -34,7 +34,8 @@
         InputTextarea,
         Label
     } from '$lib/elements/forms';
-    import { Pill } from '$lib/elements';
+    import { Badge, Icon } from '@appwrite.io/pink-svelte';
+    import { IconPencil, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { CustomId, Modal } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { clickOnEnter } from '$lib/helpers/a11y';
@@ -43,8 +44,6 @@
     import PushPhone from '../pushPhone.svelte';
     import { onMount } from 'svelte';
     import InputFilePicker from '$lib/elements/forms/inputFilePicker.svelte';
-    import { Icon } from '@appwrite.io/pink-svelte';
-    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { page } from '$app/state';
 
     let showCustomId = false;
@@ -196,10 +195,12 @@
     </form>
     {#if !showCustomId}
         <div>
-            <Pill button on:click={() => (showCustomId = !showCustomId)}
-                ><span class="icon-pencil" aria-hidden="true"></span><span class="text">
-                    Message ID
-                </span></Pill>
+            <Badge
+                variant="secondary"
+                content="Message ID"
+                on:click={() => (showCustomId = !showCustomId)}>
+                <Icon icon={IconPencil} size="s" slot="start" />
+            </Badge>
         </div>
     {:else}
         <CustomId
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/wizard/smsFormList.svelte b/src/routes/(console)/project-[region]-[project]/messaging/wizard/smsFormList.svelte
index 8f6f940a6..d0cb31e90 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/wizard/smsFormList.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/wizard/smsFormList.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { messageParams, providerType } from './store';
     import { Button, InputEmail, InputRadio, InputTextarea } from '$lib/elements/forms';
-    import { Pill } from '$lib/elements';
+    import { Badge, Icon } from '@appwrite.io/pink-svelte';
+    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
     import { CustomId, Modal } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { clickOnEnter } from '$lib/helpers/a11y';
@@ -83,10 +84,12 @@
     </div>
     {#if !showCustomId}
         <div>
-            <Pill button on:click={() => (showCustomId = !showCustomId)}
-                ><span class="icon-pencil" aria-hidden="true"></span><span class="text">
-                    Message ID
-                </span></Pill>
+            <Badge
+                variant="secondary"
+                content="Message ID"
+                on:click={() => (showCustomId = !showCustomId)}>
+                <Icon icon={IconPencil} size="s" slot="start" />
+            </Badge>
         </div>
     {:else}
         <CustomId
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/messageStatusPill.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/messageStatusPill.svelte
index 75e6dd5a6..4a46d8bf3 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/messageStatusPill.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/messageStatusPill.svelte
@@ -1,16 +1,14 @@
 <script lang="ts">
-    import { Pill } from '$lib/elements';
+    import { Badge, Icon } from '@appwrite.io/pink-svelte';
+    import { IconCheckCircle, IconExclamationCircle } from '@appwrite.io/pink-icons-svelte';
 
     export let enabled: boolean;
-
-    $: style = `color: ${enabled ? 'hsl(var(--color-success-120))' : 'hsl(var(--color-danger-120))'}`;
-    $: iconClass = (enabled ? 'icon-check-circle' : 'icon-exclamation-circle') + ' u-font-size-12';
 </script>
 
-<Pill success={enabled} danger={!enabled} on:click>
-    <span class="text u-font-size-12 u-trim">
-        <span class={iconClass} aria-hidden="true" {style}></span>
-
-        <span>{enabled ? 'enabled' : 'stopped'}</span>
-    </span>
-</Pill>
+<Badge
+    variant="secondary"
+    type={enabled ? 'success' : 'error'}
+    content={enabled ? 'enabled' : 'stopped'}
+    on:click>
+    <Icon icon={enabled ? IconCheckCircle : IconExclamationCircle} size="s" slot="start" />
+</Badge>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
index 1e081fb8e..70acccf34 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
@@ -5,7 +5,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Avatar, Empty, EmptySearch, PaginationWithLimit, SearchQuery } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Pill } from '$lib/elements';
+    import { Badge } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { Container } from '$lib/layout';
@@ -129,7 +129,7 @@
                                 <span class="avatar is-size-small is-color-empty"></span>
                                 <span class="text u-trim">{file.name}</span>
                                 <div>
-                                    <Pill warning>Pending</Pill>
+                                    <Badge variant="secondary" type="warning" content="Pending" />
                                 </div>
                             </Layout.Stack>
                         </Table.Cell>