diff --git a/package.json b/package.json
index 3d6a0a353..b83083c29 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7",
         "@appwrite.io/pink-legacy": "^1.0.1",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@284",
         "@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 835873657..7836edb2d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: ^1.0.1
         version: 1.0.1
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@284
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@284(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/appwrite/@appwrite.io/console@08ec153}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@372a1cfe319fdf7cb8166b5402eb949751155454':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@372a1cfe319fdf7cb8166b5402eb949751155454}
     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@50ea3ca70a483ffd9040f8ce9cb40a8d5f1ee30e':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca70a483ffd9040f8ce9cb40a8d5f1ee30e}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7}
     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@50ea3ca7':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@284':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@284}
     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/appwrite/@appwrite.io/console@08ec153': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@372a1cfe319fdf7cb8166b5402eb949751155454(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@50ea3ca70a483ffd9040f8ce9cb40a8d5f1ee30e(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7(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@50ea3ca7(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@284(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@50ea3ca70a483ffd9040f8ce9cb40a8d5f1ee30e(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@372a1cfe319fdf7cb8166b5402eb949751155454(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/expirationInput.svelte b/src/lib/components/expirationInput.svelte
index c681e38ce..3e8286e04 100644
--- a/src/lib/components/expirationInput.svelte
+++ b/src/lib/components/expirationInput.svelte
@@ -83,11 +83,5 @@
 <InputSelect bind:value={expirationSelect} {options} id="preset" label={selectorLabel} {helper}>
 </InputSelect>
 {#if expirationSelect === 'custom'}
-    <!-- NOTE: this isn't migrated to Pink2 yet, as there's no component -->
-    <InputDateTime
-        required
-        id="expire"
-        label={dateSelectorLabel}
-        bind:value={expirationCustom}
-        showLabel={typeof dateSelectorLabel !== 'undefined' && dateSelectorLabel !== ''} />
+    <InputDateTime required id="expire" label={dateSelectorLabel} bind:value={expirationCustom} />
 {/if}
diff --git a/src/lib/elements/forms/inputDateTime.svelte b/src/lib/elements/forms/inputDateTime.svelte
index fd1c1bee5..478bd8186 100644
--- a/src/lib/elements/forms/inputDateTime.svelte
+++ b/src/lib/elements/forms/inputDateTime.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { Helper, Label } from '.';
-    import NullCheckbox from './nullCheckbox.svelte';
+    import { Input, Layout, Selector } from '@appwrite.io/pink-svelte';
 
-    export let label: string;
-    export let showLabel = true;
-    export let optionalText: string | undefined = undefined;
     export let id: string;
+    export let label: string;
     export let value: string;
     export let required = false;
     export let nullable = false;
@@ -25,22 +22,6 @@
         }
     });
 
-    function handleInvalid(event: Event) {
-        event.preventDefault();
-
-        if (element.validity.valueMissing) {
-            error = 'This field is required';
-            return;
-        }
-
-        error = element.validationMessage;
-    }
-
-    function handleInput(event: Event) {
-        const { value: currentValue } = event.currentTarget as HTMLInputElement;
-        value = currentValue || null;
-    }
-
     let prevValue = '';
     function handleNullChange(e: CustomEvent<boolean>) {
         const isNull = e.detail;
@@ -59,35 +40,24 @@
     $: isNullable = nullable && !required;
 </script>
 
-<Label {required} {optionalText} hide={!showLabel} for={id}>
-    {label}
-</Label>
-
-<div class="input-text-wrapper">
-    <input
+<Layout.Stack gap="s" direction="row">
+    <Input.DateTime
         {id}
+        {label}
         {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>
-{/if}
+        helper={error}
+        autocomplete={autocomplete ? 'on' : 'off'}>
+        {#if isNullable}
+            <Selector.Checkbox
+                size="s"
+                slot="end"
+                label="NULL"
+                checked={value === null}
+                on:change={handleNullChange} />
+        {/if}
+    </Input.DateTime>
+</Layout.Stack>
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 5aee39cf3..1ac48c9f9 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
@@ -15,7 +15,15 @@
     import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { bucket } from '../store';
-    import { ActionMenu, HiddenText, Layout, Icon, Popover, Table } from '@appwrite.io/pink-svelte';
+    import {
+        ActionMenu,
+        Button as PinkButton,
+        InteractiveText,
+        Layout,
+        Icon,
+        Popover,
+        Table
+    } from '@appwrite.io/pink-svelte';
     import {
         IconDotsHorizontal,
         IconPencil,
@@ -191,7 +199,7 @@
                             <Table.Row>
                                 <Table.Cell>{toLocaleDate(token.created)}</Table.Cell>
                                 <Table.Cell>
-                                    <HiddenText isVisible={false} text={token.value} />
+                                    <InteractiveText isVisible={false} text={token.value} />
                                 </Table.Cell>
                                 <Table.Cell
                                     >{token.expiry
@@ -203,18 +211,18 @@
                                         : 'Never'}</Table.Cell>
 
                                 <Table.Cell>
-                                    <Popover placement="bottom-end" let:toggle>
-                                        <Button
-                                            text
+                                    <Popover placement="bottom-end" padding="none" let:toggle>
+                                        <PinkButton.Button
                                             icon
+                                            variant="ghost"
                                             on:click={(e) => {
                                                 e.preventDefault();
                                                 toggle(e);
                                             }}>
                                             <Icon size="s" icon={IconDotsHorizontal} />
-                                        </Button>
+                                        </PinkButton.Button>
                                         <svelte:fragment slot="tooltip" let:toggle>
-                                            <ActionMenu.Root noPadding>
+                                            <ActionMenu.Root>
                                                 <ActionMenu.Item.Button
                                                     leadingIcon={IconPencil}
                                                     on:click={(e) => {
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/manageFileToken.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/manageFileToken.svelte
index b4a5bf074..243201219 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/manageFileToken.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/manageFileToken.svelte
@@ -8,9 +8,8 @@
 
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { ExpirationInput, Modal } from '$lib/components';
     import { createEventDispatcher } from 'svelte';
-    import { Confirm } from '$lib/components/index.js';
+    import { Confirm, ExpirationInput, Modal } from '$lib/components';
 
     export let show = false;
     export let isDelete = false;