diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index 7d728dcdb..b7a00370a 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -245,7 +245,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={create} size="big">
+<Modal bind:show onSubmit={create} size="big">
     <svelte:fragment slot="header">Create Event</svelte:fragment>
     <slot />
     <div>
diff --git a/src/lib/components/feedbackGeneral.svelte b/src/lib/components/feedbackGeneral.svelte
index fc380d0b1..aa9bdc42f 100644
--- a/src/lib/components/feedbackGeneral.svelte
+++ b/src/lib/components/feedbackGeneral.svelte
@@ -51,7 +51,7 @@
         Your feedback is important to us. Please be honest and tell us what you think.
     </div>
 
-    <Form on:submit={handleSubmit}>
+    <Form onSubmit={handleSubmit}>
         <FormList>
             <InputText
                 label="name"
diff --git a/src/lib/components/feedbackNPS.svelte b/src/lib/components/feedbackNPS.svelte
index 19f42e254..b2fde4e81 100644
--- a/src/lib/components/feedbackNPS.svelte
+++ b/src/lib/components/feedbackNPS.svelte
@@ -49,7 +49,7 @@
         think.
     </div>
 
-    <Form on:submit={handleSubmit}>
+    <Form onSubmit={handleSubmit}>
         <Evaluation bind:value>
             How likely are you to recommend Appwrite to a friend or colleague?
         </Evaluation>
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 8e38955ab..7f70c5842 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -2,12 +2,16 @@
     import { createEventDispatcher, onDestroy, onMount } from 'svelte';
     import { Alert } from '$lib/components';
     import { trackEvent } from '$lib/actions/analytics';
+    import { Form } from '$lib/elements/forms';
 
     export let show = false;
     export let size: 'small' | 'big' = null;
     export let warning = false;
     export let error: string = null;
     export let closable = true;
+    export let onSubmit: () => Promise<void> | void = function () {
+        return;
+    };
 
     let dialog: HTMLDialogElement;
     let alert: HTMLElement;
@@ -77,8 +81,7 @@
     class:is-big={size === 'big'}
     bind:this={dialog}>
     {#if show}
-        <!-- svelte-ignore a11y-no-redundant-roles -->
-        <form class="modal-form" role="form" on:submit|preventDefault>
+        <Form isModal {onSubmit}>
             <header class="modal-header">
                 {#if warning}
                     <div class="avatar is-warning is-medium">
@@ -127,6 +130,6 @@
                     </div>
                 </div>
             {/if}
-        </form>
+        </Form>
     {/if}
 </dialog>
diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
index aecd66068..19fed216d 100644
--- a/src/lib/components/permissions/custom.svelte
+++ b/src/lib/components/permissions/custom.svelte
@@ -25,7 +25,7 @@
     $: disabled = !value || $groups.has(value);
 </script>
 
-<Modal bind:show on:close={reset} on:submit={create}>
+<Modal bind:show on:close={reset} onSubmit={create}>
     <svelte:fragment slot="header">Custom permission</svelte:fragment>
     <p class="text">
         Custom permissions allow you to grant access to specific users or teams using their ID and
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index d8d636401..c9e36f269 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -58,7 +58,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={create} on:close={reset} size="big">
+<Modal bind:show onSubmit={create} on:close={reset} size="big">
     <svelte:fragment slot="header">Select teams</svelte:fragment>
     <p class="text">
         Grant access to any member of a specific team. To grant access to team members with specific
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index d5468b47d..b6d5fd9f9 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -58,7 +58,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={create} on:close={reset} size="big">
+<Modal bind:show onSubmit={create} on:close={reset} size="big">
     <svelte:fragment slot="header">Select users</svelte:fragment>
     <p class="text">Grant access to any authenticated or anonymous user.</p>
     <InputSearch
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 9ae04c1ad..9dd6da750 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -122,7 +122,7 @@
         {/if}
     </div>
     <div class="wizard-main">
-        <Form noStyle on:submit={submit}>
+        <Form noStyle onSubmit={submit}>
             {#each sortedSteps as [step, { component }]}
                 {#if currentStep === step}
                     <svelte:component this={component} />
diff --git a/src/lib/layout/wizardExitModal.svelte b/src/lib/layout/wizardExitModal.svelte
index 8f29e59d9..6019a5898 100644
--- a/src/lib/layout/wizardExitModal.svelte
+++ b/src/lib/layout/wizardExitModal.svelte
@@ -11,7 +11,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={handleSubmit} warning>
+<Modal bind:show onSubmit={handleSubmit} warning>
     <svelte:fragment slot="header">Exit Process</svelte:fragment>
     <p>
         Are you sure you want to exit from <slot />? All data will be deleted. This action is
diff --git a/src/routes/console/account/+page.svelte b/src/routes/console/account/+page.svelte
index b94dc86cc..6b6626efa 100644
--- a/src/routes/console/account/+page.svelte
+++ b/src/routes/console/account/+page.svelte
@@ -27,7 +27,7 @@
     async function updateName() {
         try {
             await sdkForConsole.account.updateName(name);
-            invalidate(Dependencies.ACCOUNT);
+            await invalidate(Dependencies.ACCOUNT);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
@@ -79,7 +79,7 @@
 </script>
 
 <Container>
-    <Form on:submit={updateName}>
+    <Form onSubmit={updateName}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Name</Heading>
 
@@ -94,7 +94,7 @@
             </svelte:fragment>
         </CardGrid>
     </Form>
-    <Form on:submit={updateEmail}>
+    <Form onSubmit={updateEmail}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Email</Heading>
 
@@ -122,7 +122,7 @@
             </svelte:fragment>
         </CardGrid>
     </Form>
-    <Form on:submit={updatePassword}>
+    <Form onSubmit={updatePassword}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Password</Heading>
             <p class="text">
diff --git a/src/routes/console/account/delete.svelte b/src/routes/console/account/delete.svelte
index cf981d4e9..0395f969d 100644
--- a/src/routes/console/account/delete.svelte
+++ b/src/routes/console/account/delete.svelte
@@ -29,7 +29,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteAccount} warning>
+<Modal bind:show={showDelete} onSubmit={deleteAccount} warning>
     <svelte:fragment slot="header">Delete Account</svelte:fragment>
     <p>Are you sure you want to delete your account?</p>
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/createOrganization.svelte b/src/routes/console/createOrganization.svelte
index 6fc75f52b..4dd322553 100644
--- a/src/routes/console/createOrganization.svelte
+++ b/src/routes/console/createOrganization.svelte
@@ -42,7 +42,7 @@
     };
 </script>
 
-<Modal {error} on:submit={create} size="big" bind:show>
+<Modal {error} onSubmit={create} size="big" bind:show>
     <svelte:fragment slot="header">Create New Organization</svelte:fragment>
     <FormList>
         <InputText
diff --git a/src/routes/console/onboarding/+page.svelte b/src/routes/console/onboarding/+page.svelte
index 83a4f8063..6d3c5e686 100644
--- a/src/routes/console/onboarding/+page.svelte
+++ b/src/routes/console/onboarding/+page.svelte
@@ -50,7 +50,7 @@
 
 <Container overlapCover size="large">
     <Card>
-        <Form on:submit={createProject}>
+        <Form onSubmit={createProject}>
             <FormList>
                 <InputText
                     id="name"
diff --git a/src/routes/console/organization-[organization]/createMember.svelte b/src/routes/console/organization-[organization]/createMember.svelte
index 1fec569ce..b700626c6 100644
--- a/src/routes/console/organization-[organization]/createMember.svelte
+++ b/src/routes/console/organization-[organization]/createMember.svelte
@@ -47,7 +47,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} on:submit={create}>
+<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Invite Member</svelte:fragment>
     <FormList>
         <InputEmail
diff --git a/src/routes/console/organization-[organization]/createProject.svelte b/src/routes/console/organization-[organization]/createProject.svelte
index 288692efd..3b66bd3f4 100644
--- a/src/routes/console/organization-[organization]/createProject.svelte
+++ b/src/routes/console/organization-[organization]/createProject.svelte
@@ -47,7 +47,7 @@
     }
 </script>
 
-<Modal {error} on:submit={create} size="big" bind:show>
+<Modal {error} onSubmit={create} size="big" bind:show>
     <svelte:fragment slot="header">Create Project</svelte:fragment>
     <FormList>
         <InputText
diff --git a/src/routes/console/organization-[organization]/deleteMember.svelte b/src/routes/console/organization-[organization]/deleteMember.svelte
index 59ea94346..f1765ab24 100644
--- a/src/routes/console/organization-[organization]/deleteMember.svelte
+++ b/src/routes/console/organization-[organization]/deleteMember.svelte
@@ -43,7 +43,7 @@
     $: isUser = selectedMember?.userId === $user?.$id;
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteMembership} warning>
+<Modal bind:show={showDelete} onSubmit={deleteMembership} warning>
     <svelte:fragment slot="header">
         {isUser ? 'Leave Organization' : 'Delete Member'}
     </svelte:fragment>
diff --git a/src/routes/console/organization-[organization]/deleteOrganization.svelte b/src/routes/console/organization-[organization]/deleteOrganization.svelte
index a6dc3f020..c9d1d3360 100644
--- a/src/routes/console/organization-[organization]/deleteOrganization.svelte
+++ b/src/routes/console/organization-[organization]/deleteOrganization.svelte
@@ -37,7 +37,7 @@
     };
 </script>
 
-<Modal on:submit={deleteOrg} bind:show={showDelete} warning>
+<Modal onSubmit={deleteOrg} bind:show={showDelete} warning>
     <svelte:fragment slot="header">Delete Organization</svelte:fragment>
     <p>
         Are you sure you want to delete <b>{$organization.name}</b>? All projects ({$organization.total})
diff --git a/src/routes/console/organization-[organization]/settings/+page.svelte b/src/routes/console/organization-[organization]/settings/+page.svelte
index 0af80131b..0bf76f7c7 100644
--- a/src/routes/console/organization-[organization]/settings/+page.svelte
+++ b/src/routes/console/organization-[organization]/settings/+page.svelte
@@ -41,7 +41,7 @@
 
 <Container>
     {#if $organization}
-        <Form on:submit={updateName}>
+        <Form onSubmit={updateName}>
             <CardGrid>
                 <Heading tag="h6" size="7">Update Name</Heading>
 
diff --git a/src/routes/console/project-[project]/auth/appleOAuth.svelte b/src/routes/console/project-[project]/auth/appleOAuth.svelte
index d741025cc..cec9ca497 100644
--- a/src/routes/console/project-[project]/auth/appleOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/appleOAuth.svelte
@@ -57,7 +57,7 @@
     $: secret = keyID && teamID && p8 ? JSON.stringify({ keyID, teamID, p8 }) : provider.secret;
 </script>
 
-<Modal {error} on:submit={update} size="big" show on:close>
+<Modal {error} onSubmit={update} size="big" show on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
diff --git a/src/routes/console/project-[project]/auth/auth0OAuth.svelte b/src/routes/console/project-[project]/auth/auth0OAuth.svelte
index a8a190cda..43a2eb6f7 100644
--- a/src/routes/console/project-[project]/auth/auth0OAuth.svelte
+++ b/src/routes/console/project-[project]/auth/auth0OAuth.svelte
@@ -58,7 +58,7 @@
             : provider.secret;
 </script>
 
-<Modal {error} size="big" show on:submit={update} on:close>
+<Modal {error} size="big" show onSubmit={update} on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
diff --git a/src/routes/console/project-[project]/auth/authentikOAuth.svelte b/src/routes/console/project-[project]/auth/authentikOAuth.svelte
index fa6929b10..32c2cce20 100644
--- a/src/routes/console/project-[project]/auth/authentikOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/authentikOAuth.svelte
@@ -58,7 +58,7 @@
             : provider.secret;
 </script>
 
-<Modal {error} size="big" show on:submit={update} on:close>
+<Modal {error} size="big" show onSubmit={update} on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
diff --git a/src/routes/console/project-[project]/auth/createTeam.svelte b/src/routes/console/project-[project]/auth/createTeam.svelte
index 73a109d13..060dc3d6e 100644
--- a/src/routes/console/project-[project]/auth/createTeam.svelte
+++ b/src/routes/console/project-[project]/auth/createTeam.svelte
@@ -41,7 +41,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} on:submit={create}>
+<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Create Team</svelte:fragment>
     <FormList>
         <InputText
diff --git a/src/routes/console/project-[project]/auth/createUser.svelte b/src/routes/console/project-[project]/auth/createUser.svelte
index 13e4108a3..78fd0fe0b 100644
--- a/src/routes/console/project-[project]/auth/createUser.svelte
+++ b/src/routes/console/project-[project]/auth/createUser.svelte
@@ -58,7 +58,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} on:submit={create}>
+<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Create User</svelte:fragment>
     <FormList>
         <InputText
diff --git a/src/routes/console/project-[project]/auth/gitlabOAuth.svelte b/src/routes/console/project-[project]/auth/gitlabOAuth.svelte
index f01901f83..f11b3a02f 100644
--- a/src/routes/console/project-[project]/auth/gitlabOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/gitlabOAuth.svelte
@@ -56,7 +56,7 @@
         clientSecret && endpoint ? JSON.stringify({ clientSecret, endpoint }) : provider.secret;
 </script>
 
-<Modal {error} size="big" show on:submit={update} on:close>
+<Modal {error} size="big" show onSubmit={update} on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
diff --git a/src/routes/console/project-[project]/auth/mainOAuth.svelte b/src/routes/console/project-[project]/auth/mainOAuth.svelte
index 12b84ca97..361e7bc31 100644
--- a/src/routes/console/project-[project]/auth/mainOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/mainOAuth.svelte
@@ -54,7 +54,7 @@
     };
 </script>
 
-<Modal {error} size="big" show on:submit={update} on:close>
+<Modal {error} size="big" show onSubmit={update} on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
diff --git a/src/routes/console/project-[project]/auth/microsoftOAuth.svelte b/src/routes/console/project-[project]/auth/microsoftOAuth.svelte
index 41dc6f1b2..6e0738058 100644
--- a/src/routes/console/project-[project]/auth/microsoftOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/microsoftOAuth.svelte
@@ -57,7 +57,7 @@
         clientSecret && tenantID ? JSON.stringify({ clientSecret, tenantID }) : provider.secret;
 </script>
 
-<Modal {error} on:submit={update} size="big" show on:close>
+<Modal {error} onSubmit={update} size="big" show on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
diff --git a/src/routes/console/project-[project]/auth/oktaOAuth.svelte b/src/routes/console/project-[project]/auth/oktaOAuth.svelte
index 39e3a3c04..9e1be017f 100644
--- a/src/routes/console/project-[project]/auth/oktaOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/oktaOAuth.svelte
@@ -62,7 +62,7 @@
             : provider.secret;
 </script>
 
-<Modal {error} on:submit={update} size="big" show on:close>
+<Modal {error} onSubmit={update} size="big" show on:close>
     <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
diff --git a/src/routes/console/project-[project]/auth/security/updateSessionsLimit.svelte b/src/routes/console/project-[project]/auth/security/updateSessionsLimit.svelte
index 46e8e3f3d..959357043 100644
--- a/src/routes/console/project-[project]/auth/security/updateSessionsLimit.svelte
+++ b/src/routes/console/project-[project]/auth/security/updateSessionsLimit.svelte
@@ -29,7 +29,7 @@
     }
 </script>
 
-<Form on:submit={updateSessionsLimit}>
+<Form onSubmit={updateSessionsLimit}>
     <CardGrid>
         <Heading tag="h2" size="6">Sessions Limit</Heading>
         <p>Maximum number of active sessions allowed per user.</p>
diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/+page.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/+page.svelte
index 10dd00347..566bffc05 100644
--- a/src/routes/console/project-[project]/auth/teams/team-[team]/+page.svelte
+++ b/src/routes/console/project-[project]/auth/teams/team-[team]/+page.svelte
@@ -55,7 +55,7 @@
         </svelte:fragment>
     </CardGrid>
 
-    <Form on:submit={updateName}>
+    <Form onSubmit={updateName}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Name</Heading>
 
diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/createMembership.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/createMembership.svelte
index d7b50dfb1..583fd57e1 100644
--- a/src/routes/console/project-[project]/auth/teams/team-[team]/createMembership.svelte
+++ b/src/routes/console/project-[project]/auth/teams/team-[team]/createMembership.svelte
@@ -42,7 +42,7 @@
     };
 </script>
 
-<Modal {error} on:submit={create} size="big" bind:show={showCreate}>
+<Modal {error} onSubmit={create} size="big" bind:show={showCreate}>
     <svelte:fragment slot="header">Create Membership</svelte:fragment>
     <FormList>
         <InputEmail
diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/deleteMembership.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/deleteMembership.svelte
index fba85c1d2..23e7ecf7e 100644
--- a/src/routes/console/project-[project]/auth/teams/team-[team]/deleteMembership.svelte
+++ b/src/routes/console/project-[project]/auth/teams/team-[team]/deleteMembership.svelte
@@ -37,7 +37,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteMembership} warning>
+<Modal bind:show={showDelete} onSubmit={deleteMembership} warning>
     <svelte:fragment slot="header">Delete Member</svelte:fragment>
     <p data-private>
         Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
diff --git a/src/routes/console/project-[project]/auth/teams/team-[team]/deleteTeam.svelte b/src/routes/console/project-[project]/auth/teams/team-[team]/deleteTeam.svelte
index 95b6ad318..476967587 100644
--- a/src/routes/console/project-[project]/auth/teams/team-[team]/deleteTeam.svelte
+++ b/src/routes/console/project-[project]/auth/teams/team-[team]/deleteTeam.svelte
@@ -28,7 +28,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteTeam} warning>
+<Modal bind:show={showDelete} onSubmit={deleteTeam} warning>
     <svelte:fragment slot="header">Delete Team</svelte:fragment>
     <p data-private>
         Are you sure you want to delete <b>{team.name}</b>?
diff --git a/src/routes/console/project-[project]/auth/user-[user]/deleteAllSessions.svelte b/src/routes/console/project-[project]/auth/user-[user]/deleteAllSessions.svelte
index aa6e4b5b3..dae55e7d0 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/deleteAllSessions.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/deleteAllSessions.svelte
@@ -31,7 +31,7 @@
     };
 </script>
 
-<Modal bind:show={showDeleteAll} on:submit={deleteAllSessions} warning>
+<Modal bind:show={showDeleteAll} onSubmit={deleteAllSessions} warning>
     <svelte:fragment slot="header">Delete All Sessions</svelte:fragment>
     <p data-private>
         Are you sure you want to delete <b>all of {$user.name}'s sessions?</b>
diff --git a/src/routes/console/project-[project]/auth/user-[user]/deleteMembership.svelte b/src/routes/console/project-[project]/auth/user-[user]/deleteMembership.svelte
index 5df57af76..d0eb1b889 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/deleteMembership.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/deleteMembership.svelte
@@ -40,7 +40,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteMembership} warning>
+<Modal bind:show={showDelete} onSubmit={deleteMembership} warning>
     <svelte:fragment slot="header">Delete Member</svelte:fragment>
     {#if selectedMembership}
         <p data-private>
diff --git a/src/routes/console/project-[project]/auth/user-[user]/deleteSession.svelte b/src/routes/console/project-[project]/auth/user-[user]/deleteSession.svelte
index 72b97f33c..5e157257c 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/deleteSession.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/deleteSession.svelte
@@ -30,7 +30,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteSession} warning>
+<Modal bind:show={showDelete} onSubmit={deleteSession} warning>
     <svelte:fragment slot="header">Delete Sessions</svelte:fragment>
 
     <p>Are you sure you want to delete this session?</p>
diff --git a/src/routes/console/project-[project]/auth/user-[user]/deleteUser.svelte b/src/routes/console/project-[project]/auth/user-[user]/deleteUser.svelte
index c18f0d220..29d7baabb 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/deleteUser.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/deleteUser.svelte
@@ -32,7 +32,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteUser} warning>
+<Modal bind:show={showDelete} onSubmit={deleteUser} warning>
     <svelte:fragment slot="header">Delete User</svelte:fragment>
     <p data-private>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/project-[project]/auth/user-[user]/updateEmail.svelte b/src/routes/console/project-[project]/auth/user-[user]/updateEmail.svelte
index 893d7f726..654da9ad8 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/updateEmail.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/updateEmail.svelte
@@ -33,7 +33,7 @@
     }
 </script>
 
-<Form on:submit={updateEmail}>
+<Form onSubmit={updateEmail}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Email</Heading>
         <svelte:fragment slot="aside">
diff --git a/src/routes/console/project-[project]/auth/user-[user]/updateName.svelte b/src/routes/console/project-[project]/auth/user-[user]/updateName.svelte
index 2767d3027..4211a23c9 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/updateName.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/updateName.svelte
@@ -33,7 +33,7 @@
     }
 </script>
 
-<Form on:submit={updateName}>
+<Form onSubmit={updateName}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Name</Heading>
 
diff --git a/src/routes/console/project-[project]/auth/user-[user]/updatePassword.svelte b/src/routes/console/project-[project]/auth/user-[user]/updatePassword.svelte
index 9a21b40da..5a4aad657 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/updatePassword.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/updatePassword.svelte
@@ -27,7 +27,7 @@
     }
 </script>
 
-<Form on:submit={updatePassword}>
+<Form onSubmit={updatePassword}>
     <CardGrid>
         <div>
             <Heading tag="h6" size="7">Update Password</Heading>
diff --git a/src/routes/console/project-[project]/auth/user-[user]/updatePhone.svelte b/src/routes/console/project-[project]/auth/user-[user]/updatePhone.svelte
index de0cb9584..d59740972 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/updatePhone.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/updatePhone.svelte
@@ -33,7 +33,7 @@
     }
 </script>
 
-<Form on:submit={updatePhone}>
+<Form onSubmit={updatePhone}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Phone</Heading>
         <svelte:fragment slot="aside">
diff --git a/src/routes/console/project-[project]/auth/user-[user]/updatePrefs.svelte b/src/routes/console/project-[project]/auth/user-[user]/updatePrefs.svelte
index 5b2bd623c..1e308507d 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/updatePrefs.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/updatePrefs.svelte
@@ -54,7 +54,7 @@
     }
 </script>
 
-<Form on:submit={updatePrefs}>
+<Form onSubmit={updatePrefs}>
     <CardGrid>
         <Heading tag="h6" size="7">User Preferences</Heading>
         <p>
diff --git a/src/routes/console/project-[project]/databases/create.svelte b/src/routes/console/project-[project]/databases/create.svelte
index 237ed836a..80c4db644 100644
--- a/src/routes/console/project-[project]/databases/create.svelte
+++ b/src/routes/console/project-[project]/databases/create.svelte
@@ -39,7 +39,7 @@
     };
 </script>
 
-<Modal size="big" on:submit={create} bind:show={showCreate}>
+<Modal size="big" onSubmit={create} bind:show={showCreate}>
     <svelte:fragment slot="header">Create Database</svelte:fragment>
     <FormList>
         <InputText
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
index 78549e536..d005c19ee 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
@@ -42,7 +42,7 @@
     };
 </script>
 
-<Modal warning={true} bind:show={showDelete} on:submit={handleDelete}>
+<Modal warning={true} bind:show={showDelete} onSubmit={handleDelete}>
     <svelte:fragment slot="header">Delete Attribute</svelte:fragment>
     <p data-private>
         Are you sure you want to delete <b>'{selectedAttribute?.key}' from {$collection?.name}</b>?
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
index 197ade1ff..6b7d0039c 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
@@ -62,7 +62,7 @@
     }
 </script>
 
-<Modal size="big" bind:show={showCreate} on:submit={submit}>
+<Modal size="big" bind:show={showCreate} onSubmit={submit}>
     <svelte:fragment slot="header">Create Attribute</svelte:fragment>
     <FormList>
         <div>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
index 692265075..84a4dede0 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/delete.svelte
@@ -39,7 +39,7 @@
     };
 </script>
 
-<Modal warning={true} on:submit={handleDelete} bind:show={showDelete}>
+<Modal warning={true} onSubmit={handleDelete} bind:show={showDelete}>
     <svelte:fragment slot="header">Delete Document</svelte:fragment>
 
     <p data-private>
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 604f85a58..4c4d7ede6 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
@@ -101,7 +101,7 @@
     }
 </script>
 
-<Modal bind:error size="big" on:submit={create} bind:show={showCreateIndex}>
+<Modal bind:error size="big" onSubmit={create} 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 />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
index a8c97dd1d..1cb8fbcc6 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
@@ -39,7 +39,7 @@
     };
 </script>
 
-<Modal warning={true} on:submit={handleDelete} bind:show={showDelete}>
+<Modal warning={true} onSubmit={handleDelete} bind:show={showDelete}>
     <svelte:fragment slot="header">Delete Index</svelte:fragment>
 
     <p data-private>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
index bdd85c1f9..fed6e6f31 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte
@@ -35,7 +35,7 @@
     };
 </script>
 
-<Modal warning={true} bind:show={showDelete} on:submit={handleDelete}>
+<Modal warning={true} bind:show={showDelete} onSubmit={handleDelete}>
     <svelte:fragment slot="header">Delete Collection</svelte:fragment>
 
     <p data-private>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updateName.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updateName.svelte
index 24ccc1199..e54293597 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updateName.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updateName.svelte
@@ -44,7 +44,7 @@
     }
 </script>
 
-<Form on:submit={updateName}>
+<Form onSubmit={updateName}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Name</Heading>
 
diff --git a/src/routes/console/project-[project]/databases/database-[database]/create.svelte b/src/routes/console/project-[project]/databases/database-[database]/create.svelte
index 32c4bfa2c..a15dcd145 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/create.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/create.svelte
@@ -46,7 +46,7 @@
     };
 </script>
 
-<Modal size="big" bind:show={showCreate} on:submit={create}>
+<Modal size="big" bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Create Collection</svelte:fragment>
     <FormList>
         <InputText
diff --git a/src/routes/console/project-[project]/databases/database-[database]/delete.svelte b/src/routes/console/project-[project]/databases/database-[database]/delete.svelte
index 39e2eb727..a15489b7d 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/delete.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/delete.svelte
@@ -32,7 +32,7 @@
     };
 </script>
 
-<Modal warning={true} bind:show={showDelete} on:submit={handleDelete}>
+<Modal warning={true} bind:show={showDelete} onSubmit={handleDelete}>
     <svelte:fragment slot="header">Delete Database</svelte:fragment>
     <p class="text" data-private>
         Are you sure you want to delete <b>{$database.name}</b>?
diff --git a/src/routes/console/project-[project]/functions/createVariable.svelte b/src/routes/console/project-[project]/functions/createVariable.svelte
index bbedb5fbc..5287955b8 100644
--- a/src/routes/console/project-[project]/functions/createVariable.svelte
+++ b/src/routes/console/project-[project]/functions/createVariable.svelte
@@ -31,7 +31,7 @@
     }
 </script>
 
-<Modal bind:show={showCreate} on:submit={handleVariable} size="big">
+<Modal bind:show={showCreate} onSubmit={handleVariable} size="big">
     <svelte:fragment slot="header">
         {selectedVar ? 'Update' : 'Create'} Variable
     </svelte:fragment>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/activate.svelte b/src/routes/console/project-[project]/functions/function-[function]/activate.svelte
index 8a20db834..136d7a473 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/activate.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/activate.svelte
@@ -35,7 +35,7 @@
     };
 </script>
 
-<Modal bind:show={showActivate} on:submit={handleSubmit}>
+<Modal bind:show={showActivate} onSubmit={handleSubmit}>
     <svelte:fragment slot="header">Activate Deployment</svelte:fragment>
     <p>Are you sure you want to activate this deployment?</p>
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/project-[project]/functions/function-[function]/create.svelte b/src/routes/console/project-[project]/functions/function-[function]/create.svelte
index 19dbe82fd..1290f3a16 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/create.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/create.svelte
@@ -133,7 +133,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} on:submit={create}>
+<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Create Deployment</svelte:fragment>
     <Tabs>
         <Tab on:click={() => (mode = Mode.CLI)} selected={mode === Mode.CLI} event="deploy_cli">
diff --git a/src/routes/console/project-[project]/functions/function-[function]/delete.svelte b/src/routes/console/project-[project]/functions/function-[function]/delete.svelte
index eb0a3f757..b31cd5c3e 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/delete.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/delete.svelte
@@ -34,7 +34,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={handleSubmit} warning>
+<Modal bind:show={showDelete} onSubmit={handleSubmit} warning>
     <svelte:fragment slot="header">Delete Deployment</svelte:fragment>
     <p data-private>Are you sure you want to delete this deployment?</p>
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/project-[project]/functions/function-[function]/execute.svelte b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
index bccdbdd5f..cf20c83f5 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
@@ -63,7 +63,7 @@
     afterNavigate(close);
 </script>
 
-<Modal bind:show size="big" on:submit={handleSubmit} on:close={close}>
+<Modal bind:show size="big" onSubmit={handleSubmit} on:close={close}>
     <svelte:fragment slot="header">Execute Function</svelte:fragment>
     <FormList>
         <InputTextarea bind:value={data} id="data" label="Custom data (optional)" />
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
index 6d33d6d85..1cd71a9a7 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
@@ -282,7 +282,7 @@
         </svelte:fragment>
     </CardGrid>
 
-    <Form on:submit={updateName}>
+    <Form onSubmit={updateName}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Name</Heading>
 
@@ -305,7 +305,7 @@
         </CardGrid>
     </Form>
 
-    <Form on:submit={updatePermissions}>
+    <Form onSubmit={updatePermissions}>
         <CardGrid>
             <Heading tag="h6" size="7">Execute Access</Heading>
             <p>
@@ -330,7 +330,7 @@
 
     <UpdateEvents />
 
-    <Form on:submit={updateSchedule}>
+    <Form onSubmit={updateSchedule}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Schedule</Heading>
             <p>
@@ -452,7 +452,7 @@
         </svelte:fragment>
     </CardGrid>
 
-    <Form on:submit={updateTimeout}>
+    <Form onSubmit={updateTimeout}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Timeout</Heading>
             <p>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/delete.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/delete.svelte
index 9771c4592..b97272799 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/delete.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/delete.svelte
@@ -31,7 +31,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={handleSubmit} warning>
+<Modal bind:show={showDelete} onSubmit={handleSubmit} warning>
     <svelte:fragment slot="header">Delete Function</svelte:fragment>
     <p data-private>
         Are you sure you want to delete this function and all associated deployments from your
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/updateEvents.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/updateEvents.svelte
index 8e325d085..3817c833f 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/updateEvents.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/updateEvents.svelte
@@ -76,7 +76,7 @@
     }
 </script>
 
-<Form on:submit={updateEvents}>
+<Form onSubmit={updateEvents}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Events</Heading>
         <p>Set the events that will trigger your function. Maximum 100 events allowed.</p>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
index 5c6122235..bf116703f 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/uploadVariables.svelte
@@ -59,7 +59,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={handleSubmit}>
+<Modal bind:show onSubmit={handleSubmit}>
     <svelte:fragment slot="header">Upload Variables</svelte:fragment>
     <p>
         Upload multiple variables via a .env file that will be passed to your function at runtime.
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
index f79064632..e1c322037 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
@@ -103,7 +103,7 @@
         </svelte:fragment>
     </CardGrid>
 
-    <Form on:submit={updateName}>
+    <Form onSubmit={updateName}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Name</Heading>
             <p class="text">Choose any name that will help you distinguish between API keys.</p>
@@ -123,7 +123,7 @@
             </svelte:fragment>
         </CardGrid>
     </Form>
-    <Form on:submit={updateScopes}>
+    <Form onSubmit={updateScopes}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Scopes</Heading>
             <p class="text">
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/delete.svelte b/src/routes/console/project-[project]/overview/keys/[key]/delete.svelte
index c85542144..db36c2ecb 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/delete.svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/delete.svelte
@@ -33,7 +33,7 @@
     }
 </script>
 
-<Modal bind:show={showDelete} on:submit={handleDelete} warning>
+<Modal bind:show={showDelete} onSubmit={handleDelete} warning>
     <svelte:fragment slot="header">Delete API Key</svelte:fragment>
     <p>The API Key will be permanently deleted. This action is irreversible.</p>
 
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte b/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
index 427da9b0c..376ada2a4 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
@@ -43,7 +43,7 @@
     $: isExpired = !alertsDismissed && $key.expire !== null && new Date($key.expire) < new Date();
 </script>
 
-<Form on:submit={updateExpire}>
+<Form onSubmit={updateExpire}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Expiration Date</Heading>
         <p class="text">Set a date after which your API Key will expire.</p>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
index a4fb03c7d..0bcf53dcd 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
@@ -76,7 +76,7 @@
 </script>
 
 <Container>
-    <Form on:submit={updateName}>
+    <Form onSubmit={updateName}>
         <CardGrid>
             <Heading tag="h6" size="7">Update Name</Heading>
             <p class="text">Choose any name that will help you distinguish between platforms.</p>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte
index 17a744d99..207940e05 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/android.svelte
@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Package Name</Heading>
         <p class="text">
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte
index b2a963913..1c2d982d9 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte
@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
index 0c860ad94..a53dd7d92 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
index 7d1f768f4..f4707d62c 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
index 32bc6ea1b..e8424ed46 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
index e467b3680..8966eee16 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
@@ -33,7 +33,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={handleDelete} warning>
+<Modal bind:show={showDelete} onSubmit={handleDelete} warning>
     <svelte:fragment slot="header">Delete Platform</svelte:fragment>
     <p>The Platform will be permanently deleted. This action is irreversible.</p>
 
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
index 1cd14eca5..5a33b9f0f 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Package Name</Heading>
         <p class="text">
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
index 3b82d6e03..2a01c520d 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
index 6ee296789..3387418aa 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Package Name</Heading>
         <p class="text">Your application name.</p>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
index 9cdeb2ce9..c449148d1 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
index 975130b62..0a09a22ff 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
@@ -44,7 +44,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Package Name</Heading>
         <p class="text">Your application name.</p>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte
index 43546c5eb..7b62656c3 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte
@@ -39,7 +39,7 @@
     };
 </script>
 
-<Form on:submit={updateHostname}>
+<Form onSubmit={updateHostname}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Hostname</Heading>
         <p class="text">You can use * to allow wildcard hostnames or subdomains.</p>
diff --git a/src/routes/console/project-[project]/settings/+page.svelte b/src/routes/console/project-[project]/settings/+page.svelte
index 21fc98f7a..d260fba67 100644
--- a/src/routes/console/project-[project]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/settings/+page.svelte
@@ -82,7 +82,7 @@
 
 <Container>
     {#if $project}
-        <Form on:submit={updateName}>
+        <Form onSubmit={updateName}>
             <CardGrid>
                 <Heading tag="h6" size="7">API Credentials</Heading>
                 <p class="text">Access Appwrite services using your API Endpoint and Project ID.</p>
diff --git a/src/routes/console/project-[project]/settings/deleteProject.svelte b/src/routes/console/project-[project]/settings/deleteProject.svelte
index 8d8c311b8..dcb583139 100644
--- a/src/routes/console/project-[project]/settings/deleteProject.svelte
+++ b/src/routes/console/project-[project]/settings/deleteProject.svelte
@@ -33,7 +33,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={handleDelete} warning>
+<Modal bind:show={showDelete} onSubmit={handleDelete} warning>
     <svelte:fragment slot="header">Delete Project</svelte:fragment>
     <p>
         <b>This project will be deleted</b>, along with all of its metadata, stats, and other
diff --git a/src/routes/console/project-[project]/settings/domains/delete.svelte b/src/routes/console/project-[project]/settings/domains/delete.svelte
index 8bf7d436d..059eb5271 100644
--- a/src/routes/console/project-[project]/settings/domains/delete.svelte
+++ b/src/routes/console/project-[project]/settings/domains/delete.svelte
@@ -32,7 +32,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteDomain} warning>
+<Modal bind:show={showDelete} onSubmit={deleteDomain} warning>
     <svelte:fragment slot="header">Delete Domain</svelte:fragment>
     {#if selectedDomain}
         <p data-private>
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/delete.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/delete.svelte
index de503a24d..25898525b 100644
--- a/src/routes/console/project-[project]/settings/webhooks/[webhook]/delete.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/delete.svelte
@@ -33,7 +33,7 @@
     }
 </script>
 
-<Modal bind:show={showDelete} on:submit={handleDelete} warning>
+<Modal bind:show={showDelete} onSubmit={handleDelete} warning>
     <svelte:fragment slot="header">Delete Webhook</svelte:fragment>
     <p data-private>
         Are you sure you want to delete <b>{$webhook.name}</b> from '{$project.name}'?
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/regenerate.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/regenerate.svelte
index 6d350f0ac..e49b4f8fa 100644
--- a/src/routes/console/project-[project]/settings/webhooks/[webhook]/regenerate.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/regenerate.svelte
@@ -32,7 +32,7 @@
     }
 </script>
 
-<Modal bind:show on:submit={regenerate}>
+<Modal bind:show onSubmit={regenerate}>
     <svelte:fragment slot="header">Regenerate Key</svelte:fragment>
     <p class="u-text">
         Are you sure you want to generate a new Signature Key?
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateEvents.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateEvents.svelte
index 44aaa1a44..d19af0f34 100644
--- a/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateEvents.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateEvents.svelte
@@ -64,7 +64,7 @@
     }
 </script>
 
-<Form on:submit={updateEvents}>
+<Form onSubmit={updateEvents}>
     <CardGrid>
         <Heading tag="h6" size="7">Update Events</Heading>
         <p class="text">
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateName.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateName.svelte
index 89439f8e9..542683663 100644
--- a/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateName.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateName.svelte
@@ -45,7 +45,7 @@
     }
 </script>
 
-<Form on:submit={updateName}>
+<Form onSubmit={updateName}>
     <CardGrid>
         <Heading tag="h2" size="7">Update Name</Heading>
         <p>Choose any name that will help you distinguish between Webhooks.</p>
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateSecurity.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateSecurity.svelte
index 8fc343a53..818b35e79 100644
--- a/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateSecurity.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateSecurity.svelte
@@ -56,7 +56,7 @@
     }
 </script>
 
-<Form on:submit={updateSecurity}>
+<Form onSubmit={updateSecurity}>
     <CardGrid>
         <Heading tag="h2" size="7">Security</Heading>
         <p class="text">
diff --git a/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateURL.svelte b/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateURL.svelte
index 4ac8a8fb6..bbc963669 100644
--- a/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateURL.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/updateURL.svelte
@@ -45,7 +45,7 @@
     }
 </script>
 
-<Form on:submit={updateUrl}>
+<Form onSubmit={updateUrl}>
     <CardGrid>
         <Heading tag="h2" size="7">Update Url</Heading>
 
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
index 5bdc48bf3..84552b5de 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
@@ -48,7 +48,7 @@
     }
 </script>
 
-<Modal size="big" {error} bind:show={showCreate} on:submit={create}>
+<Modal size="big" {error} bind:show={showCreate} onSubmit={create}>
     <svelte:fragment slot="header">Create File</svelte:fragment>
     <FormList>
         <div>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/deleteBucket.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/deleteBucket.svelte
index 6f5e8dd4b..7c9d1eb78 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/deleteBucket.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/deleteBucket.svelte
@@ -31,7 +31,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteUser} warning>
+<Modal bind:show={showDelete} onSubmit={deleteUser} warning>
     <svelte:fragment slot="header">Delete Bucket</svelte:fragment>
     <p data-private>Are you sure you want to delete <b>{$bucket.name}</b>?</p>
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/deleteFile.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/deleteFile.svelte
index 8f06a2ba2..157f82466 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/deleteFile.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/deleteFile.svelte
@@ -32,7 +32,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteFile} warning>
+<Modal bind:show={showDelete} onSubmit={deleteFile} warning>
     <svelte:fragment slot="header">Delete File</svelte:fragment>
     <p data-private>Are you sure you want to delete <b>{file.name}</b>?</p>
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
index 0d349b410..fef38859d 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/deleteFile.svelte
@@ -33,7 +33,7 @@
     };
 </script>
 
-<Modal bind:show={showDelete} on:submit={deleteFile} warning>
+<Modal bind:show={showDelete} onSubmit={deleteFile} warning>
     <svelte:fragment slot="header">Delete File</svelte:fragment>
     <p data-private>Are you sure you want to delete <b>{$file.name}</b>?</p>
     <svelte:fragment slot="footer">
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 5cc6174a6..4890e6148 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
@@ -211,7 +211,7 @@
 
 <Container>
     {#if $bucket}
-        <Form on:submit={toggleBucket}>
+        <Form onSubmit={toggleBucket}>
             <CardGrid>
                 <Heading tag="h2" size="7">{$bucket.name}</Heading>
 
@@ -234,7 +234,7 @@
             </CardGrid>
         </Form>
 
-        <Form on:submit={updateName}>
+        <Form onSubmit={updateName}>
             <CardGrid>
                 <Heading tag="h6" size="7">Update Name</Heading>
                 <svelte:fragment slot="aside">
@@ -256,7 +256,7 @@
             </CardGrid>
         </Form>
 
-        <Form on:submit={updatePermissions}>
+        <Form onSubmit={updatePermissions}>
             <CardGrid>
                 <Heading tag="h6" size="7">Update Permissions</Heading>
                 <p class="text">
@@ -280,7 +280,7 @@
             </CardGrid>
         </Form>
 
-        <Form on:submit={updateFileSecurity}>
+        <Form onSubmit={updateFileSecurity}>
             <CardGrid>
                 <Heading tag="h6" size="7">Update File Security</Heading>
                 <svelte:fragment slot="aside">
@@ -308,7 +308,7 @@
             </CardGrid>
         </Form>
 
-        <Form on:submit={updateSecurity}>
+        <Form onSubmit={updateSecurity}>
             <CardGrid>
                 <Heading tag="h2" size="7">Update Security Settings</Heading>
                 <p class="text">
@@ -379,7 +379,7 @@
             </CardGrid>
         </Form>
 
-        <Form on:submit={updateCompression}>
+        <Form onSubmit={updateCompression}>
             <CardGrid>
                 <Heading tag="h2" size="6">Update Compression Algorithm</Heading>
                 <p class="text">
@@ -404,7 +404,7 @@
 
         <UpdateMaxFileSize />
 
-        <Form on:submit={updateAllowedExtensions}>
+        <Form onSubmit={updateAllowedExtensions}>
             <CardGrid>
                 <Heading tag="h6" size="7">Update Allowed File Extensions</Heading>
                 <p class="text">
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
index 4e6347186..0877b85b2 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
@@ -22,7 +22,7 @@
     }
 </script>
 
-<Form on:submit={updateMaxSize}>
+<Form onSubmit={updateMaxSize}>
     <CardGrid>
         <Heading tag="h2" size="6">Update Maximum File Size</Heading>
         <p class="text">Set the maximum file size allowed in the bucket.</p>
diff --git a/src/routes/console/project-[project]/storage/create.svelte b/src/routes/console/project-[project]/storage/create.svelte
index 586b90e2c..046e33ee1 100644
--- a/src/routes/console/project-[project]/storage/create.svelte
+++ b/src/routes/console/project-[project]/storage/create.svelte
@@ -45,7 +45,7 @@
     }
 </script>
 
-<Modal {error} on:submit={create} size="big" bind:show={showCreate}>
+<Modal {error} onSubmit={create} size="big" bind:show={showCreate}>
     <svelte:fragment slot="header">Create Bucket</svelte:fragment>
     <FormList>
         <InputText
diff --git a/src/routes/invite/+page.svelte b/src/routes/invite/+page.svelte
index 509eb7d3c..25e5ba47a 100644
--- a/src/routes/invite/+page.svelte
+++ b/src/routes/invite/+page.svelte
@@ -62,7 +62,7 @@
             </div>
         {:else}
             <p class="text">You have been invited to join a team project on Appwrite</p>
-            <Form on:submit={acceptInvite}>
+            <Form onSubmit={acceptInvite}>
                 <FormList>
                     <InputChoice
                         required
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index b2f488a90..611c88a13 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -46,7 +46,7 @@
 <Unauthenticated>
     <svelte:fragment slot="title">Sign in</svelte:fragment>
     <svelte:fragment>
-        <Form on:submit={login}>
+        <Form onSubmit={login}>
             <FormList>
                 <InputEmail
                     id="email"
diff --git a/src/routes/recover/+page.svelte b/src/routes/recover/+page.svelte
index 51871926f..b0e7a184f 100644
--- a/src/routes/recover/+page.svelte
+++ b/src/routes/recover/+page.svelte
@@ -70,7 +70,7 @@
     <svelte:fragment slot="title">Password Recovery</svelte:fragment>
     <svelte:fragment>
         {#if userId && secret}
-            <Form on:submit={setPassword}>
+            <Form onSubmit={setPassword}>
                 <FormList>
                     <InputPassword
                         label="New password"
@@ -94,7 +94,7 @@
                 </FormList>
             </Form>
         {:else}
-            <Form on:submit={recover}>
+            <Form onSubmit={recover}>
                 <FormList>
                     <InputEmail
                         id="email"
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 03657a94b..4845b451d 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -47,7 +47,7 @@
 <Unauthenticated>
     <svelte:fragment slot="title">Sign up</svelte:fragment>
     <svelte:fragment>
-        <Form on:submit={register}>
+        <Form onSubmit={register}>
             <FormList>
                 <InputText
                     id="name"
diff --git a/src/routes/register/invite/[slug]/+page.svelte b/src/routes/register/invite/[slug]/+page.svelte
index c781e3135..7188346df 100644
--- a/src/routes/register/invite/[slug]/+page.svelte
+++ b/src/routes/register/invite/[slug]/+page.svelte
@@ -94,7 +94,7 @@
 <Unauthenticated {imgLight} {imgDark}>
     <svelte:fragment slot="title">{title}</svelte:fragment>
     <svelte:fragment>
-        <Form on:submit={invite}>
+        <Form onSubmit={invite}>
             <FormList>
                 <InputText
                     id="name"