diff --git a/package-lock.json b/package-lock.json
index 3a1c153f5..befa11dd6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,8 +7,8 @@
             "name": "@appwrite/console",
             "dependencies": {
                 "@appwrite.io/console": "^0.6.0-rc.17",
-                "@appwrite.io/pink": "0.4.0",
-                "@appwrite.io/pink-icons": "0.4.0",
+                "@appwrite.io/pink": "0.5.0",
+                "@appwrite.io/pink-icons": "0.5.0",
                 "@popperjs/core": "^2.11.8",
                 "@sentry/svelte": "^7.66.0",
                 "@sentry/tracing": "^7.66.0",
@@ -167,19 +167,19 @@
             }
         },
         "node_modules/@appwrite.io/pink": {
-            "version": "0.4.0",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.4.0.tgz",
-            "integrity": "sha512-48g2MQIFaEXPXobJ77wJK73YRUkpUZSAkRNa3XJhtC0N2WSTXD3poXBAVYb2QfjGW4e5U1tM/WYC0ZQMtjEzlQ==",
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.5.0.tgz",
+            "integrity": "sha512-UVnek/tigxoU0FksVT77cCx0+JTKA+43HAslqJIZFnV4kKIbQnCQiX0hrj2hhHzuAaWTCSvSQftq0SbGORDb/A==",
             "dependencies": {
-                "@appwrite.io/pink-icons": "0.4.0",
+                "@appwrite.io/pink-icons": "0.5.0",
                 "normalize.css": "^8.0.1",
                 "the-new-css-reset": "^1.11.2"
             }
         },
         "node_modules/@appwrite.io/pink-icons": {
-            "version": "0.4.0",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.4.0.tgz",
-            "integrity": "sha512-o1r101GRK72nBbeVL76H7NIwucrW8+vbzs41AMBPbnK+uAGhNb9ui5Na7gi6NtnBxHYnPDECg93bZhoLYlQ6XA=="
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.5.0.tgz",
+            "integrity": "sha512-IHob3TsvBFZo6Ya78+MPm5bKBHzFZtoJDgmClRSOOTtr1K74mditZj4sA+5haBN/4N0L3g8QtOpR4gd2vV+T3g=="
         },
         "node_modules/@babel/code-frame": {
             "version": "7.23.5",
diff --git a/package.json b/package.json
index 1afb8d285..ff59f21fc 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@appwrite.io/console": "^0.6.0-rc.17",
-        "@appwrite.io/pink": "0.4.0",
-        "@appwrite.io/pink-icons": "0.4.0",
+        "@appwrite.io/pink": "0.5.0",
+        "@appwrite.io/pink-icons": "0.5.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/svelte": "^7.66.0",
         "@sentry/tracing": "^7.66.0",
diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte
new file mode 100644
index 000000000..3ec802af3
--- /dev/null
+++ b/src/lib/components/filePicker.svelte
@@ -0,0 +1,544 @@
+<script lang="ts">
+    import { Id, ModalWrapper, Trim } from '.';
+    import { Button, Form } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { ID, Query, Permission, Role } from '@appwrite.io/console';
+    import type { Models } from '@appwrite.io/console';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
+    import { toLocaleDate } from '$lib/helpers/date';
+    import {
+        Table,
+        TableBody,
+        TableRowButton,
+        TableHeader,
+        TableCell,
+        TableCellText,
+        TableCellHead
+    } from '$lib/elements/table';
+    import InputSearch from '$lib/elements/forms/inputSearch.svelte';
+    import InputSelect from '$lib/elements/forms/inputSelect.svelte';
+    import FormList from '$lib/elements/forms/formList.svelte';
+    import { writable } from 'svelte/store';
+    import { onMount } from 'svelte';
+    import Heading from './heading.svelte';
+    import { clickOnEnter } from '$lib/helpers/a11y';
+    import Empty from './empty.svelte';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+
+    export let show: boolean;
+    export let mimeTypeQuery: string = 'image/';
+    export let selectedBucket: string = null;
+    export let selectedFile: string = null;
+    export let onSelect: (e: Models.File) => void;
+
+    let search = writable('');
+    let searchEnabled = false;
+    let fileSelector: HTMLInputElement;
+    let uploading = false;
+    let view: 'grid' | 'list' = 'list';
+
+    onMount(() => {
+        selectedBucket = currentBucket?.$id;
+    });
+
+    function submitForm() {
+        onSelect(currentFile);
+        closeModal();
+    }
+
+    function getPreview(bucketId: string, fileId: string, size: number = 64) {
+        return (
+            sdk.forProject.storage.getFilePreview(bucketId, fileId, size, size).toString() +
+            '&mode=admin'
+        );
+    }
+
+    async function uploadFile() {
+        try {
+            uploading = true;
+            const file = await sdk.forProject.storage.createFile(
+                selectedBucket,
+                ID.unique(),
+                fileSelector.files[0],
+                [Permission.read(Role.any())]
+            );
+            search.set($search === null ? '' : null);
+            selectFile(file);
+        } catch (e) {
+            console.error(e);
+        } finally {
+            uploading = false;
+        }
+    }
+
+    function selectBucket(bucket: Models.Bucket | null) {
+        currentBucket = bucket;
+        selectedBucket = bucket?.$id ?? null;
+        resetFile();
+    }
+
+    function selectFile(file: Models.File) {
+        currentFile = file;
+        selectedBucket = currentFile.bucketId;
+        selectedFile = currentFile.$id;
+    }
+
+    function resetFile() {
+        selectedFile = null;
+    }
+
+    function resetBucket() {
+        selectedBucket = null;
+    }
+
+    function closeModal() {
+        show = false;
+        resetFile();
+        resetBucket();
+    }
+
+    function handleVisibilityChange() {
+        if (!document.hidden) {
+            buckets = loadBuckets();
+        }
+    }
+
+    let currentBucket: Models.Bucket = null;
+    let currentFile: Models.File = null;
+    let buckets: Promise<Models.BucketList> = loadBuckets();
+    async function loadBuckets() {
+        const response = await sdk.forProject.storage.listBuckets();
+        const bucket = response.buckets[0] ?? null;
+        if (bucket) {
+            currentBucket = bucket;
+            selectedBucket = bucket.$id;
+        }
+
+        return response;
+    }
+
+    $: files =
+        currentBucket &&
+        sdk.forProject.storage
+            .listFiles(
+                currentBucket.$id,
+                [Query.startsWith('mimeType', mimeTypeQuery), Query.orderDesc('$createdAt')],
+                $search || undefined
+            )
+            .then((response) => {
+                if ($search === '') {
+                    searchEnabled = response.total > 0;
+                }
+
+                return response;
+            });
+
+    $: if ($search) {
+        resetFile();
+    }
+</script>
+
+<svelte:document on:visibilitychange={handleVisibilityChange} />
+
+<ModalWrapper bind:show size="huge">
+    <Form isModal onSubmit={submitForm} class="u-stretch">
+        <header class="modal-header u-margin-block-end-0">
+            <div class="u-flex u-main-space-between u-cross-center u-gap-16">
+                <h4 class="modal-title heading-level-5">Select file</h4>
+                <button
+                    type="button"
+                    on:click={closeModal}
+                    class="button is-text is-small is-only-icon"
+                    aria-label="Close modal">
+                    <span class="icon-x" aria-hidden="true"></span>
+                </button>
+            </div>
+        </header>
+        <div
+            class="modal-content u-stretch u-flex-vertical u-padding-0 u-margin-block-0 u-overflow-visible">
+            <div class="u-flex u-min-height-0 u-stretch">
+                <aside
+                    class="drop-section u-width-200 u-padding-16
+                            u-flex-vertical u-gap-8
+                            u-flex-shrink-0 u-margin-inline-0 u-overflow-y-auto is-not-mobile">
+                    <h6
+                        class="eyebrow-heading-3"
+                        style:--heading-text-color="var(--color-neutral-50)">
+                        Buckets
+                    </h6>
+                    <ul class="drop-list">
+                        {#await buckets}
+                            <div class="u-flex u-main-center">
+                                <div class="loader" />
+                            </div>
+                        {:then response}
+                            {#each response.buckets as bucket}
+                                {@const isSelected = bucket.$id === selectedBucket}
+                                <li class="drop-list-item">
+                                    <button
+                                        type="button"
+                                        class="drop-button"
+                                        class:is-selected={isSelected}
+                                        on:click={() => selectBucket(bucket)}>
+                                        <span>{bucket.name}</span>
+                                    </button>
+                                </li>
+                            {:else}
+                                <li class="drop-list-item">
+                                    <span class="drop-button">No buckets found</span>
+                                </li>
+                            {/each}
+                        {/await}
+                    </ul>
+                </aside>
+                <article
+                    style:padding-inline="calc(var(--p-modal-padding))"
+                    class="modal-content-main u-flex-vertical u-gap-24 u-sep-inline-start u-flex-basis-1000 u-padding-block-24 u-overflow-y-auto">
+                    <div class="is-only-mobile">
+                        {#await buckets}
+                            loading
+                        {:then response}
+                            {#if currentBucket?.$id}
+                                <FormList>
+                                    <InputSelect
+                                        wrapperTag="div"
+                                        label="Buckets"
+                                        options={response.buckets.map((n) => ({
+                                            value: n.$id,
+                                            label: n.name
+                                        }))}
+                                        bind:value={currentBucket.$id}
+                                        id="buckets" />
+                                </FormList>
+                            {/if}
+                        {/await}
+                    </div>
+                    {#await buckets}
+                        <div class="u-flex-vertical u-stretch u-position-relative u-main-center">
+                            <div
+                                class="u-position-absolute u-width-full-line u-flex u-flex-vertical u-main-center u-cross-center u-gap-16 u-margin-block-start-32"
+                                style="inset-inline-start: 0;">
+                                <div class="loader" />
+                                <p class="text">Loading files...</p>
+                            </div>
+                        </div>
+                    {:then response}
+                        {#if response?.total}
+                            {#if currentBucket}
+                                <header class="u-flex-vertical u-gap-32">
+                                    <div class="u-flex u-gap-16">
+                                        <h5 class="heading-level-6 u-trim u-min-width-0">
+                                            {currentBucket?.name}
+                                        </h5>
+                                        <Id value={currentBucket?.$id} event="bucket">
+                                            {currentBucket?.$id}
+                                        </Id>
+                                    </div>
+                                    <div
+                                        class="u-flex u-main-space-between u-gap-16 u-flex-vertical-mobile">
+                                        <InputSearch
+                                            placeholder="Search files"
+                                            bind:value={$search}
+                                            disabled={!searchEnabled}
+                                            style="min-inline-size: 17.5rem; block-size: 100%" />
+                                        <div class="u-flex u-gap-16">
+                                            <div class="toggle-button">
+                                                <ul class="toggle-button-list">
+                                                    <li class="toggle-button-item">
+                                                        <button
+                                                            on:click={() => (view = 'list')}
+                                                            disabled={!searchEnabled}
+                                                            type="button"
+                                                            class="toggle-button-element"
+                                                            class:is-selected={view === 'list'}
+                                                            aria-label="List View">
+                                                            <span
+                                                                class="icon-view-list"
+                                                                aria-hidden="true" />
+                                                        </button>
+                                                    </li>
+                                                    <li class="toggle-button-item">
+                                                        <button
+                                                            on:click={() => (view = 'grid')}
+                                                            disabled={!searchEnabled}
+                                                            type="button"
+                                                            class="toggle-button-element"
+                                                            class:is-selected={view === 'grid'}
+                                                            aria-label="Grid View">
+                                                            <span
+                                                                class="icon-view-grid"
+                                                                aria-hidden="true" />
+                                                        </button>
+                                                    </li>
+                                                </ul>
+                                            </div>
+
+                                            <Button
+                                                secondary
+                                                class="is-full-width-in-stack-mobile u-height-100-percent"
+                                                disabled={uploading}
+                                                on:click={() => fileSelector.click()}>
+                                                <input
+                                                    tabindex="-1"
+                                                    type="file"
+                                                    accept="image/*"
+                                                    class="u-hide"
+                                                    on:change={uploadFile}
+                                                    bind:this={fileSelector} />
+                                                {#if uploading}
+                                                    <div class="loader is-small"></div>
+                                                    <span>Uploading</span>
+                                                {:else}
+                                                    <span class="icon-upload" aria-hidden="true"
+                                                    ></span>
+                                                    <span>Upload</span>
+                                                {/if}
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </header>
+
+                                {#if files}
+                                    {#await files}
+                                        <div
+                                            class="u-flex-vertical u-stretch u-position-relative u-main-center">
+                                            <div
+                                                class="u-position-absolute u-width-full-line u-flex u-flex-vertical u-main-center u-cross-center u-gap-16 u-margin-block-start-32"
+                                                style="inset-inline-start: 0;">
+                                                <div class="loader" />
+                                                <p class="text">Loading files...</p>
+                                            </div>
+                                        </div>
+                                    {:then response}
+                                        <div class="u-flex-vertical u-stretch">
+                                            {#if response?.files?.length}
+                                                {#if view === 'grid'}
+                                                    <ul
+                                                        class="grid-box"
+                                                        style="--grid-gap:40px; --grid-item-size:120px; --grid-item-size-small-screens:100px;">
+                                                        {#each response?.files as file}
+                                                            <li>
+                                                                <div
+                                                                    class="u-flex-vertical u-gap-8">
+                                                                    <div
+                                                                        role="button"
+                                                                        style:background-size="cover"
+                                                                        style:background-image={`url(${getPreview(
+                                                                            currentBucket.$id,
+                                                                            file.$id,
+                                                                            360
+                                                                        )})`}
+                                                                        on:click={() =>
+                                                                            selectFile(file)}
+                                                                        on:keyup={clickOnEnter}
+                                                                        tabindex="0"
+                                                                        style:aspect-ratio="1/1"
+                                                                        style:display="flex"
+                                                                        style:align-items="flex-end"
+                                                                        style:flex-direction="row-reverse"
+                                                                        style:box-shadow="none"
+                                                                        class="card u-height-100-percent u-gap-16"
+                                                                        style="--card-padding:0.5rem;--card-padding-mobile:0.5rem; --card-border-radius:var(--border-radius-medium);">
+                                                                        <input
+                                                                            class="u-position-absolute is-small u-margin-block-start-2"
+                                                                            type="radio"
+                                                                            name="file"
+                                                                            value={file.$id}
+                                                                            style:pointer-events="none"
+                                                                            checked={selectedFile ===
+                                                                                file.$id} />
+                                                                    </div>
+                                                                    <span class="u-text-center"
+                                                                        ><Trim alternativeTrim
+                                                                            >{file.name}</Trim
+                                                                        ></span>
+                                                                </div>
+                                                            </li>
+                                                        {/each}
+                                                    </ul>
+                                                {/if}
+                                                {#if view === 'list'}
+                                                    <Table noMargin noStyles transparent dense>
+                                                        <TableHeader>
+                                                            <TableCellHead
+                                                                ><span
+                                                                    class="u-margin-inline-start-8"
+                                                                    >Filename</span
+                                                                ></TableCellHead>
+                                                            <TableCellHead width={140} onlyDesktop>
+                                                                ID
+                                                            </TableCellHead>
+                                                            <TableCellHead width={100} onlyDesktop>
+                                                                Type
+                                                            </TableCellHead>
+                                                            <TableCellHead width={100} onlyDesktop>
+                                                                Size
+                                                            </TableCellHead>
+                                                            <TableCellHead width={120} onlyDesktop>
+                                                                Created
+                                                            </TableCellHead>
+                                                        </TableHeader>
+                                                        <TableBody>
+                                                            {#each response?.files as file}
+                                                                <TableRowButton
+                                                                    on:click={() =>
+                                                                        selectFile(file)}>
+                                                                    <TableCell title="Filename">
+                                                                        <div
+                                                                            class="u-inline-flex u-cross-center u-gap-12">
+                                                                            <input
+                                                                                type="radio"
+                                                                                class="is-small u-margin-inline-start-8"
+                                                                                name="file"
+                                                                                value={file.$id}
+                                                                                style:pointer-events="none"
+                                                                                checked={selectedFile ===
+                                                                                    file.$id} />
+                                                                            <span class="image">
+                                                                                <img
+                                                                                    class="avatar"
+                                                                                    style:border-radius="var(--border-radius-xsmall)"
+                                                                                    width="28"
+                                                                                    height="28"
+                                                                                    src={getPreview(
+                                                                                        currentBucket.$id,
+                                                                                        file.$id
+                                                                                    )}
+                                                                                    alt={file.name} />
+                                                                            </span>
+                                                                            <Trim alternativeTrim>
+                                                                                {file.name}
+                                                                            </Trim>
+                                                                        </div>
+                                                                    </TableCell>
+                                                                    <TableCellText
+                                                                        title="ID"
+                                                                        onlyDesktop>
+                                                                        <Id value={file.$id}
+                                                                            >{file.$id}</Id>
+                                                                    </TableCellText>
+                                                                    <TableCellText
+                                                                        title="Type"
+                                                                        onlyDesktop>
+                                                                        {file.mimeType}
+                                                                    </TableCellText>
+                                                                    <TableCellText
+                                                                        title="Size"
+                                                                        onlyDesktop>
+                                                                        {calculateSize(
+                                                                            file.sizeOriginal
+                                                                        )}
+                                                                    </TableCellText>
+                                                                    <TableCellText
+                                                                        title="Created"
+                                                                        onlyDesktop>
+                                                                        {toLocaleDate(
+                                                                            file.$createdAt
+                                                                        )}
+                                                                    </TableCellText>
+                                                                </TableRowButton>
+                                                            {/each}
+                                                        </TableBody>
+                                                    </Table>
+                                                {/if}
+                                            {:else if $search}
+                                                <article
+                                                    style:--card-bg-color="transparent"
+                                                    style:--shadow-small="none"
+                                                    style:--color-border="var(--color-neutral-15)"
+                                                    class="card u-grid u-cross-center u-width-full-line common-section is-border-dashed">
+                                                    <div
+                                                        class="u-flex u-flex-vertical u-cross-center u-gap-24 u-overflow-hidden">
+                                                        <div class="common-section">
+                                                            <div
+                                                                class="u-text-center common-section">
+                                                                <b class="body-text-2 u-bold"
+                                                                    >Sorry we couldn't find "{$search}"</b>
+                                                                <p>
+                                                                    There are no files that match
+                                                                    your search.
+                                                                </p>
+                                                            </div>
+                                                            <div
+                                                                class="u-flex u-gap-16 common-section u-main-center">
+                                                                <Button
+                                                                    secondary
+                                                                    on:click={() => ($search = '')}
+                                                                    >Clear search</Button>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </article>
+                                            {:else}
+                                                <Empty
+                                                    single
+                                                    noMedia
+                                                    --card-bg-color="transparent"
+                                                    --shadow-small="none"
+                                                    --color-border="var(--color-neutral-15)">
+                                                    <div class="common-section">
+                                                        <div class="u-text-center common-section">
+                                                            <Heading
+                                                                size="7"
+                                                                tag="h2"
+                                                                trimmed={false}>
+                                                                No files found within this bucket.
+                                                            </Heading>
+                                                            <p class="text u-line-height-1-5">
+                                                                Need a hand? Learn more in our <a
+                                                                    class="link"
+                                                                    href="https://appwrite.io/docs/products/storage"
+                                                                    target="_blank"
+                                                                    rel="noopener noreferrer">
+                                                                    documentation</a
+                                                                >.
+                                                            </p>
+                                                        </div>
+                                                    </div>
+                                                </Empty>
+                                            {/if}
+                                        </div>
+                                    {/await}
+                                {/if}
+                            {/if}
+                        {:else}
+                            <Empty
+                                single
+                                noMedia
+                                --card-bg-color="transparent"
+                                --shadow-small="none"
+                                --color-border="var(--color-neutral-15)">
+                                <div class="u-text-center u-flex-vertical u-cross-center u-gap-24">
+                                    <Heading size="7" tag="h2" trimmed={false}>
+                                        No buckets found
+                                    </Heading>
+                                    <Button
+                                        secondary
+                                        external
+                                        href={`${base}/console/project-${$page.params.project}/storage`}>
+                                        Create bucket
+                                    </Button>
+                                </div>
+                            </Empty>
+                        {/if}
+                    {/await}
+                </article>
+            </div>
+        </div>
+        <div class="modal-footer u-margin-block-start-0">
+            <div class="u-flex u-main-end u-gap-16">
+                <Button text on:click={closeModal}>Cancel</Button>
+                <Button submit disabled={selectedBucket === null || selectedFile === null}
+                    >Select</Button>
+            </div>
+        </div>
+    </Form>
+</ModalWrapper>
+
+<style lang="scss">
+    input[type='radio']:where(:indeterminate) {
+        --p-bg-color: var(--p-bg-color-default);
+        --p-border-color: var(--p-border-color-default);
+    }
+</style>
diff --git a/src/lib/components/id.svelte b/src/lib/components/id.svelte
index 46f3910f8..42aad2c8f 100644
--- a/src/lib/components/id.svelte
+++ b/src/lib/components/id.svelte
@@ -47,7 +47,7 @@
     }
 </script>
 
-<Copy {value} {event}>
+<Copy {value} {event} appendTo="parent">
     <div
         class="interactive-text-output is-buttons-on-top"
         class:u-text-center={centered}
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index ca32c4e7e..9bcdbdc89 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -5,7 +5,7 @@
     import { disableCommands } from '$lib/commandCenter';
 
     export let show = false;
-    export let size: 'small' | 'big' = null;
+    export let size: 'small' | 'big' | 'huge' = null;
     export let icon: string = null;
     export let state: 'success' | 'warning' | 'error' | 'info' = null;
     export let error: string = null;
diff --git a/src/lib/components/modalWrapper.svelte b/src/lib/components/modalWrapper.svelte
index bd1eea5f4..d85c3f0b0 100644
--- a/src/lib/components/modalWrapper.svelte
+++ b/src/lib/components/modalWrapper.svelte
@@ -4,7 +4,7 @@
     import { disableCommands } from '$lib/commandCenter';
 
     export let show = false;
-    export let size: 'small' | 'big' = null;
+    export let size: 'small' | 'big' | 'huge' = null;
     export let closable = true;
     export let headerDivider = true;
     export let style = '';
@@ -73,6 +73,7 @@
     class:u-hide={!show}
     class:is-small={size === 'small'}
     class:is-big={size === 'big'}
+    class:is-huge={size === 'huge'}
     class:is-separate-header={headerDivider}
     bind:this={dialog}
     on:cancel|preventDefault
@@ -81,3 +82,18 @@
         <slot close={closeModal} />
     {/if}
 </dialog>
+
+<style lang="scss">
+    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+
+    .modal.is-huge {
+        block-size: 100%;
+        min-block-size: 80vh;
+
+        @media #{$break1}, #{$break2} {
+            min-inline-size: 100%;
+            min-block-size: 100%;
+            border-radius: 0;
+        }
+    }
+</style>
diff --git a/src/lib/elements/forms/index.ts b/src/lib/elements/forms/index.ts
index 8d022c660..739ac3823 100644
--- a/src/lib/elements/forms/index.ts
+++ b/src/lib/elements/forms/index.ts
@@ -31,3 +31,4 @@ export { default as InputDate } from './inputDate.svelte';
 export { default as InputDateRange } from './inputDateRange.svelte';
 export { default as InputTime } from './inputTime.svelte';
 export { default as InputDigits } from './inputDigits.svelte';
+export { default as InputFilePicker } from './inputFilePicker.svelte';
diff --git a/src/lib/elements/forms/inputFilePicker.svelte b/src/lib/elements/forms/inputFilePicker.svelte
new file mode 100644
index 000000000..96e4ed104
--- /dev/null
+++ b/src/lib/elements/forms/inputFilePicker.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+    import { Drop, Trim } from '$lib/components';
+    import FilePicker from '$lib/components/filePicker.svelte';
+    import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import type { Models } from '@appwrite.io/console';
+    import { Label } from '.';
+
+    export let label: string = null;
+    export let value: Models.File = null;
+    export let disabled = false;
+
+    export let optionalText: string = null;
+    export let tooltip: string = null;
+    export let isPopoverDefined = true;
+
+    let show = false;
+
+    function onSelect(file: Models.File) {
+        value = file;
+    }
+</script>
+
+<div>
+    {#if label}
+        <Label {optionalText} {tooltip} hide={!label}>
+            {label}{#if $$slots.popover && isPopoverDefined}
+                <Drop bind:show display="inline-block">
+                    <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+                    &nbsp;<button
+                        type="button"
+                        on:click={() => (show = !show)}
+                        class="tooltip"
+                        aria-label="input tooltip">
+                        <span
+                            class="icon-info"
+                            aria-hidden="true"
+                            style="font-size: var(--icon-size-small)" />
+                    </button>
+                    <svelte:fragment slot="list">
+                        <div
+                            class="dropped card u-max-width-250"
+                            style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
+                            <slot name="popover" />
+                        </div>
+                    </svelte:fragment>
+                </Drop>
+            {/if}
+        </Label>
+    {/if}
+    <div
+        role="region"
+        class="box is-no-shadow u-padding-24 is-border-dashed"
+        style:--box-border-radius="var(--border-radius-xsmall)">
+        <div class="upload-file-box">
+            <div class="upload-file-box-image">
+                <span class="icon-upload" aria-hidden="true" />
+            </div>
+            <div class="u-min-width-0 u-text-center">
+                <h5 class="upload-file-box-title heading-level-7 u-inline">
+                    <span class="is-only-desktop">Select a file to upload</span>
+                    <span class="is-not-desktop">Select a file to upload</span>
+                </h5>
+            </div>
+            <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
+                Max file size: 1MB
+                <button
+                    class="button is-secondary is-full-width-mobile"
+                    type="button"
+                    {disabled}
+                    on:click={() => (show = true)}>
+                    <span class="text">Browse</span>
+                </button>
+            </div>
+
+            {#if value}
+                {@const fileSize = humanFileSize(value.sizeOriginal)}
+                <ul class="upload-file-box-list u-min-width-0">
+                    <li class="u-flex u-cross-center u-min-width-0">
+                        <span class="icon-document" aria-hidden="true" />
+                        <span class="upload-file-box-name u-min-width-0">
+                            <Trim alternativeTrim>{value.name}</Trim>
+                        </span>
+                        <span
+                            class="upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16">
+                            {fileSize.value + fileSize.unit}
+                        </span>
+                        <button
+                            on:click={() => (value = null)}
+                            type="button"
+                            class="button is-text is-only-icon u-margin-inline-start-auto"
+                            aria-label="remove file"
+                            style="--button-size:1.5rem;">
+                            <span class="icon-x" aria-hidden="true" />
+                        </button>
+                    </li>
+                </ul>
+            {/if}
+        </div>
+    </div>
+</div>
+
+{#if show}
+    <FilePicker selectedFile={value?.$id} selectedBucket={value?.bucketId} bind:show {onSelect} />
+{/if}
diff --git a/src/lib/elements/forms/inputSearch.svelte b/src/lib/elements/forms/inputSearch.svelte
index b48debce7..b4edb489a 100644
--- a/src/lib/elements/forms/inputSearch.svelte
+++ b/src/lib/elements/forms/inputSearch.svelte
@@ -9,6 +9,7 @@
     export let disabled = false;
     export let autofocus = false;
     export let isWithEndButton = true;
+    export let style: string = '';
 
     const dispatch = createEventDispatcher();
     let element: HTMLInputElement;
@@ -53,6 +54,7 @@
         {placeholder}
         {disabled}
         {required}
+        {style}
         type="search"
         class="input-text"
         bind:this={element}
diff --git a/src/lib/elements/table/table.svelte b/src/lib/elements/table/table.svelte
index 81df3e41a..503235d98 100644
--- a/src/lib/elements/table/table.svelte
+++ b/src/lib/elements/table/table.svelte
@@ -3,12 +3,14 @@
     export let noStyles = false;
     export let style = '';
     export let transparent = false;
+    export let dense = false;
 </script>
 
 <div
     class="table is-selected-columns-mobile"
     class:u-margin-block-start-32={!noMargin}
     class:is-remove-outer-styles={noStyles}
+    class:is-table-row-medium-size={dense}
     {style}
     style:--p-table-bg-color={transparent ? 'var(--transparent)' : ''}
     role="table"
diff --git a/src/lib/elements/table/tableScroll.svelte b/src/lib/elements/table/tableScroll.svelte
index b586b58f5..5a773cd85 100644
--- a/src/lib/elements/table/tableScroll.svelte
+++ b/src/lib/elements/table/tableScroll.svelte
@@ -5,6 +5,7 @@
     export let noMargin = false;
     export let style = '';
     export let transparent = false;
+    export let dense = false;
     let isOverflowing = false;
 
     const hasOverflow: Action<HTMLDivElement, unknown> = (node) => {
@@ -45,6 +46,7 @@
         <table
             class="table"
             class:is-sticky-scroll={isSticky && isOverflowing}
+            class:is-table-row-medium-size={dense}
             {style}
             style:--p-table-bg-color={transparent ? 'var(--transparent)' : ''}>
             <slot />
diff --git a/src/routes/console/project-[project]/messaging/+layout.svelte b/src/routes/console/project-[project]/messaging/+layout.svelte
index b379323a0..3890483eb 100644
--- a/src/routes/console/project-[project]/messaging/+layout.svelte
+++ b/src/routes/console/project-[project]/messaging/+layout.svelte
@@ -13,6 +13,7 @@
     import { topicsSearcher } from '$lib/commandCenter/searchers/topics';
     import { project } from '../store';
 
+    // TODO: finalize the commands
     $: $registerCommands([
         {
             label: 'Create message',
diff --git a/src/routes/console/project-[project]/messaging/create.svelte b/src/routes/console/project-[project]/messaging/create.svelte
index e1f5d15bf..2fc108a12 100644
--- a/src/routes/console/project-[project]/messaging/create.svelte
+++ b/src/routes/console/project-[project]/messaging/create.svelte
@@ -49,6 +49,8 @@
                     break;
                 case MessagingProviderType.Push:
                     {
+                        const file = $messageParams[MessagingProviderType.Push].file;
+                        const fileCompoundId = `${file.bucketId}:${file.bucketId}`;
                         const customData: Record<string, string> = {};
                         const { data } = $messageParams[MessagingProviderType.Push];
                         if (data && data.length > 0) {
@@ -67,7 +69,7 @@
                             $messageParams[$providerType].targets,
                             customData,
                             undefined,
-                            undefined,
+                            fileCompoundId,
                             undefined,
                             undefined,
                             undefined,
diff --git a/src/routes/console/project-[project]/messaging/message-[message]/pushMessage.svelte b/src/routes/console/project-[project]/messaging/message-[message]/pushMessage.svelte
index d35aa1131..843947b85 100644
--- a/src/routes/console/project-[project]/messaging/message-[message]/pushMessage.svelte
+++ b/src/routes/console/project-[project]/messaging/message-[message]/pushMessage.svelte
@@ -7,6 +7,7 @@
         FormItemPart,
         FormList,
         Helper,
+        InputFilePicker,
         InputText,
         InputTextarea,
         Label
@@ -21,18 +22,26 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { validateData } from '../wizard/pushFormList.svelte';
 
-    export let message: Models.Message & { data: Record<string, string> };
+    /* eslint  @typescript-eslint/no-explicit-any: 'off' */
+    export let message: Models.Message & { data: Record<string, any> };
 
     let title = '';
     let body = '';
+    let file: Models.File = null;
     let originalCustomData: [string, string][] = [['', '']];
     let customData: [string, string][] = [['', '']];
     let dataError = '';
     let disabled = true;
 
-    onMount(() => {
+    onMount(async () => {
         title = message.data.title;
         body = message.data.body;
+        if (message.data?.image) {
+            file = await sdk.forProject.storage.getFile(
+                message.data.image?.bucketId,
+                message.data.image?.fileId
+            );
+        }
 
         const dataEntries: [string, string][] = [];
         Object.entries(message.data['data'] ?? {}).forEach(([key, value]) => {
@@ -44,6 +53,7 @@
 
     async function update() {
         try {
+            const fileCompoundId = file ? `${file.bucketId}:${file.$id}` : undefined;
             const data = customData.reduce((acc, [key, value]) => {
                 if (key) {
                     acc[key] = value;
@@ -57,7 +67,9 @@
                 undefined,
                 title,
                 body,
-                data
+                data,
+                undefined,
+                fileCompoundId
             );
             originalCustomData = structuredClone(customData);
             await invalidate(Dependencies.MESSAGING_MESSAGE);
@@ -79,6 +91,8 @@
     $: disabled =
         title === message.data.title &&
         body === message.data.body &&
+        file?.$id === message.data.image?.fileId &&
+        file?.bucketId === message.data.image?.bucketId &&
         originalCustomData.length === customData.length &&
         originalCustomData.every(
             (ocd, i) =>
@@ -99,13 +113,20 @@
                 <InputText
                     id="title"
                     label="Title"
-                    disabled={message.status != 'draft'}
-                    bind:value={title}></InputText>
+                    disabled={message.status !== 'draft'}
+                    bind:value={title} />
                 <InputTextarea
                     id="message"
                     label="Message"
-                    disabled={message.status != 'draft'}
-                    bind:value={body}></InputTextarea>
+                    disabled={message.status !== 'draft'}
+                    bind:value={body} />
+                <FormItem>
+                    <InputFilePicker
+                        disabled={message.status !== 'draft'}
+                        bind:value={file}
+                        label="Media"
+                        optionalText="(Optional)" />
+                </FormItem>
                 <form class="form">
                     <FormItem>
                         <Label
@@ -125,7 +146,6 @@
                                         placeholder="Enter key"
                                         label="Key"
                                         showLabel={false} />
-
                                     <InputText
                                         id={`${rowIndex}-value`}
                                         isMultiple
diff --git a/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte
index 7858daa6a..dc8a5b02a 100644
--- a/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte
+++ b/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte
@@ -45,6 +45,7 @@
     import { sdk } from '$lib/stores/sdk';
     import PushPhone from '../pushPhone.svelte';
     import { onMount } from 'svelte';
+    import InputFilePicker from '$lib/elements/forms/inputFilePicker.svelte';
 
     let showCustomId = false;
     let showTest = false;
@@ -150,11 +151,19 @@
             </Modal>
         </div>
         <form class="form">
-            <FormItem>
-                <Label
-                    tooltip="A key/value payload of additional metadata that's hidden from users. Use this to include information to support logic such as redirection and routing."
-                    >Custom data <span class="u-color-text-gray">(Optional)</span></Label>
-            </FormItem>
+            <FormList>
+                <FormItem>
+                    <InputFilePicker
+                        bind:value={$messageParams[MessagingProviderType.Push].file}
+                        label="Media" />
+                </FormItem>
+                <FormItem>
+                    <Label
+                        tooltip="A key/value payload of additional metadata that's hidden from users. Use this to include information to support logic such as redirection and routing."
+                        >Custom data <span class="u-color-text-gray">(Optional)</span></Label>
+                </FormItem>
+            </FormList>
+
             <div class=" u-grid u-gap-8">
                 <ul class="form-list" style="--p-form-list-gap: 1rem">
                     {#each customData || [] as _, rowIndex}
diff --git a/src/routes/console/project-[project]/messaging/wizard/store.ts b/src/routes/console/project-[project]/messaging/wizard/store.ts
index 2ffe62c73..db3bc3e41 100644
--- a/src/routes/console/project-[project]/messaging/wizard/store.ts
+++ b/src/routes/console/project-[project]/messaging/wizard/store.ts
@@ -23,6 +23,7 @@ export type SMSMessageParams = MessageParams & {
 export type PushMessageParams = MessageParams & {
     title: string;
     body: string;
+    file: Models.File;
     data: [string, string][];
     action?: string;
     icon?: string;