diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 7843b7c91..f63098873 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -78,11 +78,13 @@
             <div class="modal-content">
                 <slot />
             </div>
-            <div class="modal-footer">
-                <div class="u-flex u-main-end u-gap-12">
-                    <slot name="footer" />
+            {#if $$slots.footer}
+                <div class="modal-footer">
+                    <div class="u-flex u-main-end u-gap-12">
+                        <slot name="footer" />
+                    </div>
                 </div>
-            </div>
+            {/if}
         </section>
     </div>
 {/if}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overview.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overview.svelte
index 71017e661..52039b669 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overview.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overview.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
     import { option, options } from './attributes/store';
-    import { Button, InputText, FormList } from '$lib/elements/forms';
+    import { InputText, FormList } from '$lib/elements/forms';
     import type { Attributes } from './store';
 
     export let showOverview = false;
@@ -26,12 +26,8 @@
                 disabled />
 
             {#if selectedAttribute}
-                <svelte:component this={$option.component} disabled={true} />
+                <svelte:component this={$option.component} overview={true} {selectedAttribute} />
             {/if}
         </FormList>
-        <svelte:fragment slot="footer">
-            <Button secondary on:click={() => (showOverview = false)}>Cancel</Button>
-            <Button submit>Create</Button>
-        </svelte:fragment>
     </Modal>
 {/if}
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
index 62648cc83..ad39ac810 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte
@@ -4,14 +4,16 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     export let submitted = false;
     export let id: string;
-    export let disabled = false;
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeBoolean;
 
     const dispatch = createEventDispatcher();
 
-    let def: boolean,
+    let xdefault: boolean,
         required = false,
         array = false;
 
@@ -22,7 +24,7 @@
                 $collection.$id,
                 id,
                 required,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -37,8 +39,12 @@
     $: if (submitted) {
         submit();
     }
+
+    $: if (overview) {
+        ({ required, array, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} {disabled} />
-<InputSwitch id="array" label="Array" bind:value={array} {disabled} />
-<InputSwitch id="default" label="Default" bind:value={def} {disabled} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
+<InputSwitch id="default" label="Default" bind:value={xdefault} disabled={overview} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
index 401bec14e..b3f769de6 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte
@@ -4,10 +4,14 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
     export let submitted = false;
-    let def: string,
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeEmail;
+
+    let xdefault: string,
         required = false,
         array = false;
 
@@ -19,7 +23,7 @@
                 $collection.$id,
                 id,
                 required,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -34,8 +38,12 @@
     $: if (submitted) {
         submit();
     }
+
+    $: if (overview) {
+        ({ required, array, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} />
-<InputSwitch id="required" label="Array" bind:value={array} />
-<InputText id="default" label="Default" bind:value={def} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
+<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
index a684bf63c..01a98db83 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte
@@ -4,10 +4,13 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
     export let submitted = false;
-    let def = '',
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeEnum;
+    let xdefault = '',
         elements: string[],
         required = false,
         array = false;
@@ -21,7 +24,7 @@
                 id,
                 elements,
                 required,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -42,9 +45,17 @@
     $: if (submitted) {
         submit();
     }
+    $: if (overview) {
+        ({ required, array, elements, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputTags id="elements" label="Elements" bind:tags={elements} placeholder="Add elements here" />
-<InputSelect id="default" label="Default" bind:options bind:value={def} />
-<InputSwitch id="required" label="Required" bind:value={required} />
-<InputSwitch id="required" label="Array" bind:value={array} />
+<InputTags
+    id="elements"
+    label="Elements"
+    bind:tags={elements}
+    placeholder="Add elements here"
+    readonly={overview} />
+<InputSelect id="default" label="Default" bind:options bind:value={xdefault} disabled={overview} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
index b25a1eedb..923b85835 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte
@@ -4,14 +4,17 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     const dispatch = createEventDispatcher();
 
     export let id: string;
     export let submitted = false;
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeFloat;
     let min: number,
         max: number,
-        def: number,
+        xdefault: number,
         required = false,
         array = false;
 
@@ -24,7 +27,7 @@
                 required,
                 min,
                 max,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -39,11 +42,15 @@
     $: if (submitted) {
         submit();
     }
+
+    $: if (overview) {
+        ({ required, array, min, max, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputNumber id="min" label="Min" bind:value={min} />
-<InputNumber id="max" label="Max" bind:value={max} />
+<InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
+<InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
 
-<InputSwitch id="required" label="Required" bind:value={required} />
-<InputSwitch id="array" label="Array" bind:value={array} />
-<InputNumber id="default" label="Default" bind:value={def} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
+<InputNumber id="default" label="Default" bind:value={xdefault} readonly={overview} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
index 7ffc7bb29..3b50c179e 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte
@@ -4,14 +4,17 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     const dispatch = createEventDispatcher();
 
-    export let id: string;
+    export let id: string = null;
     export let submitted = false;
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeInteger;
     let min: number,
         max: number,
-        def: number,
+        xdefault: number,
         required = false,
         array = false;
 
@@ -24,7 +27,7 @@
                 required,
                 min,
                 max,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -39,11 +42,16 @@
     $: if (submitted) {
         submit();
     }
+
+    $: if (overview) {
+        //TODO: fix xdefault
+        ({ required, array, min, max, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputNumber id="min" label="Min" bind:value={min} />
-<InputNumber id="max" label="Max" bind:value={max} />
+<InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
+<InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
 
-<InputSwitch id="required" label="Required" bind:value={required} />
-<InputSwitch id="array" label="Array" bind:value={array} />
-<InputNumber id="default" label="Default" bind:value={def} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
+<InputNumber id="default" label="Default" bind:value={xdefault} readonly={overview} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
index 766dc775e..2d91c36aa 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte
@@ -4,10 +4,13 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
     export let submitted = false;
-    let def: string,
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeIp;
+    let xdefault: string,
         required = false,
         array = false;
 
@@ -19,7 +22,7 @@
                 $collection.$id,
                 id,
                 required,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -34,8 +37,12 @@
     $: if (submitted) {
         submit();
     }
+
+    $: if (overview) {
+        ({ required, array, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} />
-<InputSwitch id="required" label="Array" bind:value={array} />
-<InputText id="default" label="Default" bind:value={def} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
+<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
index c844e172a..7249544f1 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte
@@ -4,10 +4,13 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
     export let submitted = false;
-    let def: string,
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeString;
+    let xdefault: string,
         size = 255,
         required = false,
         array = false;
@@ -21,7 +24,7 @@
                 id,
                 size,
                 required,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -36,9 +39,13 @@
     $: if (submitted) {
         submit();
     }
+
+    $: if (overview) {
+        ({ required, array, size, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputNumber id="size" label="Size" bind:value={size} required />
-<InputSwitch id="required" label="Required" bind:value={required} />
-<InputSwitch id="required" label="Array" bind:value={array} />
-<InputText id="default" label="Default" bind:value={def} />
+<InputNumber id="size" label="Size" bind:value={size} required readonly={overview} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
+<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
index 8a90b7060..5622d3036 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte
@@ -4,10 +4,13 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
+    import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
     export let submitted = false;
-    let def: string,
+    export let overview = false;
+    export let selectedAttribute: Models.AttributeUrl;
+    let xdefault: string,
         required = false,
         array = false;
 
@@ -19,7 +22,7 @@
                 $collection.$id,
                 id,
                 required,
-                def ? def : undefined,
+                xdefault ? xdefault : undefined,
                 array
             );
             dispatch('created', attribute);
@@ -34,8 +37,12 @@
     $: if (submitted) {
         submit();
     }
+
+    $: if (overview) {
+        ({ required, array, xdefault } = selectedAttribute);
+    }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} />
-<InputSwitch id="required" label="Array" bind:value={array} />
-<InputText id="default" label="Default" bind:value={def} />
+<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
+<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
+<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />