diff --git a/package.json b/package.json
index 5dbe15c26a..461a4249c0 100644
--- a/package.json
+++ b/package.json
@@ -21,11 +21,11 @@
         "e2e:ui": "playwright test --ui"
     },
     "dependencies": {
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@6dbeff0",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c339db5",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c339db5",
         "@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 e84836ebef..fb6093c59f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,20 +9,20 @@ importers:
   .:
     dependencies:
       '@appwrite.io/console':
-        specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e
-        version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e
+        specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@6dbeff0
+        version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@6dbeff0
       '@appwrite.io/pink-icons':
         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@6b17cb23
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23(svelte@5.25.3)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c339db5
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c339db5(svelte@5.25.3)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c339db5
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c339db5(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -217,18 +217,18 @@ packages:
   '@analytics/type-utils@0.6.2':
     resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e':
-    resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@6dbeff0':
+    resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@6dbeff0}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29b227fb7ad99f66e5031701c457d89ac190cd27':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29b227fb7ad99f66e5031701c457d89ac190cd27}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c339db5':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c339db5}
     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@6b17cb23':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c339db5874e143bc11356abea82e2e964e391ce8':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c339db5874e143bc11356abea82e2e964e391ce8}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -242,8 +242,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29b227f}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c339db5':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c339db5}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -3534,13 +3534,13 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e': {}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@6dbeff0': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29b227fb7ad99f66e5031701c457d89ac190cd27(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c339db5(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c339db5874e143bc11356abea82e2e964e391ce8(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3553,9 +3553,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@29b227f(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c339db5(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29b227fb7ad99f66e5031701c457d89ac190cd27(svelte@5.25.3)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c339db5874e143bc11356abea82e2e964e391ce8(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)
       '@melt-ui/svelte': 0.86.6(svelte@5.25.3)
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 98460c5964..de4c5f9ecf 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -343,6 +343,9 @@ export enum Submit {
     FileCreate = 'submit_file_create',
     FileDelete = 'submit_file_delete',
     FileUpdatePermissions = 'submit_file_update_permissions',
+    FileTokenCreate = 'submit_file_token',
+    FileTokenDelete = 'submit_file_delete',
+    FileTokenUpdate = 'submit_file_update_expiry',
     BudgetCapUpdate = 'submit_budget_cap_update',
     BudgetAlertsUpdate = 'submit_budget_alert_conditions_update',
     CreditRedeem = 'submit_credit_redeem',
diff --git a/src/routes/(console)/project-[project]/overview/keys/expirationInput.svelte b/src/lib/components/expirationInput.svelte
similarity index 77%
rename from src/routes/(console)/project-[project]/overview/keys/expirationInput.svelte
rename to src/lib/components/expirationInput.svelte
index cafc292c64..3e8286e04f 100644
--- a/src/routes/(console)/project-[project]/overview/keys/expirationInput.svelte
+++ b/src/lib/components/expirationInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Helper, InputDateTime, InputSelect } from '$lib/elements/forms';
+    import { InputDateTime, InputSelect } from '$lib/elements/forms';
     import { isSameDay, isValidDate, toLocaleDate } from '$lib/helpers/date';
 
     function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
@@ -47,6 +47,9 @@
     ];
 
     export let value: string | null = null;
+    export let dateSelectorLabel: string | undefined = undefined;
+    export let selectorLabel: string | undefined = 'Expiration Date';
+    export let resourceType: string | 'key' | 'token' | undefined = 'key';
 
     function initExpirationSelect() {
         if (value === null || !isValidDate(value)) return null;
@@ -65,6 +68,10 @@
     }
     let expirationSelect = initExpirationSelect();
     let expirationCustom: string | null = value ?? null;
+    $: helper =
+        expirationSelect !== 'custom' && expirationSelect !== null
+            ? `Your ${resourceType} will expire in ${toLocaleDate(value)}`
+            : null;
 
     $: {
         if (!isSameDay(new Date(expirationSelect), new Date(value))) {
@@ -73,13 +80,8 @@
     }
 </script>
 
-<InputSelect bind:value={expirationSelect} {options} id="preset" label="Expiration date">
-    <svelte:fragment slot="helper">
-        {#if expirationSelect !== 'custom' && expirationSelect !== null}
-            <Helper type="neutral">Your key will expire in {toLocaleDate(value)}</Helper>
-        {/if}
-    </svelte:fragment>
+<InputSelect bind:value={expirationSelect} {options} id="preset" label={selectorLabel} {helper}>
 </InputSelect>
 {#if expirationSelect === 'custom'}
-    <InputDateTime required id="expire" label="" bind:value={expirationCustom} />
+    <InputDateTime required id="expire" label={dateSelectorLabel} bind:value={expirationCustom} />
 {/if}
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index b20b38d1f7..4e509c671b 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -82,3 +82,4 @@ export { default as BottomSheet } from './bottom-sheet/index';
 export { default as Confirm } from './confirm.svelte';
 export { default as UsageCard } from './usageCard.svelte';
 export { default as ViewToggle } from './viewToggle.svelte';
+export { default as ExpirationInput } from './expirationInput.svelte';
diff --git a/src/lib/components/permissions/actions.svelte b/src/lib/components/permissions/actions.svelte
index 4319e3d74a..4bdbb76378 100644
--- a/src/lib/components/permissions/actions.svelte
+++ b/src/lib/components/permissions/actions.svelte
@@ -12,6 +12,7 @@
     export let showTeam: boolean;
     export let showLabel: boolean;
     export let showCustom: boolean;
+    export let hideOnClick: boolean = false;
     export let groups: Writable<Map<string, Permission>>;
 
     const dispatch = createEventDispatcher();
@@ -19,31 +20,52 @@
 
 <Popover let:toggle padding="none" placement="bottom-start">
     <slot {toggle} />
-    <svelte:fragment slot="tooltip">
+    <svelte:fragment slot="tooltip" let:hide>
         <ActionMenu.Root>
             <ActionMenu.Item.Button
                 disabled={$groups.has('any')}
-                on:click={() => dispatch('create', ['any'])}>
+                on:click={(e) => {
+                    if (hideOnClick) hide(e);
+                    dispatch('create', ['any']);
+                }}>
                 Any
             </ActionMenu.Item.Button>
             <ActionMenu.Item.Button
                 disabled={$groups.has('guests')}
-                on:click={() => dispatch('create', ['guests'])}>
+                on:click={(e) => {
+                    if (hideOnClick) hide(e);
+                    dispatch('create', ['guests']);
+                }}>
                 All guests
             </ActionMenu.Item.Button>
             <ActionMenu.Item.Button
                 disabled={$groups.has('users')}
-                on:click={() => dispatch('create', ['users'])}>
+                on:click={(e) => {
+                    if (hideOnClick) hide(e);
+                    dispatch('create', ['users']);
+                }}>
                 All users
             </ActionMenu.Item.Button>
-            <ActionMenu.Item.Button on:click={() => (showUser = true)}
-                >Select users</ActionMenu.Item.Button>
-            <ActionMenu.Item.Button on:click={() => (showTeam = true)}
-                >Select teams</ActionMenu.Item.Button>
-            <ActionMenu.Item.Button on:click={() => (showLabel = true)}
-                >Label</ActionMenu.Item.Button>
-            <ActionMenu.Item.Button on:click={() => (showCustom = true)}
-                >Custom permission</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showUser = true;
+                    if (hideOnClick) hide(e);
+                }}>Select users</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showTeam = true;
+                    if (hideOnClick) hide(e);
+                }}>Select teams</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showLabel = true;
+                    if (hideOnClick) hide(e);
+                }}>Label</ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showCustom = true;
+                    if (hideOnClick) hide(e);
+                }}>Custom permission</ActionMenu.Item.Button>
         </ActionMenu.Root>
     </svelte:fragment>
 </Popover>
diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
index a4f6875e7e..0cab252ed7 100644
--- a/src/lib/components/permissions/permissions.svelte
+++ b/src/lib/components/permissions/permissions.svelte
@@ -21,6 +21,7 @@
     import type { PinkColumn } from '$lib/helpers/types';
 
     export let withCreate = false;
+    export let hideOnClick = false;
     export let permissions: string[] = [];
 
     let showUser = false;
@@ -127,11 +128,11 @@
     }
 
     const columns: PinkColumn[] = [
-        { id: 'role', width: { min: 100 } },
-        { id: 'create', width: { min: 100 }, hide: !withCreate },
-        { id: 'read', width: { min: 100 } },
-        { id: 'update', width: { min: 100 } },
-        { id: 'delete', width: { min: 100 } },
+        { id: 'role', width: { min: 80 } },
+        { id: 'create', width: { min: 80 }, hide: !withCreate },
+        { id: 'read', width: { min: 80 } },
+        { id: 'update', width: { min: 80 } },
+        { id: 'delete', width: { min: 80 } },
         { id: 'action', width: 40 }
     ];
 </script>
@@ -195,6 +196,7 @@
             bind:showTeam
             bind:showUser
             {groups}
+            {hideOnClick}
             on:create={create}
             let:toggle>
             <Button secondary on:click={toggle}>
@@ -213,6 +215,7 @@
                     bind:showTeam
                     bind:showUser
                     {groups}
+                    {hideOnClick}
                     on:create={create}
                     let:toggle>
                     <Button compact icon on:click={toggle}>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index a038fd15fd..ef8c16923c 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -33,6 +33,7 @@ export enum Dependencies {
     DOCUMENTS = 'dependency:documents',
     BUCKET = 'dependency:bucket',
     FILE = 'dependency:file',
+    FILE_TOKENS = 'dependency:file_tokens',
     FILES = 'dependency:files',
     FUNCTION = 'dependency:function',
     FUNCTION_DOMAINS = 'dependency:function_domains',
diff --git a/src/lib/elements/forms/inputDateTime.svelte b/src/lib/elements/forms/inputDateTime.svelte
index 29ff8102df..8dcd115f6f 100644
--- a/src/lib/elements/forms/inputDateTime.svelte
+++ b/src/lib/elements/forms/inputDateTime.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
-    import { Input } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
+    import { Input, Layout, Selector } from '@appwrite.io/pink-svelte';
 
-    export let label: string = undefined;
     export let id: string;
-    export let name: string = id;
-    export let helper: string = undefined;
-    export let value = '';
-    export let placeholder = '';
+    export let label: string;
+    export let value: string;
     export let required = false;
     export let nullable = false;
     export let disabled = false;
@@ -16,18 +14,23 @@
     export let step: number | 'any' = 0.001;
 
     let error: string;
+    let element: HTMLInputElement;
 
-    function handleInvalid(event: Event) {
-        event.preventDefault();
-
-        const inputNode = event.currentTarget as HTMLInputElement;
-
-        if (inputNode.validity.valueMissing) {
-            error = 'This field is required';
-            return;
+    onMount(() => {
+        if (element && autofocus) {
+            element.focus();
+        }
+    });
+
+    let prevValue = '';
+    function handleNullChange(e: CustomEvent<boolean>) {
+        const isNull = e.detail;
+        if (isNull) {
+            prevValue = value;
+            value = null;
+        } else {
+            value = prevValue;
         }
-
-        error = inputNode.validationMessage;
     }
 
     $: if (value) {
@@ -35,24 +38,24 @@
     }
 </script>
 
-<Input.DateTime
-    {id}
-    {name}
-    {placeholder}
-    {disabled}
-    {required}
-    {label}
-    {step}
-    {nullable}
-    {readonly}
-    autofocus={autofocus || undefined}
-    autocomplete={autocomplete ? 'on' : 'off'}
-    helper={error || helper}
-    state={error ? 'error' : 'default'}
-    on:invalid={handleInvalid}
-    on:input
-    bind:value>
-    <slot name="start" slot="start" />
-    <slot name="info" slot="info" />
-    <slot name="end" slot="end" />
-</Input.DateTime>
+<Layout.Stack gap="s" direction="row">
+    <Input.DateTime
+        {id}
+        {label}
+        {disabled}
+        {readonly}
+        {required}
+        {value}
+        {step}
+        helper={error}
+        autocomplete={autocomplete ? 'on' : 'off'}>
+        {#if nullable}
+            <Selector.Checkbox
+                size="s"
+                slot="end"
+                label="NULL"
+                checked={value === null}
+                on:change={handleNullChange} />
+        {/if}
+    </Input.DateTime>
+</Layout.Stack>
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index b64746bfdc..1939d5ac3b 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -5,6 +5,7 @@
     export let id: string;
     export let label: string | undefined = undefined;
     export let value: string | number | boolean | null;
+    export let helper: string | undefined = undefined;
     export let optionalText: string | number | boolean | null | undefined = undefined;
     export let placeholder = '';
     export let required = false;
@@ -54,8 +55,8 @@
     {placeholder}
     {disabled}
     {isSearchable}
+    helper={error ?? helper}
     {required}
-    helper={error}
     state={error ? 'error' : 'default'}
     on:invalid={handleInvalid}
     on:input
diff --git a/src/lib/helpers/date.ts b/src/lib/helpers/date.ts
index 293062e6de..2d56c1cb6a 100644
--- a/src/lib/helpers/date.ts
+++ b/src/lib/helpers/date.ts
@@ -15,13 +15,17 @@ if (browser) {
     dayjs.extend(relativeTime);
 }
 
-export const toLocaleDate = (datetime: string) => {
+export const toLocaleDate = (datetime: string, format: 'dd mm yyyy' | 'default' = 'default') => {
     const date = new Date(datetime);
 
     if (isNaN(date.getTime())) {
         return 'n/a';
     }
 
+    if (format === 'dd mm yyyy') {
+        return `${date.getDate().toString().padStart(2, '0')} ${date.toLocaleString('en', { month: 'short' })} ${date.getFullYear()}`;
+    }
+
     const options: Intl.DateTimeFormatOptions = {
         year: 'numeric',
         month: 'short',
@@ -33,6 +37,7 @@ export const toLocaleDate = (datetime: string) => {
 
 export const toLocaleDateTime = (
     datetime: string | number,
+    is12HourFormat: boolean = false,
     timeZone: string | undefined = undefined
 ) => {
     const date = new Date(datetime);
@@ -48,7 +53,8 @@ export const toLocaleDateTime = (
         day: 'numeric',
         hour: 'numeric',
         minute: 'numeric',
-        hourCycle: 'h23'
+        hourCycle: is12HourFormat ? 'h12' : 'h23',
+        ...(is12HourFormat && { hour12: true })
     };
 
     return date.toLocaleDateString('en', options);
diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts
index da4fc6d98c..a94e282ba1 100644
--- a/src/lib/stores/sdk.ts
+++ b/src/lib/stores/sdk.ts
@@ -20,7 +20,8 @@ import {
     Teams,
     Users,
     Vcs,
-    Sites
+    Sites,
+    Tokens
 } from '@appwrite.io/console';
 import { Billing } from '../sdk/billing';
 import { Backups } from '../sdk/backups';
@@ -56,6 +57,7 @@ const sdkForProject = {
     project: new Project(clientProject),
     projectApi: new ProjectApi(clientProject),
     storage: new Storage(clientProject),
+    tokens: new Tokens(clientProject),
     teams: new Teams(clientProject),
     users: new Users(clientProject),
     vcs: new Vcs(clientProject),
diff --git a/src/routes/(console)/project-[project]/overview/keys/[key]/updateExpirationDate.svelte b/src/routes/(console)/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
index 5595ea2b2f..8a15fa3479 100644
--- a/src/routes/(console)/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
@@ -9,7 +9,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { Alert } from '@appwrite.io/pink-svelte';
     import { project } from '../../../store';
-    import ExpirationInput from '../expirationInput.svelte';
+    import { ExpirationInput } from '$lib/components';
     import { key } from './store';
 
     let expiration = $key.expire;
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 cdc986601a..68f04d4245 100644
--- a/src/routes/(console)/project-[project]/overview/keys/create/+page.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/create/+page.svelte
@@ -4,7 +4,7 @@
     import { InputText } from '$lib/elements/forms/index.js';
     import { Wizard } from '$lib/layout';
     import { Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
-    import ExpirationInput from '../expirationInput.svelte';
+    import { ExpirationInput } from '$lib/components';
     import Scopes from '../scopes.svelte';
     import Button from '$lib/elements/forms/button.svelte';
     import Form from '$lib/elements/forms/form.svelte';
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 ad06d67ec0..3d01dbe246 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { invalidate } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
@@ -217,9 +217,12 @@
     {:else}
         <Empty
             single
-            href="https://appwrite.io/docs/products/storage/upload-download"
             target="file"
-            on:click={() => void 0} />
+            href="https://appwrite.io/docs/products/storage/upload-download"
+            on:click={() =>
+                goto(
+                    `${base}/project-${page.params.project}/storage/bucket-${page.params.bucket}/create`
+                )} />
     {/if}
 </Container>
 
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
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+layout.ts b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+layout.ts
index 0510deb593..a848f7981f 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+layout.ts
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+layout.ts
@@ -7,11 +7,13 @@ import { error } from '@sveltejs/kit';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.FILE);
+    depends(Dependencies.FILE_TOKENS);
 
     try {
         return {
             header: Header,
             breadcrumbs: Breadcrumbs,
+            tokens: await sdk.forProject.tokens.list(params.bucket, params.file),
             file: await sdk.forProject.storage.getFile(params.bucket, params.file)
         };
     } catch (e) {
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 7e80dde840..5b9b66d3a3 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
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { CardGrid, BoxAvatar, CopyInput } from '$lib/components';
+    import { CardGrid, BoxAvatar, CopyInput, Empty } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
-    import { file } from './store';
+    import { columns, file, tokens } from './store';
     import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
@@ -15,27 +15,53 @@
     import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { bucket } from '../store';
-    import { Alert, Typography } from '@appwrite.io/pink-svelte';
+    import {
+        ActionMenu,
+        Alert,
+        Button as PinkButton,
+        InteractiveText,
+        Layout,
+        Icon,
+        Popover,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import {
+        IconChevronRight,
+        IconDotsHorizontal,
+        IconDuplicate,
+        IconKey,
+        IconPencil,
+        IconPlus,
+        IconTrash,
+    } from '@appwrite.io/pink-icons-svelte';
+    import ManageFileTokenModal, { cleanFormattedDate } from './manageFileToken.svelte';
+    import { copy } from '$lib/helpers/copy';
+    import { type Models, Permission, Role } from '@appwrite.io/console';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import SubMenu from '../../../../../../lib/components/menu/subMenu.svelte';
+    import { Menu } from '$lib/components/menu';
 
     let showFileAlert = true;
-    onMount(async () => {
-        filePermissions = $file?.$permissions;
-    });
 
     let showDelete = false;
-    let filePermissions = $file?.$permissions;
     let arePermsDisabled = true;
+    let filePermissions = $file?.$permissions;
+
+    let showManageToken = false;
+    let tokenDeleteMode = false;
+    let tokenPermissionsMode = false;
+    let selectedFileToken: Models.ResourceToken | null = null;
 
     const getPreview = (fileId: string) =>
         sdk.forProject.storage.getFilePreview($file.bucketId, fileId, 640, 300).toString() +
         '&mode=admin';
+
     const getView = (fileId: string) =>
         sdk.forProject.storage.getFileView($file.bucketId, fileId).toString() + '&mode=admin';
 
     $: if (filePermissions) {
-        if (symmetricDifference(filePermissions, $file.$permissions).length) {
-            arePermsDisabled = false;
-        } else arePermsDisabled = true;
+        arePermsDisabled = !symmetricDifference(filePermissions, $file.$permissions).length;
     }
 
     function downloadFile() {
@@ -68,6 +94,120 @@
             trackError(error, Submit.FileUpdatePermissions);
         }
     }
+
+    async function deleteFileToken(token: Models.ResourceToken) {
+        try {
+            await sdk.forProject.tokens.delete(token.$id);
+            await invalidate(Dependencies.FILE_TOKENS);
+            addNotification({
+                message: 'File token deleted',
+                type: 'success'
+            });
+            trackEvent(Submit.FileTokenDelete);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.FileTokenDelete);
+        }
+    }
+
+    async function createFileToken(expiry: string) {
+        try {
+            await sdk.forProject.tokens.createFileToken($file.bucketId, $file.$id, expiry, [
+                Permission.read(Role.any())
+            ]);
+
+            await invalidate(Dependencies.FILE_TOKENS);
+            addNotification({
+                message: 'File token created',
+                type: 'success'
+            });
+            trackEvent(Submit.FileTokenCreate);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.FileTokenCreate);
+        }
+    }
+
+    async function updateFileToken(fileToken: Models.ResourceToken) {
+        try {
+            await sdk.forProject.tokens.update(
+                selectedFileToken.$id,
+                fileToken.expire ? fileToken.expire : null,
+                fileToken.$permissions
+            );
+            await invalidate(Dependencies.FILE_TOKENS);
+            addNotification({
+                message: 'File token updated',
+                type: 'success'
+            });
+            trackEvent(Submit.FileTokenUpdate);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.FileTokenUpdate);
+        } finally {
+            selectedFileToken = null;
+        }
+    }
+
+    async function copyPreviewWithToken(
+        token: Models.ResourceToken,
+        method: 'preview' | 'view' | 'download' = 'preview'
+    ) {
+        try {
+            const { jwt } = await sdk.forProject.tokens.getJWT(token.$id);
+            let url: string;
+
+            if (method === 'view') {
+                url = sdk.forProject.storage.getFileView($file.bucketId, $file.$id);
+            } else if (method === 'download') {
+                url = sdk.forProject.storage.getFileDownload($file.bucketId, $file.$id);
+            } else {
+                url = sdk.forProject.storage.getFilePreview($file.bucketId, $file.$id);
+            }
+
+            await copy(`${url}&token=${jwt}`);
+
+            addNotification({
+                message: 'File URL copied',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+
+    function getPermissionGroups(permissions: string[]): string {
+        const map = {
+            read: 'Read',
+            update: 'Update',
+            delete: 'Delete'
+        };
+
+        const groups = permissions.reduce((set, perm) => {
+            const match = perm.match(/^(\w+)\(/);
+            const key = match?.[1];
+            if (key && map[key]) set.add(map[key]);
+            return set;
+        }, new Set<string>());
+
+        return [...groups].join(', ');
+    }
+
+    onMount(async () => {
+        filePermissions = $file?.$permissions;
+    });
 </script>
 
 <Container>
@@ -116,6 +256,149 @@
             </svelte:fragment>
         </CardGrid>
 
+        <div class="tokens-section">
+            <CardGrid hideOverflow>
+                <svelte:fragment slot="title">File tokens</svelte:fragment>
+                Use tokens to provide public access to the file.
+                <svelte:fragment slot="aside">
+                    {#if $tokens.total}
+                        <Layout.Stack
+                            justifyContent="flex-end"
+                            direction={$isSmallViewport ? 'column' : 'row'}>
+                            <Button secondary on:click={() => (showManageToken = true)}>
+                                <Icon size="s" icon={IconPlus} />
+                                <span class="text">Create token</span>
+                            </Button>
+                        </Layout.Stack>
+
+                        <Table.Root columns={$columns} let:root>
+                            <svelte:fragment slot="header" let:root>
+                                {#each $columns as { id, title } (id)}
+                                    <Table.Header.Cell column={id} {root}
+                                        >{title}</Table.Header.Cell>
+                                {/each}
+                            </svelte:fragment>
+
+                            {#each $tokens.tokens as token}
+                                <Table.Row.Base {root}>
+                                    <Table.Cell column="created" {root}
+                                        >{toLocaleDate(token.$createdAt)}</Table.Cell>
+
+                                    <Table.Cell column="expiry" {root}
+                                        >{token.expire
+                                            ? cleanFormattedDate(token.expire)
+                                            : 'never'}</Table.Cell>
+
+                                    <Table.Cell column="last_accessed" {root}
+                                        >{token.accessedAt
+                                            ? cleanFormattedDate(token.accessedAt, true)
+                                            : 'never'}</Table.Cell>
+
+                                    <Table.Cell column="permissions" {root}>
+                                        {#if token.$permissions.length}
+                                            <Typography.Text truncate slot="tooltip">
+                                                {getPermissionGroups(token.$permissions)}
+                                            </Typography.Text>
+                                        {:else}
+                                            none
+                                        {/if}
+                                    </Table.Cell>
+
+                                    <Table.Cell column="actions" {root}>
+                                        <Layout.Stack alignItems="flex-end">
+                                            <Menu>
+                                                <!-- CTA for menu open -->
+                                                <PinkButton.Button icon variant="ghost">
+                                                    <Icon size="s" icon={IconDotsHorizontal} />
+                                                </PinkButton.Button>
+
+                                                <svelte:fragment slot="menu" let:toggle>
+                                                    <ActionMenu.Root>
+                                                        <SubMenu>
+                                                            <ActionMenu.Root noPadding>
+                                                                <ActionMenu.Item.Button
+                                                                    leadingIcon={IconDuplicate}
+                                                                    trailingIcon={IconChevronRight}>
+                                                                    Copy URL
+                                                                </ActionMenu.Item.Button>
+                                                            </ActionMenu.Root>
+                                                            <svelte:fragment slot="menu">
+                                                                <ActionMenu.Root noPadding>
+                                                                    <ActionMenu.Item.Button
+                                                                        on:click={(e) => {
+                                                                            toggle(e);
+                                                                            copyPreviewWithToken(
+                                                                                token
+                                                                            );
+                                                                        }}>
+                                                                        Preview
+                                                                    </ActionMenu.Item.Button>
+                                                                    <ActionMenu.Item.Button
+                                                                        on:click={(e) => {
+                                                                            toggle(e);
+                                                                            copyPreviewWithToken(
+                                                                                token,
+                                                                                'view'
+                                                                            );
+                                                                        }}>
+                                                                        View
+                                                                    </ActionMenu.Item.Button>
+                                                                    <ActionMenu.Item.Button
+                                                                        on:click={(e) => {
+                                                                            toggle(e);
+                                                                            copyPreviewWithToken(
+                                                                                token,
+                                                                                'download'
+                                                                            );
+                                                                        }}>
+                                                                        Download
+                                                                    </ActionMenu.Item.Button>
+                                                                </ActionMenu.Root>
+                                                            </svelte:fragment>
+                                                        </SubMenu>
+                                                        <ActionMenu.Item.Button
+                                                            leadingIcon={IconPencil}
+                                                            on:click={(e) => {
+                                                                showManageToken = true;
+                                                                selectedFileToken = token;
+                                                            }}>
+                                                            Edit expiry
+                                                        </ActionMenu.Item.Button>
+                                                        <ActionMenu.Item.Button
+                                                            leadingIcon={IconKey}
+                                                            on:click={(e) => {
+                                                                showManageToken = true;
+                                                                tokenPermissionsMode = true;
+                                                                selectedFileToken = token;
+                                                            }}>
+                                                            Edit Permissions
+                                                        </ActionMenu.Item.Button>
+                                                        <ActionMenu.Item.Button
+                                                            status="danger"
+                                                            leadingIcon={IconTrash}
+                                                            on:click={async (e) => {
+                                                                tokenDeleteMode = true;
+                                                                showManageToken = true;
+                                                                selectedFileToken = token;
+                                                            }}>
+                                                            Delete
+                                                        </ActionMenu.Item.Button>
+                                                    </ActionMenu.Root>
+                                                </svelte:fragment>
+                                            </Menu>
+                                        </Layout.Stack>
+                                    </Table.Cell>
+                                </Table.Row.Base>
+                            {/each}
+                        </Table.Root>
+                    {:else}
+                        <Empty on:click={() => (showManageToken = true)}
+                            >Create new file token</Empty>
+                    {/if}
+                </svelte:fragment>
+            </CardGrid>
+        </div>
+
         <CardGrid>
             <svelte:fragment slot="title">Permissions</svelte:fragment>
             Assign read or write permissions at the bucket level or file level. If bucket level permissions
@@ -135,8 +418,8 @@
                 {:else}
                     <Alert.Inline status="info" title="File security is disabled">
                         <Typography.Text>
-                            If you want to assign document permissions. Go to Bucket settings and
-                            enable file security. Otherwise, only Bucket permissions will be used.
+                            If you want to assign file permissions. Go to Bucket settings and enable
+                            file security. Otherwise, only Bucket permissions will be used.
                         </Typography.Text>
                     </Alert.Inline>
                 {/if}
@@ -175,3 +458,18 @@
 </Container>
 
 <Delete bind:showDelete />
+
+<ManageFileTokenModal
+    bind:show={showManageToken}
+    bind:isDelete={tokenDeleteMode}
+    bind:fileToken={selectedFileToken}
+    bind:isUpdatePermissions={tokenPermissionsMode}
+    on:created={({ detail: expiry }) => createFileToken(expiry)}
+    on:updated={({ detail: token }) => updateFileToken(token)}
+    on:deleted={async () => await deleteFileToken(selectedFileToken)} />
+
+<style>
+    :global(.tokens-section div) {
+        overflow: auto;
+    }
+</style>
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 e4ba0b0439..a21f607280 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
@@ -13,12 +13,13 @@
     let error: string;
     const deleteFile = async () => {
         try {
+            const fileName = $file.name;
             await sdk.forProject.storage.deleteFile($file.bucketId, $file.$id);
             showDelete = false;
             await goto(`${base}/project-${page.params.project}/storage/bucket-${$file.bucketId}`);
             addNotification({
                 type: 'success',
-                message: `${$file.name} has been deleted`
+                message: `${fileName} has been deleted`
             });
             trackEvent(Submit.FileDelete);
         } catch (error) {
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
new file mode 100644
index 0000000000..45e8b269de
--- /dev/null
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/manageFileToken.svelte
@@ -0,0 +1,98 @@
+<script context="module" lang="ts">
+    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+
+    export function cleanFormattedDate(date: string, time: boolean = false): string {
+        return time
+            ? toLocaleDateTime(date, true)
+            : toLocaleDate(date, 'dd mm yyyy').replaceAll(', ', ' ');
+    }
+</script>
+
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { createEventDispatcher } from 'svelte';
+    import { Link } from '@appwrite.io/pink-svelte';
+    import { type Models } from '@appwrite.io/console';
+    import { Permissions } from '$lib/components/permissions';
+    import { Confirm, ExpirationInput, Modal } from '$lib/components';
+
+    export let show = false;
+    export let isDelete = false;
+    export let isUpdatePermissions = false;
+    export let fileToken: Models.ResourceToken;
+
+    let expire = null;
+
+    const dispatch = createEventDispatcher();
+
+    function close() {
+        show = false;
+        expire = null;
+        isDelete = false;
+        fileToken = null;
+    }
+
+    function handleFileToken() {
+        if (isDelete) {
+            dispatch('deleted');
+        } else {
+            dispatch(fileToken ? 'updated' : 'created', fileToken ? fileToken : expire);
+        }
+        close();
+    }
+
+    $: if (!show) {
+        close();
+    }
+</script>
+
+{#if isDelete}
+    <Confirm bind:open={show} title="Delete token" onSubmit={handleFileToken}>
+        {@const formattedDate = cleanFormattedDate(fileToken.$createdAt)}
+        <p data-private>
+            Are you sure you want to delete the file token created on <b>{formattedDate}</b>?
+        </p>
+
+        <p data-private>
+            {#if fileToken.accessedAt}
+                {@const formattedDate = cleanFormattedDate(fileToken.accessedAt, true)}
+
+                This token was last accessed on <b>{formattedDate}</b>
+            {:else}
+                This token has never been accessed.
+            {/if}
+        </p>
+    </Confirm>
+{:else}
+    <Modal
+        bind:show
+        size="s"
+        onSubmit={handleFileToken}
+        title={`${fileToken ? 'Edit' : 'Create'} file token`}>
+        <!-- TODO: docs link needed-->
+        <svelte:fragment slot="description">
+            {#if fileToken}
+                {@const formattedDate = cleanFormattedDate(fileToken.$createdAt)}
+                Edit the expiry of the file token created on <b>{formattedDate}</b>
+            {:else}
+                Create a file token to grant access to a file.
+                <Link.Anchor href="https://appwrite.com/docs/">Learn more</Link.Anchor>.
+            {/if}
+        </svelte:fragment>
+
+        {#if isUpdatePermissions}
+            <Permissions bind:permissions={fileToken.$permissions} hideOnClick />
+        {:else}
+            <ExpirationInput
+                bind:value={expire}
+                resourceType="token"
+                selectorLabel="Expiry"
+                dateSelectorLabel="Expiry date" />
+        {/if}
+
+        <svelte:fragment slot="footer">
+            <Button secondary on:click={close}>Cancel</Button>
+            <Button submit>{fileToken ? 'Update' : 'Create'}</Button>
+        </svelte:fragment>
+    </Modal>
+{/if}
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/store.ts b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/store.ts
index 7d42b415ad..8ce91c5087 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/store.ts
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/store.ts
@@ -1,5 +1,16 @@
-import { derived } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 import { page } from '$app/stores';
 import type { Models } from '@appwrite.io/console';
+import type { Column } from '$lib/helpers/types';
 
 export const file = derived(page, ($page) => $page.data.file as Models.File);
+
+export const tokens = derived(page, ($page) => $page.data.tokens as Models.ResourceTokenList);
+
+export const columns = writable<Column[]>([
+    { id: 'created', title: 'Created', type: 'datetime', width: 200 },
+    { id: 'expiry', title: 'Expiration', type: 'datetime', width: 200 },
+    { id: 'last_accessed', title: 'Last accessed', type: 'datetime', width: 200 },
+    { id: 'permissions', title: 'Permissions', type: 'string', width: 200 },
+    { id: 'actions', title: '', type: 'string', width: 60 }
+]);
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 8d9e5409d7..44d3d37d4e 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
@@ -113,15 +113,12 @@
     let isExtensionsDisabled = true;
 
     $: if (permissions) {
-        if (symmetricDifference(permissions, data.bucket.$permissions).length) {
-            $arePermsDisabled = false;
-        } else $arePermsDisabled = true;
+        $arePermsDisabled = !symmetricDifference(permissions, data.bucket.$permissions).length;
     }
 
     $: if (extensions) {
-        if (JSON.stringify(extensions) !== JSON.stringify(data.bucket.allowedFileExtensions)) {
-            isExtensionsDisabled = false;
-        } else isExtensionsDisabled = true;
+        isExtensionsDisabled =
+            JSON.stringify(extensions) === JSON.stringify(data.bucket.allowedFileExtensions);
     }
 
     function toggleBucket() {