diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 7b5de902a3..89b73c96bc 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -44,30 +44,11 @@
     $: hasValidAttributes = $collection?.attributes?.some((attr) => attr.status === 'available');
 </script>
 
-<Container>
-    <div class="heading-grid u-main-justify-between u-cross-center">
-        <Heading tag="h2" size="5">Documents</Heading>
-        <div class="u-flex u-main-end is-only-mobile">
-            <Button
-                disabled={!(hasAttributes && hasValidAttributes)}
-                on:click={openWizard}
-                event="create_document">
-                <span class="icon-plus" aria-hidden="true" />
-                <span class="text">Create document</span>
-            </Button>
-        </div>
-
-        <Filters query={data.query} {columns} disabled={!(hasAttributes && hasValidAttributes)} />
-
-        <div class="u-flex u-main-end u-gap-16">
-            <ViewSelector
-                view={data.view}
-                {columns}
-                isCustomCollection
-                hideView
-                allowNoColumns
-                showColsTextMobile />
-            <div class="is-not-mobile">
+{#key $page.params.collection}
+    <Container>
+        <div class="heading-grid u-main-justify-between u-cross-center">
+            <Heading tag="h2" size="5">Documents</Heading>
+            <div class="u-flex u-main-end is-only-mobile">
                 <Button
                     disabled={!(hasAttributes && hasValidAttributes)}
                     on:click={openWizard}
@@ -76,76 +57,100 @@
                     <span class="text">Create document</span>
                 </Button>
             </div>
+
+            <Filters
+                query={data.query}
+                {columns}
+                disabled={!(hasAttributes && hasValidAttributes)} />
+
+            <div class="u-flex u-main-end u-gap-16">
+                <ViewSelector
+                    view={data.view}
+                    {columns}
+                    isCustomCollection
+                    hideView
+                    allowNoColumns
+                    showColsTextMobile />
+                <div class="is-not-mobile">
+                    <Button
+                        disabled={!(hasAttributes && hasValidAttributes)}
+                        on:click={openWizard}
+                        event="create_document">
+                        <span class="icon-plus" aria-hidden="true" />
+                        <span class="text">Create document</span>
+                    </Button>
+                </div>
+            </div>
         </div>
-    </div>
 
-    {#if hasAttributes && hasValidAttributes}
-        {#if data.documents.total}
-            <Table {data} />
+        {#if hasAttributes && hasValidAttributes}
+            {#if data.documents.total}
+                <Table {data} />
 
-            <PaginationWithLimit
-                name="Documents"
-                limit={data.limit}
-                offset={data.offset}
-                total={data.documents.total} />
-        {:else if $hasPageQueries}
-            <EmptySearch hidePages>
-                <div class="common-section">
-                    <div class="u-text-center common-section">
-                        <b class="body-text-2 u-bold">Sorry, we couldn't find any documents.</b>
-                        <p>There are no documents that match your filters.</p>
+                <PaginationWithLimit
+                    name="Documents"
+                    limit={data.limit}
+                    offset={data.offset}
+                    total={data.documents.total} />
+            {:else if $hasPageQueries}
+                <EmptySearch hidePages>
+                    <div class="common-section">
+                        <div class="u-text-center common-section">
+                            <b class="body-text-2 u-bold">Sorry, we couldn't find any documents.</b>
+                            <p>There are no documents that match your filters.</p>
+                        </div>
+                        <div class="u-flex common-section u-main-center">
+                            <Button
+                                secondary
+                                on:click={() => {
+                                    queries.clearAll();
+                                    queries.apply();
+                                }}>
+                                Clear filters
+                            </Button>
+                        </div>
                     </div>
-                    <div class="u-flex common-section u-main-center">
+                </EmptySearch>
+            {:else}
+                <Empty
+                    single
+                    href="https://appwrite.io/docs/products/databases/documents"
+                    target="document"
+                    on:click={openWizard} />
+            {/if}
+        {:else}
+            <Empty single target="attribute" on:click={() => (showCreateDropdown = true)}>
+                <div class="u-text-center">
+                    <Heading size="7" tag="h2">Create an attribute to get started.</Heading>
+                    <p class="body-text-2 u-bold u-margin-block-start-4">
+                        Need a hand? Learn more in our documentation.
+                    </p>
+                </div>
+                <div class="u-flex u-gap-16 u-main-center">
+                    <Button
+                        external
+                        href="https://appwrite.io/docs/products/databases/collections#attributes"
+                        text
+                        event="empty_documentation"
+                        ariaLabel={`create {target}`}>Documentation</Button>
+                    <CreateAttributeDropdown
+                        bind:showCreateDropdown
+                        bind:showCreate={showCreateAttribute}
+                        bind:selectedOption={selectedAttribute}>
                         <Button
                             secondary
+                            event="create_attribute"
                             on:click={() => {
-                                queries.clearAll();
-                                queries.apply();
+                                showCreateDropdown = !showCreateDropdown;
                             }}>
-                            Clear filters
+                            Create attribute
                         </Button>
-                    </div>
+                    </CreateAttributeDropdown>
                 </div>
-            </EmptySearch>
-        {:else}
-            <Empty
-                single
-                href="https://appwrite.io/docs/products/databases/documents"
-                target="document"
-                on:click={openWizard} />
+            </Empty>
         {/if}
-    {:else}
-        <Empty single target="attribute" on:click={() => (showCreateDropdown = true)}>
-            <div class="u-text-center">
-                <Heading size="7" tag="h2">Create an attribute to get started.</Heading>
-                <p class="body-text-2 u-bold u-margin-block-start-4">
-                    Need a hand? Learn more in our documentation.
-                </p>
-            </div>
-            <div class="u-flex u-gap-16 u-main-center">
-                <Button
-                    external
-                    href="https://appwrite.io/docs/products/databases/collections#attributes"
-                    text
-                    event="empty_documentation"
-                    ariaLabel={`create {target}`}>Documentation</Button>
-                <CreateAttributeDropdown
-                    bind:showCreateDropdown
-                    bind:showCreate={showCreateAttribute}
-                    bind:selectedOption={selectedAttribute}>
-                    <Button
-                        secondary
-                        event="create_attribute"
-                        on:click={() => {
-                            showCreateDropdown = !showCreateDropdown;
-                        }}>
-                        Create attribute
-                    </Button>
-                </CreateAttributeDropdown>
-            </div>
-        </Empty>
-    {/if}
-</Container>
+    </Container>
+{/key}
 
 <CreateAttribute bind:showCreate={showCreateAttribute} bind:selectedOption={selectedAttribute} />