diff --git a/src/routes/console/project-[project]/databases/database-[database]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/settings/+page.svelte
index 2d07e248b..27ed87d77 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/settings/+page.svelte
@@ -4,7 +4,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Box, Card, CardGrid, Heading } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Helper, InputText } from '$lib/elements/forms';
+    import { Button, Form, Helper, InputText } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
@@ -61,31 +61,30 @@
             </div>
         </Card>
 
-        <CardGrid>
-            <Heading tag="h6" size="7">Update Name</Heading>
+        <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 database name"
-                        autocomplete={false}
-                        bind:value={databaseName} />
-                    {#if showError === 'name'}
-                        <Helper type={errorType}>{errorMessage}</Helper>
-                    {/if}
-                </ul>
-            </svelte:fragment>
+                <svelte:fragment slot="aside">
+                    <ul>
+                        <InputText
+                            id="name"
+                            label="Name"
+                            placeholder="Enter database name"
+                            autocomplete={false}
+                            bind:value={databaseName} />
+                        {#if showError === 'name'}
+                            <Helper type={errorType}>{errorMessage}</Helper>
+                        {/if}
+                    </ul>
+                </svelte:fragment>
 
-            <svelte:fragment slot="actions">
-                <Button
-                    disabled={databaseName === $database.name || !databaseName}
-                    on:click={() => {
-                        updateName();
-                    }}>Update</Button>
-            </svelte:fragment>
-        </CardGrid>
+                <svelte:fragment slot="actions">
+                    <Button disabled={databaseName === $database.name || !databaseName} submit
+                        >Update</Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
 
         <CardGrid danger>
             <div>