diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
index c913f4c06..a2ab21070 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
@@ -1,59 +1,43 @@
+<script context="module" lang="ts">
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export async function submitBoolean(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeBoolean>
+    ) {
+        await sdkForProject.databases.createBooleanAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.required,
+            data.default ? data.default : undefined,
+            data.array
+        );
+    }
+</script>
+
 <script lang="ts">
     import { InputChoice, 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 { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
 
-    export let submitted = false;
-    export let key: string;
-    export let overview = false;
-    export let selectedAttribute: Models.AttributeBoolean;
-
-    const databaseId = $page.params.database;
-
-    const dispatch = createEventDispatcher();
-
-    let xdefault: boolean | null,
-        required = false,
-        array = false;
-
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createBooleanAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                required,
-                xdefault ?? undefined,
-                array
-            );
-            dispatch('created', attribute);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
+    export let selectedAttribute: Models.AttributeBoolean = null;
+    export let data: Partial<Models.AttributeBoolean> = {
+        required: false,
+        array: false,
+        default: null
     };
 
-    $: if (submitted) {
-        submit();
+    $: if (selectedAttribute) {
+        data.required = selectedAttribute.required;
+        data.array = selectedAttribute.array;
+        data.default = selectedAttribute.default;
     }
 
-    $: if (overview) {
-        ({ required, array } = selectedAttribute);
-        xdefault = selectedAttribute.default;
+    $: if (data.required || data.array) {
+        data.default = null;
     }
-
-    $: if (required || array) {
-        xdefault = null;
-    }
-
-    //TODO: refactor to use context module instead of submitted
 </script>
 
 <InputSelect
@@ -65,9 +49,19 @@
         { label: 'True', value: true },
         { label: 'False', value: false }
     ]}
-    bind:value={xdefault}
-    disabled={overview || array || required} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
-    Indicate whether this attribute should act as an array</InputChoice>
+    bind:value={data.default}
+    disabled={!!selectedAttribute || data.array || data.required} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
index 50698fefd..bd79b6643 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
@@ -1,69 +1,54 @@
+<script context="module" lang="ts">
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export async function submitDatetime(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeDatetime>
+    ) {
+        await sdkForProject.databases.createDatetimeAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.required,
+            data.default ? data.default : undefined,
+            data.array
+        );
+    }
+</script>
+
 <script lang="ts">
     import { InputChoice, InputDateTime } 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 { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
 
-    export let key: string;
-    export let submitted = false;
-    export let overview = false;
-    export let selectedAttribute: Models.AttributeDatetime;
+    export let selectedAttribute: Models.AttributeDatetime = null;
+    export let data: Partial<Models.AttributeDatetime>;
 
-    const databaseId = $page.params.database;
-    const dispatch = createEventDispatcher();
-
-    let xdefault: string,
-        required = false,
-        array = false;
-
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createDatetimeAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                required,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    $: if (submitted) {
-        submit();
+    $: if (selectedAttribute) {
+        data.required = selectedAttribute.required;
+        data.array = selectedAttribute.array;
+        data.default = selectedAttribute.default;
     }
 
-    $: if (overview) {
-        ({ required, array } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-
-    $: if (required) {
-        xdefault = null;
+    $: if (data.required) {
+        data.default = null;
     }
 </script>
 
 <InputDateTime
     id="default"
     label="Default value"
-    bind:value={xdefault}
-    disabled={required}
-    readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
-    Indicate whether this attribute should act as an array</InputChoice>
+    bind:value={data.default}
+    disabled={data.required}
+    readonly={!!selectedAttribute} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice id="array" label="Array" bind:value={data.array} disabled={!!selectedAttribute}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
index 4c3392997..6e5d4d13e 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
@@ -1,70 +1,59 @@
-<script lang="ts">
-    import { InputChoice } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { collection } from '../store';
+<script context="module" lang="ts">
     import type { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
-    import InputEmail from '$lib/elements/forms/inputEmail.svelte';
 
-    export let key: string;
-    export let submitted = false;
-    export let overview = false;
-    export let selectedAttribute: Models.AttributeEmail;
+    import { sdkForProject } from '$lib/stores/sdk';
 
-    const databaseId = $page.params.database;
-    const dispatch = createEventDispatcher();
+    export async function submitEmail(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeEmail>
+    ) {
+        await sdkForProject.databases.createEmailAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.required,
+            data.default ? data.default : undefined,
+            data.array
+        );
+    }
+</script>
 
-    let xdefault: string,
-        required = false,
-        array = false;
+<script lang="ts">
+    import { InputChoice, InputEmail } from '$lib/elements/forms';
 
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createEmailAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                required,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
+    export let selectedAttribute: Models.AttributeEmail = null;
+    export let data: Partial<Models.AttributeEmail>;
 
-    $: if (submitted) {
-        submit();
+    $: if (selectedAttribute) {
+        data.required = selectedAttribute.required;
+        data.array = selectedAttribute.array;
+        data.default = selectedAttribute.default;
     }
 
-    $: if (overview) {
-        ({ required, array } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-
-    $: if (required || array) {
-        xdefault = null;
+    $: if (data.required || data.array) {
+        data.default = null;
     }
 </script>
 
 <InputEmail
     id="default"
     label="Default value"
-    bind:value={xdefault}
-    disabled={required}
-    readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
-    Indicate whether this attribute should act as an array</InputChoice>
+    bind:value={data.default}
+    disabled={data.required}
+    readonly={!!selectedAttribute} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
index 47624e2ce..52a45d972 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
@@ -1,81 +1,73 @@
+<script context="module" lang="ts">
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export async function submitEnum(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeEnum>
+    ) {
+        await sdkForProject.databases.createEnumAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.elements,
+            data.required,
+            data.default ? data.default : undefined,
+            data.array
+        );
+    }
+</script>
+
 <script lang="ts">
     import { InputChoice, InputSelect, InputTags } 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 { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
 
-    export let key: string;
-    export let submitted = false;
-    export let overview = false;
     export let selectedAttribute: Models.AttributeEnum;
-
-    const databaseId = $page.params.database;
-    const dispatch = createEventDispatcher();
-
-    let xdefault = '',
-        elements: string[],
-        required = false,
-        array = false;
-
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createEnumAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                elements,
-                required,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
+    export let data: Partial<Models.AttributeEnum>;
 
     $: options =
-        elements?.map((e) => ({
+        data.elements?.map((e) => ({
             value: e,
             label: e
         })) ?? [];
 
-    $: if (submitted) {
-        submit();
+    $: if (selectedAttribute) {
+        ({
+            required: data.required,
+            array: data.array,
+            elements: data.elements,
+            default: data.default
+        } = selectedAttribute);
     }
-    $: if (overview) {
-        ({ required, array, elements } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-    $: if (required || array) {
-        xdefault = null;
+    $: if (data.required || data.array) {
+        data.default = null;
     }
 </script>
 
 <InputTags
     id="elements"
     label="Elements"
-    bind:tags={elements}
+    bind:tags={data.elements}
     placeholder="Add elements here"
-    readonly={overview} />
+    readonly={!!selectedAttribute} />
 <InputSelect
     id="default"
     label="Default value"
     bind:options
-    bind:value={xdefault}
-    disabled={overview || required} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
-    Indicate whether this attribute should act as an array</InputChoice>
+    bind:value={data.default}
+    disabled={!!selectedAttribute || data.required} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
index b9a37d60d..3686eead7 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
@@ -1,79 +1,76 @@
-<script lang="ts">
-    import { InputNumber, InputChoice } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { collection } from '../store';
+<script context="module" lang="ts">
     import type { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
+    import { sdkForProject } from '$lib/stores/sdk';
 
-    export let key: string;
-    export let submitted = false;
-    export let overview = false;
-    export let selectedAttribute: Models.AttributeFloat;
-
-    const databaseId = $page.params.database;
-    const dispatch = createEventDispatcher();
-
-    let min: number,
-        max: number,
-        xdefault: number,
-        required = false,
-        array = false;
-
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createFloatAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                required,
-                min,
-                max,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    $: if (submitted) {
-        submit();
-    }
-
-    $: if (overview) {
-        ({ required, array, min, max } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-
-    $: if (required || array) {
-        xdefault = null;
+    export async function submitFloat(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeFloat>
+    ) {
+        await sdkForProject.databases.createFloatAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.required,
+            data.min,
+            data.max,
+            data.default ? data.default : undefined,
+            data.array
+        );
     }
 </script>
 
-<InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
-<InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
+<script lang="ts">
+    import { InputNumber, InputChoice } from '$lib/elements/forms';
+
+    export let selectedAttribute: Models.AttributeFloat;
+    export let data: Partial<Models.AttributeFloat> = {
+        required: false,
+        min: 0,
+        max: 0,
+        default: 0,
+        array: false
+    };
+
+    $: if (selectedAttribute) {
+        ({
+            required: data.required,
+            array: data.array,
+            min: data.min,
+            max: data.max
+        } = selectedAttribute);
+        data.default = selectedAttribute.default;
+    }
+
+    $: if (data.required || data.array) {
+        data.default = null;
+    }
+</script>
+
+<InputNumber id="min" label="Min" bind:value={data.min} readonly={!!selectedAttribute} />
+<InputNumber id="max" label="Max" bind:value={data.max} readonly={!!selectedAttribute} />
 
 <InputNumber
     id="default"
     label="Default value"
-    {min}
-    {max}
-    bind:value={xdefault}
-    disabled={required || array}
-    readonly={overview}
+    min={data.min}
+    max={data.max}
+    bind:value={data.default}
+    disabled={data.required || data.array}
+    readonly={!!selectedAttribute}
     step="any" />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
-    Indicate whether this attribute should act as an array</InputChoice>
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
index 14c52af02..4c8c75f3c 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
@@ -1,77 +1,74 @@
-<script lang="ts">
-    import { InputNumber, InputChoice } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
+<script context="module" lang="ts">
     import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { collection } from '../store';
     import type { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
 
-    export let key: string = null;
-    export let submitted = false;
-    export let overview = false;
-    export let selectedAttribute: Models.AttributeInteger;
-
-    const databaseId = $page.params.database;
-    const dispatch = createEventDispatcher();
-
-    let min: number,
-        max: number,
-        xdefault: number,
-        required = false,
-        array = false;
-
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createIntegerAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                required,
-                min,
-                max,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    $: if (submitted) {
-        submit();
-    }
-
-    $: if (overview) {
-        ({ required, array, min, max } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-    $: if (required || array) {
-        xdefault = null;
+    export async function submitInteger(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeInteger>
+    ) {
+        await sdkForProject.databases.createIntegerAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.required,
+            data.min,
+            data.max,
+            data.default ? data.default : undefined,
+            data.array
+        );
     }
 </script>
 
-<InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
-<InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
+<script lang="ts">
+    import { InputNumber, InputChoice } from '$lib/elements/forms';
+
+    export let selectedAttribute: Models.AttributeInteger;
+    export let data: Partial<Models.AttributeInteger> = {
+        required: false,
+        min: 0,
+        max: 0,
+        default: 0,
+        array: false
+    };
+
+    $: if (selectedAttribute) {
+        ({
+            required: data.required,
+            array: data.array,
+            min: data.min,
+            max: data.max,
+            default: data.default
+        } = selectedAttribute);
+    }
+    $: if (data.required || data.array) {
+        data.default = null;
+    }
+</script>
+
+<InputNumber id="min" label="Min" bind:value={data.min} readonly={!!selectedAttribute} />
+<InputNumber id="max" label="Max" bind:value={data.max} readonly={!!selectedAttribute} />
 
 <InputNumber
     id="default"
     label="Default value"
-    {min}
-    {max}
-    bind:value={xdefault}
-    disabled={required || array}
-    readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
-    Indicate whether this attribute should act as an array</InputChoice>
+    min={data.min}
+    max={data.max}
+    bind:value={data.default}
+    disabled={data.required || data.array}
+    readonly={!!selectedAttribute} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
index ed7250ab9..154be4e57 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
@@ -1,68 +1,55 @@
+<script context="module" lang="ts">
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export async function submitIp(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeIp>
+    ) {
+        await sdkForProject.databases.createIpAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.required,
+            data.default ? data.default : undefined,
+            data.array
+        );
+    }
+</script>
+
 <script lang="ts">
     import { InputText, InputChoice } 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 { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
 
-    export let key: string;
-    export let submitted = false;
-    export let overview = false;
     export let selectedAttribute: Models.AttributeIp;
+    export let data: Partial<Models.AttributeIp>;
 
-    const databaseId = $page.params.database;
-    const dispatch = createEventDispatcher();
-
-    let xdefault: string,
-        required = false,
-        array = false;
-
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createIpAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                required,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    $: if (submitted) {
-        submit();
+    $: if (selectedAttribute) {
+        ({ required: data.required, array: data.array, default: data.default } = selectedAttribute);
     }
-
-    $: if (overview) {
-        ({ required, array } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-    $: if (required || array) {
-        xdefault = null;
+    $: if (data.required || data.array) {
+        data.default = null;
     }
 </script>
 
 <InputText
     id="default"
     label="Default value"
-    bind:value={xdefault}
-    disabled={required || array}
-    readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
-    Indicate whether this attribute should act as an array</InputChoice>
+    bind:value={data.default}
+    disabled={data.required || data.array}
+    readonly={!!selectedAttribute} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
index 5f3e1da7c..c8faf10e9 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
@@ -1,19 +1,26 @@
 import type { SvelteComponent } from 'svelte';
 import { writable } from 'svelte/store';
-import Boolean from './boolean.svelte';
-import Email from './email.svelte';
-import Enum from './enum.svelte';
-import Float from './float.svelte';
-import Integer from './integer.svelte';
-import Ip from './ip.svelte';
-import String from './string.svelte';
-import Url from './url.svelte';
-import Datetime from './datetime.svelte';
+import Boolean, { submitBoolean } from './boolean.svelte';
+import Email, { submitEmail } from './email.svelte';
+import Enum, { submitEnum } from './enum.svelte';
+import Float, { submitFloat } from './float.svelte';
+import Integer, { submitInteger } from './integer.svelte';
+import Ip, { submitIp } from './ip.svelte';
+import String, { submitString } from './string.svelte';
+import Url, { submitUrl } from './url.svelte';
+import Datetime, { submitDatetime } from './datetime.svelte';
+import type { Attributes } from '../store';
 
 export type Option = {
     name: string;
     component: typeof SvelteComponent;
     type: 'string' | 'integer' | 'double' | 'boolean' | 'datetime';
+    func: (
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Attributes>
+    ) => Promise<void>;
     format?: 'email' | 'ip' | 'url' | 'enum';
 };
 
@@ -21,51 +28,60 @@ export const options: Option[] = [
     {
         name: 'String',
         component: String,
-        type: 'string'
+        type: 'string',
+        func: submitString
     },
     {
         name: 'Integer',
         component: Integer,
-        type: 'integer'
+        type: 'integer',
+        func: submitInteger
     },
     {
         name: 'Float',
         component: Float,
-        type: 'double'
+        type: 'double',
+        func: submitFloat
     },
     {
         name: 'Boolean',
         component: Boolean,
-        type: 'boolean'
+        type: 'boolean',
+        func: submitBoolean
     },
     {
         name: 'Datetime',
         component: Datetime,
-        type: 'datetime'
+        type: 'datetime',
+        func: submitDatetime
     },
     {
         name: 'Email',
         component: Email,
         type: 'string',
-        format: 'email'
+        format: 'email',
+        func: submitEmail
     },
     {
         name: 'IP',
         component: Ip,
         type: 'string',
-        format: 'ip'
+        format: 'ip',
+        func: submitIp
     },
     {
         name: 'URL',
         component: Url,
         type: 'string',
-        format: 'url'
+        format: 'url',
+        func: submitUrl
     },
     {
         name: 'Enum',
         component: Enum,
         type: 'string',
-        format: 'enum'
+        format: 'enum',
+        func: submitEnum
     }
 ];
 
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index 27764415c..9ecc9c513 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -1,72 +1,73 @@
-<script lang="ts">
-    import { InputNumber, InputText, InputChoice } from '$lib/elements/forms';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { createEventDispatcher } from 'svelte';
-    import { collection } from '../store';
+<script context="module" lang="ts">
     import type { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
+    import { sdkForProject } from '$lib/stores/sdk';
 
-    export let key: string;
-    export let submitted = false;
-    export let overview = false;
-    export let selectedAttribute: Models.AttributeString;
-
-    const databaseId = $page.params.database;
-
-    let xdefault: string,
-        size = 255,
-        required = false,
-        array = false;
-
-    const dispatch = createEventDispatcher();
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createStringAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                size,
-                required,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    $: if (submitted) {
-        submit();
-    }
-
-    $: if (overview) {
-        ({ required, array, size } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-    $: if (required || array) {
-        xdefault = null;
+    export async function submitString(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeString>
+    ) {
+        await sdkForProject.databases.createStringAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.size,
+            data.required,
+            data.default ? (data.default as string) : undefined,
+            data.array
+        );
     }
 </script>
 
-<InputNumber id="size" label="Size" bind:value={size} required readonly={overview} />
+<script lang="ts">
+    import { InputNumber, InputText, InputChoice } from '$lib/elements/forms';
+
+    export let selectedAttribute: Models.AttributeString;
+    export let data: Partial<Models.AttributeString> = {
+        required: false,
+        size: 0,
+        default: null,
+        array: false
+    };
+
+    $: if (selectedAttribute) {
+        ({
+            required: data.required,
+            array: data.array,
+            size: data.size,
+            default: data.default
+        } = selectedAttribute);
+    }
+    $: if (data.required || data.array) {
+        data.default = null;
+    }
+</script>
+
+<InputNumber
+    id="size"
+    label="Size"
+    bind:value={data.size}
+    required
+    readonly={!!selectedAttribute} />
 <InputText
     id="default"
     label="Default value"
-    bind:value={xdefault}
-    maxlength={size}
-    disabled={required || array}
-    readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
-    Indicate whether this attribute should act as an array</InputChoice>
+    bind:value={data.default}
+    maxlength={data.size}
+    disabled={data.required || data.array}
+    readonly={!!selectedAttribute} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
index f30452f55..d8fd01633 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
@@ -1,68 +1,55 @@
+<script context="module" lang="ts">
+    import type { Models } from '@aw-labs/appwrite-console';
+    import { sdkForProject } from '$lib/stores/sdk';
+
+    export async function submitUrl(
+        databaseId: string,
+        collectionId: string,
+        key: string,
+        data: Partial<Models.AttributeUrl>
+    ) {
+        await sdkForProject.databases.createUrlAttribute(
+            databaseId,
+            collectionId,
+            key,
+            data.required,
+            data.default ? data.default : undefined,
+            data.array
+        );
+    }
+</script>
+
 <script lang="ts">
     import { InputText, InputChoice } 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 { Models } from '@aw-labs/appwrite-console';
-    import { page } from '$app/stores';
 
-    export let key: string;
-    export let submitted = false;
-    export let overview = false;
     export let selectedAttribute: Models.AttributeUrl;
+    export let data: Partial<Models.AttributeUrl>;
 
-    const databaseId = $page.params.database;
-    const dispatch = createEventDispatcher();
-
-    let xdefault: string,
-        required = false,
-        array = false;
-
-    const submit = async () => {
-        submitted = false;
-        try {
-            const attribute = await sdkForProject.databases.createUrlAttribute(
-                databaseId,
-                $collection.$id,
-                key,
-                required,
-                xdefault ? xdefault : undefined,
-                array
-            );
-            dispatch('created', attribute);
-            addNotification({
-                type: 'success',
-                message: `${key} has been created`
-            });
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-        }
-    };
-
-    $: if (submitted) {
-        submit();
+    $: if (selectedAttribute) {
+        ({ required: data.required, array: data.array, default: data.default } = selectedAttribute);
     }
-
-    $: if (overview) {
-        ({ required, array } = selectedAttribute);
-        xdefault = selectedAttribute.default;
-    }
-    $: if (required || array) {
-        xdefault = null;
+    $: if (data.required || data.array) {
+        data.default = null;
     }
 </script>
 
 <InputText
     id="default"
     label="Default value"
-    bind:value={xdefault}
-    disabled={required || array}
-    readonly={overview} />
-<InputChoice id="required" label="Required" bind:value={required} disabled={overview || array}>
-    Indicate whether this is a required attribute</InputChoice>
-<InputChoice id="array" label="Array" bind:value={array} disabled={overview || required}>
-    Indicate whether this attribute should act as an array</InputChoice>
+    bind:value={data.default}
+    disabled={data.required || data.array}
+    readonly={!!selectedAttribute} />
+<InputChoice
+    id="required"
+    label="Required"
+    bind:value={data.required}
+    disabled={!!selectedAttribute || data.array}>
+    Indicate whether this is a required attribute
+</InputChoice>
+<InputChoice
+    id="array"
+    label="Array"
+    bind:value={data.array}
+    disabled={!!selectedAttribute || data.required}>
+    Indicate whether this attribute should act as an array
+</InputChoice>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
index bfffd77aa..c4fe7b59f 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
@@ -2,19 +2,46 @@
     import { Modal } from '$lib/components';
     import { option, options } from './attributes/store';
     import { Button, InputText, FormList, InputSelect } from '$lib/elements/forms';
-    import { invalidate } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
+    import { page } from '$app/stores';
+    import { addNotification } from '$lib/stores/notifications';
+    import { base } from '$app/paths';
+    import type { Attributes } from './store';
 
     export let showCreate = false;
 
     let key: string = null;
     let selectedOption = null;
-    let submitted = false;
-
-    const created = async () => {
-        invalidate(Dependencies.COLLECTION);
-        showCreate = false;
+    let data: Partial<Attributes> = {
+        required: false,
+        array: false,
+        default: null
     };
+    const databaseId = $page.params.database;
+    const collectionId = $page.params.collection;
+
+    async function submit() {
+        try {
+            await $option.func(databaseId, collectionId, key, data);
+            invalidate(Dependencies.COLLECTION);
+            if (!$page.url.pathname.includes('attributes')) {
+                goto(
+                    `${base}/console/project-${$page.params.project}/databases/database-${databaseId}/collection-${collectionId}/attributes`
+                );
+            }
+            addNotification({
+                type: 'success',
+                message: `Attribute ${key} has been created`
+            });
+            showCreate = false;
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    }
 
     $: if (selectedOption) {
         $option = options.find((option) => option.name === selectedOption);
@@ -23,11 +50,11 @@
     $: if (!showCreate) {
         key = null;
         selectedOption = null;
-        submitted = false;
+        $option = null;
     }
 </script>
 
-<Modal size="big" bind:show={showCreate} on:submit={() => (submitted = true)}>
+<Modal size="big" bind:show={showCreate} on:submit={submit}>
     <svelte:fragment slot="header">Create Attribute</svelte:fragment>
     <FormList>
         <div>
@@ -59,9 +86,7 @@
         {#if selectedOption}
             <svelte:component
                 this={$option.component}
-                {key}
-                bind:submitted
-                on:created={created}
+                bind:data
                 on:close={() => ($option = null)} />
         {/if}
     </FormList>
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/+page.ts b/src/routes/console/project-[project]/overview/keys/[key]/+page.ts
index 11847cc4a..62c8a4fdb 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/+page.ts
+++ b/src/routes/console/project-[project]/overview/keys/[key]/+page.ts
@@ -7,9 +7,14 @@ import type { PageLoad } from './$types';
 export const load: PageLoad = async ({ params, depends }) => {
     depends(Dependencies.KEY);
 
+    const key = await sdkForConsole.projects.getKey(params.project, params.key);
+    if (key.expire) {
+        key.expire = new Date(key.expire).toISOString().slice(0, 23);
+    }
+
     return {
         header: Header,
         breadcrumbs: Breadcrumbs,
-        key: await sdkForConsole.projects.getKey(params.project, params.key)
+        key
     };
 };
diff --git a/src/routes/console/project-[project]/overview/keys/wizard/step1.svelte b/src/routes/console/project-[project]/overview/keys/wizard/step1.svelte
index 3637cd145..37fb03702 100644
--- a/src/routes/console/project-[project]/overview/keys/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/overview/keys/wizard/step1.svelte
@@ -1,7 +1,45 @@
 <script lang="ts">
-    import { FormList, InputText, InputDateTime } from '$lib/elements/forms';
+    import { FormList, InputText, InputDateTime, InputSelect } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import { key } from './store';
+
+    let preset = 'never';
+    function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
+        const date = new Date();
+        switch (type) {
+            case 'day':
+                date.setDate(date.getDate() + value);
+                break;
+            case 'month':
+                date.setMonth(date.getMonth() + value);
+                break;
+            case 'year':
+                date.setMonth(date.getMonth() + value * 12);
+                break;
+        }
+
+        return date.toISOString();
+    }
+
+    $: {
+        switch (preset) {
+            case 'never':
+                $key.expire = null;
+                break;
+            case '1day':
+                $key.expire = incrementToday(1, 'day');
+                break;
+            case '7days':
+                $key.expire = incrementToday(7, 'day');
+                break;
+            case '1month':
+                $key.expire = incrementToday(1, 'month');
+                break;
+            case '1year':
+                $key.expire = incrementToday(1, 'year');
+                break;
+        }
+    }
 </script>
 
 <WizardStep>
@@ -14,6 +52,38 @@
             placeholder="API Key Name"
             required
             bind:value={$key.name} />
-        <InputDateTime id="expire" label="Expiration Date" bind:value={$key.expire} />
+        <InputSelect
+            bind:value={preset}
+            options={[
+                {
+                    label: 'Never',
+                    value: 'never'
+                },
+                {
+                    label: '1 Day',
+                    value: '1day'
+                },
+                {
+                    label: '7 Days',
+                    value: '7days'
+                },
+                {
+                    label: '1 Month',
+                    value: '1month'
+                },
+                {
+                    label: '1 Year',
+                    value: '1year'
+                },
+                {
+                    label: 'Custom Date',
+                    value: 'custom'
+                }
+            ]}
+            id="preset"
+            label="Expiration Date" />
+        {#if preset === 'custom'}
+            <InputDateTime id="expire" label="" bind:value={$key.expire} showLabel={false} />
+        {/if}
     </FormList>
 </WizardStep>
diff --git a/src/routes/console/project-[project]/settings/+page.svelte b/src/routes/console/project-[project]/settings/+page.svelte
index e2c73599f..d78f84f0b 100644
--- a/src/routes/console/project-[project]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/settings/+page.svelte
@@ -67,6 +67,21 @@
 <Container>
     {#if $project}
         <Form on:submit={updateName}>
+            <CardGrid>
+                <Heading tag="h6" size="7">API Credentials</Heading>
+                <p class="text">Access Appwrite services using your API Endpoint and Project ID.</p>
+                <svelte:fragment slot="aside">
+                    <FormList>
+                        <CopyInput label="Project ID" showLabel={true} value={$project.$id} />
+                        <CopyInput label="API Endpoint" showLabel={true} value={endpoint} />
+                    </FormList>
+                </svelte:fragment>
+                <svelte:fragment slot="actions">
+                    <Button secondary href={`${base}/console/project-${projectId}/overview/keys`}>
+                        View API Keys
+                    </Button>
+                </svelte:fragment>
+            </CardGrid>
             <CardGrid>
                 <Heading tag="h6" size="7">Update Name</Heading>
 
@@ -87,29 +102,6 @@
             </CardGrid>
         </Form>
 
-        <CardGrid>
-            <Heading tag="h6" size="7">API Credentials</Heading>
-            <p class="text">
-                Access Appwrite services using your API Endpoint and Project ID. You can connect
-                Appwrite to your applications and server-side code by <a
-                    href="https://appwrite.io/docs"
-                    class="link">integrating a new platform</a>
-                or
-                <a href="https://appwrite.io/docs/keys" class="link">creating an API key</a>.
-            </p>
-            <svelte:fragment slot="aside">
-                <FormList>
-                    <CopyInput label="Project ID" showLabel={true} value={$project.$id} />
-                    <CopyInput label="API Endpoint" showLabel={true} value={endpoint} />
-                </FormList>
-            </svelte:fragment>
-            <svelte:fragment slot="actions">
-                <Button secondary href={`${base}/console/project-${projectId}/overview/keys`}>
-                    View API Keys
-                </Button>
-            </svelte:fragment>
-        </CardGrid>
-
         <CardGrid>
             <Heading tag="h6" size="7">Services</Heading>
             <p class="text">Choose services you wish to enable or disable.</p>
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/+page.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/+page.svelte
index ed7f2ecff..dcde9a658 100644
--- a/src/routes/console/project-[project]/settings/webhooks/[webhook]/+page.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/+page.svelte
@@ -153,7 +153,14 @@
 <Container>
     <CardGrid>
         <Heading tag="h2" size="7">Signature Key</Heading>
-        <p>You can use the Signature Key to validate your webhooks.</p>
+        <p>
+            Add the Signature Key to the X-Appwrite-Webhook-Signature header to validate your
+            webhooks. <a
+                href="https://appwrite.io/docs/webhooks#verification"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link">Learn more about webhook validation.</a>
+        </p>
         <svelte:fragment slot="aside">
             <div>
                 <p>Key</p>
diff --git a/src/routes/console/project-[project]/storage/[[page]]/+page.svelte b/src/routes/console/project-[project]/storage/[[page]]/+page.svelte
index f89a38592..c8ba9b82b 100644
--- a/src/routes/console/project-[project]/storage/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/[[page]]/+page.svelte
@@ -39,7 +39,6 @@
             on:click={() => (showCreate = true)}>
             {#each data.buckets.buckets as bucket}
                 <GridItem1 href={`${base}/console/project-${project}/storage/bucket-${bucket.$id}`}>
-                    <svelte:fragment slot="eyebrow">XX Files</svelte:fragment>
                     <svelte:fragment slot="title">{bucket.name}</svelte:fragment>
                     <svelte:fragment slot="status">
                         {#if !bucket.enabled}