diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
index 9c56d3d44..b27071f03 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
@@ -16,6 +16,7 @@
 
     const databaseId = $page.params.database;
 
+    let error: string;
     let key: string = null;
     let types = [
         { value: 'key', label: 'Key' },
@@ -46,52 +47,42 @@
         key = null;
     }
     const created = async () => {
-        if (selectedAttribute && selectedOrder) {
-            attributeList.push({ value: selectedAttribute, order: selectedOrder });
-            selectedAttribute = selectedOrder = '';
-        }
-        try {
-            await sdkForProject.databases.createIndex(
-                databaseId,
-                $collection.$id,
-                key,
-                selectedType,
-                attributeList.map((a) => a.value),
-                attributeList.map((a) => a.order)
-            );
-            invalidate(Dependencies.COLLECTION);
-            addNotification({
-                message: 'Index has been created',
-                type: 'success'
-            });
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-        }
+        if (key && selectedAttribute && selectedOrder && selectedType) {
+            if (selectedAttribute && selectedOrder) {
+                attributeList.push({ value: selectedAttribute, order: selectedOrder });
+                selectedAttribute = selectedOrder = '';
+            }
+            try {
+                await sdkForProject.databases.createIndex(
+                    databaseId,
+                    $collection.$id,
+                    key,
+                    selectedType,
+                    attributeList.map((a) => a.value),
+                    attributeList.map((a) => a.order)
+                );
+                invalidate(Dependencies.COLLECTION);
+                addNotification({
+                    message: 'Index has been created',
+                    type: 'success'
+                });
+            } catch (error) {
+                addNotification({
+                    message: error.message,
+                    type: 'error'
+                });
+            }
 
-        showCreateIndex = false;
+            showCreateIndex = false;
+        } else error = 'All fields are required';
     };
 </script>
 
-<Modal size="big" on:submit={created} bind:show={showCreateIndex}>
+<Modal bind:error size="big" on:submit={created} bind:show={showCreateIndex}>
     <svelte:fragment slot="header">Create Index</svelte:fragment>
     <FormList>
-        <InputText
-            id="key"
-            label="Index Key"
-            placeholder="Enter Key"
-            bind:value={key}
-            autofocus
-            required />
-        <InputSelect
-            options={types}
-            id="type"
-            label="Index type"
-            placeholder="Select type"
-            bind:value={selectedType}
-            required />
+        <InputText id="key" label="Index Key" placeholder="Enter Key" bind:value={key} autofocus />
+        <InputSelect options={types} id="type" label="Index type" bind:value={selectedType} />
 
         {#if attributeList?.length}
             {#each attributeList as index, i}
@@ -137,12 +128,8 @@
         {/if}
         {#if !attributeList?.length || newAttr}
             <li class="form-item is-multiple">
-                <div class="form-item-part u-stretch">
-                    <Select
-                        id="attribute"
-                        label="Attribute"
-                        required
-                        bind:value={selectedAttribute}>
+                <div class="form-item-part u-stretch" style="align-items: flex-start;">
+                    <Select id="attribute" label="Attribute" bind:value={selectedAttribute}>
                         <option value="" disabled selected hidden>Select Attribute</option>
 
                         <optgroup label="Internal">
@@ -162,14 +149,13 @@
                     </Select>
                 </div>
                 <div class="form-item-part u-stretch">
-                    <Select id="order" label="Order" required bind:value={selectedOrder}>
+                    <Select id="order" label="Order" bind:value={selectedOrder}>
                         <option value="" disabled selected hidden>Select Order</option>
 
                         <option value="ASC"> ASC </option>
                         <option value="DESC"> DESC </option>
                     </Select>
                 </div>
-
                 <div class="form-item-part u-cross-child-end">
                     <Button
                         text
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/select.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/select.svelte
index 189da2d41..05344c804 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/select.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/select.svelte
@@ -11,7 +11,6 @@
     let error: string;
 
     const handleInvalid = (event: Event) => {
-        console.log('test');
         event.preventDefault();
 
         if (element.validity.valueMissing) {
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
index 608c40122..7768b0a5d 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
@@ -385,7 +385,7 @@
             <CardGrid>
                 <Heading tag="h6" size="7">Update Allowed File Extensions</Heading>
                 <p>
-                    A maxiumum of 100 file extensions can be added. Leave blank to allow all file
+                    A maximum of 100 file extensions can be added. Leave blank to allow all file
                     types.
                 </p>
                 <svelte:fragment slot="aside">