diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index bd48e7807..88bc3bef7 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -16,6 +16,7 @@
     import { Container } from '$lib/layout';
     import Create from '../createAttribute.svelte';
     import { isRelationship } from '../document-[document]/attributes/store';
+    import FailedModal from '../failedModal.svelte';
     import CreateIndex from '../indexes/createIndex.svelte';
     import { attributes, type Attributes } from '../store';
     import CreateAttributeDropdown from './createAttributeDropdown.svelte';
@@ -35,6 +36,8 @@
     let showDelete = false;
     let showEdit = false;
     let showCreateIndex = false;
+    let showFailed = false;
+    let error = '';
 
     enum attributeFormatIcon {
         ip = 'location-marker',
@@ -89,13 +92,24 @@
                                     <span class="text u-trim-1" data-private>{attribute.key}</span>
                                 </div>
                                 {#if attribute.status !== 'available'}
-                                    <Pill
-                                        warning={attribute.status === 'processing'}
-                                        danger={['deleting', 'stuck', 'failed'].includes(
-                                            attribute.status
-                                        )}>
-                                        {attribute.status}
-                                    </Pill>
+                                    <div class="u-inline-flex u-gap-12 u-cross-center">
+                                        <Pill
+                                            warning={attribute.status === 'processing'}
+                                            danger={['deleting', 'stuck', 'failed'].includes(
+                                                attribute.status
+                                            )}>
+                                            {attribute.status}
+                                        </Pill>
+                                        {#if attribute.error}
+                                            <Button
+                                                link
+                                                on:click={(e) => {
+                                                    e.preventDefault();
+                                                    error = attribute.error;
+                                                    showFailed = true;
+                                                }}>Details</Button>
+                                        {/if}
+                                    </div>
                                 {:else if attribute.required}
                                     <Pill>Required</Pill>
                                 {/if}
@@ -158,15 +172,17 @@
                                             Create Index
                                         </DropListItem>
                                     {/if}
-                                    <DropListItem
-                                        icon="trash"
-                                        on:click={() => {
-                                            selectedAttribute = attribute;
-                                            showDelete = true;
-                                            showDropdown[index] = false;
-                                        }}>
-                                        Delete
-                                    </DropListItem>
+                                    {#if attribute.status !== 'processing'}
+                                        <DropListItem
+                                            icon="trash"
+                                            on:click={() => {
+                                                selectedAttribute = attribute;
+                                                showDelete = true;
+                                                showDropdown[index] = false;
+                                            }}>
+                                            Delete
+                                        </DropListItem>
+                                    {/if}
                                 </svelte:fragment>
                             </DropList>
                         </TableCell>
@@ -214,3 +230,4 @@
 <Delete bind:showDelete {selectedAttribute} />
 <Edit bind:showEdit {selectedAttribute} />
 <CreateIndex bind:showCreateIndex externalAttribute={selectedAttribute} />
+<FailedModal bind:show={showFailed} title="Create attribute" header="Creation failed" {error} />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte
new file mode 100644
index 000000000..cf9f0f37e
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/failedModal.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import Modal from '$lib/components/modal.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+
+    export let show: boolean;
+    export let error: string;
+    export let title: string;
+    export let header: string;
+</script>
+
+<Modal {title} headerDivider={false} bind:show size="big">
+    <div class="box u-flex-vertical u-gap-24">
+        <p class="u-inline-flex u-cross-center u-gap-8">
+            <span
+                class="icon-exclamation-circle u-font-size-20"
+                aria-hidden="true"
+                style="color:hsl(var(--color-danger-100));" />{header}
+        </p>
+        <p>{error}</p>
+    </div>
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Close</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 4cc2d4263..a3d50bb09 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -20,6 +20,7 @@
     import { Button } from '$lib/elements/forms';
     import CreateAttributeDropdown from '../attributes/createAttributeDropdown.svelte';
     import type { Option } from '../attributes/store';
+    import FailedModal from '../failedModal.svelte';
 
     let showDropdown = [];
     let selectedIndex: Models.Index = null;
@@ -29,6 +30,8 @@
     let showCreateAttribute = false;
     let showCreateDropdown = false;
     let selectedAttribute: Option['name'] = null;
+    let showFailed = false;
+    let error = '';
 </script>
 
 <Container>
@@ -60,13 +63,24 @@
                                 <div class="u-flex u-main-space-between">
                                     <span class="text u-trim"> {index.key}</span>
                                     {#if index.status !== 'available'}
-                                        <Pill
-                                            warning={index.status === 'processing'}
-                                            danger={['deleting', 'stuck', 'failed'].includes(
-                                                index.status
-                                            )}>
-                                            {index.status}
-                                        </Pill>
+                                        <div class="u-inline-flex u-gap-12 u-cross-center">
+                                            <Pill
+                                                warning={index.status === 'processing'}
+                                                danger={['deleting', 'stuck', 'failed'].includes(
+                                                    index.status
+                                                )}>
+                                                {index.status}
+                                            </Pill>
+                                            {#if index.error}
+                                                <Button
+                                                    link
+                                                    on:click={(e) => {
+                                                        e.preventDefault();
+                                                        error = index.error;
+                                                        showFailed = true;
+                                                    }}>Details</Button>
+                                            {/if}
+                                        </div>
                                     {/if}
                                 </div>
                             </TableCell>
@@ -162,3 +176,5 @@
 {/if}
 
 <CreateAttribute bind:showCreate={showCreateAttribute} bind:selectedOption={selectedAttribute} />
+
+<FailedModal bind:show={showFailed} title="Create index" header="Creation failed" {error} />