diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte
index 3abaa9d60..99ef0dd92 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_createAttribute.svelte
@@ -1,32 +1,19 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    // import { Pill } from '$lib/elements';
     import { option, options } from './attributes/store';
     import { Button, InputText, Form, FormList, InputSelect } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
+    import { collection } from './store';
+    import type { Attributes } from './store';
 
     export let showCreate = false;
 
-    const dispatch = createEventDispatcher();
-
-    let name = '';
     let id: string = null;
-    let key: string = null;
     let selectedOption = '';
+    let submitted = false;
 
-    const create = async () => {
-        try {
-            console.log('test');
-            showCreate = false;
-            dispatch('created');
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
+    const created = async (event: CustomEvent<Attributes>) => {
+        collection.addAttribute(event.detail);
+        showCreate = false;
     };
 
     $: if (selectedOption) {
@@ -34,15 +21,15 @@
     }
 </script>
 
-<Form on:submit={create}>
+<Form on:submit={() => (submitted = true)}>
     <Modal size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Attribute</svelte:fragment>
         <FormList>
             <InputText
-                id="key"
-                label="Attribute key"
-                placeholder="Enter key"
-                bind:value={key}
+                id="ID"
+                label="Attribute ID"
+                placeholder="Enter ID"
+                bind:value={id}
                 autofocus
                 required />
 
@@ -63,7 +50,9 @@
             {#if selectedOption}
                 <svelte:component
                     this={$option.component}
-                    {key}
+                    {id}
+                    bind:submitted
+                    on:created={created}
                     on:close={() => ($option = null)} />
             {/if}
         </FormList>
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_delete.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_delete.svelte
index a016b1fe0..0a10d193e 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_delete.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_delete.svelte
@@ -15,7 +15,7 @@
             await sdkForProject.databases.deleteCollection($collection.$id);
             showDelete = false;
             await goto(
-                `${base}/console/${$page.params.project}/databases/${$page.params.database}`
+                `${base}/console/${$page.params.project}/databases/database/${$page.params.database}`
             );
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte
new file mode 100644
index 000000000..eb730c971
--- /dev/null
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_deleteAttribute.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { collection } from './store';
+    import type { Attributes } from './store';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export let showDelete = false;
+    export let selectedAttribute: Attributes;
+
+    const deleteElement = async () => {
+        try {
+            await sdkForProject.databases.deleteAttribute($collection.$id, selectedAttribute.key);
+            collection.removeAttribute(selectedAttribute);
+            showDelete = false;
+            await goto(
+                `${base}/console/${$page.params.project}/databases/database/${$page.params.database}/collection/${$page.params.collection}/attributes`
+            );
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={deleteElement}>
+    <Modal warning={true} bind:show={showDelete}>
+        <svelte:fragment slot="header">Delete Attribute</svelte:fragment>
+
+        <p>
+            Are you sure you want to delete <b>'{selectedAttribute.key}' from {$collection.name}</b
+            >?
+        </p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
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
new file mode 100644
index 000000000..71017e661
--- /dev/null
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/_overview.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { option, options } from './attributes/store';
+    import { Button, InputText, FormList } from '$lib/elements/forms';
+    import type { Attributes } from './store';
+
+    export let showOverview = false;
+    export let selectedAttribute: Attributes;
+
+    $: if (selectedAttribute) {
+        $option = options.find(
+            (option) => option.name.toLocaleLowerCase() === selectedAttribute.type
+        );
+    }
+</script>
+
+{#if selectedAttribute}
+    <Modal size="big" bind:show={showOverview}>
+        <svelte:fragment slot="header">Overview</svelte:fragment>
+        <FormList>
+            <InputText
+                id="ID"
+                label="Attribute ID"
+                placeholder="Enter ID"
+                bind:value={selectedAttribute.key}
+                disabled />
+
+            {#if selectedAttribute}
+                <svelte:component this={$option.component} disabled={true} />
+            {/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.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
index 2cd110746..97ea48cc6 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes.svelte
@@ -10,25 +10,22 @@
     import { Button } from '$lib/elements/forms';
     import { DropList, DropListItem, Empty, Pagination } from '$lib/components';
     import { collection } from './store';
-    // import type { Attributes } from './store';
+    import type { Attributes } from './store';
     import { Container } from '$lib/layout';
     import { Pill } from '$lib/elements';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import Create from './_createAttribute.svelte';
-    import type { Models } from '@aw-labs/appwrite-console';
+    import Delete from './_deleteAttribute.svelte';
+    import Overview from './_overview.svelte';
 
     let offset = 0;
     const limit = 5;
     let showDropdown = [];
-    // let selectedAttribute: Attributes = null;
-    // let showDelete = false;
+    let selectedAttribute: Attributes = null;
     let showCreate = false;
-
-    const handleCreate = async (event: CustomEvent<Models.Collection>) => {
-        showCreate = false;
-        console.log(event);
-    };
+    let showDelete = false;
+    let showOverview = false;
 
     onMount(async () => {
         await collection.load($page.params.collection);
@@ -48,7 +45,7 @@
     {#if $collection?.attributes.length}
         <Table>
             <TableHeader>
-                <TableCellHead>Key</TableCellHead>
+                <TableCellHead>ID</TableCellHead>
                 <TableCellHead>Type</TableCellHead>
                 <TableCellHead>Default Value</TableCellHead>
                 <TableCellHead width={30} />
@@ -66,6 +63,8 @@
                                     )}>
                                     {attribute.status}
                                 </Pill>
+                            {:else if attribute.required}
+                                <Pill>Required</Pill>
                             {/if}
                         </TableCellText>
                         <TableCellText title="Type">{attribute.type}</TableCellText>
@@ -87,14 +86,20 @@
                                     <span class="icon-dots-horizontal" aria-hidden="true" />
                                 </button>
                                 <svelte:fragment slot="list">
-                                    <DropListItem icon="eye">Overview</DropListItem>
+                                    <DropListItem
+                                        icon="eye"
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            selectedAttribute = attribute;
+                                            showOverview = true;
+                                        }}>Overview</DropListItem>
                                     <DropListItem icon="plus">Create Index</DropListItem>
                                     <DropListItem
                                         icon="trash"
                                         on:click={(e) => {
                                             e.preventDefault();
-                                            // selectedAttribute = attribute;
-                                            // showDelete = true;
+                                            selectedAttribute = attribute;
+                                            showDelete = true;
                                         }}>Delete</DropListItem>
                                 </svelte:fragment>
                             </DropList>
@@ -126,4 +131,8 @@
     {/if}
 </Container>
 
-<Create bind:showCreate on:created={handleCreate} />
+<Create bind:showCreate />
+{#if selectedAttribute}
+    <Delete bind:showDelete {selectedAttribute} />
+    <Overview bind:showOverview {selectedAttribute} />
+{/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 a71e81801..62648cc83 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
@@ -1,28 +1,31 @@
 <script lang="ts">
     import { InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    export const dispatch = createEventDispatcher();
+    export let submitted = false;
+    export let id: string;
+    export let disabled = false;
+
+    const dispatch = createEventDispatcher();
 
-    let key: string;
     let def: boolean,
         required = false,
         array = false;
 
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createBooleanAttribute(
+            const attribute = await sdkForProject.databases.createBooleanAttribute(
                 $collection.$id,
-                key,
+                id,
                 required,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -30,8 +33,12 @@
             });
         }
     };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
-<InputSwitch id="required" label="Required" required bind:value={required} />
-<InputSwitch id="array" label="Array" bind:value={array} />
-<InputSwitch id="default" label="Default" bind:value={def} />
+<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} />
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 3baffe100..401bec14e 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
@@ -5,22 +5,24 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    export let key: string;
+    export let id: string;
+    export let submitted = false;
     let def: string,
         required = false,
         array = false;
 
     const dispatch = createEventDispatcher();
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createEmailAttribute(
+            const attribute = await sdkForProject.databases.createEmailAttribute(
                 $collection.$id,
-                key,
+                id,
                 required,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -28,6 +30,10 @@
             });
         }
     };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
 <InputSwitch id="required" label="Required" bind:value={required} />
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 a5430498e..a684bf63c 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
@@ -5,7 +5,8 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    export let key: string;
+    export let id: string;
+    export let submitted = false;
     let def = '',
         elements: string[],
         required = false,
@@ -13,16 +14,17 @@
 
     const dispatch = createEventDispatcher();
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createEnumAttribute(
+            const attribute = await sdkForProject.databases.createEnumAttribute(
                 $collection.$id,
-                key,
+                id,
                 elements,
                 required,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -36,6 +38,10 @@
             value: e,
             label: e
         })) ?? [];
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
 <InputTags id="elements" label="Elements" bind:tags={elements} placeholder="Add elements here" />
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 362dd60bd..b25a1eedb 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
@@ -7,7 +7,8 @@
 
     const dispatch = createEventDispatcher();
 
-    export let key: string;
+    export let id: string;
+    export let submitted = false;
     let min: number,
         max: number,
         def: number,
@@ -15,17 +16,18 @@
         array = false;
 
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createFloatAttribute(
+            const attribute = await sdkForProject.databases.createFloatAttribute(
                 $collection.$id,
-                key,
+                id,
                 required,
                 min,
                 max,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -33,6 +35,10 @@
             });
         }
     };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
 <InputNumber id="min" label="Min" bind:value={min} />
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 8a3dfea4b..7ffc7bb29 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
@@ -7,7 +7,8 @@
 
     const dispatch = createEventDispatcher();
 
-    export let key: string;
+    export let id: string;
+    export let submitted = false;
     let min: number,
         max: number,
         def: number,
@@ -15,17 +16,18 @@
         array = false;
 
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createIntegerAttribute(
+            const attribute = await sdkForProject.databases.createIntegerAttribute(
                 $collection.$id,
-                key,
+                id,
                 required,
                 min,
                 max,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -33,6 +35,10 @@
             });
         }
     };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
 <InputNumber id="min" label="Min" bind:value={min} />
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 4d3581190..766dc775e 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
@@ -5,22 +5,24 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    export let key: string;
+    export let id: string;
+    export let submitted = false;
     let def: string,
         required = false,
         array = false;
 
     const dispatch = createEventDispatcher();
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createIpAttribute(
+            const attribute = await sdkForProject.databases.createIpAttribute(
                 $collection.$id,
-                key,
+                id,
                 required,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -28,6 +30,10 @@
             });
         }
     };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
 <InputSwitch id="required" label="Required" bind:value={required} />
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 f153db47d..c844e172a 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
@@ -5,7 +5,8 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    export let key: string;
+    export let id: string;
+    export let submitted = false;
     let def: string,
         size = 255,
         required = false,
@@ -13,16 +14,17 @@
 
     const dispatch = createEventDispatcher();
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createStringAttribute(
+            const attribute = await sdkForProject.databases.createStringAttribute(
                 $collection.$id,
-                key,
+                id,
                 size,
                 required,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -30,6 +32,10 @@
             });
         }
     };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
 <InputNumber id="size" label="Size" bind:value={size} required />
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 601d935e0..8a90b7060 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
@@ -5,22 +5,24 @@
     import { createEventDispatcher } from 'svelte';
     import { collection } from '../store';
 
-    export let key: string;
+    export let id: string;
+    export let submitted = false;
     let def: string,
         required = false,
         array = false;
 
     const dispatch = createEventDispatcher();
     const submit = async () => {
+        submitted = false;
         try {
-            await sdkForProject.databases.createUrlAttribute(
+            const attribute = await sdkForProject.databases.createUrlAttribute(
                 $collection.$id,
-                key,
+                id,
                 required,
                 def ? def : undefined,
                 array
             );
-            dispatch('close');
+            dispatch('created', attribute);
         } catch (error) {
             addNotification({
                 type: 'error',
@@ -28,6 +30,10 @@
             });
         }
     };
+
+    $: if (submitted) {
+        submit();
+    }
 </script>
 
 <InputSwitch id="required" label="Required" bind:value={required} />