diff --git a/package.json b/package.json
index 46c84699b..216b1e0bf 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@2cf27e0",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40fb564",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fb8b1ed",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4e44e1e73..9922899f4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40fb564
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40fb564(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fb8b1ed
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fb8b1ed(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -284,8 +284,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40fb564':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40fb564}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fb8b1ed':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fb8b1ed}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3719,7 +3719,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40fb564(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fb8b1ed(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/lib/layout/displaySettingsModal.svelte b/src/lib/layout/displaySettingsModal.svelte
index 77f2568e3..325901029 100644
--- a/src/lib/layout/displaySettingsModal.svelte
+++ b/src/lib/layout/displaySettingsModal.svelte
@@ -35,7 +35,7 @@
         {#if !hideColumns && $columns?.length}
             <Layout.Stack gap="xs">
                 <Typography.Text>Columns</Typography.Text>
-                <ColumnSelector {columns} {isCustomTable}>
+                <ColumnSelector ui="new" {columns} {isCustomTable}>
                     {#snippet children(toggle, selectedColumnsNumber)}
                         <Button.Button
                             size="s"
diff --git a/src/lib/layout/gridHeader.svelte b/src/lib/layout/gridHeader.svelte
index c3532f1e0..a4212e5f1 100644
--- a/src/lib/layout/gridHeader.svelte
+++ b/src/lib/layout/gridHeader.svelte
@@ -17,7 +17,14 @@
 <header class="grid-header">
     <Typography.Title size="m">{title}</Typography.Title>
     <div class="u-flex u-gap-16 u-contents-mobile">
-        <ViewSelector {view} {columns} {isCustomTable} {hideView} {hideColumns} {allowNoColumns} />
+        <ViewSelector
+            ui="new"
+            {view}
+            {columns}
+            {isCustomTable}
+            {hideView}
+            {hideColumns}
+            {allowNoColumns} />
         <div class="grid-header-col-2">
             <slot />
         </div>
diff --git a/src/lib/layout/responsiveContainerHeader.svelte b/src/lib/layout/responsiveContainerHeader.svelte
index e84caf048..0f5358a02 100644
--- a/src/lib/layout/responsiveContainerHeader.svelte
+++ b/src/lib/layout/responsiveContainerHeader.svelte
@@ -112,7 +112,7 @@
                 </Layout.Stack>
                 <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
                     {#if hasDisplaySettings}
-                        <ViewSelector {view} {columns} {hideView} {hideColumns} />
+                        <ViewSelector ui="new" {view} {columns} {hideView} {hideColumns} />
                     {/if}
                     {#if children}
                         {@render children()}
diff --git a/src/routes/(console)/organization-[organization]/domains/+page.svelte b/src/routes/(console)/organization-[organization]/domains/+page.svelte
index 4251c80e9..4e98e3d80 100644
--- a/src/routes/(console)/organization-[organization]/domains/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/+page.svelte
@@ -49,7 +49,7 @@
     <Layout.Stack direction="row" justifyContent="space-between">
         <SearchQuery placeholder="Search domains" />
         <Layout.Stack direction="row" gap="m" inline>
-            <ViewSelector view={View.Table} {columns} hideView />
+            <ViewSelector ui="new" view={View.Table} {columns} hideView />
             <Button
                 on:click={() => {
                     trackEvent(Click.DomainCreateClick, {
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte
index 39e799b87..d6ce25571 100644
--- a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte
@@ -84,7 +84,7 @@
                         </Tooltip>
                     </Layout.Stack>
                     <Layout.Stack direction="row" gap="s" inline>
-                        <ViewSelector view={View.Table} {columns} hideView />
+                        <ViewSelector ui="new" view={View.Table} {columns} hideView />
                         <Popover let:toggle padding="none">
                             <Button secondary on:click={toggle}>Add preset</Button>
                             <svelte:fragment slot="tooltip" let:toggle>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
index 1f2dc4423..b58953779 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
@@ -59,7 +59,7 @@
             <SearchQuery placeholder="Search by name, email, phone, or ID" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <ViewSelector view={View.Table} {columns} hideView />
+            <ViewSelector ui="new" view={View.Table} {columns} hideView />
             <Button on:click={() => ($showCreateUser = true)} event="create_user" size="s">
                 <Icon size="s" icon={IconPlus} slot="start" />
                 <span class="text">Create user</span>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte
index b87b1f3e3..7b5c83685 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte
@@ -52,13 +52,13 @@
             <div class="u-flex u-main-end u-gap-16 is-not-mobile">
                 <Filters query={data.query} {columns} />
                 <div>
-                    <ViewSelector view={View.Table} {columns} hideView />
+                    <ViewSelector ui="new" view={View.Table} {columns} hideView />
                 </div>
             </div>
         </div>
         <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
             <div class="u-flex-basis-50-percent">
-                <ViewSelector view={View.Table} {columns} hideView />
+                <ViewSelector ui="new" view={View.Table} {columns} hideView />
             </div>
             <div class="u-flex-basis-50-percent">
                 <Filters query={data.query} {columns} fullWidthMobile />
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte
index 28cdbeec4..7774be57f 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte
@@ -33,7 +33,7 @@
 
             <div class="u-flex u-main-end u-gap-16 is-not-mobile">
                 <Filters query={data.query} {columns} />
-                <ViewSelector view={View.Table} {columns} hideView />
+                <ViewSelector ui="new" view={View.Table} {columns} hideView />
             </div>
         </div>
     </div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
index a8ab5335a..67681bddc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
@@ -52,6 +52,7 @@
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <ViewSelector
+                ui="new"
                 {columns}
                 view={data.view}
                 hideColumns={!data.databases.total}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
index 1db01c3a0..e679ff744 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
@@ -26,6 +26,7 @@
 
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <ViewSelector
+                ui="new"
                 view={data.view}
                 columns={tableViewColumns}
                 hideColumns={!data.tables.total}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index a0d751d08..076e08f1c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -52,7 +52,7 @@
     import EditColumn from './columns/edit.svelte';
     import RowActivity from './rows/activity.svelte';
     import EditRowPermissions from './rows/editPermissions.svelte';
-    import { Dialog, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Dialog, Layout, Typography, Selector } from '@appwrite.io/pink-svelte';
     import { Button, Seekbar } from '$lib/elements/forms';
     import { generateFakeRecords, generateColumns } from '$lib/helpers/faker';
     import { addNotification } from '$lib/stores/notifications';
@@ -70,6 +70,7 @@
     let createIndex: CreateIndex;
     let createColumn: CreateColumn;
     let selectedOption: Option['name'] = 'String';
+    let createMoreColumns = false;
 
     /**
      * adding a lot of fake data will trigger the realtime below
@@ -327,6 +328,10 @@
 
         spreadsheetRenderKey.set(hash(rowIds));
     }
+
+    $: if (!$showCreateColumnSheet.show) {
+        createMoreColumns = false;
+    }
 </script>
 
 <svelte:head>
@@ -336,20 +341,27 @@
 <slot />
 
 <SideSheet
-    closeOnBlur
+    closeOnBlur={false}
     title={$showCreateColumnSheet.title}
     titleBadge={selectedOption === 'Relationship' ? 'Experimental' : undefined}
     bind:show={$showCreateColumnSheet.show}
     submit={{
         text: 'Create',
-        onClick: async () => {
-            await createColumn?.submit();
-        },
+        onClick: async () => await createColumn?.submit(),
         disabled: !selectedOption
     }}>
+    {#snippet footer()}
+        <Layout.Stack inline direction="row" alignItems="center">
+            <Selector.Switch
+                id="create-more-columns"
+                bind:checked={createMoreColumns}
+                label="Create more" />
+        </Layout.Stack>
+    {/snippet}
     <CreateColumn
         bind:selectedOption
         bind:this={createColumn}
+        bind:createMore={createMoreColumns}
         column={$showCreateColumnSheet.column}
         columns={$showCreateColumnSheet.columns}
         direction={$showCreateColumnSheet.direction}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte
index 8eb595253..0c7b64c4d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte
@@ -19,6 +19,7 @@
         columnId = $bindable(null),
         columnsOrder = $bindable(null),
         selectedOption = $bindable('String'),
+        createMore = $bindable(false),
         onColumnsReorder = null
     }: {
         column?: Columns;
@@ -27,6 +28,7 @@
         columnsOrder?: string[];
         direction: ColumnDirection;
         selectedOption: Option['name'];
+        createMore?: boolean;
         onColumnsReorder?: (newOrder: string[]) => void;
     } = $props();
 
@@ -148,12 +150,19 @@
                 message: `Column ${key ?? data?.key} has been created`
             });
             trackEvent(Submit.ColumnCreate);
+
+            if (createMore) {
+                init();
+                return true; // keep sheet open
+            }
+            return false; // close sheet
         } catch (e) {
             addNotification({
                 type: 'error',
                 message: e.message
             });
             trackError(e, Submit.ColumnCreate);
+            return true; // keep open on error
         }
     }
 
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
index 8aed8a13b..85b132238 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
@@ -29,7 +29,7 @@
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <Filters query={data.query} {columns} analyticsSource="messaging_providers" />
-            <ViewSelector view={View.Table} {columns} hideView />
+            <ViewSelector ui="new" view={View.Table} {columns} hideView />
             {#if $canWriteProviders}
                 <CreateProviderDropdown let:toggle>
                     <Button on:click={toggle} event="create_provider">
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte
index 90a5871f8..338601be6 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte
@@ -92,7 +92,7 @@
         <SearchQuery placeholder="Search by type or IDs"></SearchQuery>
         <Layout.Stack direction="row" inline>
             <Filters query={data.query} {columns} analyticsSource="messaging_topics" />
-            <ViewSelector view={View.Table} {columns} hideView />
+            <ViewSelector ui="new" view={View.Table} {columns} hideView />
             <Button
                 on:click={() => {
                     showAdd = true;
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
index 2c02dc197..4ee496dec 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
@@ -27,7 +27,7 @@
 
 <Container>
     <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-        <ViewSelector {columns} view={View.Table} hideView />
+        <ViewSelector ui="new" {columns} view={View.Table} hideView />
         {#if $canWriteWebhooks}
             <Button
                 href={`${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/create`}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
index caa180049..17022e7d7 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
@@ -63,7 +63,12 @@
             <SearchQuery placeholder="Search by name" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <ViewSelector {columns} view={data.view} hideColumns hideView={!data.siteList.total} />
+            <ViewSelector
+                ui="new"
+                {columns}
+                view={data.view}
+                hideColumns
+                hideView={!data.siteList.total} />
             {#if $canWriteSites}
                 <Button on:mousedown={() => (show = true)} event="create_site" size="s">
                     <Icon icon={IconPlus} slot="start" size="s" />
diff --git a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
index 7bbac81ce..d53830b6f 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
@@ -39,6 +39,7 @@
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <ViewSelector
+                ui="new"
                 {columns}
                 view={data.view}
                 hideColumns={!data.buckets.total}
diff --git a/src/themes/dark-cloud.json b/src/themes/dark-cloud.json
index 84e37ca38..abebc5419 100644
--- a/src/themes/dark-cloud.json
+++ b/src/themes/dark-cloud.json
@@ -112,6 +112,7 @@
     "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
     "overlay-on-neutral": "rgba(255, 255, 255, 20%)",
     "overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
+    "overlay-neutral-hover-solid": "rgba(38, 38, 42, 100%)",
     "overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
     "overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
     "overlay-scrim": "rgba(0, 0, 0, 48%)",
diff --git a/src/themes/dark.json b/src/themes/dark.json
index 26acb26e1..b21ba8659 100644
--- a/src/themes/dark.json
+++ b/src/themes/dark.json
@@ -112,6 +112,7 @@
     "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
     "overlay-on-neutral": "rgba(255, 255, 255, 20%)",
     "overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
+    "overlay-neutral-hover-solid": "rgba(38, 38, 42, 100%)",
     "overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
     "overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
     "overlay-scrim": "rgba(0, 0, 0, 48%)",
diff --git a/src/themes/light-cloud.json b/src/themes/light-cloud.json
index a2ab55069..530c83c53 100644
--- a/src/themes/light-cloud.json
+++ b/src/themes/light-cloud.json
@@ -112,6 +112,7 @@
     "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
     "overlay-on-neutral": "rgba(0, 0, 0, 6%)",
     "overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
+    "overlay-neutral-hover-solid": "rgba(248, 248, 248, 100%)",
     "overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
     "overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
     "overlay-scrim": "rgba(25, 25, 28, 80%)",
diff --git a/src/themes/light.json b/src/themes/light.json
index 2b3bd76ae..3cdbee82d 100644
--- a/src/themes/light.json
+++ b/src/themes/light.json
@@ -112,6 +112,7 @@
     "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
     "overlay-on-neutral": "rgba(0, 0, 0, 6%)",
     "overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
+    "overlay-neutral-hover-solid": "rgba(248, 248, 248, 100%)",
     "overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
     "overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
     "overlay-scrim": "rgba(25, 25, 28, 80%)",