diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index eb165ab96..7a8269f29 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -138,7 +138,8 @@
                                     {/if}
                                 </Layout.Stack>
                             </Spreadsheet.Cell>
-                            <Spreadsheet.Cell column="type" {root} isEditable={false}>{index.type}</Spreadsheet.Cell>
+                            <Spreadsheet.Cell column="type" {root} isEditable={false}
+                                >{index.type}</Spreadsheet.Cell>
                             <Spreadsheet.Cell column="columns" {root} isEditable={false}>
                                 {index.attributes.join(', ')}
                             </Spreadsheet.Cell>
@@ -237,7 +238,7 @@
 </SideSheet>
 
 {#if selectedIndex}
-    <Delete bind:showDelete selectedIndex={selectedIndex} />
+    <Delete bind:showDelete {selectedIndex} />
 {:else if selectedIndexes && selectedIndexes.length}
     <Delete bind:showDelete bind:selectedIndex={selectedIndexes} />
 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
index 8a11b3a57..83fd175df 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
@@ -8,15 +8,14 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import Confirm from '$lib/components/confirm.svelte';
-    import { Typography } from '@appwrite.io/pink-svelte';
 
     let {
         showDelete = $bindable(false),
-        selectedIndex = $bindable(null),
+        selectedIndex = $bindable(null)
     }: {
         showDelete: boolean;
-        selectedIndex: Models.Index | string[]
-    } = $props()
+        selectedIndex: Models.Index | string[];
+    } = $props();
 
     let error: string = $state(null);
     let selectedKeys = $derived(getKeys(selectedIndex));
@@ -51,17 +50,23 @@
     }
 </script>
 
-<Confirm onSubmit={handleDelete} title="Delete index" bind:open={showDelete} bind:error>
-    <Typography.Text>
-        {#if selectedKeys.length === 1}
-            Are you sure you want to delete <b>{selectedKeys[0]}</b> from
-            <b>{$collection.name}</b>?
-        {:else}
-            Are you sure you want to delete
-            <b>
-                {selectedKeys.join(', ')}
-            </b>
-            from <b>{$collection.name}</b>?
-        {/if}
-    </Typography.Text>
+<Confirm
+    bind:error
+    confirmDeletion
+    title="Delete index"
+    bind:open={showDelete}
+    onSubmit={handleDelete}>
+    {#if selectedKeys.length === 1}
+        <p>Are you sure you want to delete <b>{selectedKeys[0]}</b>?</p>
+        <p>
+            Deleting this index may slow down queries that depend on it. This action is
+            irreversible.
+        </p>
+    {:else}
+        <p>Are you sure you want to delete <b>{selectedKeys.join(', ')}</b>?</p>
+        <p>
+            Deleting these indexes may slow down queries that depend on it. This action is
+            irreversible.
+        </p>
+    {/if}
 </Confirm>