diff --git a/src/lib/components/importDocumentsBox.svelte b/src/lib/components/importDocumentsBox.svelte
new file mode 100644
index 000000000..6dcb15971
--- /dev/null
+++ b/src/lib/components/importDocumentsBox.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+    import { sdk } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { isCloud, isSelfHosted } from '$lib/system';
+    import { organization } from '$lib/stores/organization';
+    import { BillingPlan } from '$lib/constants';
+    import { getProjectId } from '$lib/helpers/project';
+
+    let importDocuments = [{}];
+    $: showImportDocumentsBox = importDocuments.length !== 0;
+
+    function graphSize(status: string): number {
+        switch (status) {
+            case 'pending':
+                return 10;
+            case 'processing':
+                return 30;
+            case 'uploading':
+                return 60;
+            case 'completed':
+            case 'failed':
+                return 100;
+            default:
+                return 0;
+        }
+    }
+
+    function text(status: string) {
+        if (status === 'completed') {
+            return `Document import complete`;
+        } else if (status === 'failed') {
+            return `Document import failed`;
+        } else {
+            return 'Preparing document import...';
+        }
+    }
+
+    // todo: implement
+    function handleClose() {}
+
+    onMount(() => {
+        // fast path: don't subscribe if org is on a free plan or is self-hosted.
+        // todo: @itznotabug, check on what plans and instances is this allowed!
+        if (isSelfHosted || (isCloud && $organization.billingPlan === BillingPlan.FREE)) return;
+
+        return sdk.forConsole.client.subscribe('console', (response) => {
+            if (!response.channels.includes(`projects.${getProjectId()}`)) return;
+
+            // todo: @itznotabug, check on what the realtime response looks like!
+        });
+    });
+</script>
+
+{#if showImportDocumentsBox}
+    <div class="box-holder u-flex u-flex-vertical u-gap-16" style="align-items: end">
+        <section class="upload-box">
+            <header class="upload-box-header">
+                <h4 class="upload-box-title">
+                    \
+                    <!-- // todo: check copy -->
+                    <span class="text">Documents import</span>
+                </h4>
+                <!-- // todo: should be a single toggle -->
+                <button
+                    class="upload-box-button"
+                    class:is-open={true}
+                    aria-label="toggle upload box"
+                    on:click={() => {}}>
+                    <span class="icon-cheveron-up" aria-hidden="true" />
+                </button>
+                <button
+                    class="upload-box-button"
+                    aria-label="close backup restore box"
+                    on:click={() => handleClose()}>
+                    <span class="icon-x" aria-hidden="true" />
+                </button>
+            </header>
+
+            <div class="upload-box-content" class:is-open={true}>
+                <ul class="upload-box-list">
+                    {#each [importDocuments.values()] as item (item.$id)}
+                        <li class="upload-box-item">
+                            <section class="progress-bar u-width-full-line">
+                                <div
+                                    class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
+                                    <span class="body-text-2"> </span>
+
+                                    <span class="backup-name"> </span>
+                                </div>
+                                <div
+                                    class="progress-bar-container"
+                                    class:is-danger={item.status === 'failed'}
+                                    style="--graph-size:{graphSize(item.status)}%" />
+                            </section>
+                        </li>
+                    {/each}
+                </ul>
+            </div>
+        </section>
+    </div>
+{/if}
+
+<style>
+    .upload-box-title {
+        font-size: 11px;
+    }
+
+    .upload-box-content {
+        min-width: 400px;
+        max-width: 100vw;
+    }
+
+    .upload-box-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .backup-name {
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 130%;
+        font-style: normal;
+        letter-spacing: -0.12px;
+        color: var(--mid-neutrals-50, #818186);
+        font-family: var(--font-family-sansSerif, Inter);
+    }
+</style>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 5a7a96e4b..1327ea290 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Empty, EmptySearch, Heading, PaginationWithLimit } from '$lib/components';
+    import { Empty, EmptySearch, Heading, Modal, PaginationWithLimit } from '$lib/components';
     import { Filters, hasPageQueries, queries } from '$lib/components/filters';
     import ViewSelector from '$lib/components/viewSelector.svelte';
-    import { Button } from '$lib/elements/forms';
+    import { Button, FormList, InputFile } from '$lib/elements/forms';
     import type { ColumnType } from '$lib/helpers/types';
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
@@ -23,6 +23,9 @@
     let showCreateDropdown = false;
     let selectedAttribute: Option['name'] = null;
 
+    let files: FileList;
+    let showImportDocuments = false;
+
     $: selected = preferences.getCustomCollectionColumns($page.params.collection);
     $: columns.set(
         $collection.attributes.map((attribute) => ({
@@ -73,7 +76,7 @@
                     hideView
                     allowNoColumns
                     showColsTextMobile />
-                <div class="is-not-mobile">
+                <div class="is-not-mobile u-flex u-gap-16">
                     <Button
                         disabled={!(hasAttributes && hasValidAttributes)}
                         on:click={openWizard}
@@ -81,6 +84,15 @@
                         <span class="icon-plus" aria-hidden="true" />
                         <span class="text">Create document</span>
                     </Button>
+
+                    <Button
+                        on:click={() => {
+                            showImportDocuments = true;
+                        }}
+                        event="create_document">
+                        <span class="icon-plus" aria-hidden="true" />
+                        <span class="text">Import documents</span>
+                    </Button>
                 </div>
             </div>
         </div>
@@ -163,6 +175,33 @@
 
 <CreateAttribute bind:showCreate={showCreateAttribute} bind:selectedOption={selectedAttribute} />
 
+<Modal
+    title="Import documents"
+    size="big"
+    bind:show={showImportDocuments}
+    onSubmit={() => {
+        showImportDocuments = false;
+        // todo: @itznotabug, import documents via csv files
+    }}
+    headerDivider={false}>
+    <p class="text">
+        <!-- // todo: @itznotabug, confirm copy -->
+        Upload a CSV file to import multiple documents at once. Any necessary attributes will be automatically
+        generated.
+    </p>
+    <FormList gap={16}>
+        <InputFile
+            label="CSV file (*.csv)"
+            allowedFileExtensions={['csv']}
+            bind:files
+            required={true} />
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (showImportDocuments = false)}>Close</Button>
+        <Button submit>Create</Button>
+    </svelte:fragment>
+</Modal>
+
 <style lang="scss">
     .heading-grid {
         display: grid;