diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
index bf401a66e6..707864dc43 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
@@ -1,263 +1,19 @@
 <script lang="ts">
-    import { CardGrid, Box, Heading } from '$lib/components';
     import { Container } from '$lib/layout';
-    import { Button, InputText, InputSwitch, Helper } from '$lib/elements/forms';
-    import { Permissions } from '$lib/components/permissions';
     import { collection } from '../store';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { addNotification } from '$lib/stores/notifications';
-    import { onMount } from 'svelte';
-    import { page } from '$app/stores';
-    import { symmetricDifference } from '$lib/helpers/array';
-    import Delete from './deleteCollection.svelte';
-    import { invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
-    import FormList from '$lib/elements/forms/formList.svelte';
-    import { trackEvent } from '$lib/actions/analytics';
-
-    const databaseId = $page.params.database;
-
-    let showDelete = false;
-    let showError: false | 'name' | 'size' = false,
-        errorMessage = 'Something went wrong',
-        errorType: 'error' | 'warning' | 'success' = 'error';
-    let enabled: boolean = null,
-        collectionName: string = null,
-        collectionDocumentSecurity: boolean = null,
-        collectionPermissions: string[] = null,
-        arePermsDisabled = true;
-
-    onMount(() => {
-        enabled ??= $collection.enabled;
-        collectionName ??= $collection.name;
-        collectionPermissions ??= $collection.$permissions;
-        collectionDocumentSecurity ??= $collection.documentSecurity;
-    });
-
-    $: if (
-        collectionPermissions &&
-        symmetricDifference(collectionPermissions, $collection.$permissions).length
-    ) {
-        arePermsDisabled = false;
-    } else arePermsDisabled = true;
-
-    function addError(location: typeof showError, message: string, type: typeof errorType) {
-        showError = location;
-        errorMessage = message;
-        errorType = type;
-    }
-
-    async function toggleCollection() {
-        try {
-            await sdkForProject.databases.updateCollection(
-                databaseId,
-                $collection.$id,
-                $collection.name,
-                $collection.$permissions,
-                $collection.documentSecurity,
-                enabled
-            );
-            invalidate(Dependencies.COLLECTION);
-            addNotification({
-                message: `${$collection.name} has been updated`,
-                type: 'success'
-            });
-            trackEvent('submit_collection_update_enabled');
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-        }
-    }
-    async function updateName() {
-        try {
-            await sdkForProject.databases.updateCollection(
-                databaseId,
-                $collection.$id,
-                collectionName,
-                $collection.$permissions,
-                $collection.documentSecurity,
-                $collection.enabled
-            );
-            invalidate(Dependencies.COLLECTION);
-            showError = false;
-            addNotification({
-                message: 'Name has been updated',
-                type: 'success'
-            });
-            trackEvent('submit_collection_update_name');
-        } catch (error) {
-            addError('name', error.message, 'error');
-        }
-    }
-    async function updatePermissions() {
-        try {
-            await sdkForProject.databases.updateCollection(
-                databaseId,
-                $collection.$id,
-                $collection.name,
-                collectionPermissions,
-                $collection.documentSecurity,
-                $collection.enabled
-            );
-            invalidate(Dependencies.COLLECTION);
-            arePermsDisabled = true;
-            addNotification({
-                message: 'Permissions have been updated',
-                type: 'success'
-            });
-            trackEvent('submit_collection_update_permissions');
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-        }
-    }
-
-    async function updateSecurity() {
-        try {
-            await sdkForProject.databases.updateCollection(
-                databaseId,
-                $collection.$id,
-                $collection.name,
-                $collection.$permissions,
-                collectionDocumentSecurity,
-                $collection.enabled
-            );
-            invalidate(Dependencies.COLLECTION);
-            arePermsDisabled = true;
-            addNotification({
-                message: 'Security has been updated',
-                type: 'success'
-            });
-            trackEvent('submit_collection_update_security');
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-        }
-    }
+    import DangerZone from './dangerZone.svelte';
+    import UpdateName from './updateName.svelte';
+    import UpdatePermissions from './updatePermissions.svelte';
+    import UpdateSecurity from './updateSecurity.svelte';
+    import UpdateStatus from './updateStatus.svelte';
 </script>
 
 <Container>
     {#if $collection}
-        <CardGrid>
-            <Heading tag="h2" size="7">{$collection.name}</Heading>
-
-            <svelte:fragment slot="aside">
-                <ul>
-                    <InputSwitch
-                        id="toggle"
-                        label={enabled ? 'Enabled' : 'Disabled'}
-                        bind:value={enabled} />
-                </ul>
-                <div>
-                    <p>Created: {toLocaleDateTime($collection.$createdAt)}</p>
-                    <p>Last Updated: {toLocaleDateTime($collection.$updatedAt)}</p>
-                </div>
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button disabled={enabled === $collection.enabled} on:click={toggleCollection}>
-                    Update
-                </Button>
-            </svelte:fragment>
-        </CardGrid>
-
-        <CardGrid>
-            <Heading tag="h6" size="7">Update Name</Heading>
-
-            <svelte:fragment slot="aside">
-                <ul>
-                    <InputText
-                        id="name"
-                        label="Name"
-                        placeholder="Enter name"
-                        autocomplete={false}
-                        bind:value={collectionName} />
-                    {#if showError === 'name'}
-                        <Helper type={errorType}>{errorMessage}</Helper>
-                    {/if}
-                </ul>
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={collectionName === $collection.name || !collectionName}
-                    on:click={updateName}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-
-        <CardGrid>
-            <Heading tag="h6" size="7">Update Permissions</Heading>
-            <p class="text">
-                Choose who can access your collection and documents. For more information, check out
-                the <a
-                    href="https://appwrite.io/docs/permissions"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="link">Permissions Guide</a> in our documentation.
-            </p>
-            <svelte:fragment slot="aside">
-                {#if collectionPermissions}
-                    <Permissions bind:permissions={collectionPermissions} withCreate />
-                {/if}
-            </svelte:fragment>
-            <svelte:fragment slot="actions">
-                <Button disabled={arePermsDisabled} on:click={updatePermissions}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-
-        <CardGrid>
-            <Heading tag="h6" size="7">Update Document Security</Heading>
-            <svelte:fragment slot="aside">
-                <FormList>
-                    <InputSwitch
-                        bind:value={collectionDocumentSecurity}
-                        id="security"
-                        label="Document Security" />
-                </FormList>
-                <p class="text">
-                    When document security is enabled, users will be able to access documents for
-                    which they have been granted <b>either Document or Collection permissions</b>.
-                </p>
-                <p class="text">
-                    If document security is disabled, users can access documents <b
-                        >only if they have Collection permissions</b
-                    >. Document permissions will be ignored.
-                </p>
-            </svelte:fragment>
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={collectionDocumentSecurity === $collection.documentSecurity}
-                    on:click={updateSecurity}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
-
-        <CardGrid danger>
-            <Heading tag="h6" size="7">Delete Collection</Heading>
-            <p>
-                The collection will be permanently deleted, including all the documents within it.
-                This action is irreversible.
-            </p>
-            <svelte:fragment slot="aside">
-                <Box>
-                    <svelte:fragment slot="title">
-                        <h6 class="u-bold u-trim-1">{$collection.name}</h6>
-                    </svelte:fragment>
-                    <p>Last Updated: {toLocaleDateTime($collection.$updatedAt)}</p>
-                </Box>
-            </svelte:fragment>
-
-            <svelte:fragment slot="actions">
-                <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
-            </svelte:fragment>
-        </CardGrid>
+        <UpdateStatus />
+        <UpdateName />
+        <UpdatePermissions />
+        <UpdateSecurity />
+        <DangerZone />
     {/if}
 </Container>
-
-<Delete bind:showDelete />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/dangerZone.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/dangerZone.svelte
new file mode 100644
index 0000000000..53653a2d4c
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/dangerZone.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { Box, CardGrid, Heading } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { collection } from '../store';
+    import Delete from './deleteCollection.svelte';
+
+    let showDelete = false;
+</script>
+
+<CardGrid danger>
+    <Heading tag="h6" size="7">Delete Collection</Heading>
+    <p>
+        The collection will be permanently deleted, including all the documents within it. This
+        action is irreversible.
+    </p>
+    <svelte:fragment slot="aside">
+        <Box>
+            <svelte:fragment slot="title">
+                <h6 class="u-bold u-trim-1">{$collection.name}</h6>
+            </svelte:fragment>
+            <p>Last Updated: {toLocaleDateTime($collection.$updatedAt)}</p>
+        </Box>
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+    </svelte:fragment>
+</CardGrid>
+
+<Delete bind:showDelete />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updateName.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updateName.svelte
new file mode 100644
index 0000000000..e98422453f
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updateName.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { collection } from '../store';
+
+    const databaseId = $page.params.database;
+
+    let collectionName: string = null;
+
+    onMount(() => {
+        collectionName ??= $collection.name;
+    });
+
+    async function updateName() {
+        try {
+            await sdkForProject.databases.updateCollection(
+                databaseId,
+                $collection.$id,
+                collectionName,
+                $collection.$permissions,
+                $collection.documentSecurity,
+                $collection.enabled
+            );
+            invalidate(Dependencies.COLLECTION);
+            addNotification({
+                message: 'Name has been updated',
+                type: 'success'
+            });
+            trackEvent('submit_collection_update_name');
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+</script>
+
+<Form on:submit={updateName}>
+    <CardGrid>
+        <Heading tag="h6" size="7">Update Name</Heading>
+
+        <svelte:fragment slot="aside">
+            <ul>
+                <InputText
+                    id="name"
+                    label="Name"
+                    placeholder="Enter name"
+                    autocomplete={false}
+                    bind:value={collectionName} />
+            </ul>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={collectionName === $collection.name || !collectionName} submit
+                >Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte
new file mode 100644
index 0000000000..6589c22c04
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Permissions } from '$lib/components/permissions';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { collection } from '../store';
+
+    const databaseId = $page.params.database;
+
+    let arePermsDisabled = true;
+
+    let collectionPermissions: string[] = null;
+
+    onMount(() => {
+        collectionPermissions ??= $collection.$permissions;
+    });
+
+    async function updatePermissions() {
+        try {
+            await sdkForProject.databases.updateCollection(
+                databaseId,
+                $collection.$id,
+                $collection.name,
+                collectionPermissions,
+                $collection.documentSecurity,
+                $collection.enabled
+            );
+            invalidate(Dependencies.COLLECTION);
+            arePermsDisabled = true;
+            addNotification({
+                message: 'Permissions have been updated',
+                type: 'success'
+            });
+            trackEvent('submit_collection_update_permissions');
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+
+    $: if (
+        collectionPermissions &&
+        symmetricDifference(collectionPermissions, $collection.$permissions).length
+    ) {
+        arePermsDisabled = false;
+    } else arePermsDisabled = true;
+</script>
+
+<CardGrid>
+    <Heading tag="h6" size="7">Update Permissions</Heading>
+    <p class="text">
+        Choose who can access your collection and documents. For more information, check out the <a
+            href="https://appwrite.io/docs/permissions"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link">Permissions Guide</a> in our documentation.
+    </p>
+    <svelte:fragment slot="aside">
+        {#if collectionPermissions}
+            <Permissions bind:permissions={collectionPermissions} withCreate />
+        {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="actions">
+        <Button disabled={arePermsDisabled} on:click={updatePermissions}>Update</Button>
+    </svelte:fragment>
+</CardGrid>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updateSecurity.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updateSecurity.svelte
new file mode 100644
index 0000000000..87d601be6d
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updateSecurity.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, FormList, InputSwitch } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { collection } from '../store';
+
+    const databaseId = $page.params.database;
+
+    let collectionDocumentSecurity: boolean = null;
+
+    onMount(() => {
+        collectionDocumentSecurity ??= $collection.documentSecurity;
+    });
+
+    async function updateSecurity() {
+        try {
+            await sdkForProject.databases.updateCollection(
+                databaseId,
+                $collection.$id,
+                $collection.name,
+                $collection.$permissions,
+                collectionDocumentSecurity,
+                $collection.enabled
+            );
+            invalidate(Dependencies.COLLECTION);
+            addNotification({
+                message: 'Security has been updated',
+                type: 'success'
+            });
+            trackEvent('submit_collection_update_security');
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+</script>
+
+<CardGrid>
+    <Heading tag="h6" size="7">Update Document Security</Heading>
+    <svelte:fragment slot="aside">
+        <FormList>
+            <InputSwitch
+                bind:value={collectionDocumentSecurity}
+                id="security"
+                label="Document Security" />
+        </FormList>
+        <p class="text">
+            When document security is enabled, users will be able to access documents for which they
+            have been granted <b>either Document or Collection permissions</b>.
+        </p>
+        <p class="text">
+            If document security is disabled, users can access documents <b
+                >only if they have Collection permissions</b
+            >. Document permissions will be ignored.
+        </p>
+    </svelte:fragment>
+    <svelte:fragment slot="actions">
+        <Button
+            disabled={collectionDocumentSecurity === $collection.documentSecurity}
+            on:click={updateSecurity}>Update</Button>
+    </svelte:fragment>
+</CardGrid>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updateStatus.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updateStatus.svelte
new file mode 100644
index 0000000000..6c1353320f
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updateStatus.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, InputSwitch } from '$lib/elements/forms';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { onMount } from 'svelte';
+    import { collection } from '../store';
+
+    const databaseId = $page.params.database;
+
+    let enabled: boolean = null;
+
+    onMount(() => {
+        enabled ??= $collection.enabled;
+    });
+
+    async function toggleCollection() {
+        try {
+            await sdkForProject.databases.updateCollection(
+                databaseId,
+                $collection.$id,
+                $collection.name,
+                $collection.$permissions,
+                $collection.documentSecurity,
+                enabled
+            );
+            invalidate(Dependencies.COLLECTION);
+            addNotification({
+                message: `${$collection.name} has been updated`,
+                type: 'success'
+            });
+            trackEvent('submit_collection_update_enabled');
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+</script>
+
+<CardGrid>
+    <Heading tag="h2" size="7">{$collection.name}</Heading>
+
+    <svelte:fragment slot="aside">
+        <ul>
+            <InputSwitch
+                id="toggle"
+                label={enabled ? 'Enabled' : 'Disabled'}
+                bind:value={enabled} />
+        </ul>
+        <div>
+            <p>Created: {toLocaleDateTime($collection.$createdAt)}</p>
+            <p>Last Updated: {toLocaleDateTime($collection.$updatedAt)}</p>
+        </div>
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <Button disabled={enabled === $collection.enabled} on:click={toggleCollection}>
+            Update
+        </Button>
+    </svelte:fragment>
+</CardGrid>