diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
index 9983395d0..ef05e8e31 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { Steps, Alert } from '$lib/components';
-    import { Form, Button, InputTags } from '$lib/elements/forms';
+    import { Steps, Alert, InnerModal } from '$lib/components';
+    import { Form, Button, InputTags, InputText } from '$lib/elements/forms';
+    import { Pill } from '$lib/elements';
     import { attributeList } from './store';
     import { sdkForProject } from '$lib/stores/sdk';
     import { page } from '$app/stores';
@@ -14,33 +15,59 @@
     export let showCreate = false;
 
     let newDocument = {};
-    let steps = [{ text: 'Create data' }, { text: 'Set permissions' }];
-    let currentStep = 0;
     let read: string[];
     let write: string[];
+    let id: string;
+    let showCustomId = false;
+    let steps = [{ text: 'Create data' }, { text: 'Set permissions' }];
+    let currentStep = 0;
 
     onMount(async () => {
         await attributeList.load($page.params.collection);
-        $attributeList.attributes.forEach((attr) => (newDocument[attr.key] = [null]));
+        initializeDocument();
     });
 
+    const initializeDocument = () => {
+        $attributeList.attributes.forEach((attr) => {
+            if (attr.array) {
+                newDocument[attr.key] = [null];
+            } else {
+                newDocument[attr.key] = null;
+            }
+        });
+    };
+
     const create = async () => {
-        try {
-            // await sdkForProject.databases.createDocument(
-            //    $page.params.collection,
-            //     'unique()',
-            //     newDocument,
-            //     read,
-            //     write
-            // );
-            console.log('test');
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
+        if (currentStep < steps.length - 1) {
+            currentStep++;
+        } else {
+            try {
+                await sdkForProject.databases.createDocument(
+                    $page.params.collection,
+                    id ?? 'unique()',
+                    newDocument,
+                    read,
+                    write
+                );
+                addNotification({
+                    message: 'Document has been created',
+                    type: 'success'
+                });
+                showCreate = false;
+            } catch (error) {
+                addNotification({
+                    message: error.message,
+                    type: 'error'
+                });
+            }
         }
     };
+
+    $: if (!showCreate) {
+        initializeDocument();
+        currentStep = 0;
+        read = write = [];
+    }
 </script>
 
 <Wizard title="Create document" bind:show={showCreate}>
@@ -53,16 +80,17 @@
                 <h1 class="heading-level-6">Create document data</h1>
                 <p>Provide document data based on attributes you created earlier.</p>
             </header>
-            {#each $attributeList?.attributes?.filter((a) => a.status === 'available') as attribute}
-                {#if attribute.array}
-                    <ul class="form-list">
+            <ul class="form-list">
+                {#each $attributeList?.attributes?.filter((a) => a.status === 'available') as attribute}
+                    {@const label = attribute.required ? `${attribute.key}*` : attribute.key}
+                    {#if attribute.array}
                         {#each newDocument[attribute.key] as _v, index}
                             <li class="form-item is-multiple">
                                 <div class="form-item-part u-stretch">
                                     <Attribute
                                         {attribute}
                                         id={`${attribute.key}-${index}`}
-                                        label={index === 0 ? attribute.key : ''}
+                                        label={index === 0 ? label : ''}
                                         bind:value={newDocument[attribute.key][index]} />
                                 </div>
                                 <div class="form-item-part u-cross-child-end">
@@ -83,7 +111,7 @@
                                     <Attribute
                                         {attribute}
                                         id={`${attribute.key}-0`}
-                                        label={attribute.key}
+                                        {label}
                                         bind:value={newDocument[attribute.key][0]} />
                                 </div>
                                 <div class="form-item-part u-cross-child-end">
@@ -93,33 +121,66 @@
                                 </div>
                             </li>
                         {/each}
-                    </ul>
 
-                    <Button
-                        text
-                        on:click={() => {
-                            if (
-                                newDocument[attribute.key][
-                                    newDocument[attribute.key].length - 1
-                                ] !== null
-                            ) {
-                                newDocument[attribute.key].push(null);
-                                newDocument = newDocument;
-                            }
-                        }}>
-                        <span class="icon-plus" aria-hidden="true" />
-                        <span class="text"> Add Attribute</span>
-                    </Button>
+                        <Button
+                            text
+                            disabled={newDocument[attribute.key][
+                                newDocument[attribute.key].length - 1
+                            ] === null}
+                            on:click={() => {
+                                {
+                                    newDocument[attribute.key].push(null);
+                                    newDocument = newDocument;
+                                }
+                            }}>
+                            <span class="icon-plus" aria-hidden="true" />
+                            <span class="text"> Add attribute</span>
+                        </Button>
+                    {:else}
+                        <ul class="form-list">
+                            <Attribute
+                                {attribute}
+                                id={attribute.key}
+                                {label}
+                                bind:value={newDocument[attribute.key]} />
+                        </ul>
+                    {/if}
+                {/each}
+
+                {#if !showCustomId}
+                    <div>
+                        <Pill button on:click={() => (showCustomId = !showCustomId)}
+                            ><span class="icon-pencil" aria-hidden="true" /><span class="text">
+                                Document ID
+                            </span></Pill>
+                    </div>
                 {:else}
-                    <ul class="form-list">
-                        <Attribute
-                            {attribute}
-                            id={attribute.key}
-                            label={attribute.key}
-                            bind:value={newDocument[attribute.key]} />
-                    </ul>
+                    <InnerModal bind:show={showCustomId}>
+                        <svelte:fragment slot="title">User ID</svelte:fragment>
+                        Enter a custom document ID. Leave blank for a randomly generated one.
+                        <svelte:fragment slot="content">
+                            <div class="form">
+                                <InputText
+                                    id="id"
+                                    label="Custom ID"
+                                    showLabel={false}
+                                    placeholder="Enter ID"
+                                    autofocus={true}
+                                    bind:value={id} />
+
+                                <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
+                                    <span
+                                        class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
+                                        aria-hidden="true" />
+                                    <span class="text u-line-height-1-5"
+                                        >Allowed characters: alphanumeric, hyphen, non-leading
+                                        underscore, period</span>
+                                </div>
+                            </div>
+                        </svelte:fragment>
+                    </InnerModal>
                 {/if}
-            {/each}
+            </ul>
         {:else if currentStep === 1}
             <header class="form-header">
                 <h1 class="heading-level-6">Set Permissions</h1>
@@ -156,13 +217,13 @@
             <div class="u-flex u-main-end u-gap-12">
                 {#if currentStep === 0}
                     <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-                    <Button on:click={() => currentStep++}>Next</Button>
+                    <Button submit>Next</Button>
                 {:else if currentStep === steps.length - 1}
                     <Button secondary on:click={() => currentStep--}>Back</Button>
                     <Button submit>Create</Button>
                 {:else}
                     <Button secondary on:click={() => currentStep--}>Back</Button>
-                    <Button on:click={() => currentStep++}>Next</Button>
+                    <Button submit>Next</Button>
                 {/if}
             </div>
         </div>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
index 8c497ed46..8bcc87d21 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte
@@ -95,13 +95,12 @@
 
                     <Button
                         text
+                        disabled={$doc[attribute.key][$doc[attribute.key].length - 1] === null}
                         on:click={() => {
-                            if ($doc[attribute.key][$doc[attribute.key].length - 1] !== null) {
-                                doc.addAttribute(attribute.key);
-                            }
+                            doc.addAttribute(attribute.key);
                         }}>
                         <span class="icon-plus" aria-hidden="true" />
-                        <span class="text"> Add Attribute</span>
+                        <span class="text"> Add attribute</span>
                     </Button>
                 {:else}
                     <ul class="form-list">