diff --git a/src/lib/components/billing/paymentModal.svelte b/src/lib/components/billing/paymentModal.svelte
index 16388b948..4d98f6e45 100644
--- a/src/lib/components/billing/paymentModal.svelte
+++ b/src/lib/components/billing/paymentModal.svelte
@@ -68,12 +68,7 @@
     }
 </script>
 
-<FakeModal
-    bind:show
-    title="Add payment method"
-    bind:error
-    onSubmit={handleSubmit}
-    headerDivider={false}>
+<FakeModal bind:show title="Add payment method" bind:error onSubmit={handleSubmit}>
     <FormList gap={16}>
         <slot />
         <InputText
diff --git a/src/lib/components/billing/usageRates.svelte b/src/lib/components/billing/usageRates.svelte
index c2d5c73ae..b673de26f 100644
--- a/src/lib/components/billing/usageRates.svelte
+++ b/src/lib/components/billing/usageRates.svelte
@@ -52,7 +52,7 @@
     $: isFree = org.billingPlan === BillingPlan.FREE;
 </script>
 
-<Modal bind:show size="big" headerDivider={false} title="Usage rates">
+<Modal bind:show size="big" title="Usage rates">
     {#if isFree}
         Usage on the {$plansInfo?.get(BillingPlan.FREE).name} plan is limited for the following resources.
         Next billing period: {toLocaleDate(nextDate)}.
diff --git a/src/lib/components/billing/validateCreditModal.svelte b/src/lib/components/billing/validateCreditModal.svelte
index 961e04144..71775a383 100644
--- a/src/lib/components/billing/validateCreditModal.svelte
+++ b/src/lib/components/billing/validateCreditModal.svelte
@@ -37,13 +37,7 @@
     }
 </script>
 
-<Modal
-    bind:show
-    title="Add credits"
-    headerDivider={false}
-    onSubmit={addCoupon}
-    size="big"
-    bind:error>
+<Modal bind:show title="Add credits" onSubmit={addCoupon} size="big" bind:error>
     Credits will be applied automatically to your next invoice.
 
     <FormList>
diff --git a/src/lib/components/card.svelte b/src/lib/components/card.svelte
index dbbc17085..e92df5316 100644
--- a/src/lib/components/card.svelte
+++ b/src/lib/components/card.svelte
@@ -26,7 +26,6 @@
     export let isTile = false;
     export let isDashed = false;
     export let isButton = false;
-    export let danger = false;
     export let href: string = null;
     let classes = '';
     export { classes as class };
diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte
index 28f70a2ca..f12b7db0c 100644
--- a/src/lib/components/cardGrid.svelte
+++ b/src/lib/components/cardGrid.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { Divider, Layout, Card } from '@appwrite.io/pink-svelte';
 
-    export let danger = false;
     export let hideOverflow = false;
     export let hideFooter = false;
 </script>
diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
index 48c572063..280a95df6 100644
--- a/src/lib/components/copy.svelte
+++ b/src/lib/components/copy.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
-    import { tooltip } from '$lib/actions/tooltip';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { copy } from '$lib/helpers/copy';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/lib/components/empty.svelte b/src/lib/components/empty.svelte
index 388da55d8..82fcce60b 100644
--- a/src/lib/components/empty.svelte
+++ b/src/lib/components/empty.svelte
@@ -5,7 +5,6 @@
 
     export let single = false;
     export let isCard = true;
-    export let noMedia = false;
     export let target: string = null;
     export let href: string = null;
     export let marginTop = false;
diff --git a/src/lib/components/labelCard.svelte b/src/lib/components/labelCard.svelte
index 53a1582d7..0ace79cd5 100644
--- a/src/lib/components/labelCard.svelte
+++ b/src/lib/components/labelCard.svelte
@@ -5,20 +5,10 @@
 
     type Props = ComponentProps<Selector>;
 
-    export let name: string;
     export let group: string;
     export let value: string | number | boolean;
-    export let disabled = false;
-    export let icon: string = null;
-    export let imageIcon: string = null;
-    export let fullHeight = true;
-    export let borderRadius: 'xsmall' | 'small' | 'medium' | 'large' = 'small';
-    export let backgroundColor: string = null;
-    export let backgroundColorHover: string = null;
     export let tooltipText: string = null;
     export let tooltipShow = false;
-    export let src: string = null;
-    export let alt: string = null;
 
     // Pink v2
     export let radius: Props['radius'] = 's';
@@ -27,6 +17,7 @@
     export let variant: Props['variant'] = 'primary';
     //temporarily unefined
     export let title: Props['title'] = undefined;
+    export let disabled = false;
 
     // TODO: remove after label card migration
     let slotTitle: HTMLSpanElement;
@@ -36,11 +27,10 @@
     <div>
         <Card.Selector
             {padding}
-            {src}
             {imageRadius}
-            {alt}
             {variant}
             {value}
+            {radius}
             {disabled}
             title={title ?? slotTitle?.innerText}
             bind:group>
diff --git a/src/lib/components/mfaChallengeFormList.svelte b/src/lib/components/mfaChallengeFormList.svelte
index 8cbb2bcc3..4b7229a71 100644
--- a/src/lib/components/mfaChallengeFormList.svelte
+++ b/src/lib/components/mfaChallengeFormList.svelte
@@ -22,7 +22,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { invalidate } from '$app/navigation';
-    import { Button, FormItem, FormList, InputDigits, InputText } from '$lib/elements/forms';
+    import { Button, FormList, InputDigits, InputText } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
@@ -92,59 +92,49 @@
             bind:this={inputDigitFields} />
     {/if}
     {#if showVerifyButton}
-        <FormItem>
-            <Button fullWidth submit {disabled}>Verify</Button>
-        </FormItem>
+        <Button fullWidth submit {disabled}>Verify</Button>
     {/if}
     {#if enabledFactors.length > 1}
         <span class="with-separators eyebrow-heading-3">or</span>
         <div class="u-flex-vertical u-gap-8">
             {#if factors.totp && challengeType != null && challengeType != AuthenticationFactor.Totp}
-                <FormItem>
-                    <Button
-                        secondary
-                        fullWidth
-                        {disabled}
-                        on:click={() => createChallenge(AuthenticationFactor.Totp)}>
-                        <span class="icon-device-mobile u-font-size-20" aria-hidden="true" />
-                        <span class="text">Authenticator app</span>
-                    </Button>
-                </FormItem>
+                <Button
+                    secondary
+                    fullWidth
+                    {disabled}
+                    on:click={() => createChallenge(AuthenticationFactor.Totp)}>
+                    <span class="icon-device-mobile u-font-size-20" aria-hidden="true" />
+                    <span class="text">Authenticator app</span>
+                </Button>
             {/if}
             {#if factors.email && challengeType != AuthenticationFactor.Email}
-                <FormItem>
-                    <Button
-                        secondary
-                        fullWidth
-                        {disabled}
-                        on:click={() => createChallenge(AuthenticationFactor.Email)}>
-                        <span class="icon-mail u-font-size-20" aria-hidden="true" />
-                        <span class="text">Email verification</span>
-                    </Button>
-                </FormItem>
+                <Button
+                    secondary
+                    fullWidth
+                    {disabled}
+                    on:click={() => createChallenge(AuthenticationFactor.Email)}>
+                    <span class="icon-mail u-font-size-20" aria-hidden="true" />
+                    <span class="text">Email verification</span>
+                </Button>
             {/if}
             {#if factors.phone && challengeType != AuthenticationFactor.Phone}
-                <FormItem>
-                    <Button
-                        secondary
-                        fullWidth
-                        {disabled}
-                        on:click={() => createChallenge(AuthenticationFactor.Phone)}>
-                        <span class="icon-chat-alt u-font-size-20" aria-hidden="true" />
-                        <span class="text">Phone verification</span>
-                    </Button>
-                </FormItem>
+                <Button
+                    secondary
+                    fullWidth
+                    {disabled}
+                    on:click={() => createChallenge(AuthenticationFactor.Phone)}>
+                    <span class="icon-chat-alt u-font-size-20" aria-hidden="true" />
+                    <span class="text">Phone verification</span>
+                </Button>
             {/if}
             {#if factors.recoveryCode && challengeType != AuthenticationFactor.Recoverycode}
-                <FormItem>
-                    <Button
-                        text
-                        fullWidth
-                        {disabled}
-                        on:click={() => createChallenge(AuthenticationFactor.Recoverycode)}>
-                        <span class="text">Use recovery code</span>
-                    </Button>
-                </FormItem>
+                <Button
+                    text
+                    fullWidth
+                    {disabled}
+                    on:click={() => createChallenge(AuthenticationFactor.Recoverycode)}>
+                    <span class="text">Use recovery code</span>
+                </Button>
             {/if}
         </div>
     {/if}
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 920fcfd5b..d1827abcc 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -7,12 +7,8 @@
     import { trackEvent } from '$lib/actions/analytics';
 
     export let show = false;
-    export let icon: string = null;
-    export let state: 'success' | 'warning' | 'error' | 'info' = null;
     export let error: string = null;
     export let closable = true;
-    export let headerDivider = true;
-    export let open = false;
     export let dismissible = true;
     export let onSubmit: (e: SubmitEvent) => Promise<void> | void = function () {
         return;
diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
index b472d34fb..fe49acbf0 100644
--- a/src/lib/components/permissions/custom.svelte
+++ b/src/lib/components/permissions/custom.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, FormItem, FormList, Helper, InputText } from '$lib/elements/forms';
+    import { Button, FormList, Helper, InputText } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
     import { Modal } from '..';
     import type { Writable } from 'svelte/store';
@@ -31,16 +31,14 @@
         role.
     </span>
     <FormList>
-        <FormItem>
-            <InputText
-                id="custom-permission"
-                label="Role"
-                placeholder="user:[USER_ID] or team:[TEAM_ID]/[ROLE]"
-                bind:value />
-            <Helper type="neutral">
-                A permission should be formatted as: user:[USER_ID] or team:[TEAM_ID]/[ROLE]¸
-            </Helper>
-        </FormItem>
+        <InputText
+            id="custom-permission"
+            label="Role"
+            placeholder="user:[USER_ID] or team:[TEAM_ID]/[ROLE]"
+            bind:value />
+        <Helper type="neutral">
+            A permission should be formatted as: user:[USER_ID] or team:[TEAM_ID]/[ROLE]¸
+        </Helper>
     </FormList>
 
     <svelte:fragment slot="footer">
diff --git a/src/lib/components/permissions/label.svelte b/src/lib/components/permissions/label.svelte
index ed209c878..20c7e8d80 100644
--- a/src/lib/components/permissions/label.svelte
+++ b/src/lib/components/permissions/label.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, FormItem, FormList, Helper, InputText } from '$lib/elements/forms';
+    import { Button, FormList, Helper, InputText } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
     import { Modal } from '..';
     import type { Writable } from 'svelte/store';
@@ -37,11 +37,9 @@
         Labels allow you to grant access to users with the specified label.
     </span>
     <FormList>
-        <FormItem>
-            <InputText id="label" label="Label" placeholder="Enter label" bind:value />
-            <Helper type={isError ? 'warning' : 'neutral'}
-                >Only alphanumeric characters are allowed.</Helper>
-        </FormItem>
+        <InputText id="label" label="Label" placeholder="Enter label" bind:value />
+        <Helper type={isError ? 'warning' : 'neutral'}
+            >Only alphanumeric characters are allowed.</Helper>
     </FormList>
 
     <svelte:fragment slot="footer">
diff --git a/src/lib/components/searchQuery.svelte b/src/lib/components/searchQuery.svelte
index 643edab72..68ef6bb7b 100644
--- a/src/lib/components/searchQuery.svelte
+++ b/src/lib/components/searchQuery.svelte
@@ -4,7 +4,7 @@
     import { trackEvent } from '$lib/actions/analytics';
     import { onMount } from 'svelte';
     import { onDestroy } from 'svelte';
-    import { Input, Layout } from '@appwrite.io/pink-svelte';
+    import { Input } from '@appwrite.io/pink-svelte';
     import { IconX } from '@appwrite.io/pink-icons-svelte';
 
     export let search = '';
@@ -13,8 +13,6 @@
     export let required = false;
     export let disabled = false;
     export let autofocus = false;
-    export let isWithEndButton = true;
-    export let fullWidth = false;
 
     let element: HTMLInputElement;
     let timer: ReturnType<typeof setTimeout>;
@@ -60,15 +58,12 @@
     }
 </script>
 
-<Layout.Stack direction="row" justifyContent="space-between">
-    <div class={fullWidth ? 'u-width-full-line' : 'u-flex-basis-50-percent'}>
-        <Input.Text {placeholder} {disabled} {required} type="search" bind:value={search}>
-            <svelte:fragment slot="end">
-                {#if search}
-                    <Input.Action icon={IconX} on:click={() => (search = '')} />
-                {/if}
-            </svelte:fragment>
-        </Input.Text>
-    </div>
-    <slot />
-</Layout.Stack>
+<div style:max-width="260px" style:width="100%">
+    <Input.Text {placeholder} {disabled} {required} type="search" bind:value={search}>
+        <svelte:fragment slot="end">
+            {#if search}
+                <Input.Action icon={IconX} on:click={() => (search = '')} />
+            {/if}
+        </svelte:fragment>
+    </Input.Text>
+</div>
diff --git a/src/lib/components/trim.svelte b/src/lib/components/trim.svelte
index 3f859b7b4..f17a409f1 100644
--- a/src/lib/components/trim.svelte
+++ b/src/lib/components/trim.svelte
@@ -1,21 +1,10 @@
 <script lang="ts">
-    import { throttle } from '$lib/helpers/functions';
-    import { onMount } from 'svelte';
     import { Tooltip } from '@appwrite.io/pink-svelte';
 
     export let alternativeTrim = false;
-    let showTooltip = false;
     let container: HTMLSpanElement | null;
-
-    onMount(onResize);
-
-    function onResize() {
-        showTooltip = container.offsetWidth < container.scrollWidth;
-    }
 </script>
 
-<svelte:window on:resize={throttle(onResize, 250)} />
-
 <Tooltip maxWidth="auto" inline={false}>
     <span class={`text ${alternativeTrim ? 'u-trim-1' : 'u-trim'}`} bind:this={container}>
         <slot />
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index 4deaf455f..2e2e0a290 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -73,40 +73,37 @@
     }, 0);
 </script>
 
-<div class="grid-header-col-4">
-    {#if !hideColumns && view === View.Table}
-        {#if $columns?.length}
-            <DropList bind:show={showSelectColumns} scrollable wrapperFullWidth={fullWidthMobile}>
-                <Button
-                    size="s"
-                    secondary
-                    on:click={() => (showSelectColumns = !showSelectColumns)}
-                    {fullWidthMobile}>
-                    <span
-                        class="icon-view-boards u-opacity-50"
-                        aria-hidden="true"
-                        aria-label="columns" />
-                    {#if !hideText}
-                        <span class="text {showColsTextMobile ? '' : 'is-only-desktop'}"
-                            >Columns</span>
-                    {/if}
-                    <span class="inline-tag">{selectedColumnsNumber}</span>
-                </Button>
-                <svelte:fragment slot="list">
-                    {#each $columns as column}
-                        <InputChoice
-                            id={column.id}
-                            label={column.title}
-                            bind:value={column.show}
-                            disabled={allowNoColumns
-                                ? false
-                                : selectedColumnsNumber <= 1 && column.show} />
-                    {/each}
-                </svelte:fragment>
-            </DropList>
-        {/if}
+{#if !hideColumns && view === View.Table}
+    {#if $columns?.length}
+        <DropList bind:show={showSelectColumns} scrollable wrapperFullWidth={fullWidthMobile}>
+            <Button
+                size="s"
+                secondary
+                on:click={() => (showSelectColumns = !showSelectColumns)}
+                {fullWidthMobile}>
+                <span
+                    class="icon-view-boards u-opacity-50"
+                    aria-hidden="true"
+                    aria-label="columns" />
+                {#if !hideText}
+                    <span class="text {showColsTextMobile ? '' : 'is-only-desktop'}">Columns</span>
+                {/if}
+                <span class="inline-tag">{selectedColumnsNumber}</span>
+            </Button>
+            <svelte:fragment slot="list">
+                {#each $columns as column}
+                    <InputChoice
+                        id={column.id}
+                        label={column.title}
+                        bind:value={column.show}
+                        disabled={allowNoColumns
+                            ? false
+                            : selectedColumnsNumber <= 1 && column.show} />
+                {/each}
+            </svelte:fragment>
+        </DropList>
     {/if}
-</div>
+{/if}
 
 {#if !hideView}
     <div class="grid-header-col-3 toggle-button">
diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
index f84e44d94..25e5e342d 100644
--- a/src/lib/elements/forms/button.svelte
+++ b/src/lib/elements/forms/button.svelte
@@ -6,14 +6,12 @@
     import { Button } from '@appwrite.io/pink-svelte';
     import type { ComponentProps } from 'svelte';
 
-    type Props = ComponentProps<Button.Button>;
+    type Props = ComponentProps<Button.Button | Button.Anchor>;
 
     export let submit = false;
     export let secondary = false;
     export let text = false;
-    export let danger = false;
     export let icon = false;
-    export let link = false;
     export let size: Props['size'] = 's';
     export let disabled = false;
     export let external = false;
diff --git a/src/lib/elements/forms/formItem.svelte b/src/lib/elements/forms/formItem.svelte
deleted file mode 100644
index e6dd8b731..000000000
--- a/src/lib/elements/forms/formItem.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script context="module" lang="ts">
-    export type FormItemTag = 'li' | 'div';
-</script>
-
-<script lang="ts">
-    export let tag: FormItemTag = 'li';
-    export let fullWidth = false;
-    export let isMultiple = false;
-    export let stackOnMobile = false;
-    export let style: string = '';
-    let classes: string = '';
-    export { classes as class };
-</script>
-
-<slot />
diff --git a/src/lib/elements/forms/formItemPart.svelte b/src/lib/elements/forms/formItemPart.svelte
deleted file mode 100644
index f43b94d4a..000000000
--- a/src/lib/elements/forms/formItemPart.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-    export let fullWidth = false;
-    export let alignEnd = false;
-</script>
-
-<div class="form-item-part" class:u-cross-child-end={alignEnd} class:u-stretch={fullWidth}>
-    <slot />
-</div>
diff --git a/src/lib/elements/forms/formList.svelte b/src/lib/elements/forms/formList.svelte
index 04ca9db58..d45423ef7 100644
--- a/src/lib/elements/forms/formList.svelte
+++ b/src/lib/elements/forms/formList.svelte
@@ -1,10 +1,5 @@
 <script lang="ts">
     import { Layout } from '@appwrite.io/pink-svelte';
-
-    export let isCommonSection = false;
-    export let gap = null;
-    let classes = '';
-    export { classes as class };
 </script>
 
 <Layout.Stack gap="l">
diff --git a/src/lib/elements/forms/index.ts b/src/lib/elements/forms/index.ts
index a3e0393bb..1bd7f80e1 100644
--- a/src/lib/elements/forms/index.ts
+++ b/src/lib/elements/forms/index.ts
@@ -1,6 +1,4 @@
 export { default as Form } from './form.svelte';
-export { default as FormItem } from './formItem.svelte';
-export { default as FormItemPart } from './formItemPart.svelte';
 export { default as FormList } from './formList.svelte';
 export { default as Button } from './button.svelte';
 export { default as InputDomain } from './inputDomain.svelte';
diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index 3f1604d76..844f18c25 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { Selector } from '@appwrite.io/pink-svelte';
     import { Helper } from '.';
-    import type { FormItemTag } from './formItem.svelte';
 
     interface $$Props extends Partial<HTMLLabelElement> {
         id: string;
@@ -11,7 +10,6 @@
         disabled?: boolean;
         element?: HTMLInputElement | undefined;
         indeterminate?: boolean;
-        wrapperTag?: FormItemTag;
         size?: 's' | 'm';
     }
 
@@ -21,7 +19,6 @@
     export let required = false;
     export let disabled = false;
     export let element: HTMLInputElement | undefined = undefined;
-    export let wrapperTag: FormItemTag = 'li';
     export let size: $$Props['size'] = 's';
     let error: string;
 
diff --git a/src/lib/elements/forms/inputChoice.svelte b/src/lib/elements/forms/inputChoice.svelte
index 1daf9e728..9dde2e1e5 100644
--- a/src/lib/elements/forms/inputChoice.svelte
+++ b/src/lib/elements/forms/inputChoice.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { tooltip as tooltipAction } from '$lib/actions/tooltip';
     import { Layout, Selector, Tooltip } from '@appwrite.io/pink-svelte';
     import { Helper } from '.';
 
@@ -37,7 +36,6 @@
                 {id}
                 {disabled}
                 {required}
-                bind:value
                 bind:checked={value}
                 on:change
                 on:invalid={handleInvalid} />
@@ -47,7 +45,6 @@
                 {disabled}
                 size="s"
                 {required}
-                bind:value
                 bind:checked={value}
                 on:invalid={handleInvalid}
                 on:change />
diff --git a/src/lib/elements/forms/inputCron.svelte b/src/lib/elements/forms/inputCron.svelte
index 2e4a8abe0..7e2a2ef53 100644
--- a/src/lib/elements/forms/inputCron.svelte
+++ b/src/lib/elements/forms/inputCron.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
     import { Input } from '@appwrite.io/pink-svelte';
 
-    export let label: string;
-    export let showLabel = true;
+    export let label: string = null;
     export let id: string;
     export let name = id;
     export let value: string = null;
diff --git a/src/lib/elements/forms/inputDate.svelte b/src/lib/elements/forms/inputDate.svelte
index a108130fc..eaaed4977 100644
--- a/src/lib/elements/forms/inputDate.svelte
+++ b/src/lib/elements/forms/inputDate.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem, FormItemPart, Helper, Label } from '.';
+    import { Helper, Label } from '.';
     import NullCheckbox from './nullCheckbox.svelte';
 
     export let label: string;
@@ -17,7 +17,6 @@
     export let autofocus = false;
     export let autocomplete = false;
     export let fullWidth = false;
-    export let isMultiple = false;
 
     let element: HTMLInputElement;
     let error: string;
@@ -55,45 +54,42 @@
     }
 
     $: isNullable = nullable && !required;
-    $: wrapper = isMultiple ? FormItemPart : FormItem;
 </script>
 
-<svelte:component this={wrapper} {fullWidth}>
-    <Label {required} {optionalText} hide={!showLabel} for={id}>
-        {label}
-    </Label>
+<Label {required} {optionalText} hide={!showLabel} for={id}>
+    {label}
+</Label>
 
-    <div class="input-text-wrapper">
-        <input
-            {id}
-            {disabled}
-            {readonly}
-            {required}
-            step=".001"
-            {min}
-            {max}
-            autocomplete={autocomplete ? 'on' : 'off'}
-            type="date"
-            style={disabled ? '' : 'cursor: pointer;'}
-            class="input-text"
-            bind:value
-            bind:this={element}
-            on:invalid={handleInvalid}
-            on:click={function () {
-                this.showPicker();
-            }}
-            style:--amount-of-buttons={isNullable ? 2.75 : 1}
-            style:--button-size={isNullable ? '2rem' : '1rem'} />
-        {#if isNullable}
-            <ul
-                class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
-                <li class="buttons-list-item">
-                    <NullCheckbox checked={value === null} on:change={handleNullChange} />
-                </li>
-            </ul>
-        {/if}
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
+<div class="input-text-wrapper">
+    <input
+        {id}
+        {disabled}
+        {readonly}
+        {required}
+        step=".001"
+        {min}
+        {max}
+        autocomplete={autocomplete ? 'on' : 'off'}
+        type="date"
+        style={disabled ? '' : 'cursor: pointer;'}
+        class="input-text"
+        bind:value
+        bind:this={element}
+        on:invalid={handleInvalid}
+        on:click={function () {
+            this.showPicker();
+        }}
+        style:--amount-of-buttons={isNullable ? 2.75 : 1}
+        style:--button-size={isNullable ? '2rem' : '1rem'} />
+    {#if isNullable}
+        <ul
+            class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
+            <li class="buttons-list-item">
+                <NullCheckbox checked={value === null} on:change={handleNullChange} />
+            </li>
+        </ul>
     {/if}
-</svelte:component>
+</div>
+{#if error}
+    <Helper type="warning">{error}</Helper>
+{/if}
diff --git a/src/lib/elements/forms/inputDateTime.svelte b/src/lib/elements/forms/inputDateTime.svelte
index b63bd628f..fd1c1bee5 100644
--- a/src/lib/elements/forms/inputDateTime.svelte
+++ b/src/lib/elements/forms/inputDateTime.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem, Helper, Label } from '.';
+    import { Helper, Label } from '.';
     import NullCheckbox from './nullCheckbox.svelte';
 
     export let label: string;
@@ -59,37 +59,35 @@
     $: isNullable = nullable && !required;
 </script>
 
-<FormItem>
-    <Label {required} {optionalText} hide={!showLabel} for={id}>
-        {label}
-    </Label>
+<Label {required} {optionalText} hide={!showLabel} for={id}>
+    {label}
+</Label>
 
-    <div class="input-text-wrapper">
-        <input
-            {id}
-            {disabled}
-            {readonly}
-            {required}
-            {value}
-            {step}
-            autocomplete={autocomplete ? 'on' : 'off'}
-            type="datetime-local"
-            class="input-text"
-            bind:this={element}
-            on:input={handleInput}
-            on:invalid={handleInvalid}
-            style:--amount-of-buttons={isNullable ? 2.75 : 1}
-            style:--button-size={isNullable ? '2rem' : '1rem'} />
-        {#if isNullable}
-            <ul
-                class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
-                <li class="buttons-list-item">
-                    <NullCheckbox checked={value === null} on:change={handleNullChange} />
-                </li>
-            </ul>
-        {/if}
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
+<div class="input-text-wrapper">
+    <input
+        {id}
+        {disabled}
+        {readonly}
+        {required}
+        {value}
+        {step}
+        autocomplete={autocomplete ? 'on' : 'off'}
+        type="datetime-local"
+        class="input-text"
+        bind:this={element}
+        on:input={handleInput}
+        on:invalid={handleInvalid}
+        style:--amount-of-buttons={isNullable ? 2.75 : 1}
+        style:--button-size={isNullable ? '2rem' : '1rem'} />
+    {#if isNullable}
+        <ul
+            class="buttons-list u-cross-center u-gap-8 u-position-absolute u-inset-block-start-8 u-inset-block-end-8 u-inset-inline-end-12">
+            <li class="buttons-list-item">
+                <NullCheckbox checked={value === null} on:change={handleNullChange} />
+            </li>
+        </ul>
     {/if}
-</FormItem>
+</div>
+{#if error}
+    <Helper type="warning">{error}</Helper>
+{/if}
diff --git a/src/lib/elements/forms/inputDigits.svelte b/src/lib/elements/forms/inputDigits.svelte
index 07d7f755e..6ec6e1ad2 100644
--- a/src/lib/elements/forms/inputDigits.svelte
+++ b/src/lib/elements/forms/inputDigits.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem } from '.';
     import { createPinInput, melt } from '@melt-ui/svelte';
 
     export let length: number = 6;
@@ -66,24 +65,22 @@
     });
 </script>
 
-<FormItem {fullWidth}>
-    <ol class="u-flex u-main-center" use:melt={$root} bind:this={element}>
-        {#each Array.from({ length }) as _}
-            <li>
-                <input
-                    type="number"
-                    class="verification-code-input u-bold u-remove-input-number-buttons"
-                    inputmode="numeric"
-                    maxlength="1"
-                    style:border-radius="var(--border-radius-small)"
-                    use:melt={$input()}
-                    {required}
-                    {readonly}
-                    {disabled} />
-            </li>
-        {/each}
-    </ol>
-</FormItem>
+<ol class="u-flex u-main-center" use:melt={$root} bind:this={element}>
+    {#each Array.from({ length }) as _}
+        <li>
+            <input
+                type="number"
+                class="verification-code-input u-bold u-remove-input-number-buttons"
+                inputmode="numeric"
+                maxlength="1"
+                style:border-radius="var(--border-radius-small)"
+                use:melt={$input()}
+                {required}
+                {readonly}
+                {disabled} />
+        </li>
+    {/each}
+</ol>
 
 <style lang="scss">
     @use '@appwrite.io/pink/src/abstract/variables/devices';
diff --git a/src/lib/elements/forms/inputDomain.svelte b/src/lib/elements/forms/inputDomain.svelte
index 8e05d3167..2e37a3b39 100644
--- a/src/lib/elements/forms/inputDomain.svelte
+++ b/src/lib/elements/forms/inputDomain.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
-    import { SvelteComponent, onMount } from 'svelte';
     import { Input } from '@appwrite.io/pink-svelte';
 
-    export let label: string;
-    export let showLabel = true;
+    export let label: string = null;
     export let id: string;
     export let name = id;
     export let value = '';
@@ -14,10 +12,6 @@
     export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let maxlength: number = null;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
-    export let fullWidth = false;
 
     // https://www.geeksforgeeks.org/how-to-validate-a-domain-name-using-regular-expression/
     const pattern = String.raw`(?!-)[A-Za-z0-9\-]+([\-\.]{1}[a-z0-9]+)*\.[A-Za-z]{2,18}`;
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index d3d1332e3..fc604ec93 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
-    import { SvelteComponent } from 'svelte';
     import { Input } from '@appwrite.io/pink-svelte';
 
-    export let label: string;
-    export let optionalText: string | undefined = undefined;
-    export let showLabel = true;
+    export let label: string = null;
     export let id: string;
     export let value = '';
     export let placeholder = '';
@@ -15,10 +12,6 @@
     export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let tooltip: string = null;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
-    export let fullWidth = false;
 
     let error: string;
 
@@ -47,6 +40,7 @@
     {placeholder}
     {disabled}
     {required}
+    {readonly}
     {label}
     {nullable}
     on:input
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index 4301fae0b..e2a3f1a13 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
     import { Input } from '@appwrite.io/pink-svelte';
 
-    export let label: string | undefined = undefined;
-    export let optionalText: string | undefined = undefined;
-    export let showLabel = true;
+    export let label: string = null;
     export let id: string;
     export let name = id;
     export let value: number = null;
@@ -16,8 +14,6 @@
     export let min: number = null;
     export let max: number = null;
     export let step: number | 'any' = 1;
-    export let isMultiple = false;
-    export let fullWidth = false;
 
     let error: string;
 
diff --git a/src/lib/elements/forms/inputOTP.svelte b/src/lib/elements/forms/inputOTP.svelte
index c2d521d51..d9e8f2ebc 100644
--- a/src/lib/elements/forms/inputOTP.svelte
+++ b/src/lib/elements/forms/inputOTP.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { SvelteComponent, onMount } from 'svelte';
-    import { FormItem, FormItemPart, Helper, Label } from '.';
+    import { Helper, Label } from '.';
     import { Drop } from '$lib/components';
 
     export let label: string = undefined;
@@ -21,7 +21,6 @@
     export let autocomplete = false;
     export let fullWidth = false;
     export let tooltip: string = null;
-    export let isMultiple = false;
     export let popover: typeof SvelteComponent<unknown> = null;
     export let popoverProps: Record<string, unknown> = {};
 
@@ -58,63 +57,59 @@
     type $$Events = {
         input: Event & { target: HTMLInputElement };
     };
-
-    $: wrapper = isMultiple ? FormItemPart : FormItem;
 </script>
 
-<svelte:component this={wrapper} {fullWidth}>
-    {#if label}
-        <Label {required} {hideRequired} {tooltip} {optionalText} hide={!showLabel} for={id}>
-            {label}{#if popover}
-                <Drop isPopover bind:show display="inline-block">
-                    <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
-                    &nbsp;<button
-                        type="button"
-                        on:click={() => (show = !show)}
-                        aria-label="input tooltip">
-                        <span
-                            class="icon-info"
-                            aria-hidden="true"
-                            style:font-size="var(--icon-size-small)" />
-                    </button>
-                    <svelte:fragment slot="list">
-                        <div
-                            class="dropped card u-max-width-250"
-                            style:--p-card-padding=".75rem"
-                            style:--card-border-radius="var(--border-radius-small)"
-                            style:box-shadow="var(--shadow-large)">
-                            <svelte:component this={popover} {...popoverProps} />
-                        </div>
-                    </svelte:fragment>
-                </Drop>
-            {/if}
-        </Label>
-    {/if}
-
-    <div class="input-text-wrapper">
-        <input
-            {id}
-            {name}
-            {placeholder}
-            {disabled}
-            {readonly}
-            {required}
-            {maxlength}
-            {pattern}
-            type="text"
-            autocomplete={autocomplete ? 'on' : 'off'}
-            class="input-text"
-            bind:value
-            bind:this={element}
-            on:invalid={handleInvalid} />
-        {#if $$slots.options}
-            <div class="options-list">
-                <slot name="options" />
-            </div>
+{#if label}
+    <Label {required} {hideRequired} {tooltip} {optionalText} hide={!showLabel} for={id}>
+        {label}{#if popover}
+            <Drop isPopover bind:show display="inline-block">
+                <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+                &nbsp;<button
+                    type="button"
+                    on:click={() => (show = !show)}
+                    aria-label="input tooltip">
+                    <span
+                        class="icon-info"
+                        aria-hidden="true"
+                        style:font-size="var(--icon-size-small)" />
+                </button>
+                <svelte:fragment slot="list">
+                    <div
+                        class="dropped card u-max-width-250"
+                        style:--p-card-padding=".75rem"
+                        style:--card-border-radius="var(--border-radius-small)"
+                        style:box-shadow="var(--shadow-large)">
+                        <svelte:component this={popover} {...popoverProps} />
+                    </div>
+                </svelte:fragment>
+            </Drop>
         {/if}
-        <slot />
-    </div>
-    {#if error}
-        <Helper type="warning" class="u-line-height-1">{error}</Helper>
+    </Label>
+{/if}
+
+<div class="input-text-wrapper">
+    <input
+        {id}
+        {name}
+        {placeholder}
+        {disabled}
+        {readonly}
+        {required}
+        {maxlength}
+        {pattern}
+        type="text"
+        autocomplete={autocomplete ? 'on' : 'off'}
+        class="input-text"
+        bind:value
+        bind:this={element}
+        on:invalid={handleInvalid} />
+    {#if $$slots.options}
+        <div class="options-list">
+            <slot name="options" />
+        </div>
     {/if}
-</svelte:component>
+    <slot />
+</div>
+{#if error}
+    <Helper type="warning" class="u-line-height-1">{error}</Helper>
+{/if}
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index f4a6e5480..44ffb8725 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -1,23 +1,16 @@
 <script lang="ts">
-    import { SvelteComponent } from 'svelte';
     import { Input } from '@appwrite.io/pink-svelte';
 
     export let id: string;
     export let label: string;
-    export let showLabel = true;
     export let value = '';
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
     export let autofocus = false;
-    export let meter = false;
     export let autocomplete = false;
-    export let showPasswordButton = false;
     export let minlength = 8;
     export let maxlength: number = null;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
-    export let fullWidth = false;
 
     let error: string;
 
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index b69432c7a..221826ee3 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
-    import { SvelteComponent, onMount } from 'svelte';
     import { Input } from '@appwrite.io/pink-svelte';
-    import type { States } from '@appwrite.io/pink-svelte/dist/input/types';
 
-    export let label: string;
-    export let showLabel = true;
+    export let label: string = null;
     export let id: string;
     export let name: string = id;
     export let value = '';
@@ -17,9 +14,6 @@
     export let minlength: number = null;
     export let maxlength: number = 15;
     export let nullable = false;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
-    export let fullWidth = false;
 
     const pattern = String.raw`^\+[1-9]\d{1,14}$`;
 
@@ -57,6 +51,7 @@
     {placeholder}
     {disabled}
     {required}
+    {readonly}
     {label}
     {nullable}
     {pattern}
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index bf6e87130..60ec6ca67 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -7,31 +7,13 @@
     type Props = ComponentProps<Radio>;
 
     export let label: string = null;
-    export let showLabel = true;
     export let id: string;
     export let group: string;
     export let value: string;
     export let name: string;
     export let required = false;
     export let disabled = false;
-    export let size: Props['size'] = 'medium';
-
-    let element: HTMLInputElement;
-    let error: string;
-
-    const handleInvalid = (event: Event) => {
-        event.preventDefault();
-
-        if (element.validity.valueMissing) {
-            error = 'This field is required';
-            return;
-        }
-        error = element.validationMessage;
-    };
-
-    $: if (value) {
-        error = null;
-    }
+    export let size: Props['size'] = 'm';
 </script>
 
 <Selector.Radio
@@ -43,4 +25,5 @@
     {label}
     {size}
     bind:group
-    on:invalid={handleInvalid} />
+    on:invalid
+    on:change />
diff --git a/src/lib/elements/forms/inputSearch.svelte b/src/lib/elements/forms/inputSearch.svelte
index 5322408df..45c683b33 100644
--- a/src/lib/elements/forms/inputSearch.svelte
+++ b/src/lib/elements/forms/inputSearch.svelte
@@ -10,8 +10,6 @@
     export let required = false;
     export let disabled = false;
     export let autofocus = false;
-    export let isWithEndButton = true;
-    export let style: string = '';
     export let label: string = '';
 
     const dispatch = createEventDispatcher();
diff --git a/src/lib/elements/forms/inputSecret.svelte b/src/lib/elements/forms/inputSecret.svelte
index 841285bfc..059b1f098 100644
--- a/src/lib/elements/forms/inputSecret.svelte
+++ b/src/lib/elements/forms/inputSecret.svelte
@@ -2,8 +2,7 @@
     import { Input } from '@appwrite.io/pink-svelte';
 
     export let id: string;
-    export let label: string;
-    export let showLabel = true;
+    export let label: string = '';
     export let value = '';
     export let placeholder = '';
 </script>
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 39db135e5..6cc0d3568 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -1,34 +1,21 @@
 <script lang="ts">
     import { Input } from '@appwrite.io/pink-svelte';
-    import type { FormItemTag } from './formItem.svelte';
-    import type { SvelteComponent } from 'svelte';
 
     export let id: string;
     export let label: string | undefined = undefined;
-    export let ariaLabel = label;
-    export let optionalText: string | undefined = undefined;
-    export let showLabel = true;
     export let value: string | number | boolean | null;
     export let placeholder = '';
     export let required = false;
-    export let hideRequired = false;
     export let disabled = false;
-    export let wrapperTag: FormItemTag = 'li';
     export let options: {
         value: string | boolean | number | null;
         label: string;
         disabled?: boolean;
     }[];
-    export let isMultiple = false;
-    export let fullWidth = false;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
 
     let element: HTMLSelectElement;
     let error: string;
 
-    let show: boolean = false;
-
     const handleInvalid = (event: Event) => {
         event.preventDefault();
 
diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
index 7bf3bdf4e..e49086713 100644
--- a/src/lib/elements/forms/inputSwitch.svelte
+++ b/src/lib/elements/forms/inputSwitch.svelte
@@ -1,29 +1,10 @@
 <script lang="ts">
     import { Selector } from '@appwrite.io/pink-svelte';
 
-    export let label: string;
     export let id: string;
+    export let label: string;
     export let value = false;
     export let disabled = false;
-
-    let element: HTMLInputElement;
-    let error: string;
-
-    const handleInvalid = (event: Event) => {
-        event.preventDefault();
-
-        error = element.validationMessage;
-    };
-
-    $: if (value) {
-        error = null;
-    }
 </script>
 
-<Selector.Switch
-    {label}
-    {disabled}
-    bind:checked={value}
-    helper={error}
-    state={error ? 'error' : 'default'}
-    on:invalid={handleInvalid} />
+<Selector.Switch {id} {label} {disabled} bind:checked={value} on:invalid on:change />
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index ff9e3c832..6eea14c39 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { last } from '$lib/helpers/array';
     import { onMount, SvelteComponent } from 'svelte';
-    import { FormItem, Helper, Label } from '.';
+    import { Helper, Label } from '.';
     import { Drop } from '$lib/components';
 
     export let id: string;
@@ -86,72 +86,67 @@
     }
 </script>
 
-<FormItem>
-    <input
-        class="u-hide"
-        bind:this={hiddenEl}
-        value={tags.join(',')}
-        {required}
-        on:invalid={handleInvalid} />
-    <Label {required} {tooltip} hide={!showLabel} for={id}>
-        {label}{#if popover}
-            <Drop isPopover bind:show display="inline-block">
-                &nbsp;<button
-                    type="button"
-                    on:click={() => (show = !show)}
-                    aria-label="input tooltip">
-                    <span
-                        class="icon-info"
-                        aria-hidden="true"
-                        style="font-size: var(--icon-size-small)" />
-                </button>
-                <svelte:fragment slot="list">
-                    <div
-                        class="dropped card u-max-width-250"
-                        style:--card-border-radius="var(--border-radius-small)"
-                        style:--p-card-padding=".75rem"
-                        style:box-shadow="var(--shadow-large)">
-                        <svelte:component this={popover} {...popoverProps} />
-                    </div>
-                </svelte:fragment>
-            </Drop>
-        {/if}
-    </Label>
-
-    <div class="input-text-wrapper">
-        <div class="tags-input">
-            <div class="tags">
-                <ul class="tags-list">
-                    {#each tags as tag}
-                        <li class="tags-item">
-                            <div class="input-tag">
-                                <span class="tag-text">{tag}</span>
-                                <button
-                                    type="button"
-                                    class="input-tag-delete-button"
-                                    aria-label={`delete ${tag} tag`}
-                                    on:click={() => removeValue(tag)}>
-                                    <span class="icon-x" aria-hidden="true" />
-                                </button>
-                            </div>
-                        </li>
-                    {/each}
-                </ul>
-            </div>
-            <input
-                {id}
-                {placeholder}
-                {disabled}
-                {readonly}
-                type="text"
-                class="tags-input-text"
-                bind:value
-                bind:this={element}
-                on:keydown={handleInput}
-                on:blur={addValue} />
-        </div>
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
+<input
+    class="u-hide"
+    bind:this={hiddenEl}
+    value={tags.join(',')}
+    {required}
+    on:invalid={handleInvalid} />
+<Label {required} {tooltip} hide={!showLabel} for={id}>
+    {label}{#if popover}
+        <Drop isPopover bind:show display="inline-block">
+            &nbsp;<button type="button" on:click={() => (show = !show)} aria-label="input tooltip">
+                <span
+                    class="icon-info"
+                    aria-hidden="true"
+                    style="font-size: var(--icon-size-small)" />
+            </button>
+            <svelte:fragment slot="list">
+                <div
+                    class="dropped card u-max-width-250"
+                    style:--card-border-radius="var(--border-radius-small)"
+                    style:--p-card-padding=".75rem"
+                    style:box-shadow="var(--shadow-large)">
+                    <svelte:component this={popover} {...popoverProps} />
+                </div>
+            </svelte:fragment>
+        </Drop>
     {/if}
-</FormItem>
+</Label>
+
+<div class="input-text-wrapper">
+    <div class="tags-input">
+        <div class="tags">
+            <ul class="tags-list">
+                {#each tags as tag}
+                    <li class="tags-item">
+                        <div class="input-tag">
+                            <span class="tag-text">{tag}</span>
+                            <button
+                                type="button"
+                                class="input-tag-delete-button"
+                                aria-label={`delete ${tag} tag`}
+                                on:click={() => removeValue(tag)}>
+                                <span class="icon-x" aria-hidden="true" />
+                            </button>
+                        </div>
+                    </li>
+                {/each}
+            </ul>
+        </div>
+        <input
+            {id}
+            {placeholder}
+            {disabled}
+            {readonly}
+            type="text"
+            class="tags-input-text"
+            bind:value
+            bind:this={element}
+            on:keydown={handleInput}
+            on:blur={addValue} />
+    </div>
+</div>
+{#if error}
+    <Helper type="warning">{error}</Helper>
+{/if}
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index be51b5036..26918d6ce 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -1,37 +1,20 @@
 <script lang="ts">
     import { Input } from '@appwrite.io/pink-svelte';
-    import { SvelteComponent, onMount, tick } from 'svelte';
     export let label: string = undefined;
-    export let optionalText: string | undefined = undefined;
-    export let showLabel = true;
     export let id: string;
     export let name: string = id;
     export let value = '';
     export let placeholder = '';
     export let required = false;
-    export let hideRequired = false;
     export let nullable = false;
     export let disabled = false;
     export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let fullWidth = false;
     export let maxlength: number = null;
-    export let tooltip: string = null;
-    export let isMultiple = false;
-    export let popover: typeof SvelteComponent<unknown> = null;
-    export let popoverProps: Record<string, unknown> = {};
 
     let error: string;
 
-    // TODO: re-enable
-    // onMount(async () => {
-    //     if (element && autofocus) {
-    //         await tick();
-    //         element.focus();
-    //     }
-    // });
-
     const handleInvalid = (event: Event) => {
         event.preventDefault();
 
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index fc09b2a30..ed5676c86 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -1,13 +1,7 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import { FormItem, Helper, Label } from '.';
-    import NullCheckbox from './nullCheckbox.svelte';
-    import TextCounter from './textCounter.svelte';
-    import { clickOnEnter } from '$lib/helpers/a11y';
     import { Input } from '@appwrite.io/pink-svelte';
 
     export let label: string;
-    export let showLabel = true;
     export let id: string;
     export let name: string = id;
     export let value = '';
@@ -18,8 +12,6 @@
     export let readonly = false;
     export let autofocus = false;
     export let maxlength: number = null;
-    export let optionalText: string | undefined = undefined;
-    export let tooltip: string = null;
 
     let error: string;
 
diff --git a/src/lib/elements/forms/inputTime.svelte b/src/lib/elements/forms/inputTime.svelte
index e32df0a07..e618918d1 100644
--- a/src/lib/elements/forms/inputTime.svelte
+++ b/src/lib/elements/forms/inputTime.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { FormItem, FormItemPart, Helper, Label } from '.';
+    import { Helper, Label } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -14,8 +14,6 @@
     export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let fullWidth = false;
-    export let isMultiple = false;
     export let step: number | 'any' = 60;
 
     let element: HTMLInputElement;
@@ -41,35 +39,32 @@
     $: if (value) {
         error = null;
     }
-    $: wrapper = isMultiple ? FormItemPart : FormItem;
 </script>
 
-<svelte:component this={wrapper} {fullWidth}>
-    <Label {required} {optionalText} hide={!showLabel} for={id}>
-        {label}
-    </Label>
+<Label {required} {optionalText} hide={!showLabel} for={id}>
+    {label}
+</Label>
 
-    <div class="input-text-wrapper" style="--amount-of-buttons:1; --button-size: 1rem">
-        <input
-            {id}
-            {disabled}
-            {readonly}
-            {required}
-            {min}
-            {max}
-            {step}
-            autocomplete={autocomplete ? 'on' : 'off'}
-            type="time"
-            class="input-text"
-            style={disabled ? '' : 'cursor: pointer;'}
-            bind:value
-            bind:this={element}
-            on:invalid={handleInvalid}
-            on:click={function () {
-                this.showPicker();
-            }} />
-    </div>
-    {#if error}
-        <Helper type="warning">{error}</Helper>
-    {/if}
-</svelte:component>
+<div class="input-text-wrapper" style="--amount-of-buttons:1; --button-size: 1rem">
+    <input
+        {id}
+        {disabled}
+        {readonly}
+        {required}
+        {min}
+        {max}
+        {step}
+        autocomplete={autocomplete ? 'on' : 'off'}
+        type="time"
+        class="input-text"
+        style={disabled ? '' : 'cursor: pointer;'}
+        bind:value
+        bind:this={element}
+        on:invalid={handleInvalid}
+        on:click={function () {
+            this.showPicker();
+        }} />
+</div>
+{#if error}
+    <Helper type="warning">{error}</Helper>
+{/if}
diff --git a/src/lib/elements/forms/inputURL.svelte b/src/lib/elements/forms/inputURL.svelte
index cf0895d10..fdfd32d22 100644
--- a/src/lib/elements/forms/inputURL.svelte
+++ b/src/lib/elements/forms/inputURL.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
     import { Input } from '@appwrite.io/pink-svelte';
 
     export let label: string;
-    export let optionalText: string | undefined = undefined;
-    export let showLabel = true;
     export let id: string;
     export let name = id;
     export let value = '';
diff --git a/src/lib/layout/activity.svelte b/src/lib/layout/activity.svelte
index e1d691863..4485aee13 100644
--- a/src/lib/layout/activity.svelte
+++ b/src/lib/layout/activity.svelte
@@ -6,23 +6,11 @@
         PaginationWithLimit,
         Trim
     } from '$lib/components';
-    import {
-        TableBody,
-        TableHeader,
-        TableRow,
-        TableCellHead,
-        TableCell,
-        TableCellText,
-        TableScroll
-    } from '$lib/elements/table';
     import { Container, ContainerHeader } from '$lib/layout';
-    import { hoursToDays, toLocaleDateTime } from '$lib/helpers/date';
+    import { toLocaleDateTime } from '$lib/helpers/date';
     import type { Models } from '@appwrite.io/console';
-    import { tierToPlan, type PlanServices } from '$lib/stores/billing';
-    import { isCloud } from '$lib/system';
-    import { organization } from '$lib/stores/organization';
-    import { Button } from '$lib/elements/forms';
-    import { BillingPlan } from '$lib/constants';
+    import { type PlanServices } from '$lib/stores/billing';
+    import { Layout, Table } from '@appwrite.io/pink-svelte';
 
     export let logs: Models.LogList;
     export let offset = 0;
@@ -38,61 +26,53 @@
         <Heading tag="h2" size="5">Activity</Heading>
     {/if}
     {#if logs.total}
-        <TableScroll>
-            <TableHeader>
-                <TableCellHead width={100}>User</TableCellHead>
-                <TableCellHead width={100}>Event</TableCellHead>
-                <TableCellHead width={80}>Location</TableCellHead>
-                <TableCellHead width={90}>IP</TableCellHead>
-                <TableCellHead width={140}>Date</TableCellHead>
-            </TableHeader>
-            <TableBody service="logs" total={isCloud ? Infinity : 0}>
-                <svelte:fragment slot="limit" let:limit let:upgradeMethod>
-                    <p class="text">
-                        Logs are retained in rolling {hoursToDays(limit)} intervals with the
-                        {tierToPlan($organization.billingPlan).name}
-                        plan.
-                        {#if $organization?.billingPlan === BillingPlan.FREE}
-                            <Button link on:click={upgradeMethod}>Upgrade</Button> to increase your log
-                            retention for a longer period.
-                        {/if}
-                    </p>
-                </svelte:fragment>
-                {#each logs.logs as log}
-                    <TableRow>
-                        <TableCell title="Client">
-                            <div class="u-flex u-cross-center u-gap-12">
-                                {#if log.userEmail}
-                                    {#if log.userName}
-                                        <AvatarInitials size={32} name={log.userName} />
-                                        <Trim>{log.userName}</Trim>
-                                    {:else}
-                                        <AvatarInitials size={32} name={log.userEmail} />
-                                        <Trim>{log.userEmail}</Trim>
-                                    {/if}
+        <Table.Root>
+            <svelte:fragment slot="header">
+                <Table.Header.Cell>User</Table.Header.Cell>
+                <Table.Header.Cell>Event</Table.Header.Cell>
+                <Table.Header.Cell>Location</Table.Header.Cell>
+                <Table.Header.Cell>IP</Table.Header.Cell>
+                <Table.Header.Cell>Date</Table.Header.Cell>
+            </svelte:fragment>
+            {#each logs.logs as log}
+                <Table.Row>
+                    <Table.Cell>
+                        <Layout.Stack direction="row" alignItems="center">
+                            {#if log.userEmail}
+                                {#if log.userName}
+                                    <AvatarInitials size={32} name={log.userName} />
+                                    <Trim>{log.userName}</Trim>
                                 {:else}
-                                    <div class="avatar is-size-small">
-                                        <span class="icon-anonymous" aria-hidden="true" />
-                                    </div>
-                                    <span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
+                                    <AvatarInitials size={32} name={log.userEmail} />
+                                    <Trim>{log.userEmail}</Trim>
                                 {/if}
-                            </div>
-                        </TableCell>
-                        <TableCellText title="Event">{log.event}</TableCellText>
-
-                        <TableCellText title="Location">
-                            {#if log.countryCode !== '--'}
-                                {log.countryName}
                             {:else}
-                                Unknown
+                                <div class="avatar is-size-small">
+                                    <span class="icon-anonymous" aria-hidden="true" />
+                                </div>
+                                <span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
                             {/if}
-                        </TableCellText>
-                        <TableCellText title="IP">{log.ip}</TableCellText>
-                        <TableCellText title="Date">{toLocaleDateTime(log.time)}</TableCellText>
-                    </TableRow>
-                {/each}
-            </TableBody>
-        </TableScroll>
+                        </Layout.Stack>
+                    </Table.Cell>
+                    <Table.Cell>
+                        {log.event}
+                    </Table.Cell>
+                    <Table.Cell>
+                        {#if log.countryCode !== '--'}
+                            {log.countryName}
+                        {:else}
+                            Unknown
+                        {/if}
+                    </Table.Cell>
+                    <Table.Cell>
+                        {log.ip}
+                    </Table.Cell>
+                    <Table.Cell>
+                        {toLocaleDateTime(log.time)}
+                    </Table.Cell>
+                </Table.Row>
+            {/each}
+        </Table.Root>
 
         <PaginationWithLimit name="Logs" {limit} {offset} total={logs.total} />
     {:else}
diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index 5b4a53218..2019f97d3 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -19,7 +19,6 @@
     import { goto } from '$app/navigation';
     import { Layout } from '@appwrite.io/pink-svelte';
 
-    export let isFlex = true;
     export let title: string;
     export let titleTag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2';
     export let titleSize: '1' | '2' | '3' | '4' | '5' | '6' | '7' = '5';
diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
index a04f6da65..207e26915 100644
--- a/src/lib/layout/logs.svelte
+++ b/src/lib/layout/logs.svelte
@@ -18,7 +18,6 @@
     import { organization } from '$lib/stores/organization';
     import { Button } from '$lib/elements/forms';
     import { BillingPlan } from '$lib/constants';
-    import { tooltip } from '$lib/actions/tooltip';
     import { Tooltip } from '@appwrite.io/pink-svelte';
 
     let selectedRequest = 'parameters';
@@ -347,7 +346,7 @@
                                             Logs are retained in rolling {hoursToDays(limit)} intervals
                                             with the {tier} plan.
                                             {#if $organization.billingPlan === BillingPlan.FREE}
-                                                <Button link href={$upgradeURL}>Upgrade</Button> to increase
+                                                <Button href={$upgradeURL}>Upgrade</Button> to increase
                                                 your log retention for a longer period.
                                             {/if}
                                         </Alert>
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index de55776da..0f7892db1 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -17,8 +17,6 @@
     import { Tooltip } from '@appwrite.io/pink-svelte';
     import { showSubNavigation } from '$lib/stores/layout';
 
-    export let isOpen = false;
-
     $: project = $page.params.project;
     $: projectPath = `${base}/project-${project}`;
 
diff --git a/src/lib/layout/wizardExitModal.svelte b/src/lib/layout/wizardExitModal.svelte
index 07ebafa4a..caffdb47b 100644
--- a/src/lib/layout/wizardExitModal.svelte
+++ b/src/lib/layout/wizardExitModal.svelte
@@ -13,14 +13,7 @@
     }
 </script>
 
-<Modal
-    title="Exit Process"
-    bind:show
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    size="small"
-    headerDivider={false}>
+<Modal title="Exit Process" bind:show onSubmit={handleSubmit}>
     <p class="text">
         <slot />
     </p>
diff --git a/src/lib/pages/domains/delete.svelte b/src/lib/pages/domains/delete.svelte
index 3af92ff99..ce241acc9 100644
--- a/src/lib/pages/domains/delete.svelte
+++ b/src/lib/pages/domains/delete.svelte
@@ -32,13 +32,7 @@
     }
 </script>
 
-<Modal
-    title="Delete domain"
-    bind:show={showDelete}
-    onSubmit={deleteDomain}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete domain" bind:show={showDelete} onSubmit={deleteDomain}>
     {#if selectedDomain}
         <p data-private>
             Are you sure you want to delete <b>{selectedDomain.domain}</b>? You will no longer be
diff --git a/src/lib/pages/domains/index.svelte b/src/lib/pages/domains/index.svelte
index af1a5c4ec..ed653564b 100644
--- a/src/lib/pages/domains/index.svelte
+++ b/src/lib/pages/domains/index.svelte
@@ -21,6 +21,7 @@
     import Retry from './wizard/retry.svelte';
     import { Pill } from '$lib/elements';
     import { canWriteRules } from '$lib/stores/roles';
+    import { Layout, Table, Link } from '@appwrite.io/pink-svelte';
 
     export let rules: Models.ProxyRuleList;
     export let type: ResourceType;
@@ -63,127 +64,120 @@
     {/if}
 </div>
 {#if rules.total}
-    <TableScroll>
-        <TableHeader>
-            <TableCellHead width={150}>Name</TableCellHead>
-            <TableCellHead width={120}>Verification Status</TableCellHead>
-            <TableCellHead width={180}>Certificate Status</TableCellHead>
+    <Table.Root>
+        <svelte:fragment slot="header">
+            <Table.Header.Cell>Name</Table.Header.Cell>
+            <Table.Header.Cell>Verification Status</Table.Header.Cell>
+            <Table.Header.Cell>Certificate Status</Table.Header.Cell>
             {#if $canWriteRules}
-                <TableCellHead width={40} />
+                <Table.Header.Cell width="40" />
             {/if}
-        </TableHeader>
-        <TableBody>
-            {#each rules.rules as domain, i}
-                <TableRow>
-                    <TableCellLink
-                        title="Domain"
-                        href={`https://${domain.domain}`}
-                        external
-                        noStyle>
-                        <span class="u-flex u-gap-4 u-cross-center">
-                            <Trim>
-                                <span class="link">{domain.domain}</span>
-                            </Trim>
-                            <span class="icon-external-link" aria-hidden="true" />
-                        </span>
-                    </TableCellLink>
-                    <TableCell title="Verification">
-                        {#if domain.status === 'created'}
-                            <div class="u-flex u-gap-16 u-cross-center">
-                                <Pill danger>
-                                    <span
-                                        class="icon-exclamation-circle u-color-text-danger"
-                                        aria-hidden="true" />
-                                    <span class="u-text">failed</span>
-                                </Pill>
-                                <button type="button" on:click={() => openRetry(domain)}>
-                                    <span class="link">Retry</span>
-                                </button>
-                            </div>
-                        {:else}
+        </svelte:fragment>
+        {#each rules.rules as domain, index}
+            <Table.Row>
+                <Table.Cell>
+                    <Layout.Stack direction="row" alignItems="center">
+                        <Link.Anchor href={`https://${domain.domain}`} target="_blank">
+                            {domain.domain}
+                        </Link.Anchor>
+                    </Layout.Stack>
+                </Table.Cell>
+                <Table.Cell>
+                    {#if domain.status === 'created'}
+                        <Layout.Stack direction="row" alignItems="center">
+                            <Pill danger>
+                                <span
+                                    class="icon-exclamation-circle u-color-text-danger"
+                                    aria-hidden="true" />
+                                <span class="u-text">failed</span>
+                            </Pill>
+                            <button type="button" on:click={() => openRetry(domain)}>
+                                <span class="link">Retry</span>
+                            </button>
+                        </Layout.Stack>
+                    {:else}
+                        <Pill success>
+                            <span
+                                class="icon-check-circle u-color-text-success"
+                                aria-hidden="true" />
+                            <p class="text">verified</p>
+                        </Pill>
+                    {/if}
+                </Table.Cell>
+                <Table.Cell>
+                    {#if domain.status === 'unverified'}
+                        <Layout.Stack direction="row" alignItems="center">
+                            <Pill danger>
+                                <span
+                                    class="icon-exclamation-circle u-color-text-danger"
+                                    aria-hidden="true" />
+                                <span class="u-text">failed</span>
+                            </Pill>
+                            <button type="button" on:click={() => openRetry(domain)}>
+                                <span class="link">Retry</span>
+                            </button>
+                        </Layout.Stack>
+                    {:else if domain.status === 'verified'}
+                        <Layout.Stack direction="row" alignItems="center">
                             <Pill success>
                                 <span
                                     class="icon-check-circle u-color-text-success"
                                     aria-hidden="true" />
-                                <p class="text">verified</p>
+                                <span>generated</span>
                             </Pill>
-                        {/if}
-                    </TableCell>
-                    <TableCell title="Certificate">
-                        {#if domain.status === 'unverified'}
-                            <div class="u-flex u-gap-16 u-cross-center">
-                                <Pill danger>
-                                    <span
-                                        class="icon-exclamation-circle u-color-text-danger"
-                                        aria-hidden="true" />
-                                    <span class="u-text">failed</span>
-                                </Pill>
-                                <button type="button" on:click={() => openRetry(domain)}>
-                                    <span class="link">Retry</span>
-                                </button>
-                            </div>
-                        {:else if domain.status === 'verified'}
-                            <div class="u-flex u-gap-16 u-cross-center">
-                                <Pill success>
-                                    <span
-                                        class="icon-check-circle u-color-text-success"
-                                        aria-hidden="true" />
-                                    <span>generated</span>
-                                </Pill>
-                                {#if domain.renewAt}
-                                    <span class="u-text-color-gray">
-                                        Auto-renewal: {toLocaleDate(domain.renewAt)}
-                                    </span>
-                                {/if}
-                            </div>
-                        {:else}
-                            <Pill warning>
-                                <span class="icon-clock u-text-color-gray" aria-hidden="true" />
-                                <p class="text">blocked by verification</p>
-                            </Pill>
-                        {/if}
-                    </TableCell>
-                    {#if $canWriteRules}
-                        <TableCell right>
-                            <DropList
-                                bind:show={showDomainsDropdown[i]}
-                                placement="bottom-start"
-                                noArrow>
-                                <Button
-                                    text
-                                    icon
-                                    ariaLabel="more options"
-                                    on:click={() =>
-                                        (showDomainsDropdown[i] = !showDomainsDropdown[i])}>
-                                    <span class="icon-dots-horizontal" aria-hidden="true" />
-                                </Button>
-                                <svelte:fragment slot="list">
-                                    {#if domain.status !== 'verified'}
-                                        <DropListItem
-                                            icon="refresh"
-                                            on:click={() => openRetry(domain, i)}>
-                                            {domain.status === 'unverified'
-                                                ? 'Retry generation'
-                                                : 'Retry verification'}
-                                        </DropListItem>
-                                    {/if}
-                                    <DropListItem
-                                        icon="trash"
-                                        on:click={() => {
-                                            selectedDomain = domain;
-                                            showDelete = true;
-                                            showDomainsDropdown[i] = false;
-                                        }}>
-                                        Delete
-                                    </DropListItem>
-                                </svelte:fragment>
-                            </DropList>
-                        </TableCell>
+                            {#if domain.renewAt}
+                                <span class="u-text-color-gray">
+                                    Auto-renewal: {toLocaleDate(domain.renewAt)}
+                                </span>
+                            {/if}
+                        </Layout.Stack>
+                    {:else}
+                        <Pill warning>
+                            <span class="icon-clock u-text-color-gray" aria-hidden="true" />
+                            <p class="text">blocked by verification</p>
+                        </Pill>
                     {/if}
-                </TableRow>
-            {/each}
-        </TableBody>
-    </TableScroll>
+                </Table.Cell>
+                {#if $canWriteRules}
+                    <Table.Cell>
+                        <DropList
+                            bind:show={showDomainsDropdown[index]}
+                            placement="bottom-start"
+                            noArrow>
+                            <Button
+                                text
+                                icon
+                                ariaLabel="more options"
+                                on:click={() =>
+                                    (showDomainsDropdown[index] = !showDomainsDropdown[index])}>
+                                <span class="icon-dots-horizontal" aria-hidden="true" />
+                            </Button>
+                            <svelte:fragment slot="list">
+                                {#if domain.status !== 'verified'}
+                                    <DropListItem
+                                        icon="refresh"
+                                        on:click={() => openRetry(domain, index)}>
+                                        {domain.status === 'unverified'
+                                            ? 'Retry generation'
+                                            : 'Retry verification'}
+                                    </DropListItem>
+                                {/if}
+                                <DropListItem
+                                    icon="trash"
+                                    on:click={() => {
+                                        selectedDomain = domain;
+                                        showDelete = true;
+                                        showDomainsDropdown[index] = false;
+                                    }}>
+                                    Delete
+                                </DropListItem>
+                            </svelte:fragment>
+                        </DropList>
+                    </Table.Cell>
+                {/if}
+            </Table.Row>
+        {/each}
+    </Table.Root>
 {:else}
     <Empty
         single
@@ -193,7 +187,7 @@
 {/if}
 
 <Delete bind:showDelete bind:selectedDomain {dependency} />
-<Modal bind:show={showRetry} headerDivider={false} bind:error={retryError} size="big">
+<Modal bind:show={showRetry} bind:error={retryError}>
     <svelte:fragment slot="title">
         Retry {$domain.status === 'unverified' ? 'certificate generation' : 'verification'}
     </svelte:fragment>
diff --git a/src/routes/(console)/account/delete.svelte b/src/routes/(console)/account/delete.svelte
index 9969c90be..decde97d6 100644
--- a/src/routes/(console)/account/delete.svelte
+++ b/src/routes/(console)/account/delete.svelte
@@ -27,14 +27,7 @@
     }
 </script>
 
-<Modal
-    title="Delete account"
-    bind:show={showDelete}
-    bind:error
-    onSubmit={deleteAccount}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete account" bind:show={showDelete} bind:error onSubmit={deleteAccount}>
     <p>Are you sure you want to delete your account?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
diff --git a/src/routes/(console)/account/deleteMfa.svelte b/src/routes/(console)/account/deleteMfa.svelte
index ba17b1e74..451c02689 100644
--- a/src/routes/(console)/account/deleteMfa.svelte
+++ b/src/routes/(console)/account/deleteMfa.svelte
@@ -38,10 +38,7 @@
     title="Delete authentication method"
     bind:show={showDelete}
     onSubmit={deleteAuthenticator}
-    icon="exclamation"
-    state="warning"
-    bind:error
-    headerDivider={false}>
+    bind:error>
     <p>
         Are you sure you want to delete this authentication method? You will no longer be able to
         use this method to authenticate your account.
diff --git a/src/routes/(console)/account/mfaRegenerateCodes.svelte b/src/routes/(console)/account/mfaRegenerateCodes.svelte
index 2f671f7ec..b9b9bca35 100644
--- a/src/routes/(console)/account/mfaRegenerateCodes.svelte
+++ b/src/routes/(console)/account/mfaRegenerateCodes.svelte
@@ -29,14 +29,7 @@
     }
 </script>
 
-<Modal
-    title="Regenerate recovery codes"
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}
-    {error}
-    onSubmit={submit}
-    bind:show>
+<Modal title="Regenerate recovery codes" {error} onSubmit={submit} bind:show>
     <p>
         Are you sure you want to regenerate all recovery codes? All <b
             >previously generated recovery codes will become invalid.</b>
diff --git a/src/routes/(console)/account/payments/addressModal.svelte b/src/routes/(console)/account/payments/addressModal.svelte
index fbeb783af..8f9e31053 100644
--- a/src/routes/(console)/account/payments/addressModal.svelte
+++ b/src/routes/(console)/account/payments/addressModal.svelte
@@ -3,7 +3,7 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, FormItem, FormList, InputSelect, InputText } from '$lib/elements/forms';
+    import { Button, FormList, InputSelect, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import type { Organization } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
@@ -101,23 +101,13 @@
             label="City or suburb"
             placeholder="Enter your city"
             required />
-        <FormItem isMultiple>
-            <InputText
-                isMultiple
-                fullWidth
-                bind:value={state}
-                id="state"
-                label="State"
-                placeholder="Enter your state"
-                required />
-            <InputText
-                isMultiple
-                fullWidth
-                bind:value={zip}
-                id="zip"
-                label="Postal code"
-                placeholder="Enter postal code" />
-        </FormItem>
+        <InputText
+            bind:value={state}
+            id="state"
+            label="State"
+            placeholder="Enter your state"
+            required />
+        <InputText bind:value={zip} id="zip" label="Postal code" placeholder="Enter postal code" />
     </FormList>
 
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/account/payments/deleteAddressModal.svelte b/src/routes/(console)/account/payments/deleteAddressModal.svelte
index e20c6948b..6c857e8a9 100644
--- a/src/routes/(console)/account/payments/deleteAddressModal.svelte
+++ b/src/routes/(console)/account/payments/deleteAddressModal.svelte
@@ -32,13 +32,7 @@
     }
 </script>
 
-<Modal
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}
-    bind:error>
+<Modal bind:show={showDelete} onSubmit={handleDelete} bind:error>
     <svelte:fragment slot="title">
         {linkedOrgs.length ? 'Unable to delete billing address' : 'Delete billing address'}
     </svelte:fragment>
diff --git a/src/routes/(console)/account/payments/deletePaymentModal.svelte b/src/routes/(console)/account/payments/deletePaymentModal.svelte
index 59240ec39..47de1119b 100644
--- a/src/routes/(console)/account/payments/deletePaymentModal.svelte
+++ b/src/routes/(console)/account/payments/deletePaymentModal.svelte
@@ -33,12 +33,7 @@
     }
 </script>
 
-<Modal
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal bind:show={showDelete} onSubmit={handleDelete}>
     <svelte:fragment slot="title">
         {linkedOrgs.length ? 'Unable to delete payment method' : 'Delete payment method'}
     </svelte:fragment>
diff --git a/src/routes/(console)/account/payments/editAddressModal.svelte b/src/routes/(console)/account/payments/editAddressModal.svelte
index bea14ab0e..a70f9d8e7 100644
--- a/src/routes/(console)/account/payments/editAddressModal.svelte
+++ b/src/routes/(console)/account/payments/editAddressModal.svelte
@@ -3,7 +3,7 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, FormItem, FormList, InputSelect, InputText } from '$lib/elements/forms';
+    import { Button, FormList, InputSelect, InputText } from '$lib/elements/forms';
     import type { Address } from '$lib/sdk/billing';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -85,23 +85,18 @@
             label="City or suburb"
             placeholder="Enter your city"
             required />
-        <FormItem isMultiple>
-            <InputText
-                isMultiple
-                fullWidth
-                bind:value={selectedAddress.state}
-                id="state"
-                label="State"
-                placeholder="Enter your state"
-                required />
-            <InputText
-                isMultiple
-                fullWidth
-                bind:value={selectedAddress.postalCode}
-                id="zip"
-                label="Postal code"
-                placeholder="Enter postal code" />
-        </FormItem>
+        <InputText
+            fullWidth
+            bind:value={selectedAddress.state}
+            id="state"
+            label="State"
+            placeholder="Enter your state"
+            required />
+        <InputText
+            bind:value={selectedAddress.postalCode}
+            id="zip"
+            label="Postal code"
+            placeholder="Enter postal code" />
     </FormList>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
diff --git a/src/routes/(console)/account/payments/editPaymentModal.svelte b/src/routes/(console)/account/payments/editPaymentModal.svelte
index 56529fdc9..bcd68d08c 100644
--- a/src/routes/(console)/account/payments/editPaymentModal.svelte
+++ b/src/routes/(console)/account/payments/editPaymentModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Alert, Modal } from '$lib/components';
-    import { Button, FormItem, FormList, InputNumber, InputSelect } from '$lib/elements/forms';
+    import { Button, FormList, InputNumber, InputSelect } from '$lib/elements/forms';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
@@ -63,13 +63,7 @@
     $: options = createMonthOptions(year);
 </script>
 
-<Modal
-    bind:error
-    onSubmit={handleSubmit}
-    size="big"
-    bind:show
-    title="Update payment method"
-    headerDivider={false}>
+<Modal bind:error onSubmit={handleSubmit} bind:show title="Update payment method">
     {#if selectedPaymentMethod?.expired}
         <Alert type="error">
             <svelte:fragment slot="title">This payment method has expired</svelte:fragment>
@@ -79,26 +73,20 @@
         Updates to this payment method will be applied to any linked organizations.
     {/if}
     <FormList>
-        <FormItem isMultiple style="align-items: start;">
-            <InputSelect
-                isMultiple
-                fullWidth
-                id="month"
-                label="Month"
-                bind:value={month}
-                {options}
-                required
-                placeholder="Enter expiry month" />
-            <InputNumber
-                isMultiple
-                fullWidth
-                id="year"
-                label="Year"
-                bind:value={year}
-                min={currentYear}
-                required
-                placeholder="Enter expiry year" />
-        </FormItem>
+        <InputSelect
+            id="month"
+            label="Month"
+            bind:value={month}
+            {options}
+            required
+            placeholder="Enter expiry month" />
+        <InputNumber
+            id="year"
+            label="Year"
+            bind:value={year}
+            min={currentYear}
+            required
+            placeholder="Enter expiry year" />
     </FormList>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
diff --git a/src/routes/(console)/organization-[organization]/billing/addCreditModal.svelte b/src/routes/(console)/organization-[organization]/billing/addCreditModal.svelte
index 4a66d6797..2b6e402a8 100644
--- a/src/routes/(console)/organization-[organization]/billing/addCreditModal.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/addCreditModal.svelte
@@ -36,7 +36,7 @@
     }
 </script>
 
-<Modal bind:show title="Add credits" headerDivider={false} onSubmit={redeem} size="big" bind:error>
+<Modal bind:show title="Add credits" onSubmit={redeem} bind:error>
     Apply Appwrite credits to your organization.
 
     <FormList>
diff --git a/src/routes/(console)/organization-[organization]/billing/deleteOrgPayment.svelte b/src/routes/(console)/organization-[organization]/billing/deleteOrgPayment.svelte
index e1e9f3ee8..e7cbed7bf 100644
--- a/src/routes/(console)/organization-[organization]/billing/deleteOrgPayment.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/deleteOrgPayment.svelte
@@ -55,12 +55,7 @@
 </script>
 
 {#if disabled}
-    <Modal
-        bind:show={showDelete}
-        icon="exclamation"
-        state="warning"
-        headerDivider={false}
-        title="Unable to delete payment method">
+    <Modal bind:show={showDelete} title="Unable to delete payment method">
         <p data-private>
             The {isBackup ? 'backup' : 'default'} payment method cannot be removed as
             <b>{$organization?.name}</b>
@@ -76,9 +71,6 @@
         bind:show={showDelete}
         bind:error
         onSubmit={isBackup ? removeBackuptMethod : removeDefaultMethod}
-        icon="exclamation"
-        state="warning"
-        headerDivider={false}
         title="Remove payment method">
         <p data-private>
             Are you sure you want to remove the payment method from <b>{$organization?.name}</b>?
diff --git a/src/routes/(console)/organization-[organization]/billing/removeAddress.svelte b/src/routes/(console)/organization-[organization]/billing/removeAddress.svelte
index ae83c7399..72d8eb100 100644
--- a/src/routes/(console)/organization-[organization]/billing/removeAddress.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/removeAddress.svelte
@@ -29,14 +29,7 @@
     }
 </script>
 
-<Modal
-    bind:show
-    bind:error
-    onSubmit={removeAddress}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}
-    title="Remove billing address">
+<Modal bind:show bind:error onSubmit={removeAddress} title="Remove billing address">
     <p data-private>
         Are you sure you want to remove the billing address from <b>{$organization?.name}</b>?
     </p>
diff --git a/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte b/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
index a57cecf48..2018801ab 100644
--- a/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Alert, Modal, RadioBoxes } from '$lib/components';
-    import { Button, FormItem, FormList, InputSelect, InputText } from '$lib/elements/forms';
+    import { Button, FormList, InputSelect, InputText } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { organization } from '$lib/stores/organization';
     import { Dependencies } from '$lib/constants';
@@ -103,13 +103,7 @@
     }
 </script>
 
-<Modal
-    bind:show
-    bind:error
-    onSubmit={handleSubmit}
-    size="big"
-    headerDivider={false}
-    title="Replace billing address">
+<Modal bind:show bind:error onSubmit={handleSubmit} title="Replace billing address">
     <p class="text">Replace the existing billing address for your organization.</p>
     {#if addresses?.total}
         <FormList>
@@ -141,7 +135,7 @@
                 <svelte:fragment slot="new">
                     <span style="padding-inline:0.25rem">Add a new billing address</span>
                 </svelte:fragment>
-                <FormList gap={16} class="u-margin-block-start-24">
+                <FormList>
                     <InputSelect
                         bind:value={country}
                         {options}
@@ -166,23 +160,17 @@
                         label="City or suburb"
                         placeholder="Enter your city"
                         required />
-                    <FormItem isMultiple>
-                        <InputText
-                            isMultiple
-                            fullWidth
-                            bind:value={state}
-                            id="state"
-                            label="State"
-                            placeholder="Enter your state"
-                            required />
-                        <InputText
-                            isMultiple
-                            fullWidth
-                            bind:value={postalCode}
-                            id="zip"
-                            label="Postal code"
-                            placeholder="Enter postal code" />
-                    </FormItem>
+                    <InputText
+                        bind:value={state}
+                        id="state"
+                        label="State"
+                        placeholder="Enter your state"
+                        required />
+                    <InputText
+                        bind:value={postalCode}
+                        id="zip"
+                        label="Postal code"
+                        placeholder="Enter postal code" />
                 </FormList>
             </RadioBoxes>
         </FormList>
diff --git a/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte b/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte
index bf0f62916..d432896e8 100644
--- a/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte
@@ -103,13 +103,7 @@
     }
 </script>
 
-<FakeModal
-    bind:show
-    bind:error
-    onSubmit={handleSubmit}
-    size="big"
-    headerDivider={false}
-    title="Replace payment method">
+<FakeModal bind:show bind:error onSubmit={handleSubmit} size="big" title="Replace payment method">
     <p class="text">Replace the existing payment method for your organization.</p>
 
     <PaymentBoxes
diff --git a/src/routes/(console)/organization-[organization]/billing/retryPaymentModal.svelte b/src/routes/(console)/organization-[organization]/billing/retryPaymentModal.svelte
index 2233d511c..ee76f3afa 100644
--- a/src/routes/(console)/organization-[organization]/billing/retryPaymentModal.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/retryPaymentModal.svelte
@@ -118,7 +118,6 @@
     state="warning"
     onSubmit={handleSubmit}
     size="big"
-    headerDivider={false}
     title="Retry payment">
     <!-- TODO: format currency -->
     <p class="text">
@@ -129,7 +128,6 @@
 
     <Button
         external
-        link
         href={`${endpoint}/organizations/${$page.params.organization}/invoices/${invoice.$id}/view`}>
         View invoice
     </Button>
diff --git a/src/routes/(console)/organization-[organization]/change-plan/+page.svelte b/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
index db64cd504..1b307096c 100644
--- a/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
@@ -13,7 +13,6 @@
     import PlanSelection from '$lib/components/billing/planSelection.svelte';
     import ValidateCreditModal from '$lib/components/billing/validateCreditModal.svelte';
     import Default from '$lib/components/roles/default.svelte';
-    import { Layout } from '@appwrite.io/pink-svelte';
     import { BillingPlan, Dependencies, feedbackDowngradeOptions } from '$lib/constants';
     import {
         Button,
@@ -259,7 +258,7 @@
             <Label class="label u-margin-block-start-16">Select plan</Label>
             <p class="text">
                 For more details on our plans, visit our
-                <Button href="https://appwrite.io/pricing" external link>pricing page</Button>.
+                <Button href="https://appwrite.io/pricing" external>pricing page</Button>.
             </p>
             {#if !selfService}
                 <Alert class="u-position-relative u-margin-block-start-16" type="info"
@@ -317,7 +316,7 @@
                 </FormList>
             {/if}
             {#if isDowngrade}
-                <FormList class="u-margin-block-start-24">
+                <FormList>
                     <InputSelect
                         id="reason"
                         label="Reason for plan change"
diff --git a/src/routes/(console)/organization-[organization]/deleteMember.svelte b/src/routes/(console)/organization-[organization]/deleteMember.svelte
index d79b6bd01..63be802af 100644
--- a/src/routes/(console)/organization-[organization]/deleteMember.svelte
+++ b/src/routes/(console)/organization-[organization]/deleteMember.svelte
@@ -51,12 +51,7 @@
     $: isUser = selectedMember?.userId === $user?.$id;
 </script>
 
-<Modal
-    bind:show={showDelete}
-    onSubmit={deleteMembership}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal bind:show={showDelete} onSubmit={deleteMembership}>
     <svelte:fragment slot="title">
         {isUser ? 'Leave organization' : 'Delete member'}
     </svelte:fragment>
diff --git a/src/routes/(console)/organization-[organization]/header.svelte b/src/routes/(console)/organization-[organization]/header.svelte
index dd145ecc0..00c52c01a 100644
--- a/src/routes/(console)/organization-[organization]/header.svelte
+++ b/src/routes/(console)/organization-[organization]/header.svelte
@@ -2,7 +2,6 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { tooltip } from '$lib/actions/tooltip';
     import {
         AvatarGroup,
         DropList,
diff --git a/src/routes/(console)/organization-[organization]/members/+page.svelte b/src/routes/(console)/organization-[organization]/members/+page.svelte
index d44756c7f..f9ce358d9 100644
--- a/src/routes/(console)/organization-[organization]/members/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/members/+page.svelte
@@ -3,15 +3,6 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { AvatarInitials, DropList, DropListItem, PaginationWithLimit } from '$lib/components';
     import { Pill } from '$lib/elements';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
     import { Container, ContainerHeader } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { newMemberModal, organization } from '$lib/stores/organization';
@@ -24,6 +15,8 @@
     import Edit from './edit.svelte';
     import { getRoleLabel } from '$lib/stores/billing';
     import { Drop } from '$lib/components';
+    import { Layout, Table } from '@appwrite.io/pink-svelte';
+
     import Upgrade from '$lib/components/roles/upgrade.svelte';
 
     export let data: PageData;
@@ -68,127 +61,119 @@
             buttonText={$isOwner ? 'Invite' : ''}
             buttonMethod={() => newMemberModal.set(true)}
             showAlert={false} />
-
-        <TableScroll>
-            <TableHeader>
-                <TableCellHead width={160}>Name</TableCellHead>
-                <TableCellHead width={120}>Email</TableCellHead>
-                <div style:--p-col-width={120} class="table-thead-col" role="columnheader">
-                    <span class="u-flex u-cross-baseline">
-                        <span class="eyebrow-heading-3"> Role </span>
-                        <Drop isPopover bind:show={showPopover} display="inline-block">
-                            &nbsp;<button
-                                type="button"
-                                on:click={() => (showPopover = !showPopover)}
-                                aria-label="input tooltip">
-                                <span
-                                    class="icon-info"
-                                    aria-hidden="true"
-                                    style="font-size: var(--icon-size-small)" />
-                            </button>
-                            <svelte:fragment slot="list">
-                                <div
-                                    class="dropped card u-max-width-300 u-break-word"
-                                    style:--card-border-radius="var(--border-radius-small)"
-                                    style:--p-card-padding=".75rem"
-                                    style:box-shadow="var(--shadow-large)">
-                                    <svelte:component this={Upgrade} />
-                                </div>
-                            </svelte:fragment>
-                        </Drop>
-                    </span>
-                </div>
-
-                <TableCellHead width={90}>2FA</TableCellHead>
-                {#if $isOwner}
-                    <TableCellHead width={30} />
-                {/if}
-            </TableHeader>
-            <TableBody
-                service="members"
-                total={data.organizationMembers.total}
-                event="members_list">
-                {#each data.organizationMembers.memberships as member, index}
-                    <TableRow>
-                        <TableCell title="Name">
-                            <div class="u-flex u-gap-12 u-cross-center">
-                                <AvatarInitials size={40} name={member.userName} />
-                                <span class="text u-trim">
-                                    {member.userName ? member.userName : 'n/a'}
-                                </span>
-                                {#if member.invited && !member.joined}
-                                    <Pill warning>Pending</Pill>
-                                {/if}
+        <Table.Root>
+            <svelte:fragment slot="header">
+                <Table.Header.Cell>Name</Table.Header.Cell>
+                <Table.Header.Cell>Email</Table.Header.Cell>
+                <Table.Header.Cell
+                    >Roles
+                    <Drop isPopover bind:show={showPopover} display="inline-block">
+                        &nbsp;<button
+                            type="button"
+                            on:click={() => (showPopover = !showPopover)}
+                            aria-label="input tooltip">
+                            <span
+                                class="icon-info"
+                                aria-hidden="true"
+                                style="font-size: var(--icon-size-small)" />
+                        </button>
+                        <svelte:fragment slot="list">
+                            <div
+                                class="dropped card u-max-width-300 u-break-word"
+                                style:--card-border-radius="var(--border-radius-small)"
+                                style:--p-card-padding=".75rem"
+                                style:box-shadow="var(--shadow-large)">
+                                <svelte:component this={Upgrade} />
                             </div>
-                        </TableCell>
-                        <TableCellText title="Email">{member.userEmail}</TableCellText>
-                        <TableCellText title="Role"
-                            >{member.roles
-                                .map((role) => getRoleLabel(role))
-                                .join(', ')}</TableCellText>
-                        <TableCellText title="2FA">
-                            <Pill success={member.mfa}>
-                                {#if member.mfa}
-                                    <span
-                                        class="icon-check-circle u-color-text-success"
-                                        aria-hidden="true" />
-                                    <p class="text">enabled</p>
-                                {:else}
-                                    <p class="text">disabled</p>
-                                {/if}
-                            </Pill>
-                        </TableCellText>
-                        {#if $isOwner}
-                            <TableCell showOverflow right>
-                                <DropList
-                                    bind:show={showDropdown[index]}
-                                    placement="bottom-start"
-                                    noArrow>
-                                    <button
-                                        class="button is-only-icon is-text"
-                                        aria-label="More options"
-                                        on:click|preventDefault={() => {
-                                            showDropdown[index] = !showDropdown[index];
+                        </svelte:fragment>
+                    </Drop>
+                </Table.Header.Cell>
+                <Table.Header.Cell>2FA</Table.Header.Cell>
+                {#if $isOwner}
+                    <Table.Header.Cell />
+                {/if}
+            </svelte:fragment>
+            {#each data.organizationMembers.memberships as member, index}
+                <Table.Row>
+                    <Table.Cell>
+                        <Layout.Stack direction="row" alignItems="center">
+                            <AvatarInitials size={40} name={member.userName} />
+                            <span class="u-trim">
+                                {member.userName ? member.userName : 'n/a'}
+                            </span>
+                            {#if member.invited && !member.joined}
+                                <Pill warning>Pending</Pill>
+                            {/if}
+                        </Layout.Stack>
+                    </Table.Cell>
+                    <Table.Cell>
+                        {member.userEmail}
+                    </Table.Cell>
+                    <Table.Cell>
+                        {member.roles.map((role) => getRoleLabel(role)).join(', ')}
+                    </Table.Cell>
+                    <Table.Cell>
+                        <Pill success={member.mfa}>
+                            {#if member.mfa}
+                                <span
+                                    class="icon-check-circle u-color-text-success"
+                                    aria-hidden="true" />
+                                <p class="text">enabled</p>
+                            {:else}
+                                <p class="text">disabled</p>
+                            {/if}
+                        </Pill>
+                    </Table.Cell>
+                    {#if $isOwner}
+                        <Table.Cell>
+                            <DropList
+                                bind:show={showDropdown[index]}
+                                placement="bottom-start"
+                                noArrow>
+                                <button
+                                    class="button is-only-icon is-text"
+                                    aria-label="More options"
+                                    on:click|preventDefault={() => {
+                                        showDropdown[index] = !showDropdown[index];
+                                    }}>
+                                    <span class="icon-dots-horizontal" aria-hidden="true" />
+                                </button>
+                                <svelte:fragment slot="list">
+                                    <DropListItem
+                                        icon="pencil"
+                                        on:click={() => {
+                                            selectedMember = member;
+                                            showEdit = true;
+                                            showDropdown[index] = false;
                                         }}>
-                                        <span class="icon-dots-horizontal" aria-hidden="true" />
-                                    </button>
-                                    <svelte:fragment slot="list">
+                                        Edit role
+                                    </DropListItem>
+                                    {#if member.invited && !member.joined}
                                         <DropListItem
-                                            icon="pencil"
+                                            icon="refresh"
                                             on:click={() => {
-                                                selectedMember = member;
-                                                showEdit = true;
+                                                resend(member);
                                                 showDropdown[index] = false;
                                             }}>
-                                            Edit role
+                                            Resend
                                         </DropListItem>
-                                        {#if member.invited && !member.joined}
-                                            <DropListItem
-                                                icon="refresh"
-                                                on:click={() => {
-                                                    resend(member);
-                                                    showDropdown[index] = false;
-                                                }}>
-                                                Resend
-                                            </DropListItem>
-                                        {/if}
-                                        <DropListItem
-                                            icon="trash"
-                                            on:click={() => {
-                                                selectedMember = member;
-                                                showDelete = true;
-                                                showDropdown[index] = false;
-                                            }}>
-                                            Remove
-                                        </DropListItem>
-                                    </svelte:fragment>
-                                </DropList>
-                            </TableCell>
-                        {/if}
-                    </TableRow>
-                {/each}
-            </TableBody>
-        </TableScroll>
+                                    {/if}
+                                    <DropListItem
+                                        icon="trash"
+                                        on:click={() => {
+                                            selectedMember = member;
+                                            showDelete = true;
+                                            showDropdown[index] = false;
+                                        }}>
+                                        Remove
+                                    </DropListItem>
+                                </svelte:fragment>
+                            </DropList>
+                        </Table.Cell>
+                    {/if}
+                </Table.Row>
+            {/each}
+        </Table.Root>
 
         <PaginationWithLimit
             name="Members"
diff --git a/src/routes/(console)/organization-[organization]/settings/BAAModal.svelte b/src/routes/(console)/organization-[organization]/settings/BAAModal.svelte
index ccf789e5a..cb8a4778b 100644
--- a/src/routes/(console)/organization-[organization]/settings/BAAModal.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/BAAModal.svelte
@@ -93,13 +93,7 @@
     }
 </script>
 
-<Modal
-    bind:error
-    bind:show
-    onSubmit={handleSubmit}
-    size="big"
-    title="Request BAA"
-    headerDivider={false}>
+<Modal bind:error bind:show onSubmit={handleSubmit} title="Request BAA">
     <FormList>
         <InputEmail label="Email" placeholder="Enter email" id="email" bind:value={email} />
         <InputSelect
diff --git a/src/routes/(console)/organization-[organization]/settings/Soc2Modal.svelte b/src/routes/(console)/organization-[organization]/settings/Soc2Modal.svelte
index 91cf374b5..544313ecf 100644
--- a/src/routes/(console)/organization-[organization]/settings/Soc2Modal.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/Soc2Modal.svelte
@@ -95,13 +95,7 @@
     }
 </script>
 
-<Modal
-    bind:error
-    bind:show
-    onSubmit={handleSubmit}
-    size="big"
-    headerDivider={false}
-    title="Request SOC-2">
+<Modal bind:error bind:show onSubmit={handleSubmit} title="Request SOC-2">
     <FormList>
         <InputEmail label="Email" placeholder="Enter email" id="email" bind:value={email} />
         <InputSelect
diff --git a/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte b/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte
index 9eaec30b8..f16428c96 100644
--- a/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte
@@ -103,14 +103,7 @@
 </script>
 
 <div class="max-height-dialog">
-    <Modal
-        title="Delete organization"
-        onSubmit={deleteOrg}
-        bind:show={showDelete}
-        bind:error
-        icon="exclamation"
-        state="warning"
-        headerDivider={false}>
+    <Modal title="Delete organization" onSubmit={deleteOrg} bind:show={showDelete} bind:error>
         {#if upcomingInvoice}
             <Alert type="warning">
                 <span slot="title">
diff --git a/src/routes/(console)/project-[project]/auth/+page.svelte b/src/routes/(console)/project-[project]/auth/+page.svelte
index fa18ab6f5..48cf7230f 100644
--- a/src/routes/(console)/project-[project]/auth/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/+page.svelte
@@ -35,24 +35,18 @@
 </script>
 
 <Container>
-    <ContainerHeader title="Users" isFlex={false} total={data.users.total} let:isButtonDisabled>
-        <SearchQuery search={data.search} placeholder="Search by name, email, phone, or ID">
-            {#if $canWriteUsers}
-                <Tooltip disabled={!isButtonDisabled}>
-                    <div>
-                        <Button
-                            on:mousedown={() => ($showCreateUser = true)}
-                            event="create_user"
-                            disabled={isButtonDisabled}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Create user</span>
-                        </Button>
-                    </div>
-                    <span slot="tooltip">Upgrade to add more users</span>
-                </Tooltip>
-            {/if}
-        </SearchQuery>
-    </ContainerHeader>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery search={data.search} placeholder="Search by name, email, phone, or ID" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <Button on:mousedown={() => ($showCreateUser = true)} event="create_user" size="s">
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="text">Create user</span>
+            </Button>
+        </Layout.Stack>
+    </Layout.Stack>
+
     {#if data.users.total}
         <Table.Root>
             <svelte:fragment slot="header">
diff --git a/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte b/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
index 38337b625..783f9a269 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
@@ -2,7 +2,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { CardGrid, Heading } from '$lib/components';
     import { InputPhone, InputOTP } from '$lib/elements/forms';
-    import { Button, Form, FormItem, FormItemPart } from '$lib/elements/forms';
+    import { Button, Form } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
     import { upgradeURL } from '$lib/stores/billing';
@@ -17,7 +17,6 @@
     import { app } from '$lib/stores/app';
     import Empty from '$lib/components/empty.svelte';
     import type { Models } from '@appwrite.io/console';
-    import { tooltip } from '$lib/actions/tooltip';
     import { Tooltip } from '@appwrite.io/pink-svelte';
 
     let numbers: Models.MockNumber[] = $project?.authMockNumbers ?? [];
@@ -150,73 +149,67 @@
             {:else if numbers?.length > 0}
                 <ul class="form-list u-gap-8">
                     {#each numbers as number, index}
-                        <FormItem isMultiple>
-                            <InputPhone
-                                id={`key-${index}`}
-                                bind:value={number.phone}
-                                fullWidth
-                                placeholder="Enter phone number"
-                                label="Phone number"
-                                showLabel={index === 0}
-                                minlength={9}
-                                maxlength={16}
-                                required>
-                                <button
-                                    slot="options"
-                                    on:click={() => (number.phone = generateNumber())}
-                                    class="options-list-button"
-                                    aria-label="regenerate text"
-                                    type="button">
-                                    <Tooltip>
-                                        <span class="icon-refresh" aria-hidden="true"></span>
-                                        <span slot="tooltip">Regenerate</span>
-                                    </Tooltip>
-                                </button>
-                            </InputPhone>
-                            <InputOTP
-                                id={`value-${index}`}
-                                bind:value={number.otp}
-                                fullWidth
-                                placeholder="Enter value"
-                                label="Verification code"
-                                maxlength={6}
-                                pattern={'^[0-9]{6}$'}
-                                patternError="The value must contain 6 digits"
-                                showLabel={index === 0}
-                                required>
-                                <button
-                                    slot="options"
-                                    on:click={() => (number.otp = generateOTP())}
-                                    class="options-list-button"
-                                    aria-label="regenerate text"
-                                    type="button">
-                                    <Tooltip
-                                        ><span class="icon-refresh" aria-hidden="true"></span><span
-                                            slot="tooltip">Regenerate</span
-                                        ></Tooltip>
-                                </button>
-                            </InputOTP>
-                            <FormItemPart>
-                                <Button
-                                    text
-                                    disabled={numbers.length === 0}
-                                    class={'u-padding-4 ' +
-                                        (index === 0 ? 'u-margin-block-start-24' : '')}
-                                    on:click={() => {
-                                        deletePhoneNumber(index);
-                                    }}>
-                                    <Tooltip
-                                        ><span class="icon-refresh" aria-hidden="true"></span><span
-                                            slot="tooltip">Regenerate</span
-                                        ></Tooltip>
-                                </Button>
-                            </FormItemPart>
-                        </FormItem>
+                        <InputPhone
+                            id={`key-${index}`}
+                            bind:value={number.phone}
+                            fullWidth
+                            placeholder="Enter phone number"
+                            label="Phone number"
+                            showLabel={index === 0}
+                            minlength={9}
+                            maxlength={16}
+                            required>
+                            <button
+                                slot="options"
+                                on:click={() => (number.phone = generateNumber())}
+                                class="options-list-button"
+                                aria-label="regenerate text"
+                                type="button">
+                                <Tooltip>
+                                    <span class="icon-refresh" aria-hidden="true"></span>
+                                    <span slot="tooltip">Regenerate</span>
+                                </Tooltip>
+                            </button>
+                        </InputPhone>
+                        <InputOTP
+                            id={`value-${index}`}
+                            bind:value={number.otp}
+                            fullWidth
+                            placeholder="Enter value"
+                            label="Verification code"
+                            maxlength={6}
+                            pattern={'^[0-9]{6}$'}
+                            patternError="The value must contain 6 digits"
+                            showLabel={index === 0}
+                            required>
+                            <button
+                                slot="options"
+                                on:click={() => (number.otp = generateOTP())}
+                                class="options-list-button"
+                                aria-label="regenerate text"
+                                type="button">
+                                <Tooltip
+                                    ><span class="icon-refresh" aria-hidden="true"></span><span
+                                        slot="tooltip">Regenerate</span
+                                    ></Tooltip>
+                            </button>
+                        </InputOTP>
+                        <Button
+                            text
+                            disabled={numbers.length === 0}
+                            class={'u-padding-4 ' + (index === 0 ? 'u-margin-block-start-24' : '')}
+                            on:click={() => {
+                                deletePhoneNumber(index);
+                            }}>
+                            <Tooltip
+                                ><span class="icon-refresh" aria-hidden="true"></span><span
+                                    slot="tooltip">Regenerate</span
+                                ></Tooltip>
+                        </Button>
                     {/each}
                 </ul>
                 {#if numbers?.length < 10}
                     <Button
-                        noMargin
                         text
                         on:click={() =>
                             addPhoneNumber({
diff --git a/src/routes/(console)/project-[project]/auth/teams/+page.svelte b/src/routes/(console)/project-[project]/auth/teams/+page.svelte
index 82c49e6f2..fb9044ee6 100644
--- a/src/routes/(console)/project-[project]/auth/teams/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/teams/+page.svelte
@@ -4,15 +4,6 @@
 
 <script lang="ts">
     import { page } from '$app/stores';
-    import {
-        Table,
-        TableHeader,
-        TableBody,
-        TableRowLink,
-        TableCellHead,
-        TableCellText,
-        TableCell
-    } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
     import {
         Empty,
@@ -28,12 +19,11 @@
     import { base } from '$app/paths';
     import type { Models } from '@appwrite.io/console';
     import type { PageData } from './$types';
-    import { tooltip } from '$lib/actions/tooltip';
     import { writable } from 'svelte/store';
     import { readOnly } from '$lib/stores/billing';
     import { isCloud } from '$lib/system';
     import { canWriteTeams } from '$lib/stores/roles';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Tooltip, Layout, Table } from '@appwrite.io/pink-svelte';
 
     export let data: PageData;
 
@@ -44,55 +34,42 @@
 </script>
 
 <Container>
-    <ContainerHeader
-        title="Teams"
-        isFlex={false}
-        total={data.teams.total}
-        buttonDisabled={isCloud && $readOnly}
-        let:isButtonDisabled>
-        <SearchQuery search={data.search} placeholder="Search by name">
-            {#if $canWriteTeams}
-                <Tooltip disabled={!isButtonDisabled}>
-                    <div>
-                        <Button
-                            on:click={() => ($showCreateTeam = true)}
-                            event="create_team"
-                            disabled={isButtonDisabled}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Create team</span>
-                        </Button>
-                    </div>
-                    <span slot="tooltip">Upgrade to add more teams</span>
-                </Tooltip>
-            {/if}
-        </SearchQuery>
-    </ContainerHeader>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery search={data.search} placeholder="Search by name" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <Button on:mousedown={() => ($showCreateTeam = true)} event="create_user" size="s">
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="text">Create team</span>
+            </Button>
+        </Layout.Stack>
+    </Layout.Stack>
 
     {#if data.teams.total}
-        <Table>
-            <TableHeader>
-                <TableCellHead>Name</TableCellHead>
-                <TableCellHead onlyDesktop>Members</TableCellHead>
-                <TableCellHead onlyDesktop>Created</TableCellHead>
-            </TableHeader>
-            <TableBody service="teams" total={data.teams.total}>
-                {#each data.teams.teams as team}
-                    <TableRowLink href={`${base}/project-${project}/auth/teams/team-${team.$id}`}>
-                        <TableCell title="Name">
-                            <div class="u-flex u-gap-12 u-cross-center">
-                                <AvatarInitials size={32} name={team.name} />
-                                <span class="text u-trim">{team.name}</span>
-                            </div>
-                        </TableCell>
-                        <TableCellText onlyDesktop title="Members"
-                            >{team.total} members</TableCellText>
-                        <TableCellText onlyDesktop title="Created">
-                            {toLocaleDateTime(team.$createdAt)}
-                        </TableCellText>
-                    </TableRowLink>
-                {/each}
-            </TableBody>
-        </Table>
+        <Table.Root>
+            <svelte:fragment slot="header">
+                <Table.Header.Cell>Name</Table.Header.Cell>
+                <Table.Header.Cell>Members</Table.Header.Cell>
+                <Table.Header.Cell>Created</Table.Header.Cell>
+            </svelte:fragment>
+            {#each data.teams.teams as team}
+                <Table.Link href={`${base}/project-${project}/auth/teams/team-${team.$id}`}>
+                    <Table.Cell>
+                        <Layout.Stack direction="row" alignItems="center">
+                            <AvatarInitials size={32} name={team.name} />
+                            <span class="u-trim">{team.name}</span>
+                        </Layout.Stack>
+                    </Table.Cell>
+                    <Table.Cell>
+                        {team.total} members
+                    </Table.Cell>
+                    <Table.Cell>
+                        {toLocaleDateTime(team.$createdAt)}
+                    </Table.Cell>
+                </Table.Link>
+            {/each}
+        </Table.Root>
 
         <PaginationWithLimit
             name="Teams"
diff --git a/src/routes/(console)/project-[project]/auth/teams/team-[team]/deleteMembership.svelte b/src/routes/(console)/project-[project]/auth/teams/team-[team]/deleteMembership.svelte
index 0d94968fb..1ab9bfc87 100644
--- a/src/routes/(console)/project-[project]/auth/teams/team-[team]/deleteMembership.svelte
+++ b/src/routes/(console)/project-[project]/auth/teams/team-[team]/deleteMembership.svelte
@@ -37,13 +37,7 @@
     };
 </script>
 
-<Modal
-    title="Delete Member"
-    bind:show={showDelete}
-    onSubmit={deleteMembership}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete Member" bind:show={showDelete} onSubmit={deleteMembership}>
     <p data-private>
         Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
     </p>
diff --git a/src/routes/(console)/project-[project]/auth/teams/team-[team]/deleteTeam.svelte b/src/routes/(console)/project-[project]/auth/teams/team-[team]/deleteTeam.svelte
index aab5dfa5d..253c98fcc 100644
--- a/src/routes/(console)/project-[project]/auth/teams/team-[team]/deleteTeam.svelte
+++ b/src/routes/(console)/project-[project]/auth/teams/team-[team]/deleteTeam.svelte
@@ -28,13 +28,7 @@
     };
 </script>
 
-<Modal
-    title="Delete team"
-    bind:show={showDelete}
-    onSubmit={deleteTeam}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete team" bind:show={showDelete} onSubmit={deleteTeam}>
     <p data-private>
         Are you sure you want to delete <b>{team.name}</b>?
     </p>
diff --git a/src/routes/(console)/project-[project]/auth/teams/team-[team]/updatePrefs.svelte b/src/routes/(console)/project-[project]/auth/teams/team-[team]/updatePrefs.svelte
index be7e7a00a..4b38f778b 100644
--- a/src/routes/(console)/project-[project]/auth/teams/team-[team]/updatePrefs.svelte
+++ b/src/routes/(console)/project-[project]/auth/teams/team-[team]/updatePrefs.svelte
@@ -3,7 +3,7 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { CardGrid, Heading } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormItem, FormItemPart, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -66,40 +66,32 @@
                 <ul class="form-list">
                     {#if prefs}
                         {#each prefs as [key, value], index}
-                            <FormItem isMultiple>
-                                <InputText
-                                    id={`key-${index}`}
-                                    isMultiple
-                                    fullWidth
-                                    bind:value={key}
-                                    placeholder="Enter key"
-                                    label="Key"
-                                    required />
+                            <InputText
+                                id={`key-${index}`}
+                                bind:value={key}
+                                placeholder="Enter key"
+                                label="Key"
+                                required />
 
-                                <InputText
-                                    id={`value-${index}`}
-                                    isMultiple
-                                    fullWidth
-                                    bind:value
-                                    placeholder="Enter value"
-                                    label="Value"
-                                    required />
-                                <FormItemPart alignEnd>
-                                    <Button
-                                        text
-                                        disabled={(!key || !value) && index === 0}
-                                        on:click={() => {
-                                            if (index === 0) {
-                                                prefs = [['', '']];
-                                            } else {
-                                                prefs.splice(index, 1);
-                                                prefs = prefs;
-                                            }
-                                        }}>
-                                        <span class="icon-x" aria-hidden="true" />
-                                    </Button>
-                                </FormItemPart>
-                            </FormItem>
+                            <InputText
+                                id={`value-${index}`}
+                                bind:value
+                                placeholder="Enter value"
+                                label="Value"
+                                required />
+                            <Button
+                                text
+                                disabled={(!key || !value) && index === 0}
+                                on:click={() => {
+                                    if (index === 0) {
+                                        prefs = [['', '']];
+                                    } else {
+                                        prefs.splice(index, 1);
+                                        prefs = prefs;
+                                    }
+                                }}>
+                                <span class="icon-x" aria-hidden="true" />
+                            </Button>
                         {/each}
                     {/if}
                 </ul>
diff --git a/src/routes/(console)/project-[project]/auth/templates/resetEmail.svelte b/src/routes/(console)/project-[project]/auth/templates/resetEmail.svelte
index 123a95df9..9d1500538 100644
--- a/src/routes/(console)/project-[project]/auth/templates/resetEmail.svelte
+++ b/src/routes/(console)/project-[project]/auth/templates/resetEmail.svelte
@@ -44,14 +44,7 @@
     }
 </script>
 
-<Modal
-    icon="exclamation"
-    state="warning"
-    onSubmit={reset}
-    size="big"
-    {error}
-    bind:show
-    headerDivider={false}>
+<Modal onSubmit={reset} {error} bind:show>
     <svelte:fragment slot="title">Reset Email Template?</svelte:fragment>
     <p class="text">
         Are you sure you want to reset the email template?
diff --git a/src/routes/(console)/project-[project]/auth/templates/resetSms.svelte b/src/routes/(console)/project-[project]/auth/templates/resetSms.svelte
index 3ee20b634..93d5f2f01 100644
--- a/src/routes/(console)/project-[project]/auth/templates/resetSms.svelte
+++ b/src/routes/(console)/project-[project]/auth/templates/resetSms.svelte
@@ -39,14 +39,7 @@
     }
 </script>
 
-<Modal
-    icon="exclamation"
-    state="warning"
-    onSubmit={reset}
-    size="big"
-    {error}
-    bind:show
-    headerDivider={false}>
+<Modal onSubmit={reset} {error} bind:show>
     <svelte:fragment slot="title">Reset SMS Template?</svelte:fragment>
     <p class="text">
         Are you sure you want to reset the SMS template?
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/deleteAllSessions.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/deleteAllSessions.svelte
index adce57f4a..fc4f7480f 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/deleteAllSessions.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/deleteAllSessions.svelte
@@ -31,13 +31,7 @@
     }
 </script>
 
-<Modal
-    title="Delete all sessions"
-    bind:show={showDeleteAll}
-    onSubmit={deleteAllSessions}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete all sessions" bind:show={showDeleteAll} onSubmit={deleteAllSessions}>
     <p data-private>
         Are you sure you want to delete <b>all of {$user.name}'s sessions?</b>
     </p>
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/deleteMembership.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/deleteMembership.svelte
index f08c98a31..9e34e4ee4 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/deleteMembership.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/deleteMembership.svelte
@@ -39,13 +39,7 @@
     }
 </script>
 
-<Modal
-    title="Delete member"
-    bind:show={showDelete}
-    onSubmit={deleteMembership}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete member" bind:show={showDelete} onSubmit={deleteMembership}>
     {#if selectedMembership}
         <p data-private>
             Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/deleteMfa.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/deleteMfa.svelte
index 26d586c60..a1e8a3dba 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/deleteMfa.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/deleteMfa.svelte
@@ -38,10 +38,7 @@
     title="Delete authentication method"
     bind:show={showDelete}
     onSubmit={deleteProvider}
-    icon="exclamation"
-    state="warning"
-    bind:error
-    headerDivider={false}>
+    bind:error>
     <p>Are you sure you want to delete this authentication?</p>
     <p class="text u-bold">This action is irreversible.</p>
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/deleteSession.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/deleteSession.svelte
index 5e8474301..6dcf30042 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/deleteSession.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/deleteSession.svelte
@@ -31,13 +31,7 @@
     }
 </script>
 
-<Modal
-    title="Delete sessions"
-    bind:show={showDelete}
-    onSubmit={deleteSession}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete sessions" bind:show={showDelete} onSubmit={deleteSession}>
     <p>Are you sure you want to delete this session?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/deleteUser.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/deleteUser.svelte
index 35dbc8df8..a07fbb741 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/deleteUser.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/deleteUser.svelte
@@ -29,14 +29,7 @@
     };
 </script>
 
-<Modal
-    title="Delete user"
-    bind:show={showDelete}
-    onSubmit={deleteUser}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}
-    bind:error>
+<Modal title="Delete user" bind:show={showDelete} onSubmit={deleteUser} bind:error>
     <p data-private>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/identities/table.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/identities/table.svelte
index 752ee062f..596837592 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/identities/table.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/identities/table.svelte
@@ -141,14 +141,7 @@
     </div>
 </FloatingActionBar>
 
-<Modal
-    title="Delete identity"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    headerDivider={false}
-    closable={!deleting}>
+<Modal title="Delete identity" bind:show={showDelete} onSubmit={handleDelete} closable={!deleting}>
     <p class="text" data-private>
         Are you sure you want to delete <b>{selectedIds.length}</b>
         {selectedIds.length > 1 ? 'identities' : 'identity'}?
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/memberships/+page.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/memberships/+page.svelte
index f7d708717..c7004bab5 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/memberships/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/memberships/+page.svelte
@@ -2,15 +2,6 @@
     import { page } from '$app/stores';
     import { base } from '$app/paths';
     import { AvatarInitials, EmptySearch } from '$lib/components';
-    import {
-        Table,
-        TableHeader,
-        TableBody,
-        TableRowLink,
-        TableCellHead,
-        TableCellText,
-        TableCell
-    } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import DeleteMembership from '../deleteMembership.svelte';
@@ -18,6 +9,7 @@
     import type { PageData } from './$types';
     import { trackEvent } from '$lib/actions/analytics';
     import { toLocaleDateTime } from '$lib/helpers/date';
+    import { Table, Layout } from '@appwrite.io/pink-svelte';
 
     export let data: PageData;
 
@@ -29,43 +21,43 @@
 
 <Container>
     {#if data.memberships.total}
-        <Table>
-            <TableHeader>
-                <TableCellHead>Name</TableCellHead>
-                <TableCellHead onlyDesktop>Roles</TableCellHead>
-                <TableCellHead onlyDesktop>Joined</TableCellHead>
-                <TableCellHead width={30} />
-            </TableHeader>
-            <TableBody>
-                {#each data.memberships.memberships as membership}
-                    <TableRowLink
-                        href={`${base}/project-${project}/auth/teams/team-${membership.teamId}`}>
-                        <TableCellText title="Name">
-                            <div class="u-flex u-cross-center u-gap-12">
-                                <AvatarInitials size={32} name={membership.teamName} />
-                                <span>{membership.teamName ? membership.teamName : 'n/a'}</span>
-                            </div>
-                        </TableCellText>
-                        <TableCellText onlyDesktop title="Roles">{membership.roles}</TableCellText>
-                        <TableCellText onlyDesktop title="Joined">
-                            {toLocaleDateTime(membership.joined)}
-                        </TableCellText>
-                        <TableCell width={30}>
-                            <button
-                                class="button is-only-icon is-text"
-                                aria-label="Delete item"
-                                on:click|preventDefault={() => {
-                                    selectedMembership = membership;
-                                    showDelete = true;
-                                    trackEvent('click_delete_membership');
-                                }}>
-                                <span class="icon-trash" aria-hidden="true" />
-                            </button>
-                        </TableCell>
-                    </TableRowLink>
-                {/each}
-            </TableBody>
-        </Table>
+        <Table.Root>
+            <svelte:fragment slot="header">
+                <Table.Header.Cell>Name</Table.Header.Cell>
+                <Table.Header.Cell>Roles</Table.Header.Cell>
+                <Table.Header.Cell>Joined</Table.Header.Cell>
+                <Table.Header.Cell />
+            </svelte:fragment>
+            {#each data.memberships.memberships as membership}
+                <Table.Link
+                    href={`${base}/project-${project}/auth/teams/team-${membership.teamId}`}>
+                    <Table.Cell>
+                        <Layout.Stack direction="row" alignItems="center">
+                            <AvatarInitials size={32} name={membership.teamName} />
+                            <span>{membership.teamName ? membership.teamName : 'n/a'}</span>
+                        </Layout.Stack>
+                    </Table.Cell>
+                    <Table.Cell>
+                        {membership.roles}
+                    </Table.Cell>
+                    <Table.Cell>
+                        {toLocaleDateTime(membership.joined)}
+                    </Table.Cell>
+                    <Table.Cell>
+                        <button
+                            class="button is-only-icon is-text"
+                            aria-label="Delete item"
+                            on:click|preventDefault={() => {
+                                selectedMembership = membership;
+                                showDelete = true;
+                                trackEvent('click_delete_membership');
+                            }}>
+                            <span class="icon-trash" aria-hidden="true" />
+                        </button>
+                    </Table.Cell>
+                </Table.Link>
+            {/each}
+        </Table.Root>
     {:else}
         <EmptySearch>
             <div class="u-flex u-flex-vertical u-cross-center u-gap-24">
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/targets/table.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/targets/table.svelte
index 4527d2a88..8600ac85a 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/targets/table.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/targets/table.svelte
@@ -143,14 +143,7 @@
     </div>
 </FloatingActionBar>
 
-<Modal
-    title="Delete target"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    headerDivider={false}
-    closable={!deleting}>
+<Modal title="Delete target" bind:show={showDelete} onSubmit={handleDelete} closable={!deleting}>
     <p class="text" data-private>
         Are you sure you want to delete <b>{selectedIds.length}</b>
         {selectedIds.length > 1 ? 'targets' : 'target'}?
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/updatePrefs.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/updatePrefs.svelte
index 42e685a23..273cfdd8a 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/updatePrefs.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/updatePrefs.svelte
@@ -3,7 +3,7 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { CardGrid, Heading } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, FormItem, FormItemPart, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -59,40 +59,32 @@
                 <ul class="form-list">
                     {#if prefs}
                         {#each prefs as [key, value], index}
-                            <FormItem isMultiple>
-                                <InputText
-                                    id={`key-${index}`}
-                                    isMultiple
-                                    fullWidth
-                                    bind:value={key}
-                                    placeholder="Enter key"
-                                    label="Key"
-                                    required />
+                            <InputText
+                                id={`key-${index}`}
+                                bind:value={key}
+                                placeholder="Enter key"
+                                label="Key"
+                                required />
 
-                                <InputText
-                                    id={`value-${index}`}
-                                    isMultiple
-                                    fullWidth
-                                    bind:value
-                                    placeholder="Enter value"
-                                    label="Value"
-                                    required />
-                                <FormItemPart alignEnd>
-                                    <Button
-                                        text
-                                        disabled={(!key || !value) && index === 0}
-                                        on:click={() => {
-                                            if (index === 0 && prefs?.length === 1) {
-                                                prefs = [['', '']];
-                                            } else {
-                                                prefs.splice(index, 1);
-                                                prefs = prefs;
-                                            }
-                                        }}>
-                                        <span class="icon-x" aria-hidden="true" />
-                                    </Button>
-                                </FormItemPart>
-                            </FormItem>
+                            <InputText
+                                id={`value-${index}`}
+                                bind:value
+                                placeholder="Enter value"
+                                label="Value"
+                                required />
+                            <Button
+                                text
+                                disabled={(!key || !value) && index === 0}
+                                on:click={() => {
+                                    if (index === 0 && prefs?.length === 1) {
+                                        prefs = [['', '']];
+                                    } else {
+                                        prefs.splice(index, 1);
+                                        prefs = prefs;
+                                    }
+                                }}>
+                                <span class="icon-x" aria-hidden="true" />
+                            </Button>
                         {/each}
                     {/if}
                 </ul>
diff --git a/src/routes/(console)/project-[project]/databases/+page.svelte b/src/routes/(console)/project-[project]/databases/+page.svelte
index 9c59cf47d..ff290a965 100644
--- a/src/routes/(console)/project-[project]/databases/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/+page.svelte
@@ -2,7 +2,7 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Empty, PaginationWithLimit, ViewSelector } from '$lib/components';
+    import { Empty, PaginationWithLimit, SearchQuery, ViewSelector } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container, ContainerHeader } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
@@ -13,9 +13,8 @@
     import { columns } from './store';
     import Table from './table.svelte';
     import { registerCommands } from '$lib/commandCenter';
-    import { tooltip } from '$lib/actions/tooltip';
     import { canWriteDatabases } from '$lib/stores/roles';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Layout, Tooltip } from '@appwrite.io/pink-svelte';
 
     export let data: PageData;
 
@@ -44,36 +43,27 @@
 </script>
 
 <Container>
-    <ContainerHeader
-        title="Databases"
-        total={data?.databases?.total}
-        on:data={(data) => {
-            isCreationDisabled = data.detail.isButtonDisabled;
-        }}>
-        <svelte:fragment>
-            <div class="u-flex u-gap-16 u-cross-center u-flex-wrap">
-                <ViewSelector
-                    {columns}
-                    view={data.view}
-                    hideColumns={!data.databases.total}
-                    hideView={!data.databases.total} />
-                {#if $canWriteDatabases}
-                    <Tooltip disabled={!isCreationDisabled}>
-                        <div>
-                            <Button
-                                on:click={() => (showCreate = true)}
-                                event="create_database"
-                                disabled={isCreationDisabled}>
-                                <span class="icon-plus" aria-hidden="true" />
-                                <span class="text">Create database</span>
-                            </Button>
-                        </div>
-                        <span slot="tooltip">Upgrade to add more databases</span>
-                    </Tooltip>
-                {/if}
-            </div>
-        </svelte:fragment>
-    </ContainerHeader>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery search={data.search} placeholder="Search databases" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <ViewSelector
+                {columns}
+                view={data.view}
+                hideColumns={!data.databases.total}
+                hideView={!data.databases.total} />
+            {#if $canWriteDatabases}
+                <Button
+                    on:click={() => (showCreate = true)}
+                    event="create_database"
+                    disabled={isCreationDisabled}>
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Create database</span>
+                </Button>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
 
     {#if data.databases.total}
         {#if data.view === 'grid'}
diff --git a/src/routes/(console)/project-[project]/databases/+page.ts b/src/routes/(console)/project-[project]/databases/+page.ts
index 216194f28..b4e4e6081 100644
--- a/src/routes/(console)/project-[project]/databases/+page.ts
+++ b/src/routes/(console)/project-[project]/databases/+page.ts
@@ -1,25 +1,32 @@
 import { CARD_LIMIT, Dependencies } from '$lib/constants';
-import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load';
+import { getLimit, getPage, getSearch, getView, pageToOffset, View } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import { type Models, Query } from '@appwrite.io/console';
 import { timeFromNow } from '$lib/helpers/date';
 import type { PageLoad } from './$types';
 import type { BackupPolicy } from '$lib/sdk/backups';
+import { isSelfHosted } from '$lib/system';
 
 export const load: PageLoad = async ({ url, route, depends }) => {
     depends(Dependencies.DATABASES);
 
     const page = getPage(url);
+    const search = getSearch(url);
     const limit = getLimit(url, route, CARD_LIMIT);
     const view = getView(url, route, View.Grid);
     const offset = pageToOffset(page, limit);
 
-    const { databases, policies, lastBackups } = await fetchDatabasesAndBackups(limit, offset);
+    const { databases, policies, lastBackups } = await fetchDatabasesAndBackups(
+        limit,
+        offset,
+        search
+    );
 
     return {
         offset,
         limit,
         view,
+        search,
         policies,
         databases,
         lastBackups
@@ -27,12 +34,11 @@ export const load: PageLoad = async ({ url, route, depends }) => {
 };
 
 // TODO: @itznotabug we should improve this!
-async function fetchDatabasesAndBackups(limit: number, offset: number) {
-    const databases = await sdk.forProject.databases.list([
-        Query.limit(limit),
-        Query.offset(offset),
-        Query.orderDesc('$createdAt')
-    ]);
+async function fetchDatabasesAndBackups(limit: number, offset: number, search: string) {
+    const databases = await sdk.forProject.databases.list(
+        [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
+        search || undefined
+    );
 
     const [policies, lastBackups] = await Promise.all([
         await fetchPolicies(databases),
@@ -43,6 +49,8 @@ async function fetchDatabasesAndBackups(limit: number, offset: number) {
 }
 
 async function fetchPolicies(databases: Models.DatabaseList) {
+    if (isSelfHosted) return {};
+
     const databasePolicies: Record<string, BackupPolicy[]> = {};
 
     await Promise.all(
@@ -68,6 +76,8 @@ async function fetchPolicies(databases: Models.DatabaseList) {
 }
 
 async function fetchLastBackups(databases: Models.DatabaseList) {
+    if (isSelfHosted) return {};
+
     const lastBackups: Record<string, string> = {};
 
     await Promise.all(
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/+page.svelte
index 22fb35e11..d5f679395 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Empty, PaginationWithLimit } from '$lib/components';
+    import { Empty, PaginationWithLimit, SearchQuery, ViewSelector } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container, GridHeader } from '$lib/layout';
     import { columns, showCreate } from './store';
@@ -7,24 +7,30 @@
     import Grid from './grid.svelte';
     import type { PageData } from './$types';
     import { canWriteCollections } from '$lib/stores/roles';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
     export let data: PageData;
 </script>
 
 <Container>
-    <GridHeader
-        title="Collections"
-        {columns}
-        view={data.view}
-        hideColumns={!data.collections.total}
-        hideView={!data.collections.total}>
-        {#if $canWriteCollections}
-            <Button on:click={() => ($showCreate = true)} event="create_collection">
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create collection</span>
-            </Button>
-        {/if}
-    </GridHeader>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery search={data.search} placeholder="Search collections" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <ViewSelector
+                {columns}
+                view={data.view}
+                hideColumns={!data.collections.total}
+                hideView={!data.collections.total} />
+            {#if $canWriteCollections}
+                <Button on:click={() => ($showCreate = true)} event="create_collection">
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Create collection</span>
+                </Button>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
 
     {#if data.collections.total}
         {#if data.view === 'grid'}
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/+page.ts b/src/routes/(console)/project-[project]/databases/database-[database]/+page.ts
index 03433c2a2..42be421c4 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/+page.ts
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/+page.ts
@@ -1,24 +1,26 @@
 import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
-import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load';
+import { getLimit, getPage, getSearch, getView, pageToOffset, View } from '$lib/helpers/load';
 import type { PageLoad } from './$types';
 import { CARD_LIMIT, Dependencies } from '$lib/constants';
 
 export const load: PageLoad = async ({ params, url, route, depends }) => {
     depends(Dependencies.COLLECTIONS);
     const page = getPage(url);
+    const search = getSearch(url);
     const limit = getLimit(url, route, CARD_LIMIT);
     const view = getView(url, route, View.Grid);
     const offset = pageToOffset(page, limit);
-    const collections = await sdk.forProject.databases.listCollections(params.database, [
-        Query.limit(limit),
-        Query.offset(offset),
-        Query.orderDesc('')
-    ]);
+    const collections = await sdk.forProject.databases.listCollections(
+        params.database,
+        [Query.limit(limit), Query.offset(offset), Query.orderDesc('')],
+        search || undefined
+    );
 
     return {
         offset,
         limit,
+        search,
         view,
         collections
     };
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
index e4359ad0f..0f9e39322 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
@@ -231,7 +231,6 @@
 
 <Modal
     title="Create backup policy"
-    size="big"
     onSubmit={createPolicies}
     bind:show={$showCreatePolicy}
     bind:error={policyCreateError}>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.ts b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.ts
index 6014bbc28..16d4c39b9 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.ts
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.ts
@@ -3,6 +3,7 @@ import { CARD_LIMIT, Dependencies } from '$lib/constants';
 import { sdk } from '$lib/stores/sdk';
 import { Query } from '@appwrite.io/console';
 import type { BackupArchive, BackupArchiveList, BackupPolicyList } from '$lib/sdk/backups';
+import { isCloud } from '$lib/system';
 
 export const load = async ({ params, url, route, depends }) => {
     depends(Dependencies.BACKUPS);
@@ -14,24 +15,26 @@ export const load = async ({ params, url, route, depends }) => {
     let backups: BackupArchiveList = { total: 0, archives: [] };
     let policies: BackupPolicyList = { total: 0, policies: [] };
 
-    try {
-        [backups, policies] = await Promise.all([
-            sdk.forProject.backups.listArchives([
-                Query.limit(limit),
-                Query.offset(offset),
-                Query.orderDesc('$createdAt'),
-                Query.equal('resourceType', 'database'),
-                Query.equal('resourceId', params.database)
-            ]),
+    if (isCloud) {
+        try {
+            [backups, policies] = await Promise.all([
+                sdk.forProject.backups.listArchives([
+                    Query.limit(limit),
+                    Query.offset(offset),
+                    Query.orderDesc('$createdAt'),
+                    Query.equal('resourceType', 'database'),
+                    Query.equal('resourceId', params.database)
+                ]),
 
-            sdk.forProject.backups.listPolicies([
-                Query.orderDesc('$createdAt'),
-                Query.equal('resourceType', 'database'),
-                Query.equal('resourceId', params.database)
-            ])
-        ]);
-    } catch (e) {
-        // ignore
+                sdk.forProject.backups.listPolicies([
+                    Query.orderDesc('$createdAt'),
+                    Query.equal('resourceType', 'database'),
+                    Query.equal('resourceId', params.database)
+                ])
+            ]);
+        } catch (e) {
+            // ignore
+        }
     }
 
     const archivesByPolicy = groupArchivesByPolicy(backups.archives);
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
index 855217889..2364af9d8 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/policy.svelte
@@ -11,8 +11,6 @@
     import { parseExpression } from 'cron-parser';
     import { toLocaleDateTime } from '$lib/helpers/date';
 
-    import { tooltip } from '$lib/actions/tooltip';
-
     import EmptyDark from '$lib/images/backups/backups-dark.png';
     import EmptyLight from '$lib/images/backups/backups-light.png';
     import type { BackupPolicy, BackupPolicyList } from '$lib/sdk/backups';
@@ -287,14 +285,7 @@
     </Card>
 </div>
 
-<Modal
-    title="Delete policy"
-    icon="exclamation"
-    state="warning"
-    size="small"
-    bind:show={showDelete}
-    headerDivider={false}
-    onSubmit={deletePolicy}>
+<Modal title="Delete policy" bind:show={showDelete} onSubmit={deletePolicy}>
     <FormList>
         <div class="u-flex-vertical u-gap-16">
             <p class="text" data-private>
@@ -310,7 +301,6 @@
             <div class="input-check-box-friction">
                 <InputCheckbox
                     required
-                    size="small"
                     id="delete_policy"
                     bind:checked={confirmedDeletion}
                     label="I understand and confirm" />
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/restoreModal.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/restoreModal.svelte
index df8d8e0ab..706415d3d 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/restoreModal.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/restoreModal.svelte
@@ -2,7 +2,6 @@
     import { onMount } from 'svelte';
     import { trackEvent } from '$lib/actions/analytics';
     import { InnerModal } from '$lib/components';
-    import { FormItem } from '$lib/elements/forms';
     import TextCounter from '$lib/elements/forms/textCounter.svelte';
 
     export let id: string;
@@ -61,22 +60,20 @@
     </svelte:fragment>
     <svelte:fragment slot="content">
         <div class="form u-gap-8">
-            <FormItem>
-                <div class="input-text-wrapper">
-                    <input
-                        id="id"
-                        placeholder="Enter ID"
-                        maxlength={36}
-                        {pattern}
-                        autocomplete="off"
-                        type="text"
-                        class="input-text"
-                        bind:value={id}
-                        bind:this={element}
-                        on:invalid={handleInvalid} />
-                    <TextCounter count={id?.length ?? 0} max={36} />
-                </div>
-            </FormItem>
+            <div class="input-text-wrapper">
+                <input
+                    id="id"
+                    placeholder="Enter ID"
+                    maxlength={36}
+                    {pattern}
+                    autocomplete="off"
+                    type="text"
+                    class="input-text"
+                    bind:value={id}
+                    bind:this={element}
+                    on:invalid={handleInvalid} />
+                <TextCounter count={id?.length ?? 0} max={36} />
+            </div>
             <div
                 class="u-flex u-gap-4 u-margin-block-start-8 u-small"
                 class:u-color-text-warning={icon === 'exclamation'}>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte
index 5af99c1ef..4cbf2e172 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte
@@ -11,7 +11,6 @@
         TableRow,
         TableScroll
     } from '$lib/elements/table';
-    import { tooltip } from '$lib/actions/tooltip';
     import RestoreModal from './restoreModal.svelte';
     import type { PageData } from './$types';
     import { timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
@@ -275,10 +274,7 @@
 
 <Modal
     title="Delete {selectedBackups.length ? 'backups' : 'backup'}"
-    icon="exclamation"
-    state="warning"
     bind:show={showDelete}
-    headerDivider={false}
     onSubmit={deleteBackups}>
     <p class="text" data-private>
         Are you sure you want to delete
@@ -296,7 +292,7 @@
     </svelte:fragment>
 </Modal>
 
-<Modal headerDivider={true} title="Restore backup" bind:show={showRestore} onSubmit={restoreBackup}>
+<Modal title="Restore backup" bind:show={showRestore} onSubmit={restoreBackup}>
     <Card
         isTile
         class="restore-modal-inner-card u-width-full-line"
@@ -324,7 +320,7 @@
             {#each restoreOptions as restoreOption}
                 <div class="u-width-full-line">
                     <LabelCard
-                        padding="small"
+                        padding="s"
                         name="restore"
                         value={restoreOption.id}
                         bind:group={selectedRestoreOption}>
@@ -352,7 +348,6 @@
                     bind:value={newDatabaseInfo.name}
                     autofocus
                     required />
-
                 {#if !showCustomId}
                     <div>
                         <Pill button on:click={() => (showCustomId = !showCustomId)}
@@ -375,7 +370,7 @@
             <div class="input-check-box-friction">
                 <InputCheckbox
                     required
-                    size="small"
+                    size="s"
                     id="delete_policy"
                     bind:checked={confirmSameDbRestore}>
                     <svelte:fragment slot="description">
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
index cddc5d5c0..8314102ff 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
@@ -46,13 +46,7 @@
         isRelationship(selectedAttribute) && selectedAttribute?.twoWay && !checked;
 </script>
 
-<Modal
-    title="Delete attribute"
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}
-    bind:show={showDelete}
-    onSubmit={handleDelete}>
+<Modal title="Delete attribute" bind:show={showDelete} onSubmit={handleDelete}>
     <p class="text" data-private>
         Are you sure you want to delete <b data-private>{selectedAttribute?.key}</b> from
         <b data-private>{$collection?.name}</b>?
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
index eedf18f02..179f10062 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
@@ -60,13 +60,7 @@
     ) as Models.AttributeRelationship[];
 </script>
 
-<Modal
-    title="Delete document"
-    icon="exclamation"
-    state="warning"
-    onSubmit={handleDelete}
-    bind:show={showDelete}
-    headerDivider={false}>
+<Modal title="Delete document" onSubmit={handleDelete} bind:show={showDelete}>
     <p data-private>
         Are you sure you want to delete <b
             >the document from <span data-private>{$collection.name}</span></b
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte
index cf9f0f37e..3b94d3c1c 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte
@@ -8,7 +8,7 @@
     export let header: string;
 </script>
 
-<Modal {title} headerDivider={false} bind:show size="big">
+<Modal {title} bind:show>
     <div class="box u-flex-vertical u-gap-24">
         <p class="u-inline-flex u-cross-center u-gap-8">
             <span
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
index 4550516fb..e71efaf51 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
@@ -39,13 +39,7 @@
     }
 </script>
 
-<Modal
-    title="Delete index"
-    icon="exclamation"
-    state="warning"
-    onSubmit={handleDelete}
-    bind:show={showDelete}
-    headerDivider={false}>
+<Modal title="Delete index" onSubmit={handleDelete} bind:show={showDelete}>
     <p data-private>
         Are you sure you want to delete <b>'{selectedIndex.key}' from {$collection.name}</b>?
     </p>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
index 1f0079879..7ae5c173a 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
@@ -23,7 +23,7 @@
     }
 </script>
 
-<Modal size="big" bind:show icon="relationship" headerDivider={false}>
+<Modal bind:show>
     <svelte:fragment slot="title">
         <span data-private>
             {selectedRelationship.key}
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
index 849d5b65e..6189030e9 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
@@ -37,13 +37,7 @@
     }
 </script>
 
-<Modal
-    title="Delete collection"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    headerDivider={false}>
+<Modal title="Delete collection" bind:show={showDelete} onSubmit={handleDelete}>
     <p data-private>
         Are you sure you want to delete <b>{$collection.name}</b>?
     </p>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 96c124735..82293ec8a 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -287,14 +287,7 @@
     </div>
 </FloatingActionBar>
 
-<Modal
-    title="Delete Documents"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    headerDivider={false}
-    closable={!deleting}>
+<Modal title="Delete Documents" bind:show={showDelete} onSubmit={handleDelete} closable={!deleting}>
     <div>
         <p class="text" data-private>
             Are you sure you want to delete <b>{selectedDb.length}</b>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte
index 4f565c56d..79669150b 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte
@@ -101,14 +101,7 @@
 </script>
 
 <div class="max-height-dialog">
-    <Modal
-        title="Delete database"
-        icon="exclamation"
-        size="big"
-        state="warning"
-        bind:show={showDelete}
-        onSubmit={handleDelete}
-        headerDivider={false}>
+    <Modal title="Delete database" bind:show={showDelete} onSubmit={handleDelete}>
         {#await listCollections()}
             <div class="u-flex u-main-center">
                 <div class="loader" />
@@ -184,7 +177,6 @@
                 <div class="input-check-box-friction">
                     <InputCheckbox
                         required
-                        size="small"
                         id="delete_policy"
                         bind:checked={confirmedDeletion}
                         label="I understand and confirm" />
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/table.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/table.svelte
index a4df2fa98..e0fc8f16f 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/table.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/table.svelte
@@ -127,11 +127,8 @@
 
 <Modal
     title="Delete Collections"
-    icon="exclamation"
-    state="warning"
     bind:show={showDelete}
     onSubmit={handleDelete}
-    headerDivider={false}
     closable={!deleting}>
     <p class="text" data-private>
         Are you sure you want to delete <b>{selected.length}</b>
diff --git a/src/routes/(console)/project-[project]/databases/table.svelte b/src/routes/(console)/project-[project]/databases/table.svelte
index 788fcd8f6..2aea7c469 100644
--- a/src/routes/(console)/project-[project]/databases/table.svelte
+++ b/src/routes/(console)/project-[project]/databases/table.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { tooltip } from '$lib/actions/tooltip';
     import { Id } from '$lib/components';
     import {
         TableBody,
diff --git a/src/routes/(console)/project-[project]/functions/+page.svelte b/src/routes/(console)/project-[project]/functions/+page.svelte
index 202c98e54..49ad02b49 100644
--- a/src/routes/(console)/project-[project]/functions/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { tooltip } from '$lib/actions/tooltip';
     import { registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import {
         CardContainer,
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/activate.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/activate.svelte
index 4da5196f3..69aefb446 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/activate.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/activate.svelte
@@ -35,11 +35,7 @@
     };
 </script>
 
-<Modal
-    title="Activate Deployment"
-    bind:show={showActivate}
-    onSubmit={handleSubmit}
-    headerDivider={false}>
+<Modal title="Activate Deployment" bind:show={showActivate} onSubmit={handleSubmit}>
     <p>Are you sure you want to activate this deployment?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showActivate = false)}>Cancel</Button>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/cancel.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/cancel.svelte
index 500e63c28..f8755a75d 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/cancel.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/cancel.svelte
@@ -34,13 +34,7 @@
     }
 </script>
 
-<Modal
-    title="Cancel deployment"
-    bind:show={showCancel}
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Cancel deployment" bind:show={showCancel} onSubmit={handleSubmit}>
     <p data-private>Are you sure you want to cancel this deployment?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showCancel = false)}>Cancel</Button>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte
index 4ab648d8e..d745ccc0e 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte
@@ -83,7 +83,7 @@
     }
 </script>
 
-<Modal title="Create CLI deployment" size="big" bind:show headerDivider={false}>
+<Modal title="Create CLI deployment" bind:show>
     <p class="text">
         Deploy your function using the Appwrite CLI by running the following command inside your
         function's folder.
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/createGit.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/createGit.svelte
index 05ef83954..9e6f79549 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/createGit.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/createGit.svelte
@@ -8,7 +8,7 @@
     export let show = false;
 </script>
 
-<Modal title="Create Git deployment" size="big" bind:show headerDivider={false}>
+<Modal title="Create Git deployment" bind:show>
     {#if $func.installationId && $func.providerRepositoryId}
         <p class="text">
             Deploy your function from the Git provider of your choice by following the steps below.
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/createManual.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/createManual.svelte
index 347e9df0a..ea553d71f 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/createManual.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/createManual.svelte
@@ -60,13 +60,7 @@
     }
 </script>
 
-<Modal
-    title="Create manual deployment"
-    {error}
-    size="big"
-    bind:show
-    onSubmit={create}
-    headerDivider={false}>
+<Modal title="Create manual deployment" {error} bind:show onSubmit={create}>
     <p class="text">
         Manually deploy a function by uploading a zip file containing the source code and a relative
         path to the entry point.
@@ -77,7 +71,7 @@
             class="link">Learn more about function deployments</a
         >.
     </p>
-    <FormList gap={16}>
+    <FormList>
         <InputFile
             label="Gzipped code (tar.gz)"
             allowedFileExtensions={['gz', 'tar']}
@@ -103,7 +97,7 @@
                     <svelte:fragment slot="title">Overwrite settings</svelte:fragment>
                     <svelte:fragment slot="subtitle">(optional)</svelte:fragment>
 
-                    <FormList gap={16}>
+                    <FormList>
                         <p class="text">Overwrite your function entrypoint or build commands.</p>
                         <InputText
                             label="Entrypoint"
@@ -113,7 +107,6 @@
                         <InputTextarea
                             label="Commands"
                             placeholder="Enter a build command (e.g. 'npm install')"
-                            tooltip="Enter a single command or chain multiple commands with the && operator"
                             id="build"
                             bind:value={buildCommand} />
                         <InputChoice
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/delete.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/delete.svelte
index b0b9ce6bf..d8dec3deb 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/delete.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/delete.svelte
@@ -34,13 +34,7 @@
     }
 </script>
 
-<Modal
-    title="Delete deployment"
-    bind:show={showDelete}
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete deployment" bind:show={showDelete} onSubmit={handleSubmit}>
     <p data-private>Are you sure you want to delete this deployment?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/executions/delete.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/executions/delete.svelte
index a7b5b2082..9e65befd8 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/executions/delete.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/executions/delete.svelte
@@ -32,13 +32,7 @@
     }
 </script>
 
-<Modal
-    title="Delete execution"
-    bind:show={showDelete}
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete execution" bind:show={showDelete} onSubmit={handleSubmit}>
     <p data-private>Are you sure you want to delete this execution?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte
index 48d441be2..cb8639bf1 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/executions/execute-function/+page.svelte
@@ -11,8 +11,6 @@
     import {
         Button,
         Form,
-        FormItem,
-        FormItemPart,
         FormList,
         Helper,
         InputDate,
@@ -176,21 +174,19 @@
                         id="body"
                         bind:value={body} />
                 {:else}
-                    <FormItem isMultiple stackOnMobile style="gap: 1rem">
-                        <InputSelect
-                            required
-                            id="method"
-                            label="Method"
-                            options={methodOptions}
-                            bind:value={method} />
-                        <InputText
-                            label="Path"
-                            id="path"
-                            fullWidth
-                            placeholder="/"
-                            bind:value={path}
-                            required />
-                    </FormItem>
+                    <InputSelect
+                        required
+                        id="method"
+                        label="Method"
+                        options={methodOptions}
+                        bind:value={method} />
+                    <InputText
+                        label="Path"
+                        id="path"
+                        fullWidth
+                        placeholder="/"
+                        bind:value={path}
+                        required />
                     <div>
                         <h3>
                             <span class="body-text-2 u-bold">Headers</span>
@@ -207,42 +203,36 @@
                         <FormList class="u-gap-8 u-margin-block-start-8">
                             {#if headers}
                                 {#each headers as [name, value], index}
-                                    <FormItem isMultiple style="gap: 1rem">
-                                        <InputSelectSearch
-                                            fullWidth
-                                            label="Key"
-                                            placeholder="Select key"
-                                            interactiveOutput
-                                            hideEmpty
-                                            options={filteredKeyList}
-                                            id={`key-${index}`}
-                                            bind:value={name}
-                                            bind:search={name}>
-                                        </InputSelectSearch>
-                                        <InputText
-                                            isMultiple
-                                            fullWidth
-                                            label="Value"
-                                            placeholder="Enter value"
-                                            id={`value-${index}`}
-                                            bind:value />
-                                        <FormItemPart alignEnd>
-                                            <Button
-                                                text
-                                                noMargin
-                                                disabled={(!name || !value) && index === 0}
-                                                on:click={() => {
-                                                    if (index === 0) {
-                                                        headers = [['', '']];
-                                                    } else {
-                                                        headers.splice(index, 1);
-                                                        headers = headers;
-                                                    }
-                                                }}>
-                                                <span class="icon-x" aria-hidden="true" />
-                                            </Button>
-                                        </FormItemPart>
-                                    </FormItem>
+                                    <InputSelectSearch
+                                        fullWidth
+                                        label="Key"
+                                        placeholder="Select key"
+                                        interactiveOutput
+                                        hideEmpty
+                                        options={filteredKeyList}
+                                        id={`key-${index}`}
+                                        bind:value={name}
+                                        bind:search={name}>
+                                    </InputSelectSearch>
+                                    <InputText
+                                        label="Value"
+                                        placeholder="Enter value"
+                                        id={`value-${index}`}
+                                        bind:value />
+                                    <Button
+                                        text
+                                        noMargin
+                                        disabled={(!name || !value) && index === 0}
+                                        on:click={() => {
+                                            if (index === 0) {
+                                                headers = [['', '']];
+                                            } else {
+                                                headers.splice(index, 1);
+                                                headers = headers;
+                                            }
+                                        }}>
+                                        <span class="icon-x" aria-hidden="true" />
+                                    </Button>
                                 {/each}
                             {/if}
                         </FormList>
@@ -285,24 +275,18 @@
                                 }
                             ]} />
                         {#if isScheduled}
-                            <FormItem isMultiple tag="div" class="u-margin-block-start-16">
-                                <InputDate
-                                    id="date"
-                                    label="Date"
-                                    required={true}
-                                    min={minDate}
-                                    bind:value={date}
-                                    isMultiple
-                                    fullWidth />
-                                <InputTime
-                                    id="time"
-                                    label="Time"
-                                    required={true}
-                                    min={minTime}
-                                    bind:value={time}
-                                    isMultiple
-                                    fullWidth />
-                            </FormItem>
+                            <InputDate
+                                id="date"
+                                label="Date"
+                                required={true}
+                                min={minDate}
+                                bind:value={date} />
+                            <InputTime
+                                id="time"
+                                label="Time"
+                                required={true}
+                                min={minTime}
+                                bind:value={time} />
                         {/if}
                         <Helper type="neutral">
                             {isScheduled
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/executions/table.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/executions/table.svelte
index e1d829f8b..71105e69a 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/executions/table.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/executions/table.svelte
@@ -18,7 +18,8 @@
     import { func } from '../store';
     import Delete from './delete.svelte';
     import { Button } from '$lib/elements/forms';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Tooltip, Table } from '@appwrite.io/pink-svelte';
+    import type { PageData } from './$types';
 
     let showDropdown = [];
     let showDelete = false;
@@ -26,7 +27,7 @@
     let selectedExecution: Models.Execution = null;
 
     export let columns: Column[];
-    export let data;
+    export let data: PageData;
 
     let execution: Record<string, Models.Execution> = {};
 
@@ -41,114 +42,112 @@
     }
 </script>
 
-<TableScroll>
-    <TableHeader>
+<Table.Root>
+    <svelte:fragment slot="header">
         {#each columns as column}
             {#if column.show}
-                <TableCellHead width={column.width}>{column.title}</TableCellHead>
+                <Table.Header.Cell width={column.width.toString()}
+                    >{column.title}</Table.Header.Cell>
             {/if}
         {/each}
-        <TableCellHead width={40} />
-    </TableHeader>
-    <TableBody>
-        {#each data.executions.executions as execution, index (execution.$id)}
-            <TableRow>
-                {#each columns as column}
-                    {#if column.show}
-                        {#if column.id === '$id'}
-                            {#key column.id}
-                                <TableCell width={column.width} title="Execution ID">
-                                    <Id value={execution.$id}>{execution.$id}</Id>
-                                </TableCell>
-                            {/key}
-                        {:else if column.id === 'status'}
-                            <TableCell width={column.width} title={column.title}>
-                                {@const status = execution.status}
-                                <Tooltip
-                                    disabled={!execution?.scheduledAt || status !== 'scheduled'}>
-                                    <div>
-                                        <Pill
-                                            warning={status === 'waiting' || status === 'building'}
-                                            danger={status === 'failed'}
-                                            info={status === 'completed' || status === 'ready'}>
-                                            {#if status === 'scheduled'}
-                                                <span class="icon-clock" aria-hidden="true" />
-                                                {timeFromNow(execution.scheduledAt)}
-                                            {:else}
-                                                {status}
-                                            {/if}
-                                        </Pill>
-                                    </div>
-                                    <span slot="tooltip"
-                                        >{`Scheduled to execute on ${toLocaleDateTime(execution.scheduledAt)}`}</span>
-                                </Tooltip>
-                            </TableCell>
-                        {:else if column.id === '$createdAt'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {timeFromNow(execution.$createdAt)}
-                            </TableCellText>
-                        {:else if column.id === 'trigger'}
-                            <TableCell width={column.width} title={column.title}>
-                                <Pill>
-                                    <span class="text u-trim">{execution.trigger}</span>
-                                </Pill>
-                            </TableCell>
-                        {:else if column.id === 'requestMethod'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {execution.requestMethod}
-                            </TableCellText>
-                        {:else if column.id === 'responseStatusCode'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {execution.responseStatusCode}
-                            </TableCellText>
-                        {:else if column.id === 'requestPath'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {execution.requestPath}
-                            </TableCellText>
-                        {:else if column.id === 'duration'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {calculateTime(execution.duration)}
-                            </TableCellText>
-                        {/if}
+        <Table.Header.Cell width="40" />
+    </svelte:fragment>
+    {#each data.executions.executions as execution, index (execution.$id)}
+        <Table.Row>
+            {#each columns as column}
+                {#if column.show}
+                    {#if column.id === '$id'}
+                        {#key column.id}
+                            <Table.Cell>
+                                <Id value={execution.$id}>{execution.$id}</Id>
+                            </Table.Cell>
+                        {/key}
+                    {:else if column.id === 'status'}
+                        <Table.Cell>
+                            {@const status = execution.status}
+                            <Tooltip disabled={!execution?.scheduledAt || status !== 'scheduled'}>
+                                <div>
+                                    <Pill
+                                        warning={status === 'waiting' || status === 'building'}
+                                        danger={status === 'failed'}
+                                        info={status === 'completed' || status === 'ready'}>
+                                        {#if status === 'scheduled'}
+                                            <span class="icon-clock" aria-hidden="true" />
+                                            {timeFromNow(execution.scheduledAt)}
+                                        {:else}
+                                            {status}
+                                        {/if}
+                                    </Pill>
+                                </div>
+                                <span slot="tooltip"
+                                    >{`Scheduled to execute on ${toLocaleDateTime(execution.scheduledAt)}`}</span>
+                            </Tooltip>
+                        </Table.Cell>
+                    {:else if column.id === '$createdAt'}
+                        <Table.Cell>
+                            {timeFromNow(execution.$createdAt)}
+                        </Table.Cell>
+                    {:else if column.id === 'trigger'}
+                        <Table.Cell>
+                            <Pill>
+                                <span class="text u-trim">{execution.trigger}</span>
+                            </Pill>
+                        </Table.Cell>
+                    {:else if column.id === 'requestMethod'}
+                        <Table.Cell>
+                            {execution.requestMethod}
+                        </Table.Cell>
+                    {:else if column.id === 'responseStatusCode'}
+                        <Table.Cell>
+                            {execution.responseStatusCode}
+                        </Table.Cell>
+                    {:else if column.id === 'requestPath'}
+                        <Table.Cell>
+                            {execution.requestPath}
+                        </Table.Cell>
+                    {:else if column.id === 'duration'}
+                        <Table.Cell>
+                            {calculateTime(execution.duration)}
+                        </Table.Cell>
                     {/if}
-                {/each}
-                <TableCell width={40} showOverflow>
-                    <DropList bind:show={showDropdown[index]} placement="bottom-start" noArrow>
-                        <Button
-                            icon
-                            text
-                            ariaLabel="More options"
+                {/if}
+            {/each}
+            <Table.Cell>
+                <DropList bind:show={showDropdown[index]} placement="bottom-start" noArrow>
+                    <Button
+                        icon
+                        text
+                        ariaLabel="More options"
+                        on:click={() => {
+                            showDropdown[index] = !showDropdown[index];
+                        }}>
+                        <span class="icon-dots-horizontal" aria-hidden="true" />
+                    </Button>
+                    <svelte:fragment slot="list">
+                        <DropListItem
+                            icon="terminal"
                             on:click={() => {
-                                showDropdown[index] = !showDropdown[index];
+                                showDropdown = [];
+                                showLogs(execution);
                             }}>
-                            <span class="icon-dots-horizontal" aria-hidden="true" />
-                        </Button>
-                        <svelte:fragment slot="list">
-                            <DropListItem
-                                icon="terminal"
-                                on:click={() => {
-                                    showDropdown = [];
-                                    showLogs(execution);
-                                }}>
-                                Logs
-                            </DropListItem>
-                            <DropListItem
-                                icon="trash"
-                                event="execution_delete"
-                                on:click={() => {
-                                    selectedExecution = execution;
-                                    showDropdown = [];
-                                    showDelete = true;
-                                }}>
-                                Delete
-                            </DropListItem>
-                        </svelte:fragment>
-                    </DropList>
-                </TableCell>
-            </TableRow>
-        {/each}
-    </TableBody>
-</TableScroll>
+                            Logs
+                        </DropListItem>
+                        <DropListItem
+                            icon="trash"
+                            event="execution_delete"
+                            on:click={() => {
+                                selectedExecution = execution;
+                                showDropdown = [];
+                                showDelete = true;
+                            }}>
+                            Delete
+                        </DropListItem>
+                    </svelte:fragment>
+                </DropList>
+            </Table.Cell>
+        </Table.Row>
+    {/each}
+</Table.Root>
 
 {#if selectedExecution}
     <Delete {selectedExecution} bind:showDelete />
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/redeployModal.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/redeployModal.svelte
index dce772c9a..ae1a24825 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/redeployModal.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/redeployModal.svelte
@@ -37,13 +37,7 @@
     }
 </script>
 
-<Modal
-    title="Redeploy function"
-    size="big"
-    bind:show
-    bind:error
-    onSubmit={redeploy}
-    headerDivider={false}>
+<Modal title="Redeploy function" bind:show bind:error onSubmit={redeploy}>
     <p class="text">
         Are you sure you want to redeploy <b>{$func.name}</b>? Redeploying may affect your
         production code.
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/deleteModal.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/deleteModal.svelte
index 589f01e39..b9f669863 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/deleteModal.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/deleteModal.svelte
@@ -31,13 +31,7 @@
     };
 </script>
 
-<Modal
-    title="Delete function"
-    bind:show={showDelete}
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete function" bind:show={showDelete} onSubmit={handleSubmit}>
     <p data-private>
         Are you sure you want to delete this function and all associated deployments from your
         project?
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/disconnectRepo.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/disconnectRepo.svelte
index 699aebab2..33b849b9e 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/disconnectRepo.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/disconnectRepo.svelte
@@ -61,14 +61,7 @@
     }
 </script>
 
-<Modal
-    title="Disconnect Git repository"
-    bind:show
-    bind:error
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Disconnect Git repository" bind:show bind:error onSubmit={handleSubmit}>
     <p data-private>
         Are you sure you want to disconnect <b>{$func.name}</b>? This will affect future deployments
         to this function.
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte
index a2f6116a2..c73914191 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte
@@ -129,13 +129,7 @@
         ) ?? null;
 </script>
 
-<Modal
-    title="Git configuration"
-    headerDivider={false}
-    bind:show
-    size="big"
-    bind:error
-    onSubmit={handleSubmit}>
+<Modal title="Git configuration" bind:show bind:error onSubmit={handleSubmit}>
     <p class="text">
         Configure a Git repository that will trigger your function deployments when updated.
     </p>
@@ -149,7 +143,6 @@
                         options={installationsOptions}
                         id="installations"
                         label="installation"
-                        showLabel={false}
                         bind:value={selectedInstallationId} />
                 </div>
                 <div class="u-width-full-line">
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/table.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/table.svelte
index af89e599f..a03da9f08 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/table.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/table.svelte
@@ -1,14 +1,5 @@
 <script lang="ts">
     import { DropList, DropListItem, DropListLink, Id } from '$lib/components';
-    import {
-        TableBody,
-        TableCell,
-        TableCellHead,
-        TableCellText,
-        TableHeader,
-        TableRow,
-        TableScroll
-    } from '$lib/elements/table';
     import type { PageData } from './$types';
     import { type Models } from '@appwrite.io/console';
     import type { Column } from '$lib/helpers/types';
@@ -28,6 +19,7 @@
     import Cancel from './cancel.svelte';
     import { sdk } from '$lib/stores/sdk';
     import { base } from '$app/paths';
+    import { Table } from '@appwrite.io/pink-svelte';
 
     export let columns: Column[];
     export let data: PageData;
@@ -52,142 +44,142 @@
     }
 </script>
 
-<TableScroll>
-    <TableHeader>
+<Table.Root>
+    <svelte:fragment slot="header">
         {#each columns as column}
             {#if column.show}
-                <TableCellHead width={column.width}>{column.title}</TableCellHead>
+                <Table.Header.Cell width={column.width.toString()}>
+                    {column.title}
+                </Table.Header.Cell>
             {/if}
         {/each}
-        <TableCellHead width={40} />
-    </TableHeader>
-    <TableBody>
-        {#each data.deploymentList.deployments as deployment, index (deployment.$id)}
-            <TableRow>
-                {#each columns as column}
-                    {#if column.show}
-                        {#if column.id === '$id'}
-                            {#key column.id}
-                                <TableCell width={column.width} title="Deployment ID">
-                                    <Id value={deployment.$id}>{deployment.$id}</Id>
-                                </TableCell>
-                            {/key}
-                        {:else if column.id === 'status'}
-                            <TableCell width={column.width} title={column.title}>
-                                {@const status = deployment.status}
-                                {#if data?.activeDeployment?.$id === deployment?.$id}
-                                    <Pill success>
-                                        <span class="icon-lightning-bolt" aria-hidden="true" />
-                                        <span class="text u-trim">active</span>
-                                    </Pill>
-                                {:else}
-                                    <Pill
-                                        danger={status === 'failed'}
-                                        warning={status === 'building'}
-                                        info={status === 'ready'}>
-                                        {status}
-                                    </Pill>
-                                {/if}
-                            </TableCell>
-                        {:else if column.id === 'type'}
-                            <TableCell width={column.width} title={column.title}>
-                                <DeploymentSource {deployment} />
-                            </TableCell>
-                        {:else if column.id === '$updatedAt'}
-                            <TableCellText width={column.width} title={column.title}>
-                                <DeploymentCreatedBy {deployment} />
-                            </TableCellText>
-                        {:else if column.id === 'buildTime'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {#if ['processing', 'building'].includes(deployment.status)}
-                                    <span use:timer={{ start: deployment.$createdAt }} />
-                                {:else}
-                                    {calculateTime(deployment.buildTime)}
-                                {/if}
-                            </TableCellText>
-                        {:else if column.id === 'size'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {calculateSize(deployment.size)}
-                            </TableCellText>
-                        {:else if column.id === 'buildSize'}
-                            <TableCellText width={column.width} title={column.title}>
-                                {calculateSize(deployment.buildSize)}
-                            </TableCellText>
-                        {/if}
+        <Table.Header.Cell width="40" />
+    </svelte:fragment>
+    {#each data.deploymentList.deployments as deployment, index (deployment.$id)}
+        <Table.Row>
+            {#each columns as column}
+                {#if column.show}
+                    {#if column.id === '$id'}
+                        {#key column.id}
+                            <Table.Cell>
+                                <Id value={deployment.$id}>{deployment.$id}</Id>
+                            </Table.Cell>
+                        {/key}
+                    {:else if column.id === 'status'}
+                        <Table.Cell>
+                            {@const status = deployment.status}
+                            {#if data?.activeDeployment?.$id === deployment?.$id}
+                                <Pill success>
+                                    <span class="icon-lightning-bolt" aria-hidden="true" />
+                                    <span class="text u-trim">active</span>
+                                </Pill>
+                            {:else}
+                                <Pill
+                                    danger={status === 'failed'}
+                                    warning={status === 'building'}
+                                    info={status === 'ready'}>
+                                    {status}
+                                </Pill>
+                            {/if}
+                        </Table.Cell>
+                    {:else if column.id === 'type'}
+                        <Table.Cell>
+                            <DeploymentSource {deployment} />
+                        </Table.Cell>
+                    {:else if column.id === '$updatedAt'}
+                        <Table.Cell>
+                            <DeploymentCreatedBy {deployment} />
+                        </Table.Cell>
+                    {:else if column.id === 'buildTime'}
+                        <Table.Cell>
+                            {#if ['processing', 'building'].includes(deployment.status)}
+                                <span use:timer={{ start: deployment.$createdAt }} />
+                            {:else}
+                                {calculateTime(deployment.buildTime)}
+                            {/if}
+                        </Table.Cell>
+                    {:else if column.id === 'size'}
+                        <Table.Cell>
+                            {calculateSize(deployment.size)}
+                        </Table.Cell>
+                    {:else if column.id === 'buildSize'}
+                        <Table.Cell>
+                            {calculateSize(deployment.buildSize)}
+                        </Table.Cell>
                     {/if}
-                {/each}
-                <TableCell width={40} showOverflow>
-                    <DropList bind:show={showDropdown[index]} placement="bottom-start" noArrow>
-                        <button
-                            class="button is-only-icon is-text"
-                            aria-label="More options"
-                            on:click|preventDefault={() => {
-                                showDropdown[index] = !showDropdown[index];
+                {/if}
+            {/each}
+            <Table.Cell>
+                <DropList bind:show={showDropdown[index]} placement="bottom-start" noArrow>
+                    <button
+                        class="button is-only-icon is-text"
+                        aria-label="More options"
+                        on:click|preventDefault={() => {
+                            showDropdown[index] = !showDropdown[index];
+                        }}>
+                        <span class="icon-dots-horizontal" aria-hidden="true" />
+                    </button>
+                    <svelte:fragment slot="list">
+                        <DropListItem
+                            icon="refresh"
+                            on:click={() => {
+                                selectedDeployment = deployment;
+                                showRedeploy = true;
+                                showDropdown = [];
                             }}>
-                            <span class="icon-dots-horizontal" aria-hidden="true" />
-                        </button>
-                        <svelte:fragment slot="list">
+                            Redeploy
+                        </DropListItem>
+                        {#if deployment.status === 'ready' && deployment.$id !== $func.deployment}
                             <DropListItem
-                                icon="refresh"
+                                icon="lightning-bolt"
                                 on:click={() => {
                                     selectedDeployment = deployment;
-                                    showRedeploy = true;
+                                    showActivate = true;
                                     showDropdown = [];
                                 }}>
-                                Redeploy
+                                Activate
                             </DropListItem>
-                            {#if deployment.status === 'ready' && deployment.$id !== $func.deployment}
-                                <DropListItem
-                                    icon="lightning-bolt"
-                                    on:click={() => {
-                                        selectedDeployment = deployment;
-                                        showActivate = true;
-                                        showDropdown = [];
-                                    }}>
-                                    Activate
-                                </DropListItem>
-                            {/if}
-                            <DropListLink
-                                icon="terminal"
-                                href={`${base}/project-${$page.params.project}/functions/function-${$page.params.function}/deployment-${deployment.$id}`}>
-                                Logs
-                            </DropListLink>
-                            <DropListLink
-                                icon="download"
-                                href={getDownload(deployment.$id)}
-                                on:click={() => (showDropdown[index] = false)}>
-                                Download
-                            </DropListLink>
-                            {#if deployment.status === 'processing' || deployment.status === 'building' || deployment.status === 'waiting'}
-                                <DropListItem
-                                    icon="x-circle"
-                                    event="deployment_cancel"
-                                    on:click={() => {
-                                        selectedDeployment = deployment;
-                                        showDropdown = [];
-                                        showCancel = true;
-                                    }}>
-                                    Cancel
-                                </DropListItem>
-                            {/if}
-                            {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment.status !== 'waiting'}
-                                <DropListItem
-                                    icon="trash"
-                                    on:click={() => {
-                                        selectedDeployment = deployment;
-                                        showDropdown = [];
-                                        showDelete = true;
-                                    }}>
-                                    Delete
-                                </DropListItem>
-                            {/if}
-                        </svelte:fragment>
-                    </DropList>
-                </TableCell>
-            </TableRow>
-        {/each}
-    </TableBody>
-</TableScroll>
+                        {/if}
+                        <DropListLink
+                            icon="terminal"
+                            href={`${base}/project-${$page.params.project}/functions/function-${$page.params.function}/deployment-${deployment.$id}`}>
+                            Logs
+                        </DropListLink>
+                        <DropListLink
+                            icon="download"
+                            href={getDownload(deployment.$id)}
+                            on:click={() => (showDropdown[index] = false)}>
+                            Download
+                        </DropListLink>
+                        {#if deployment.status === 'processing' || deployment.status === 'building' || deployment.status === 'waiting'}
+                            <DropListItem
+                                icon="x-circle"
+                                event="deployment_cancel"
+                                on:click={() => {
+                                    selectedDeployment = deployment;
+                                    showDropdown = [];
+                                    showCancel = true;
+                                }}>
+                                Cancel
+                            </DropListItem>
+                        {/if}
+                        {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment.status !== 'waiting'}
+                            <DropListItem
+                                icon="trash"
+                                on:click={() => {
+                                    selectedDeployment = deployment;
+                                    showDropdown = [];
+                                    showDelete = true;
+                                }}>
+                                Delete
+                            </DropListItem>
+                        {/if}
+                    </svelte:fragment>
+                </DropList>
+            </Table.Cell>
+        </Table.Row>
+    {/each}
+</Table.Root>
 
 {#if selectedDeployment}
     <Delete {selectedDeployment} bind:showDelete />
diff --git a/src/routes/(console)/project-[project]/messaging/+page.svelte b/src/routes/(console)/project-[project]/messaging/+page.svelte
index efac29adc..6c3a9b7dd 100644
--- a/src/routes/(console)/project-[project]/messaging/+page.svelte
+++ b/src/routes/(console)/project-[project]/messaging/+page.svelte
@@ -43,6 +43,7 @@
     import type { Column } from '$lib/helpers/types';
     import { writable } from 'svelte/store';
     import { canWriteMessages } from '$lib/stores/roles';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
     export let data: PageData;
     let selected: string[] = [];
@@ -93,49 +94,21 @@
 </script>
 
 <Container>
-    <ContainerHeader title="Messages">
-        {#if $canWriteMessages}
-            <div class="is-only-mobile">
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery
+                search={data.search}
+                placeholder="Search by message ID, description, type, or status" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <Filters query={data.query} {columns} />
+            <ViewSelector view={data.view} {columns} hideView allowNoColumns showColsTextMobile />
+            {#if $canWriteMessages}
                 <CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownMobile} />
-            </div>
-        {/if}
-    </ContainerHeader>
-    <div class="u-flex u-flex-vertical u-gap-16 u-margin-block-start-16">
-        <SearchQuery
-            fullWidth
-            search={data.search}
-            placeholder="Search by message ID, description, type, or status">
-            <div class="is-not-mobile u-width-full-line">
-                <div class="u-flex u-gap-16 u-main-end">
-                    <Filters query={data.query} {columns} />
-                    <ViewSelector
-                        view={data.view}
-                        {columns}
-                        hideView
-                        allowNoColumns
-                        showColsTextMobile />
-                    {#if $canWriteMessages}
-                        <CreateMessageDropdown
-                            bind:showCreateDropdown={showCreateDropdownDesktop} />
-                    {/if}
-                </div>
-            </div>
-        </SearchQuery>
-        <div class="is-only-mobile u-flex u-gap-16">
-            <div class="u-flex-basis-50-percent">
-                <ViewSelector
-                    view={data.view}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile
-                    fullWidthMobile />
-            </div>
-            <div class="u-flex-basis-50-percent">
-                <Filters query={data.query} {columns} fullWidthMobile />
-            </div>
-        </div>
-    </div>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+
     {#if data.messages.total}
         <TableScroll>
             <TableHeader>
@@ -190,7 +163,6 @@
                                             <MessageStatusPill status={message.status} />
                                             {#if message.status === 'failed'}
                                                 <Button
-                                                    link
                                                     on:click={(e) => {
                                                         e.preventDefault();
                                                         errors = message.deliveryErrors;
@@ -298,14 +270,7 @@
 
 <FailedModal bind:show={showFailed} {errors} />
 
-<Modal
-    title="Delete messages"
-    icon="exclamation"
-    state="warning"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    headerDivider={false}
-    closable={!deleting}>
+<Modal title="Delete messages" bind:show={showDelete} onSubmit={handleDelete} closable={!deleting}>
     <p class="text" data-private>
         Are you sure you want to delete <b>{selected.length}</b>
         {selected.length > 1 ? 'messages' : 'message'}?
diff --git a/src/routes/(console)/project-[project]/messaging/failedModal.svelte b/src/routes/(console)/project-[project]/messaging/failedModal.svelte
index 0663097c6..1260ce47b 100644
--- a/src/routes/(console)/project-[project]/messaging/failedModal.svelte
+++ b/src/routes/(console)/project-[project]/messaging/failedModal.svelte
@@ -7,7 +7,7 @@
     export let errors: string[];
 </script>
 
-<Modal title="Message error" headerDivider={false} bind:show size="big">
+<Modal title="Message error" bind:show>
     <div class="box u-flex-vertical u-gap-24">
         <p class="u-inline-flex u-cross-center u-gap-8">
             <span
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/cancelModal.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/cancelModal.svelte
index 39802b18d..5ad462b88 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/cancelModal.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/cancelModal.svelte
@@ -71,14 +71,7 @@
     };
 </script>
 
-<Modal
-    title="Cancel scheduling"
-    bind:show
-    onSubmit={update}
-    headerDivider={false}
-    size="small"
-    icon="exclamation"
-    state="warning">
+<Modal title="Cancel scheduling" bind:show onSubmit={update}>
     <div class="u-flex-vertical u-gap-16">
         <p data-private>
             Are you sure you want to cancel the scheduling of <span class="u-bold"
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/deleteModal.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/deleteModal.svelte
index 6d335bd78..f8fa5bc9a 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/deleteModal.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/deleteModal.svelte
@@ -47,13 +47,7 @@
     };
 </script>
 
-<Modal
-    title="Delete message"
-    bind:show
-    onSubmit={deleteMessage}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete message" bind:show onSubmit={deleteMessage}>
     <p data-private>
         Are you sure you want to delete
         {#if description}
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/pushMessage.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/pushMessage.svelte
index 843947b85..5a89303c3 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/pushMessage.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/pushMessage.svelte
@@ -3,8 +3,6 @@
     import {
         Button,
         Form,
-        FormItem,
-        FormItemPart,
         FormList,
         Helper,
         InputFilePicker,
@@ -120,60 +118,46 @@
                     label="Message"
                     disabled={message.status !== 'draft'}
                     bind:value={body} />
-                <FormItem>
-                    <InputFilePicker
-                        disabled={message.status !== 'draft'}
-                        bind:value={file}
-                        label="Media"
-                        optionalText="(Optional)" />
-                </FormItem>
+                <InputFilePicker
+                    disabled={message.status !== 'draft'}
+                    bind:value={file}
+                    label="Media"
+                    optionalText="(Optional)" />
                 <form class="form">
-                    <FormItem>
-                        <Label
-                            tooltip="A key/value payload of additional metadata that's hidden from users. Use this to include information to support logic such as redirection and routing."
-                            >Custom data <span class="u-color-text-gray">(Optional)</span></Label>
-                    </FormItem>
+                    <Label
+                        tooltip="A key/value payload of additional metadata that's hidden from users. Use this to include information to support logic such as redirection and routing."
+                        >Custom data <span class="u-color-text-gray">(Optional)</span></Label>
                     <div class=" u-grid u-gap-8">
                         <ul class="form-list" style="--p-form-list-gap: 1rem">
                             {#each customData || [] as _, rowIndex}
-                                <FormItem isMultiple>
-                                    <InputText
-                                        id={`${rowIndex}-key`}
-                                        isMultiple
-                                        fullWidth
-                                        disabled={message.status != 'draft'}
-                                        bind:value={customData[rowIndex][0]}
-                                        placeholder="Enter key"
-                                        label="Key"
-                                        showLabel={false} />
-                                    <InputText
-                                        id={`${rowIndex}-value`}
-                                        isMultiple
-                                        fullWidth
-                                        disabled={message.status != 'draft'}
-                                        bind:value={customData[rowIndex][1]}
-                                        placeholder="Enter value"
-                                        label="Value"
-                                        showLabel={false}
-                                        required />
-                                    <FormItemPart alignEnd>
-                                        <Button
-                                            text
-                                            disabled={message.status != 'draft'}
-                                            on:click={() => {
-                                                if (customData.length === 1) {
-                                                    customData = [['', '']];
-                                                    return;
-                                                }
+                                <InputText
+                                    id={`${rowIndex}-key`}
+                                    disabled={message.status != 'draft'}
+                                    bind:value={customData[rowIndex][0]}
+                                    placeholder="Enter key"
+                                    label="Key"
+                                    showLabel={false} />
+                                <InputText
+                                    id={`${rowIndex}-value`}
+                                    disabled={message.status != 'draft'}
+                                    bind:value={customData[rowIndex][1]}
+                                    placeholder="Enter value"
+                                    label="Value"
+                                    showLabel={false}
+                                    required />
+                                <Button
+                                    text
+                                    disabled={message.status != 'draft'}
+                                    on:click={() => {
+                                        if (customData.length === 1) {
+                                            customData = [['', '']];
+                                            return;
+                                        }
 
-                                                customData = customData.filter(
-                                                    (_, i) => i !== rowIndex
-                                                );
-                                            }}>
-                                            <span class="icon-x" aria-hidden="true" />
-                                        </Button>
-                                    </FormItemPart>
-                                </FormItem>
+                                        customData = customData.filter((_, i) => i !== rowIndex);
+                                    }}>
+                                    <span class="icon-x" aria-hidden="true" />
+                                </Button>
                             {/each}
                         </ul>
                         {#if dataError}
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/scheduleModal.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/scheduleModal.svelte
index a8d749d2c..db8b01b71 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/scheduleModal.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/scheduleModal.svelte
@@ -113,7 +113,7 @@
     $: dateTime = new Date(`${date}T${time}`);
 </script>
 
-<Modal title="Schedule message" bind:show onSubmit={update} headerDivider={false} size="big">
+<Modal title="Schedule message" bind:show onSubmit={update}>
     <div>
         <FormList>
             <div
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/sendModal.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/sendModal.svelte
index fdfaa1d5c..a32ff96d6 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/sendModal.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/sendModal.svelte
@@ -84,7 +84,7 @@
     };
 </script>
 
-<Modal title="Send message" bind:show onSubmit={update} headerDivider={false} size="small">
+<Modal title="Send message" bind:show onSubmit={update}>
     <div class="u-flex-vertical u-gap-16">
         <p data-private>
             You are about to send a message to an estimated <span class="u-bold"
diff --git a/src/routes/(console)/project-[project]/messaging/providers/+page.svelte b/src/routes/(console)/project-[project]/messaging/providers/+page.svelte
index d75a1464c..271218a07 100644
--- a/src/routes/(console)/project-[project]/messaging/providers/+page.svelte
+++ b/src/routes/(console)/project-[project]/messaging/providers/+page.svelte
@@ -18,6 +18,8 @@
     import Table from './table.svelte';
     import { base } from '$app/paths';
     import { canWriteProviders } from '$lib/stores/roles';
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import { View } from '$lib/helpers/load';
 
     export let data: PageData;
 
@@ -27,46 +29,19 @@
 </script>
 
 <Container>
-    <div class="u-flex u-flex-vertical">
-        <div class="u-flex u-main-space-between">
-            <Heading tag="h2" size="5">Providers</Heading>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery search={data.search} placeholder="Search providers" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <Filters query={data.query} {columns} />
+            <ViewSelector view={View.Table} {columns} hideView allowNoColumns showColsTextMobile />
             {#if $canWriteProviders}
-                <div class="is-only-mobile">
-                    <CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownMobile} />
-                </div>
+                <CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownDesktop} />
             {/if}
-        </div>
-        <!-- TODO: fix width of search input in mobile -->
-        <SearchQuery search={data.search} placeholder="Search provider">
-            <div class="u-flex u-gap-16 is-not-mobile">
-                <Filters query={data.query} {columns} />
-                <ViewSelector
-                    view={data.view}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-                {#if $canWriteProviders}
-                    <CreateProviderDropdown bind:showCreateDropdown={showCreateDropdownDesktop} />
-                {/if}
-            </div>
-        </SearchQuery>
-        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
-            <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
-                <ViewSelector
-                    view={data.view}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-            </div>
-            <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
-                <Filters query={data.query} {columns} />
-            </div>
-        </div>
-    </div>
+        </Layout.Stack>
+    </Layout.Stack>
+
     {#if data.providers.total}
         <Table {data} />
 
diff --git a/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/deleteProvider.svelte b/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/deleteProvider.svelte
index 2f039855a..7385f1545 100644
--- a/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/deleteProvider.svelte
+++ b/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/deleteProvider.svelte
@@ -37,8 +37,7 @@
     bind:show={showDelete}
     onSubmit={deleteProvider}
     icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+    state="warning">
     <p data-private>
         Are you sure you want to delete <b>{$provider.name}</b> from '{$project.name}'?
     </p>
diff --git a/src/routes/(console)/project-[project]/messaging/providers/settingsFormList.svelte b/src/routes/(console)/project-[project]/messaging/providers/settingsFormList.svelte
index 356ea4759..4cdd1d788 100644
--- a/src/routes/(console)/project-[project]/messaging/providers/settingsFormList.svelte
+++ b/src/routes/(console)/project-[project]/messaging/providers/settingsFormList.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormItem, FormList } from '$lib/elements/forms';
+    import { FormList } from '$lib/elements/forms';
     import SettingsFormInput from './settingsFormInput.svelte';
     import type {
         ProviderInput,
@@ -34,13 +34,11 @@
 <FormList>
     {#each inputs as input}
         {#if Array.isArray(input)}
-            <FormItem isMultiple>
-                {#each input as i}
-                    <div class="u-flex u-flex-basis-50-percent">
-                        <SettingsFormInput input={i} bind:params bind:files fullWidth />
-                    </div>
-                {/each}
-            </FormItem>
+            {#each input as i}
+                <div class="u-flex u-flex-basis-50-percent">
+                    <SettingsFormInput input={i} bind:params bind:files fullWidth />
+                </div>
+            {/each}
         {:else}
             <SettingsFormInput {input} bind:params bind:files />
         {/if}
diff --git a/src/routes/(console)/project-[project]/messaging/providers/table.svelte b/src/routes/(console)/project-[project]/messaging/providers/table.svelte
index 938fa84a8..912e9c257 100644
--- a/src/routes/(console)/project-[project]/messaging/providers/table.svelte
+++ b/src/routes/(console)/project-[project]/messaging/providers/table.svelte
@@ -150,7 +150,6 @@
     state="warning"
     bind:show={showDelete}
     onSubmit={handleDelete}
-    headerDivider={false}
     closable={!deleting}>
     <p class="text" data-private>
         Are you sure you want to delete <b>{selectedIds.length}</b>
diff --git a/src/routes/(console)/project-[project]/messaging/topics/+page.svelte b/src/routes/(console)/project-[project]/messaging/topics/+page.svelte
index c30948252..fafad34a8 100644
--- a/src/routes/(console)/project-[project]/messaging/topics/+page.svelte
+++ b/src/routes/(console)/project-[project]/messaging/topics/+page.svelte
@@ -6,9 +6,8 @@
         EmptySearch,
         SearchQuery,
         PaginationWithLimit,
-        Heading,
-        ViewSelector,
-        EmptyFilter
+        EmptyFilter,
+        ViewSelector
     } from '$lib/components';
     import Create from './create.svelte';
     import { goto } from '$app/navigation';
@@ -17,12 +16,13 @@
     import type { Models } from '@appwrite.io/console';
     import type { PageData } from './$types';
     import { showCreate } from './store';
-    import { View } from '$lib/helpers/load';
     import { Filters, hasPageQueries } from '$lib/components/filters';
     import Table from './table.svelte';
     import type { Column } from '$lib/helpers/types';
     import { writable } from 'svelte/store';
     import { canWriteTopics } from '$lib/stores/roles';
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import { View } from '$lib/helpers/load';
 
     export let data: PageData;
 
@@ -50,52 +50,22 @@
 </script>
 
 <Container>
-    <div class="u-flex u-flex-vertical">
-        <div class="u-flex u-main-space-between">
-            <Heading tag="h2" size="5">Topics</Heading>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery search={data.search} placeholder="Search by name or ID" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <Filters query={data.query} {columns} />
+            <ViewSelector view={View.Table} {columns} hideView allowNoColumns showColsTextMobile />
             {#if $canWriteTopics}
-                <div class="is-only-mobile">
-                    <Button on:click={() => ($showCreate = true)} event="create_topic">
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text">Create topic</span>
-                    </Button>
-                </div>
+                <Button on:click={() => ($showCreate = true)} event="create_topic">
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Create topic</span>
+                </Button>
             {/if}
-        </div>
-        <!-- TODO: fix width of search input in mobile -->
-        <SearchQuery search={data.search} placeholder="Search by name or ID">
-            <div class="u-flex u-gap-16 is-not-mobile">
-                <Filters query={data.query} {columns} />
-                <ViewSelector
-                    view={View.Table}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-                {#if $canWriteTopics}
-                    <Button on:click={() => ($showCreate = true)} event="create_topic">
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text">Create topic</span>
-                    </Button>
-                {/if}
-            </div>
-        </SearchQuery>
-        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
-            <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
-                <ViewSelector
-                    view={View.Table}
-                    {columns}
-                    hideView
-                    allowNoColumns
-                    showColsTextMobile />
-            </div>
-            <div class="u-flex-basis-50-percent">
-                <!-- TODO: fix width -->
-                <Filters query={data.query} {columns} />
-            </div>
-        </div>
-    </div>
+        </Layout.Stack>
+    </Layout.Stack>
+
     {#if data.topics.total}
         <Table columns={$columns} {data} />
 
diff --git a/src/routes/(console)/project-[project]/messaging/topics/table.svelte b/src/routes/(console)/project-[project]/messaging/topics/table.svelte
index 971430a88..2b7db0130 100644
--- a/src/routes/(console)/project-[project]/messaging/topics/table.svelte
+++ b/src/routes/(console)/project-[project]/messaging/topics/table.svelte
@@ -138,7 +138,6 @@
     state="warning"
     bind:show={showDelete}
     onSubmit={handleDelete}
-    headerDivider={false}
     closable={!deleting}>
     <p class="text" data-private>
         Are you sure you want to delete <b>{selectedIds.length}</b>
diff --git a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte
index ae0481e7a..75c681907 100644
--- a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte
+++ b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/deleteTopic.svelte
@@ -37,8 +37,7 @@
     bind:show={showDelete}
     onSubmit={deleteTopic}
     icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+    state="warning">
     <p data-private>
         Are you sure you want to delete <b>{$topic.name}</b> from '{$project.name}'?
     </p>
diff --git a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/table.svelte b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/table.svelte
index 515ea6605..92117b7c7 100644
--- a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/table.svelte
+++ b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/table.svelte
@@ -169,7 +169,6 @@
     state="warning"
     bind:show={showDelete}
     onSubmit={handleDelete}
-    headerDivider={false}
     closable={!deleting}>
     <p class="text" data-private>
         Are you sure you want to delete <b>{selectedIds.length}</b>
diff --git a/src/routes/(console)/project-[project]/messaging/topicsModal.svelte b/src/routes/(console)/project-[project]/messaging/topicsModal.svelte
index 9c1e7e218..3cb51e63d 100644
--- a/src/routes/(console)/project-[project]/messaging/topicsModal.svelte
+++ b/src/routes/(console)/project-[project]/messaging/topicsModal.svelte
@@ -98,7 +98,7 @@
     }
 </script>
 
-<Modal {title} bind:show onSubmit={submit} on:close={reset} headerDivider={false} size="big">
+<Modal {title} bind:show onSubmit={submit} on:close={reset} size="big">
     <div class="u-flex u-flex-vertical u-gap-32">
         <p class="text">
             Select existing topics you want to send this message to its targets. The message will be
diff --git a/src/routes/(console)/project-[project]/messaging/userTargetsModal.svelte b/src/routes/(console)/project-[project]/messaging/userTargetsModal.svelte
index 7c7ca0266..a6409ec8f 100644
--- a/src/routes/(console)/project-[project]/messaging/userTargetsModal.svelte
+++ b/src/routes/(console)/project-[project]/messaging/userTargetsModal.svelte
@@ -128,7 +128,7 @@
     }
 </script>
 
-<Modal {title} bind:show onSubmit={submit} on:close={reset} size="big" headerDivider={false}>
+<Modal {title} bind:show onSubmit={submit} on:close={reset} size="big">
     <div class="u-flex u-flex-vertical u-gap-32">
         <slot name="description" />
 
diff --git a/src/routes/(console)/project-[project]/messaging/wizard/pushFormList.svelte b/src/routes/(console)/project-[project]/messaging/wizard/pushFormList.svelte
index 3316183d1..05a959910 100644
--- a/src/routes/(console)/project-[project]/messaging/wizard/pushFormList.svelte
+++ b/src/routes/(console)/project-[project]/messaging/wizard/pushFormList.svelte
@@ -27,8 +27,6 @@
     import { messageParams, providerType } from './store';
     import {
         Button,
-        FormItem,
-        FormItemPart,
         FormList,
         Helper,
         InputEmail,
@@ -152,62 +150,49 @@
         </div>
         <form class="form">
             <FormList>
-                <FormItem>
-                    <InputFilePicker
-                        bind:value={$messageParams[MessagingProviderType.Push].file}
-                        label="Media" />
-                </FormItem>
-                <FormItem>
-                    <Label
-                        tooltip="A key/value payload of additional metadata that's hidden from users. Use this to include information to support logic such as redirection and routing."
-                        >Custom data <span class="u-color-text-gray">(Optional)</span></Label>
-                </FormItem>
+                <InputFilePicker
+                    bind:value={$messageParams[MessagingProviderType.Push].file}
+                    label="Media" />
+                <Label
+                    tooltip="A key/value payload of additional metadata that's hidden from users. Use this to include information to support logic such as redirection and routing."
+                    >Custom data <span class="u-color-text-gray">(Optional)</span></Label>
             </FormList>
 
             <div class=" u-grid u-gap-8">
                 <ul class="form-list" style="--p-form-list-gap: 1rem">
                     {#each customData || [] as _, rowIndex}
-                        <FormItem isMultiple>
-                            <InputText
-                                id={`${rowIndex}-key`}
-                                isMultiple
-                                fullWidth
-                                bind:value={$messageParams[MessagingProviderType.Push].data[
-                                    rowIndex
-                                ][0]}
-                                placeholder="Enter key"
-                                label="Key"
-                                showLabel={false} />
+                        <InputText
+                            id={`${rowIndex}-key`}
+                            bind:value={
+                                $messageParams[MessagingProviderType.Push].data[rowIndex][0]
+                            }
+                            placeholder="Enter key"
+                            label="Key"
+                            showLabel={false} />
 
-                            <InputText
-                                id={`${rowIndex}-value`}
-                                isMultiple
-                                fullWidth
-                                bind:value={$messageParams[MessagingProviderType.Push].data[
-                                    rowIndex
-                                ][1]}
-                                placeholder="Enter value"
-                                label="Value"
-                                showLabel={false}
-                                required />
-                            <FormItemPart alignEnd>
-                                <Button
-                                    text
-                                    on:click={() => {
-                                        if (customData.length === 1) {
-                                            $messageParams[MessagingProviderType.Push].data = [
-                                                ['', '']
-                                            ];
-                                            return;
-                                        }
+                        <InputText
+                            id={`${rowIndex}-value`}
+                            bind:value={
+                                $messageParams[MessagingProviderType.Push].data[rowIndex][1]
+                            }
+                            placeholder="Enter value"
+                            label="Value"
+                            showLabel={false}
+                            required />
+                        <Button
+                            text
+                            on:click={() => {
+                                if (customData.length === 1) {
+                                    $messageParams[MessagingProviderType.Push].data = [['', '']];
+                                    return;
+                                }
 
-                                        $messageParams[MessagingProviderType.Push].data =
-                                            customData.filter((_, i) => i !== rowIndex);
-                                    }}>
-                                    <span class="icon-x" aria-hidden="true" />
-                                </Button>
-                            </FormItemPart>
-                        </FormItem>
+                                $messageParams[MessagingProviderType.Push].data = customData.filter(
+                                    (_, i) => i !== rowIndex
+                                );
+                            }}>
+                            <span class="icon-x" aria-hidden="true" />
+                        </Button>
                     {/each}
                 </ul>
                 {#if dataError}
diff --git a/src/routes/(console)/project-[project]/messaging/wizard/step3.svelte b/src/routes/(console)/project-[project]/messaging/wizard/step3.svelte
index 19d865909..0ff0c20c8 100644
--- a/src/routes/(console)/project-[project]/messaging/wizard/step3.svelte
+++ b/src/routes/(console)/project-[project]/messaging/wizard/step3.svelte
@@ -127,7 +127,7 @@
     </Helper>
 </WizardStep>
 
-<Modal title="Send message" bind:show={showConfirmation} headerDivider={false} onSubmit={submit}>
+<Modal title="Send message" bind:show={showConfirmation} onSubmit={submit}>
     <p>
         You are about to send a message to an estimated <span class="u-bold">{totalTargets}</span> recipients.
         Would you like to proceed?
diff --git a/src/routes/(console)/project-[project]/overview/keys/[key]/delete.svelte b/src/routes/(console)/project-[project]/overview/keys/[key]/delete.svelte
index cbf3d0b7d..677fb93c7 100644
--- a/src/routes/(console)/project-[project]/overview/keys/[key]/delete.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/[key]/delete.svelte
@@ -33,13 +33,7 @@
     }
 </script>
 
-<Modal
-    title="Delete API key"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete API key" bind:show={showDelete} onSubmit={handleDelete}>
     <p>The API key will be permanently deleted. This action is irreversible.</p>
 
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/project-[project]/overview/platforms/[platform]/delete.svelte b/src/routes/(console)/project-[project]/overview/platforms/[platform]/delete.svelte
index 305dad410..d7a5c52bc 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/delete.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/delete.svelte
@@ -33,13 +33,7 @@
     }
 </script>
 
-<Modal
-    title="Delete platform"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete platform" bind:show={showDelete} onSubmit={handleDelete}>
     <p>The Platform will be permanently deleted. This action is irreversible.</p>
 
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step1.svelte b/src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step1.svelte
index 9c3b9761a..adc7e5a04 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step1.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/wizard/apple/step1.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Pill } from '$lib/elements';
-    import { FormItem, FormList, InputText } from '$lib/elements/forms';
+    import { FormList, InputText } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { createPlatform } from '../store';
@@ -38,36 +38,34 @@
 <WizardStep {beforeSubmit}>
     <svelte:fragment slot="title">Apple registration</svelte:fragment>
 
-    <FormList isCommonSection>
-        <FormItem>
-            <p>Choose an Apple platform</p>
-            <div class="u-flex u-gap-16 u-margin-block-start-8">
-                <Pill
-                    button
-                    on:click={() => (platform = PlatformType.Appleios)}
-                    selected={platform === PlatformType.Appleios}>
-                    iOS
-                </Pill>
-                <Pill
-                    button
-                    on:click={() => (platform = PlatformType.Applemacos)}
-                    selected={platform === PlatformType.Applemacos}>
-                    macOS
-                </Pill>
-                <Pill
-                    button
-                    on:click={() => (platform = PlatformType.Applewatchos)}
-                    selected={platform === PlatformType.Applewatchos}>
-                    watchOS
-                </Pill>
-                <Pill
-                    button
-                    on:click={() => (platform = PlatformType.Appletvos)}
-                    selected={platform === PlatformType.Appletvos}>
-                    tvOS
-                </Pill>
-            </div>
-        </FormItem>
+    <FormList>
+        <p>Choose an Apple platform</p>
+        <div class="u-flex u-gap-16 u-margin-block-start-8">
+            <Pill
+                button
+                on:click={() => (platform = PlatformType.Appleios)}
+                selected={platform === PlatformType.Appleios}>
+                iOS
+            </Pill>
+            <Pill
+                button
+                on:click={() => (platform = PlatformType.Applemacos)}
+                selected={platform === PlatformType.Applemacos}>
+                macOS
+            </Pill>
+            <Pill
+                button
+                on:click={() => (platform = PlatformType.Applewatchos)}
+                selected={platform === PlatformType.Applewatchos}>
+                watchOS
+            </Pill>
+            <Pill
+                button
+                on:click={() => (platform = PlatformType.Appletvos)}
+                selected={platform === PlatformType.Appletvos}>
+                tvOS
+            </Pill>
+        </div>
         <InputText
             id="name"
             label="Name"
diff --git a/src/routes/(console)/project-[project]/promoteVariableModal.svelte b/src/routes/(console)/project-[project]/promoteVariableModal.svelte
index 976b119b2..6d9a98b3d 100644
--- a/src/routes/(console)/project-[project]/promoteVariableModal.svelte
+++ b/src/routes/(console)/project-[project]/promoteVariableModal.svelte
@@ -15,9 +15,10 @@
     bind:show={showPromote}
     onSubmit={() => {
         dispatch('promoted');
-    }}
-    headerDivider={false}
-    title={isConflicting ? 'Overwrite global variable' : 'Promote variable'}>
+    }}>
+    <svelte:fragment slot="title">
+        {isConflicting ? 'Overwrite global variable' : 'Promote variable'}
+    </svelte:fragment>
     {#if isConflicting}
         <p data-private>
             Promoting this variable will overwrite your global variable with the same name. Are you
diff --git a/src/routes/(console)/project-[project]/rawVariableEditor.svelte b/src/routes/(console)/project-[project]/rawVariableEditor.svelte
index 92e1113a5..27c3cee33 100644
--- a/src/routes/(console)/project-[project]/rawVariableEditor.svelte
+++ b/src/routes/(console)/project-[project]/rawVariableEditor.svelte
@@ -115,13 +115,7 @@
         (tab === 'env' && baseEnvCode === envCode) || (tab === 'json' && baseJsonCode === jsonCode);
 </script>
 
-<Modal
-    title="Editor"
-    headerDivider={false}
-    bind:show={showEditor}
-    onSubmit={handleSubmit}
-    bind:error
-    size="big">
+<Modal title="Editor" bind:show={showEditor} onSubmit={handleSubmit} bind:error>
     <p>
         Edit {isGlobal ? 'global' : 'environment'} variables below or download as a
         <span class="inline-code">.{tab}</span> file.
@@ -181,7 +175,7 @@
                 <li class="buttons-list-item">
                     <div bind:this={copyParent}>
                         {#key copyParent}
-                            <Copy appendTo={copyParent} value={tab == 'json' ? jsonCode : envCode}>
+                            <Copy value={tab == 'json' ? jsonCode : envCode}>
                                 <button
                                     type="button"
                                     class="button is-small is-text is-only-icon"
diff --git a/src/routes/(console)/project-[project]/settings/GitDisconnectModal.svelte b/src/routes/(console)/project-[project]/settings/GitDisconnectModal.svelte
index fa12b9e3b..1cf3592fc 100644
--- a/src/routes/(console)/project-[project]/settings/GitDisconnectModal.svelte
+++ b/src/routes/(console)/project-[project]/settings/GitDisconnectModal.svelte
@@ -43,14 +43,7 @@
     }
 </script>
 
-<Modal
-    title="Disconnect installation"
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}
-    bind:show={showGitDisconnect}
-    onSubmit={handleSubmit}
-    size="big">
+<Modal title="Disconnect installation" bind:show={showGitDisconnect} onSubmit={handleSubmit}>
     {#await loadFunctions()}
         <div class="u-flex u-main-center">
             <div class="avatar is-size-x-small">
diff --git a/src/routes/(console)/project-[project]/settings/GitInstallationModal.svelte b/src/routes/(console)/project-[project]/settings/GitInstallationModal.svelte
index c846ff6a7..bcaed0c52 100644
--- a/src/routes/(console)/project-[project]/settings/GitInstallationModal.svelte
+++ b/src/routes/(console)/project-[project]/settings/GitInstallationModal.svelte
@@ -18,7 +18,7 @@
     }
 </script>
 
-<Modal title="Install" headerDivider={false} bind:show={showGitInstall} size="big">
+<Modal title="Install" bind:show={showGitInstall}>
     <p>Select a provider to import an existing git repository.</p>
 
     <div class="u-flex u-cross-center u-flex-vertical u-gap-16">
diff --git a/src/routes/(console)/project-[project]/settings/deleteProject.svelte b/src/routes/(console)/project-[project]/settings/deleteProject.svelte
index fbf1d4c7e..9c6ab2887 100644
--- a/src/routes/(console)/project-[project]/settings/deleteProject.svelte
+++ b/src/routes/(console)/project-[project]/settings/deleteProject.svelte
@@ -42,7 +42,7 @@
     };
 </script>
 
-<CardGrid danger>
+<CardGrid>
     <div>
         <Heading tag="h6" size="7">Delete project</Heading>
     </div>
@@ -68,13 +68,7 @@
     </svelte:fragment>
 </CardGrid>
 
-<Modal
-    title="Delete project"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete project" bind:show={showDelete} onSubmit={handleDelete}>
     <p>
         <b>This project will be deleted</b>, along with all of its metadata, stats, and other
         resources. <b>This action is irreversible</b>.
diff --git a/src/routes/(console)/project-[project]/settings/migrations/details.svelte b/src/routes/(console)/project-[project]/settings/migrations/details.svelte
index f83ec4482..d90b359e9 100644
--- a/src/routes/(console)/project-[project]/settings/migrations/details.svelte
+++ b/src/routes/(console)/project-[project]/settings/migrations/details.svelte
@@ -45,7 +45,7 @@
     let tab = 'details' as 'details' | 'logs';
 </script>
 
-<Modal bind:show size="big">
+<Modal bind:show>
     <svelte:fragment slot="title">
         {#if migration.status === 'failed'}
             Resolve migration issues
diff --git a/src/routes/(console)/project-[project]/settings/migrations/exportModal.svelte b/src/routes/(console)/project-[project]/settings/migrations/exportModal.svelte
index 61a907592..ff6539a7c 100644
--- a/src/routes/(console)/project-[project]/settings/migrations/exportModal.svelte
+++ b/src/routes/(console)/project-[project]/settings/migrations/exportModal.svelte
@@ -106,7 +106,7 @@
 </script>
 
 <Modal title="Export to self-hosted instance" bind:show {onSubmit}>
-    <FormList gap={24}>
+    <FormList>
         <Alert isStandalone>
             <svelte:fragment slot="title">API key creation</svelte:fragment>
             By initiating the transfer, an API key will be automatically generated in the background,
diff --git a/src/routes/(console)/project-[project]/settings/smtp/+page.svelte b/src/routes/(console)/project-[project]/settings/smtp/+page.svelte
index e735055b1..b6ea4ee3f 100644
--- a/src/routes/(console)/project-[project]/settings/smtp/+page.svelte
+++ b/src/routes/(console)/project-[project]/settings/smtp/+page.svelte
@@ -188,7 +188,6 @@
                                 bind:value={username}
                                 placeholder="Enter username" />
                             <InputPassword
-                                showPasswordButton
                                 id="passwort"
                                 label="Password"
                                 bind:value={password}
diff --git a/src/routes/(console)/project-[project]/settings/transferProject.svelte b/src/routes/(console)/project-[project]/settings/transferProject.svelte
index 11997a4ef..a5790eebc 100644
--- a/src/routes/(console)/project-[project]/settings/transferProject.svelte
+++ b/src/routes/(console)/project-[project]/settings/transferProject.svelte
@@ -32,7 +32,7 @@
     };
 </script>
 
-<Modal title="Transfer project" bind:show onSubmit={handleTransfer} headerDivider={false}>
+<Modal title="Transfer project" bind:show onSubmit={handleTransfer}>
     <p>Are you sure you want to transfer <b>{$project.name}</b> to <b>{teamName}</b>?</p>
     <p>
         Members who are not part of the destination organization must be invited to gain access to
diff --git a/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte b/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
index d7666f5bc..e1edb4272 100644
--- a/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
@@ -63,16 +63,14 @@
         {#if $organization.billingPlan === BillingPlan.SCALE}
             <p class="text">
                 On the Scale plan, you'll be charged only for any usage that exceeds the thresholds
-                per resource listed below. <Button
-                    on:click={() => ($showUsageRatesModal = true)}
-                    link>Learn more about plan usage limits.</Button>
+                per resource listed below. <Button on:click={() => ($showUsageRatesModal = true)}
+                    >Learn more about plan usage limits.</Button>
             </p>
         {:else if $organization.billingPlan === BillingPlan.PRO}
             <p class="text">
                 On the Pro plan, you'll be charged only for any usage that exceeds the thresholds
-                per resource listed below. <Button
-                    on:click={() => ($showUsageRatesModal = true)}
-                    link>Learn more about plan usage limits.</Button>
+                per resource listed below. <Button on:click={() => ($showUsageRatesModal = true)}
+                    >Learn more about plan usage limits.</Button>
             </p>
         {:else if $organization.billingPlan === BillingPlan.FREE}
             <p class="text">
diff --git a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/dangerZone.svelte b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/dangerZone.svelte
index ad4b0cf0c..c24a86152 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/dangerZone.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/dangerZone.svelte
@@ -8,7 +8,7 @@
     let showDelete = false;
 </script>
 
-<CardGrid danger>
+<CardGrid>
     <div>
         <Heading tag="h2" size="7">Delete webhook</Heading>
     </div>
diff --git a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/delete.svelte b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/delete.svelte
index 6fa515a6c..60af3ea0f 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/delete.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/delete.svelte
@@ -33,13 +33,7 @@
     }
 </script>
 
-<Modal
-    title="Delete webhook"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete webhook" bind:show={showDelete} onSubmit={handleDelete}>
     <p data-private>
         Are you sure you want to delete <b>{$webhook.name}</b> from '{$project.name}'?
     </p>
diff --git a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateEvents.svelte b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateEvents.svelte
index 5852e3d74..c710a782a 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateEvents.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateEvents.svelte
@@ -94,7 +94,7 @@
                     {/each}
                 </TableList>
                 <div class="u-flex u-margin-block-start-16">
-                    <Button text noMargin on:click={() => (showCreateEvent = true)}>
+                    <Button text on:click={() => (showCreateEvent = true)}>
                         <span class="icon-plus" aria-hidden="true" />
                         <span class="u-text">Add event</span>
                     </Button>
diff --git a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateSecurity.svelte b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateSecurity.svelte
index afdbaed62..2f375174a 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateSecurity.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateSecurity.svelte
@@ -79,7 +79,6 @@
                     label="Password"
                     id="password"
                     minlength={0}
-                    showPasswordButton
                     placeholder="Enter password"
                     bind:value={httpPass} />
 
diff --git a/src/routes/(console)/project-[project]/settings/webhooks/failedModal.svelte b/src/routes/(console)/project-[project]/settings/webhooks/failedModal.svelte
index 22f8221b0..7fb4e6ba2 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/failedModal.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/failedModal.svelte
@@ -23,7 +23,7 @@
     $: iconClass = enabled ? 'icon-check-circle' : 'icon-exclamation-circle';
 </script>
 
-<Modal title="Webhook error" headerDivider={false} bind:show size="big">
+<Modal title="Webhook error" bind:show>
     <div class="box u-flex-vertical u-gap-24">
         <div class="u-inline-flex u-cross-center u-gap-8">
             <p class="u-stretch">
diff --git a/src/routes/(console)/project-[project]/settings/webhooks/wizard/step2.svelte b/src/routes/(console)/project-[project]/settings/webhooks/wizard/step2.svelte
index 591ecc903..f600005bd 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/wizard/step2.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/wizard/step2.svelte
@@ -44,7 +44,7 @@
             {/each}
         </TableList>
         <div class="u-flex u-margin-block-start-16">
-            <Button text noMargin on:click={() => (showCreate = !showCreate)}>
+            <Button text on:click={() => (showCreate = !showCreate)}>
                 <span class="icon-plus" aria-hidden="true" />
                 <span class="u-text">Add event</span>
             </Button>
diff --git a/src/routes/(console)/project-[project]/sites/(components)/selectRootModal.svelte b/src/routes/(console)/project-[project]/sites/(components)/selectRootModal.svelte
index b1d1af285..2d8cdea15 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/selectRootModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/selectRootModal.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { iconPath } from '$lib/stores/app';
     import { sdk } from '$lib/stores/sdk';
     import { installation, repository } from '$lib/stores/vcs';
     import { DirectoryPicker } from '@appwrite.io/pink-svelte';
diff --git a/src/routes/(console)/project-[project]/sites/+page.svelte b/src/routes/(console)/project-[project]/sites/+page.svelte
index d2bd05e0a..2d5adc9f1 100644
--- a/src/routes/(console)/project-[project]/sites/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
     import { registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
-    import { Empty, PaginationWithLimit } from '$lib/components';
+    import { Empty, PaginationWithLimit, SearchQuery } from '$lib/components';
     import { Container, ContainerHeader } from '$lib/layout';
     import { isServiceLimited } from '$lib/stores/billing';
     // import { templatesList } from '$lib/stores/templates';
     import { organization } from '$lib/stores/organization';
     import { wizard } from '$lib/stores/wizard';
     import { canWriteSites } from '$lib/stores/roles.js';
-    import { Icon, Popover, Image, ActionMenu } from '@appwrite.io/pink-svelte';
+    import { Icon, Popover, Image, ActionMenu, Layout } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import {
         IconCog,
@@ -52,12 +52,17 @@
 </script>
 
 <Container>
-    <ContainerHeader
-        title="Sites"
-        buttonText={TMPSITEROLES ? 'Create site' : ''}
-        buttonEvent="create_site"
-        buttonMethod={() => (show = true)}
-        total={data.siteList.total} />
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery search={data.search} placeholder="Search sites" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <Button on:mousedown={() => (show = true)} event="create_site" size="s">
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="text">Create site</span>
+            </Button>
+        </Layout.Stack>
+    </Layout.Stack>
     {#if data.siteList.total}
         <section class="sites-grid">
             {#each data.siteList.sites as site}
diff --git a/src/routes/(console)/project-[project]/sites/+page.ts b/src/routes/(console)/project-[project]/sites/+page.ts
index 01500877f..dd7cc08d2 100644
--- a/src/routes/(console)/project-[project]/sites/+page.ts
+++ b/src/routes/(console)/project-[project]/sites/+page.ts
@@ -1,24 +1,25 @@
 import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
-import { getLimit, getPage, pageToOffset } from '$lib/helpers/load';
+import { getLimit, getPage, getSearch, pageToOffset } from '$lib/helpers/load';
 import { CARD_LIMIT, Dependencies } from '$lib/constants';
 
 export const load = async ({ url, depends, route }) => {
     depends(Dependencies.SITES);
 
     const page = getPage(url);
+    const search = getSearch(url);
     const limit = getLimit(url, route, CARD_LIMIT);
     const offset = pageToOffset(page, limit);
 
-    const siteList = await sdk.forProject.sites.list([
-        Query.limit(limit),
-        Query.offset(offset),
-        Query.orderDesc('')
-    ]);
+    const siteList = await sdk.forProject.sites.list(
+        [Query.limit(limit), Query.offset(offset), Query.orderDesc('')],
+        search || undefined
+    );
 
     return {
         offset,
         limit,
+        search,
         siteList
     };
 };
diff --git a/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte b/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte
index 82003e359..597ed6a56 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/finish/(components)/addCollaboratorModal.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Alert, Modal } from '$lib/components';
-    import { InputText, InputEmail, Button, FormList } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { InputEmail, Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { organization } from '$lib/stores/organization';
     import { invalidate } from '$app/navigation';
-    import { BillingPlan, Dependencies } from '$lib/constants';
+    import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { isCloud } from '$lib/system';
     import { roles } from '$lib/stores/billing';
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
     import Roles from '$lib/components/roles/roles.svelte';
diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/importSiteVariablesModal.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/importSiteVariablesModal.svelte
index 71193700e..2963f6521 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/importSiteVariablesModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/importSiteVariablesModal.svelte
@@ -44,7 +44,7 @@
     }
 </script>
 
-<Modal headerDivider={false} title="Import variables" bind:show onSubmit={handleSubmit} bind:error>
+<Modal title="Import variables" bind:show onSubmit={handleSubmit} bind:error>
     <span slot="description"> Import new environment variables from .env file. </span>
     <InputFile bind:files />
     {#if variables?.length > 0}
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.ts
index 81adb7abb..f10d6da5a 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.ts
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.ts
@@ -2,7 +2,7 @@ import { sdk } from '$lib/stores/sdk';
 
 export const load = async ({ parent, params }) => {
     const { installations, frameworks } = await parent();
-    let template = await sdk.forProject.sites.getTemplate(params.template);
+    const template = await sdk.forProject.sites.getTemplate(params.template);
 
     return {
         installations,
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/connectBehaviour.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/connectBehaviour.svelte
index 390e8c1f9..a92cb333e 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/connectBehaviour.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/connectBehaviour.svelte
@@ -8,18 +8,13 @@
 
 <div style="display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;">
     <LabelCard
-        name="connect-behaviour"
         value="now"
         bind:group={connectBehaviour}
         disabled={!isVcsEnabled}
         title="Connect to Git repository">
         Clone the template to a new repository or connect it to an existing one.
     </LabelCard>
-    <LabelCard
-        name="connect-behaviour"
-        value="later"
-        bind:group={connectBehaviour}
-        disabled={!isVcsEnabled}>
+    <LabelCard value="later" bind:group={connectBehaviour} disabled={!isVcsEnabled}>
         <svelte:fragment slot="title">Connect later</svelte:fragment>
         Deploy now and continue development via CLI, or connect Git from your site settings.
     </LabelCard>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/cancelDeploymentModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/cancelDeploymentModal.svelte
index 77f91bca2..c0db6a671 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/cancelDeploymentModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/cancelDeploymentModal.svelte
@@ -34,13 +34,7 @@
     }
 </script>
 
-<Modal
-    title="Cancel deployment"
-    bind:show={showCancel}
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Cancel deployment" bind:show={showCancel} onSubmit={handleSubmit}>
     <p data-private>Are you sure you want to cancel this deployment?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showCancel = false)}>Cancel</Button>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte
index 6e6117ad2..c12484dcc 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deleteDeploymentModal.svelte
@@ -34,13 +34,7 @@
     }
 </script>
 
-<Modal
-    title="Delete deployment"
-    bind:show={showDelete}
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete deployment" bind:show={showDelete} onSubmit={handleSubmit}>
     <p data-private>Are you sure you want to delete this deployment?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/redeployModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/redeployModal.svelte
index a6b9f993a..6eeda93fa 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/redeployModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/redeployModal.svelte
@@ -32,7 +32,7 @@
     }
 </script>
 
-<Modal title="Redeploy site" bind:show bind:error onSubmit={redeploy} headerDivider={false}>
+<Modal title="Redeploy site" bind:show bind:error onSubmit={redeploy}>
     <p class="text">
         Are you sure you want to redeploy <b>{site.name}</b>? Redeploying may affect your production
         code.
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/+page.svelte
index 6f0d4a939..1c1b62acf 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/+page.svelte
@@ -50,6 +50,7 @@
             Add domain
         </Button>
     </Layout.Stack>
+
     {#if data.domains.total}
         <Table.Root>
             <svelte:fragment slot="header">
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/deleteDomainModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/deleteDomainModal.svelte
index 3e426d286..02f66f2fb 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/deleteDomainModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/deleteDomainModal.svelte
@@ -32,13 +32,7 @@
     }
 </script>
 
-<Modal
-    title="Delete domain"
-    bind:show
-    onSubmit={deleteDomain}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete domain" bind:show onSubmit={deleteDomain}>
     {#if selectedDomain}
         <p data-private>
             Are you sure you want to delete <b>{selectedDomain.domain}</b>? You will no longer be
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/retryDomainModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/retryDomainModal.svelte
index be65f55d7..c03adf3ee 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/retryDomainModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/retryDomainModal.svelte
@@ -8,7 +8,6 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Dependencies } from '$lib/constants';
     import RecordsCard from './recordsCard.svelte';
-    import { Layout } from '@appwrite.io/pink-svelte';
 
     export let show = false;
     export let selectedDomain: Models.ProxyRule;
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/logs/delete.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/logs/delete.svelte
index a30c119a8..7108353bd 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/logs/delete.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/logs/delete.svelte
@@ -32,13 +32,7 @@
     }
 </script>
 
-<Modal
-    title="Delete execution"
-    bind:show={showDelete}
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete execution" bind:show={showDelete} onSubmit={handleSubmit}>
     <p data-private>Are you sure you want to delete this execution?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/dangerZone.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/dangerZone.svelte
index 47ab695ae..0fff3adc8 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/dangerZone.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/dangerZone.svelte
@@ -10,7 +10,7 @@
     let showDelete = false;
 </script>
 
-<CardGrid danger>
+<CardGrid>
     <Heading tag="h6" size="7">Delete site</Heading>
     <p>
         The site will be permanently deleted, including all deployments associated with it. This
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/deleteModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/deleteModal.svelte
index b32694e1d..4528c1be8 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/deleteModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/deleteModal.svelte
@@ -31,12 +31,7 @@
     };
 </script>
 
-<Modal
-    title="Delete site"
-    bind:show={showDelete}
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning">
+<Modal title="Delete site" bind:show={showDelete} onSubmit={handleSubmit}>
     <p data-private>
         Are you sure you want to delete this site and all associated deployments from your project?
     </p>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/disconnectRepo.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/disconnectRepo.svelte
index 1615e3996..2028bb718 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/disconnectRepo.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/disconnectRepo.svelte
@@ -54,14 +54,7 @@
     }
 </script>
 
-<Modal
-    title="Disconnect Git repository"
-    bind:show
-    bind:error
-    onSubmit={handleSubmit}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Disconnect Git repository" bind:show bind:error onSubmit={handleSubmit}>
     <p data-private>
         Are you sure you want to disconnect <b>{site.name}</b>? This will affect future deployments
         to this site.
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRuntimeSettings.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRuntimeSettings.svelte
index cb0ad4b29..8f5928073 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRuntimeSettings.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRuntimeSettings.svelte
@@ -73,8 +73,7 @@
                 placeholder="Select runtime"
                 bind:value={buildRuntime}
                 options={buildRuntimeOptions}
-                required
-                hideRequired />
+                required />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[project]/storage/+page.svelte b/src/routes/(console)/project-[project]/storage/+page.svelte
index ea3066763..310d46d87 100644
--- a/src/routes/(console)/project-[project]/storage/+page.svelte
+++ b/src/routes/(console)/project-[project]/storage/+page.svelte
@@ -4,7 +4,14 @@
 
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { Empty, GridItem1, CardContainer, PaginationWithLimit, Id } from '$lib/components';
+    import {
+        Empty,
+        GridItem1,
+        CardContainer,
+        PaginationWithLimit,
+        Id,
+        SearchQuery
+    } from '$lib/components';
     import { Pill } from '$lib/elements';
     import Create from './create.svelte';
     import { Container, ContainerHeader } from '$lib/layout';
@@ -14,7 +21,8 @@
     import { writable } from 'svelte/store';
     import type { PageData } from './$types';
     import { canWriteBuckets } from '$lib/stores/roles';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Layout, Tooltip } from '@appwrite.io/pink-svelte';
+    import { Button } from '$lib/elements/forms';
 
     export let data: PageData;
 
@@ -27,12 +35,23 @@
 </script>
 
 <Container>
-    <ContainerHeader
-        title="Buckets"
-        total={data.buckets.total}
-        buttonText={$canWriteBuckets ? 'Create bucket' : null}
-        buttonEvent="create_bucket"
-        buttonMethod={() => ($showCreateBucket = true)} />
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery search={data.search} placeholder="Search buckets" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            {#if $canWriteBuckets}
+                <Button
+                    on:mousedown={() => ($showCreateBucket = true)}
+                    event="create_bucket"
+                    size="s">
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Create bucket</span>
+                </Button>
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+
     {#if data.buckets.total}
         <CardContainer
             showEmpty={$canWriteBuckets}
diff --git a/src/routes/(console)/project-[project]/storage/+page.ts b/src/routes/(console)/project-[project]/storage/+page.ts
index cb8268b86..be4e555c9 100644
--- a/src/routes/(console)/project-[project]/storage/+page.ts
+++ b/src/routes/(console)/project-[project]/storage/+page.ts
@@ -1,21 +1,22 @@
 import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
-import { getLimit, getPage, pageToOffset } from '$lib/helpers/load';
+import { getLimit, getPage, getSearch, pageToOffset } from '$lib/helpers/load';
 import { CARD_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url, route }) => {
     const page = getPage(url);
+    const search = getSearch(url);
     const limit = getLimit(url, route, CARD_LIMIT);
     const offset = pageToOffset(page, limit);
 
     return {
         offset,
         limit,
-        buckets: await sdk.forProject.storage.listBuckets([
-            Query.limit(limit),
-            Query.offset(offset),
-            Query.orderDesc('')
-        ])
+        search,
+        buckets: await sdk.forProject.storage.listBuckets(
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('')],
+            search || undefined
+        )
     };
 };
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
index 7adbeaf92..15ecd1d5a 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
@@ -49,7 +49,7 @@
     import Create from './create-file/create.svelte';
     import DeleteFile from './deleteFile.svelte';
     import { isCloud } from '$lib/system';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Layout, Tooltip } from '@appwrite.io/pink-svelte';
 
     export let data;
 
@@ -93,51 +93,17 @@
 </script>
 
 <Container>
-    <ContainerHeader title="Files" serviceId="storage" isFlex={false} total={usedStorage}>
-        <svelte:fragment let:isButtonDisabled>
-            <SearchQuery search={data.search} placeholder="Search by filename">
-                <Tooltip disabled={!isButtonDisabled}>
-                    <div>
-                        <Button
-                            on:click={() => wizard.start(Create)}
-                            event="create_file"
-                            disabled={isButtonDisabled}>
-                            <span class="icon-plus" aria-hidden="true" />
-                            <span class="text">Create file</span>
-                        </Button>
-                    </div>
-                    <span slot="tooltip">Upgrade to add more files</span>
-                </Tooltip>
-            </SearchQuery>
-        </svelte:fragment>
-        <svelte:fragment slot="tooltip" let:limit let:tier let:upgradeMethod>
-            {#if tier === tierToPlan(BillingPlan.FREE).name}
-                <p class="u-bold">The {tier} plan has limits</p>
-                <ul>
-                    <li>{limit}GB total file storage</li>
-                    <li>
-                        {Math.floor(parseInt(maxFileSize.value))}{maxFileSize.unit} file upload size
-                        limit
-                    </li>
-                </ul>
-                <p class="text">
-                    <button class="link" type="button" on:click|preventDefault={upgradeMethod}
-                        >Upgrade</button>
-                    for additional storage resources.
-                </p>
-            {:else}
-                <p class="text">
-                    You are limited to {limit} GB storage on the {tier} plan. After this amount
-                    <button
-                        class="link"
-                        type="button"
-                        on:click|preventDefault={() => ($showUsageRatesModal = true)}
-                        >usage fees will apply</button>
-                    .
-                </p>
-            {/if}
-        </svelte:fragment>
-    </ContainerHeader>
+    <Layout.Stack direction="row" justifyContent="space-between">
+        <Layout.Stack direction="row" alignItems="center">
+            <SearchQuery search={data.search} placeholder="Search files" />
+        </Layout.Stack>
+        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+            <Button on:mousedown={() => wizard.start(Create)} event="create_file" size="s">
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="text">Create file</span>
+            </Button>
+        </Layout.Stack>
+    </Layout.Stack>
 
     {#if data.files.total}
         <Table>
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
index 8c848afd7..b6e67ed1a 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
@@ -41,7 +41,7 @@
         </Alert>
     {/if}
 
-    <FormList class="u-margin-block-start-24">
+    <FormList>
         <div class="u-width-full-line u-overflow-hidden">
             <InputFile
                 required
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/deleteBucket.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/deleteBucket.svelte
index 9990debae..4409fb994 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/deleteBucket.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/deleteBucket.svelte
@@ -31,13 +31,7 @@
     };
 </script>
 
-<Modal
-    title="Delete bucket"
-    bind:show={showDelete}
-    onSubmit={deleteUser}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete bucket" bind:show={showDelete} onSubmit={deleteUser}>
     <p data-private>Are you sure you want to delete <b>{$bucket.name}</b>?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/deleteFile.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/deleteFile.svelte
index 6c2239ad2..5915143e8 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/deleteFile.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/deleteFile.svelte
@@ -32,13 +32,7 @@
     };
 </script>
 
-<Modal
-    title="Delete file"
-    bind:show={showDelete}
-    onSubmit={deleteFile}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete file" bind:show={showDelete} onSubmit={deleteFile}>
     <p data-private>Are you sure you want to delete <b>{file.name}</b>?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
index 6640b784b..53fe70365 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
@@ -156,7 +156,7 @@
             </svelte:fragment>
         </CardGrid>
 
-        <CardGrid danger>
+        <CardGrid>
             <Heading tag="h6" size="7">Delete file</Heading>
             <p>The file will be permanently deleted. This action is irreversible.</p>
             <svelte:fragment slot="aside">
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
index 7f4841621..bac961065 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
@@ -31,13 +31,7 @@
     };
 </script>
 
-<Modal
-    title="Delete file"
-    bind:show={showDelete}
-    onSubmit={deleteFile}
-    icon="exclamation"
-    state="warning"
-    headerDivider={false}>
+<Modal title="Delete file" bind:show={showDelete} onSubmit={deleteFile}>
     <p data-private>Are you sure you want to delete <b>{$file.name}</b>?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
index 572cd88e6..9a878b0c3 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
@@ -65,7 +65,6 @@
     import {
         Button,
         Form,
-        FormItem,
         FormList,
         InputChoice,
         InputSelect,
@@ -340,29 +339,22 @@
                 </p>
                 <svelte:fragment slot="aside">
                     <FormList>
-                        <FormItem>
-                            <InputChoice
-                                label="Encryption"
-                                id="encryption"
-                                type="switchbox"
-                                bind:value={encryption}>
-                                This parameter allows you to configure whether or not the files
-                                inside the bucket will be encrypted. We don't encrypt files bigger
-                                than 20MB.
-                            </InputChoice>
-                        </FormItem>
-
-                        <FormItem>
-                            <InputChoice
-                                label="Antivirus"
-                                id="antivirus"
-                                type="switchbox"
-                                bind:value={antivirus}>
-                                This parameter allows you to configure whether or not the files
-                                inside the bucket should be scanned by the Appwrite Antivirus
-                                scanner.
-                            </InputChoice>
-                        </FormItem>
+                        <InputChoice
+                            label="Encryption"
+                            id="encryption"
+                            type="switchbox"
+                            bind:value={encryption}>
+                            This parameter allows you to configure whether or not the files inside
+                            the bucket will be encrypted. We don't encrypt files bigger than 20MB.
+                        </InputChoice>
+                        <InputChoice
+                            label="Antivirus"
+                            id="antivirus"
+                            type="switchbox"
+                            bind:value={antivirus}>
+                            This parameter allows you to configure whether or not the files inside
+                            the bucket should be scanned by the Appwrite Antivirus scanner.
+                        </InputChoice>
                     </FormList>
                 </svelte:fragment>
 
@@ -444,7 +436,7 @@
             </CardGrid>
         </Form>
 
-        <CardGrid danger>
+        <CardGrid>
             <Heading tag="h6" size="7">Delete bucket</Heading>
             <p class="text">
                 The bucket will be permanently deleted, including all the files within it. This
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.ts b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.ts
deleted file mode 100644
index 546bfa7a8..000000000
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { PageLoad } from './$types';
-import { sdk } from '$lib/stores/sdk';
-
-export const load: PageLoad = async ({ parent }) => {
-    const { organization } = await parent();
-    const currentPlan = await sdk.forConsole.billing.getPlan(organization.$id);
-    return {
-        currentPlan
-    };
-};
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
index 9509002bd..617f82ba2 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
@@ -2,7 +2,7 @@
     import { Submit } from '$lib/actions/analytics';
     import { Alert, CardGrid, Heading } from '$lib/components';
     import { BillingPlan } from '$lib/constants';
-    import { Button, Form, FormItem, InputNumber, InputSelect } from '$lib/elements/forms';
+    import { Button, Form, InputNumber, InputSelect } from '$lib/elements/forms';
     import { humanFileSize, sizeToBytes } from '$lib/helpers/sizeConvertion';
     import { createByteUnitPair } from '$lib/helpers/unit';
     import { readOnly, upgradeURL } from '$lib/stores/billing';
@@ -60,25 +60,15 @@
                     </svelte:fragment>
                 </Alert>
             {/if}
-            <FormItem isMultiple>
-                <InputNumber
-                    isMultiple
-                    fullWidth
-                    id="size"
-                    label="Size"
-                    disabled={$readOnly && !GRACE_PERIOD_OVERRIDE}
-                    placeholder={$bucket.maximumFileSize.toString()}
-                    min={0}
-                    max={isCloud ? maxValue() : Infinity}
-                    bind:value={$value} />
-                <InputSelect
-                    id="bytes"
-                    label="Bytes"
-                    isMultiple
-                    fullWidth
-                    {options}
-                    bind:value={$unit} />
-            </FormItem>
+            <InputNumber
+                id="size"
+                label="Size"
+                disabled={$readOnly && !GRACE_PERIOD_OVERRIDE}
+                placeholder={$bucket.maximumFileSize.toString()}
+                min={0}
+                max={isCloud ? maxValue() : Infinity}
+                bind:value={$value} />
+            <InputSelect id="bytes" label="Bytes" {options} bind:value={$unit} />
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[project]/storage/create.svelte b/src/routes/(console)/project-[project]/storage/create.svelte
index c2b128226..d4043ee25 100644
--- a/src/routes/(console)/project-[project]/storage/create.svelte
+++ b/src/routes/(console)/project-[project]/storage/create.svelte
@@ -45,7 +45,7 @@
     }
 </script>
 
-<Modal title="Create bucket" {error} onSubmit={create} size="big" bind:show={showCreate}>
+<Modal title="Create bucket" {error} onSubmit={create} bind:show={showCreate}>
     <FormList>
         <InputText
             id="name"
diff --git a/src/routes/(console)/project-[project]/uploadVariablesModal.svelte b/src/routes/(console)/project-[project]/uploadVariablesModal.svelte
index 74b6e3f4e..10a324399 100644
--- a/src/routes/(console)/project-[project]/uploadVariablesModal.svelte
+++ b/src/routes/(console)/project-[project]/uploadVariablesModal.svelte
@@ -67,7 +67,7 @@
     const title = `Import new ${isGlobal ? 'global' : 'environment'} variables`;
 </script>
 
-<Modal {title} bind:show bind:error headerDivider={false} onSubmit={handleSubmit}>
+<Modal {title} bind:show bind:error onSubmit={handleSubmit}>
     <div class="u-flex u-flex-vertical u-gap-24 u-margin-block-start-8">
         <p>
             {title} from
diff --git a/src/routes/(public)/(guest)/login/+page.svelte b/src/routes/(public)/(guest)/login/+page.svelte
index 809fcc66c..7986a7023 100644
--- a/src/routes/(public)/(guest)/login/+page.svelte
+++ b/src/routes/(public)/(guest)/login/+page.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
-    import {
-        Button,
-        Form,
-        FormItem,
-        FormList,
-        InputEmail,
-        InputPassword
-    } from '$lib/elements/forms';
+    import { Button, Form, FormList, InputEmail, InputPassword } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Unauthenticated } from '$lib/layout';
@@ -103,20 +96,14 @@
                     label="Password"
                     placeholder="Password"
                     required={true}
-                    meter={false}
-                    showPasswordButton={true}
                     bind:value={pass} />
-                <FormItem>
-                    <Button fullWidth submit {disabled}>Sign in</Button>
-                </FormItem>
+                <Button fullWidth submit {disabled}>Sign in</Button>
                 {#if isCloud}
                     <span class="with-separators eyebrow-heading-3">or</span>
-                    <FormItem>
-                        <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
-                            <span class="icon-github" aria-hidden="true" />
-                            <span class="text">Sign in with GitHub</span>
-                        </Button>
-                    </FormItem>
+                    <Button secondary fullWidth on:click={onGithubLogin} {disabled}>
+                        <span class="icon-github" aria-hidden="true" />
+                        <span class="text">Sign in with GitHub</span>
+                    </Button>
                 {/if}
             </FormList>
         </Form>
diff --git a/src/routes/(public)/(guest)/register/+page.svelte b/src/routes/(public)/(guest)/register/+page.svelte
index 96fe43ae0..6637fb693 100644
--- a/src/routes/(public)/(guest)/register/+page.svelte
+++ b/src/routes/(public)/(guest)/register/+page.svelte
@@ -4,7 +4,6 @@
     import {
         Button,
         Form,
-        FormItem,
         InputChoice,
         InputEmail,
         InputPassword,
@@ -109,7 +108,6 @@
                     label="Password"
                     placeholder="Your password"
                     required
-                    showPasswordButton
                     bind:value={pass} />
                 <InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
                     By registering, you agree that you have read, understand, and acknowledge our <a
@@ -125,17 +123,13 @@
                         target="_blank"
                         rel="noopener noreferrer">General Terms of Use</a
                     >.</InputChoice>
-                <FormItem>
-                    <Button fullWidth submit {disabled}>Sign up</Button>
-                </FormItem>
+                <Button fullWidth submit {disabled}>Sign up</Button>
                 {#if isCloud}
                     <span class="with-separators eyebrow-heading-3">or</span>
-                    <FormItem>
-                        <Button github fullWidth on:click={onGithubLogin} {disabled}>
-                            <span class="icon-github" aria-hidden="true" />
-                            <span class="text">Sign up with GitHub</span>
-                        </Button>
-                    </FormItem>
+                    <Button fullWidth on:click={onGithubLogin} {disabled}>
+                        <span class="icon-github" aria-hidden="true" />
+                        <span class="text">Sign up with GitHub</span>
+                    </Button>
                 {/if}
             </FormList>
         </Form>
diff --git a/src/routes/(public)/(guest)/register/invite/[slug]/+page.svelte b/src/routes/(public)/(guest)/register/invite/[slug]/+page.svelte
index a36c5505d..993d74a80 100644
--- a/src/routes/(public)/(guest)/register/invite/[slug]/+page.svelte
+++ b/src/routes/(public)/(guest)/register/invite/[slug]/+page.svelte
@@ -4,7 +4,6 @@
     import {
         Button,
         Form,
-        FormItem,
         InputChoice,
         InputEmail,
         InputPassword,
@@ -115,7 +114,6 @@
                     label="Password"
                     placeholder="Your password"
                     required={true}
-                    showPasswordButton={true}
                     bind:value={pass} />
                 <InputText
                     id="Code"
@@ -137,9 +135,7 @@
                         target="_blank"
                         rel="noopener noreferrer">General Terms of Use</a
                     >.</InputChoice>
-                <FormItem>
-                    <Button fullWidth submit>Sign up</Button>
-                </FormItem>
+                <Button fullWidth submit>Sign up</Button>
             </FormList>
         </Form>
     </svelte:fragment>
diff --git a/src/routes/(public)/hackathon/+page.svelte b/src/routes/(public)/hackathon/+page.svelte
index e67767823..b6f9ed2a2 100644
--- a/src/routes/(public)/hackathon/+page.svelte
+++ b/src/routes/(public)/hackathon/+page.svelte
@@ -5,7 +5,6 @@
     import HashnodeDark from './hashnode-dark.svg';
     import HashnodeLight from './hashnode-light.svg';
     import Badge from './hackathon-badge.svg';
-    import { tooltip } from '$lib/actions/tooltip';
     import { base } from '$app/paths';
     import { Tooltip } from '@appwrite.io/pink-svelte';
 </script>
diff --git a/src/routes/(public)/recover/+page.svelte b/src/routes/(public)/recover/+page.svelte
index 95c294ad1..9b9df13dc 100644
--- a/src/routes/(public)/recover/+page.svelte
+++ b/src/routes/(public)/recover/+page.svelte
@@ -1,13 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import {
-        Button,
-        Form,
-        FormItem,
-        FormList,
-        InputEmail,
-        InputPassword
-    } from '$lib/elements/forms';
+    import { Button, Form, FormList, InputEmail, InputPassword } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { Unauthenticated } from '$lib/layout';
@@ -81,19 +74,15 @@
                         id="password"
                         autofocus={true}
                         required={true}
-                        showPasswordButton={true}
                         bind:value={password} />
                     <InputPassword
                         label="Confirm password"
                         placeholder="Confirm password"
                         id="confirm-password"
                         required={true}
-                        showPasswordButton={true}
                         bind:value={confirmPassword} />
 
-                    <FormItem>
-                        <Button fullWidth submit>Update</Button>
-                    </FormItem>
+                    <Button fullWidth submit>Update</Button>
                 </FormList>
             </Form>
         {:else}
@@ -107,9 +96,7 @@
                         required={true}
                         bind:value={email} />
 
-                    <FormItem>
-                        <Button fullWidth submit>Recover</Button>
-                    </FormItem>
+                    <Button fullWidth submit>Recover</Button>
                 </FormList>
             </Form>
         {/if}