diff --git a/package.json b/package.json
index bd447131c..e8e6320a5 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,9 @@
     "dependencies": {
         "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@53cae2d",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@011c2131",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3d1b4ab4",
         "@appwrite.io/pink-legacy": "^1.0.1",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e87d552",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3d1b4ab4",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d3236de39..d93a0dfc5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,14 +15,14 @@ importers:
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@011c2131
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@011c2131(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3d1b4ab4
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3d1b4ab4(svelte@4.2.19)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.1
         version: 1.0.1
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e87d552
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e87d552(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3d1b4ab4
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3d1b4ab4(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -215,14 +215,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@53cae2d}
     version: 1.4.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@011c2131':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@011c2131}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3d1b4ab4':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3d1b4ab4}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@e87d5523b50e063bfe0d3b846d5db171a24b0792':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@e87d5523b50e063bfe0d3b846d5db171a24b0792}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3d1b4ab464ebb8d3f24b420698d259c08a876c36':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3d1b4ab464ebb8d3f24b420698d259c08a876c36}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -236,8 +236,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.1':
     resolution: {integrity: sha512-e5IZx2drqSxgl2WXvmr0eLfg/WiOCzuqQE8oksD+9GoFBkcL9HWvXul5GjFni3RBAN9XFRL3nUExGk4T0H8sFw==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e87d552':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e87d552}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3d1b4ab4':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3d1b4ab4}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4099,11 +4099,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@53cae2d': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@011c2131(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3d1b4ab4(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@e87d5523b50e063bfe0d3b846d5db171a24b0792(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3d1b4ab464ebb8d3f24b420698d259c08a876c36(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4116,9 +4116,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@e87d552(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@3d1b4ab4(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@e87d5523b50e063bfe0d3b846d5db171a24b0792(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@3d1b4ab464ebb8d3f24b420698d259c08a876c36(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.3(svelte@4.2.19)
diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index dac3f5b23..e6f4587e9 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -117,19 +117,17 @@
 </script>
 
 <div class="is-not-mobile">
-    <Drop bind:show={showFiltersDesktop} noArrow>
-        <slot {disabled} toggle={toggleDropdown}>
-            <Button secondary on:click={toggleDropdown} {disabled}>
-                <Icon icon={IconFilter} slot="start" size="s" />
-                Filters
-                {#if applied > 0}
-                    <span class="inline-tag">
-                        {applied}
-                    </span>
-                {/if}
-            </Button>
-        </slot>
-        <svelte:fragment slot="list">
+    <Popover let:toggle placement="bottom-start">
+        <Button secondary on:click={toggle} {disabled}>
+            <Icon icon={IconFilter} slot="start" size="s" />
+            Filters
+            {#if applied > 0}
+                <span class="inline-tag">
+                    {applied}
+                </span>
+            {/if}
+        </Button>
+        <svelte:fragment slot="tooltip">
             <div class="dropped card">
                 {#if displayQuickFilters}
                     <slot name="quick" />
@@ -171,7 +169,7 @@
                 </div>
             </div>
         </svelte:fragment>
-    </Drop>
+    </Popover>
 </div>
 
 <div class="is-only-mobile">
diff --git a/src/lib/components/id.svelte b/src/lib/components/id.svelte
index cc64a82f4..1f0552bb3 100644
--- a/src/lib/components/id.svelte
+++ b/src/lib/components/id.svelte
@@ -50,7 +50,7 @@
 
 <Copy {value} {event}>
     <Tag size="xs" variant="code">
-        <Icon icon={IconDuplicate} size="s" />
+        <Icon icon={IconDuplicate} size="s" slot="start" />
         <span
             style:white-space="nowrap"
             style:overflow="hidden"
diff --git a/src/lib/components/labelCard.svelte b/src/lib/components/labelCard.svelte
index 7e59e8c94..4995a2d12 100644
--- a/src/lib/components/labelCard.svelte
+++ b/src/lib/components/labelCard.svelte
@@ -25,7 +25,7 @@
     let slotTitle: HTMLSpanElement;
 </script>
 
-<Tooltip disabled={!tooltipText || !tooltipShow} inline={false}>
+<Tooltip disabled={!tooltipText || !tooltipShow}>
     <Card.Selector
         {src}
         {alt}
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index f867e519f..042ba2b51 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -182,7 +182,7 @@
                 </DropList>
             </Layout.Stack>
             <Layout.Stack direction="row">
-                <Tooltip inline={false}>
+                <Tooltip>
                     <Button.Button
                         variant="text"
                         aria-label="Toggle Command Center"
@@ -375,10 +375,6 @@
         }
     }
 
-    :global(.icons div:first-of-type:not(:has(.progress-card))) {
-        height: 20px;
-    }
-
     .account-container {
         position: absolute;
         right: var(--space-7);
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index d47bcf2d3..e8ffdc332 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -108,7 +108,7 @@
         </div>
         <div slot="middle" class:icons={state === 'icons'}>
             {#if progressCard}
-                <Tooltip inline={false} placement="right" disabled={state !== 'icons'}>
+                <Tooltip placement="right" disabled={state !== 'icons'}>
                     <a
                         class="progress-card"
                         href={`/console/project-${project.$id}/get-started`}
@@ -135,7 +135,7 @@
             {/if}
             {#if project}
                 <Layout.Stack direction="column" gap="s">
-                    <Tooltip inline={false} placement="right" disabled={state !== 'icons'}>
+                    <Tooltip placement="right" disabled={state !== 'icons'}>
                         <a
                             href={`/console/project-${project.$id}/overview`}
                             class="link"
@@ -163,7 +163,7 @@
                         ></span>
                     </div>
                     {#each projectOptions as projectOption}
-                        <Tooltip inline={false} placement="right" disabled={state !== 'icons'}>
+                        <Tooltip placement="right" disabled={state !== 'icons'}>
                             <a
                                 href={`/console/project-${project.$id}/${projectOption.slug}`}
                                 class="link"
@@ -186,7 +186,7 @@
                         <Divider />
                     </div>
                     <div class="only-mobile">
-                        <Tooltip inline={false} placement="right" disabled={state !== 'icons'}>
+                        <Tooltip placement="right" disabled={state !== 'icons'}>
                             <a
                                 href={`/console/project-${project.$id}/settings`}
                                 on:click={() => {
@@ -244,7 +244,7 @@
         <div slot="bottom" class="bottom" class:icons={state === 'icons'}>
             {#if project}
                 <div class="only-desktop">
-                    <Tooltip inline={false} placement="right" disabled={state !== 'icons'}>
+                    <Tooltip placement="right" disabled={state !== 'icons'}>
                         <a
                             href={`/console/project-${project.$id}/settings`}
                             class="link"
diff --git a/src/lib/components/trim.svelte b/src/lib/components/trim.svelte
index f17a409f1..4857727bc 100644
--- a/src/lib/components/trim.svelte
+++ b/src/lib/components/trim.svelte
@@ -5,7 +5,7 @@
     let container: HTMLSpanElement | null;
 </script>
 
-<Tooltip maxWidth="auto" inline={false}>
+<Tooltip maxWidth="auto">
     <span class={`text ${alternativeTrim ? 'u-trim-1' : 'u-trim'}`} bind:this={container}>
         <slot />
     </span>
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index 79d4988d2..2caa5f545 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -86,7 +86,7 @@
 
 {#if !hideColumns && view === View.Table}
     {#if $columns?.length}
-        <Popover let:toggle>
+        <Popover let:toggle placement="bottom-end">
             <Button.Button
                 size="s"
                 variant="secondary"
diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
index c9cd60455..d2c923c30 100644
--- a/src/lib/elements/forms/button.svelte
+++ b/src/lib/elements/forms/button.svelte
@@ -86,8 +86,7 @@
         target={external ? '_blank' : ''}
         rel={external ? 'noopener noreferrer' : ''}
         class={resolvedClasses}
-        aria-label={ariaLabel}
-        --button-width={fullWidth ? '100%' : 'max-content'}>
+        aria-label={ariaLabel}>
         <slot name="start" slot="start" />
         <slot />
         <slot slot="end" name="end" />
@@ -104,8 +103,7 @@
         {variant}
         class={resolvedClasses}
         aria-label={ariaLabel}
-        type={submit ? 'submit' : 'button'}
-        --button-width={fullWidth ? '100%' : 'max-content'}>
+        type={submit ? 'submit' : 'button'}>
         <slot name="start" slot="start" />
         {#if ($isSubmitting && submissionLoader) || (forceShowLoader && submissionLoader)}
             <span
diff --git a/src/routes/(console)/project-[project]/auth/+page.svelte b/src/routes/(console)/project-[project]/auth/+page.svelte
index 85cbde1cc..7be55a9d7 100644
--- a/src/routes/(console)/project-[project]/auth/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/+page.svelte
@@ -78,7 +78,7 @@
                                 <Table.Cell width={column.width + 'px'}>
                                     <Copy value={user.$id} event="user">
                                         <Tag size="xs" variant="code">
-                                            <Icon size="s" icon={IconDuplicate} />
+                                            <Icon size="s" icon={IconDuplicate} slot="start" />
                                             {user.$id}
                                         </Tag>
                                     </Copy>
diff --git a/src/routes/(console)/project-[project]/overview/keys/create/+page.svelte b/src/routes/(console)/project-[project]/overview/keys/create/+page.svelte
index 1c3e3c5f6..1355a93bc 100644
--- a/src/routes/(console)/project-[project]/overview/keys/create/+page.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/create/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import Card from '$lib/components/card.svelte';
     import { InputText } from '$lib/elements/forms/index.js';
     import { Wizard } from '$lib/layout';
     import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
@@ -17,8 +16,6 @@
     import { addNotification } from '$lib/stores/notifications';
     import { writable } from 'svelte/store';
 
-    export let data;
-
     let showExitModal = false;
     let formComponent: Form;
     let isSubmitting = writable(false);
@@ -65,7 +62,7 @@
     confirmExit>
     <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
         <Layout.Stack gap="xxl">
-            <Fieldset legend="Step 1">
+            <Fieldset legend="Settings">
                 <Layout.Stack>
                     <InputText
                         id="name"
diff --git a/src/routes/(console)/project-[project]/overview/keys/scopes.svelte b/src/routes/(console)/project-[project]/overview/keys/scopes.svelte
index f59098921..c4c4ef329 100644
--- a/src/routes/(console)/project-[project]/overview/keys/scopes.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/scopes.svelte
@@ -41,7 +41,7 @@
         }
     }
 
-    function categoryState(category: string, s: string[]): boolean | null {
+    function categoryState(category: string, s: string[]): boolean | 'indeterminate' {
         const scopesByCategory = allScopes.filter((n) => n.category === category);
         const filtered = scopesByCategory.filter((n) => s.includes(n.scope));
         if (filtered.length === 0) {
@@ -49,16 +49,15 @@
         } else if (filtered.length === scopesByCategory.length) {
             return true;
         } else {
-            return null;
+            return 'indeterminate';
         }
     }
 
-    function onCategoryChange(event: Event, category: Category) {
+    function onCategoryChange(event: CustomEvent<boolean | 'indeterminate'>, category: Category) {
+        if (event.detail === 'indeterminate') return;
         allScopes.forEach((s) => {
             if (s.category === category) {
-                activeScopes[s.scope] = (
-                    event.currentTarget as EventTarget & HTMLInputElement
-                ).checked;
+                activeScopes[s.scope] = event.detail;
             }
         });
     }
@@ -100,7 +99,8 @@
                 selectable
                 title={category}
                 badge={`${scopesLength} ${scopesLength === 1 ? 'Scope' : 'Scopes'}`}
-                {checked}>
+                {checked}
+                on:change={(event) => onCategoryChange(event, category)}>
                 <Layout.Stack>
                     {#each allScopes.filter((s) => s.category === category) as scope}
                         <Selector.Checkbox