diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
index fd5a726c23..1b8adaa005 100644
--- a/src/lib/components/eventModal.svelte
+++ b/src/lib/components/eventModal.svelte
@@ -245,8 +245,7 @@
     }
 </script>
 
-<Modal bind:show onSubmit={create} size="big">
-    <svelte:fragment slot="header">Create event</svelte:fragment>
+<Modal title="Create event" bind:show onSubmit={create} size="big">
     <slot />
     <div>
         <p class="u-text">Choose a service</p>
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 5b4e58757b..636e713ca3 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -15,6 +15,8 @@
     export let onSubmit: (e: SubmitEvent) => Promise<void> | void = function () {
         return;
     };
+    export let title = '';
+    export let description = '';
 
     let dialog: HTMLDialogElement;
     let alert: HTMLElement;
@@ -102,8 +104,11 @@
                                 <span class={`icon-${icon}`} aria-hidden="true" />
                             </div>
                         {/if}
+
                         <h4 class="modal-title heading-level-5">
-                            <slot name="header" />
+                            <slot name="title">
+                                {title}
+                            </slot>
                         </h4>
                     </div>
                     {#if closable}
@@ -122,6 +127,11 @@
                         </button>
                     {/if}
                 </div>
+                <p>
+                    <slot name="description">
+                        {description}
+                    </slot>
+                </p>
             </header>
             <div class="modal-content">
                 {#if error}
diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
index 080d9aa933..3d2d366934 100644
--- a/src/lib/components/permissions/custom.svelte
+++ b/src/lib/components/permissions/custom.svelte
@@ -25,8 +25,7 @@
     $: disabled = !value || $groups.has(value);
 </script>
 
-<Modal bind:show on:close={reset} onSubmit={create}>
-    <svelte:fragment slot="header">Custom permission</svelte:fragment>
+<Modal title="Custom permission" bind:show on:close={reset} onSubmit={create}>
     <p class="text">
         Custom permissions allow you to grant access to specific users or teams using their ID and
         role.
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index fdd4c5e9c1..86209a6e51 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -61,8 +61,7 @@
     }
 </script>
 
-<Modal bind:show onSubmit={create} on:close={reset} size="big">
-    <svelte:fragment slot="header">Select teams</svelte:fragment>
+<Modal title="Select teams" bind:show onSubmit={create} on:close={reset} size="big">
     <p class="text">
         Grant access to any member of a specific team. To grant access to team members with specific
         roles, you will need to set a <button
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index 5835023b61..59f735b24e 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -61,8 +61,7 @@
     }
 </script>
 
-<Modal bind:show onSubmit={create} on:close={reset} size="big">
-    <svelte:fragment slot="header">Select users</svelte:fragment>
+<Modal title="Select users" bind:show onSubmit={create} on:close={reset} size="big">
     <p class="text">Grant access to any authenticated or anonymous user.</p>
     <InputSearch
         autofocus
diff --git a/src/lib/layout/wizardExitModal.svelte b/src/lib/layout/wizardExitModal.svelte
index 6211c9d637..c3221c2683 100644
--- a/src/lib/layout/wizardExitModal.svelte
+++ b/src/lib/layout/wizardExitModal.svelte
@@ -11,8 +11,7 @@
     }
 </script>
 
-<Modal bind:show onSubmit={handleSubmit} icon="exclamation" state="warning">
-    <svelte:fragment slot="header">Exit Process</svelte:fragment>
+<Modal title="Exit Process" bind:show onSubmit={handleSubmit} icon="exclamation" state="warning">
     <p>
         Are you sure you want to exit from <slot />? All data will be deleted. This action is
         irreversible.
diff --git a/src/lib/pages/domains/delete.svelte b/src/lib/pages/domains/delete.svelte
index 598620d4a8..3af92ff99e 100644
--- a/src/lib/pages/domains/delete.svelte
+++ b/src/lib/pages/domains/delete.svelte
@@ -33,12 +33,12 @@
 </script>
 
 <Modal
+    title="Delete domain"
     bind:show={showDelete}
     onSubmit={deleteDomain}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete domain</svelte:fragment>
     {#if selectedDomain}
         <p data-private>
             Are you sure you want to delete <b>{selectedDomain.domain}</b>? You will no longer be
diff --git a/src/lib/pages/domains/index.svelte b/src/lib/pages/domains/index.svelte
index 196e15fb5a..07938c3e8d 100644
--- a/src/lib/pages/domains/index.svelte
+++ b/src/lib/pages/domains/index.svelte
@@ -187,7 +187,7 @@
 
 <Delete bind:showDelete bind:selectedDomain {dependency} />
 <Modal bind:show={showRetry} headerDivider={false} bind:error={retryError} size="big">
-    <svelte:fragment slot="header">
+    <svelte:fragment slot="title">
         Retry {$domain.status === 'unverfied' ? 'certificate generation' : 'verification'}
     </svelte:fragment>
     <Retry on:error={(e) => (retryError = e.detail)} />
diff --git a/src/routes/card/[uid]/+page.svelte b/src/routes/card/[uid]/+page.svelte
index dc6332a5c9..50097d1535 100644
--- a/src/routes/card/[uid]/+page.svelte
+++ b/src/routes/card/[uid]/+page.svelte
@@ -199,8 +199,7 @@
     </div>
 </div>
 
-<Modal bind:show={showEmbedCode}>
-    <svelte:fragment slot="header">Get Embed Code</svelte:fragment>
+<Modal title="Get Embed Code" bind:show={showEmbedCode}>
     <div class="u-overflow-hidden">
         <Code language="html" code={embedCode} noMargin />
     </div>
diff --git a/src/routes/console/account/delete.svelte b/src/routes/console/account/delete.svelte
index 7a5af67ca1..29e4f85b63 100644
--- a/src/routes/console/account/delete.svelte
+++ b/src/routes/console/account/delete.svelte
@@ -30,12 +30,12 @@
 </script>
 
 <Modal
+    title="Delete account"
     bind:show={showDelete}
     onSubmit={deleteAccount}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete account</svelte:fragment>
     <p>Are you sure you want to delete your account?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
diff --git a/src/routes/console/createOrganization.svelte b/src/routes/console/createOrganization.svelte
index 7988ab5439..d90866251d 100644
--- a/src/routes/console/createOrganization.svelte
+++ b/src/routes/console/createOrganization.svelte
@@ -42,8 +42,7 @@
     }
 </script>
 
-<Modal {error} onSubmit={create} size="big" bind:show>
-    <svelte:fragment slot="header">Create new organization</svelte:fragment>
+<Modal title="Create new organization" {error} onSubmit={create} size="big" bind:show>
     <FormList>
         <InputText
             id="organization-name"
diff --git a/src/routes/console/organization-[organization]/createMember.svelte b/src/routes/console/organization-[organization]/createMember.svelte
index c32f67cbc5..669d7fafa2 100644
--- a/src/routes/console/organization-[organization]/createMember.svelte
+++ b/src/routes/console/organization-[organization]/createMember.svelte
@@ -49,8 +49,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
-    <svelte:fragment slot="header">Invite Member</svelte:fragment>
+<Modal title="Invite Member" {error} size="big" bind:show={showCreate} onSubmit={create}>
     <FormList>
         <InputEmail
             required
diff --git a/src/routes/console/organization-[organization]/createProject.svelte b/src/routes/console/organization-[organization]/createProject.svelte
index 14da1a00f0..4f9bf3fbc6 100644
--- a/src/routes/console/organization-[organization]/createProject.svelte
+++ b/src/routes/console/organization-[organization]/createProject.svelte
@@ -44,8 +44,7 @@
     }
 </script>
 
-<Modal {error} onSubmit={create} size="big" bind:show>
-    <svelte:fragment slot="header">Create project</svelte:fragment>
+<Modal title="Create project" {error} onSubmit={create} size="big" bind:show>
     <FormList>
         <InputText id="name" label="Name" bind:value={name} required autofocus={true} />
         {#if !showCustomId}
diff --git a/src/routes/console/organization-[organization]/deleteMember.svelte b/src/routes/console/organization-[organization]/deleteMember.svelte
index b1b5265d56..7c12dd1d13 100644
--- a/src/routes/console/organization-[organization]/deleteMember.svelte
+++ b/src/routes/console/organization-[organization]/deleteMember.svelte
@@ -49,7 +49,7 @@
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">
+    <svelte:fragment slot="title">
         {isUser ? 'Leave organization' : 'Delete member'}
     </svelte:fragment>
     <p data-private>
diff --git a/src/routes/console/organization-[organization]/deleteOrganization.svelte b/src/routes/console/organization-[organization]/deleteOrganization.svelte
index 49340ee6f8..427084cc0d 100644
--- a/src/routes/console/organization-[organization]/deleteOrganization.svelte
+++ b/src/routes/console/organization-[organization]/deleteOrganization.svelte
@@ -37,12 +37,12 @@
 </script>
 
 <Modal
+    title="Delete organization"
     onSubmit={deleteOrg}
     bind:show={showDelete}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete organization</svelte:fragment>
     <p>
         Are you sure you want to delete <b>{$organization.name}</b>? All projects ({$organization.total})
         and data associated with this organization will be deleted. This action is irreversible.
diff --git a/src/routes/console/project-[project]/auth/appleOAuth.svelte b/src/routes/console/project-[project]/auth/appleOAuth.svelte
index 850ae6721b..c14b2e5f7a 100644
--- a/src/routes/console/project-[project]/auth/appleOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/appleOAuth.svelte
@@ -38,7 +38,7 @@
 </script>
 
 <Modal {error} onSubmit={update} size="big" show on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
diff --git a/src/routes/console/project-[project]/auth/auth0OAuth.svelte b/src/routes/console/project-[project]/auth/auth0OAuth.svelte
index 52e46a6806..51a25c8344 100644
--- a/src/routes/console/project-[project]/auth/auth0OAuth.svelte
+++ b/src/routes/console/project-[project]/auth/auth0OAuth.svelte
@@ -39,7 +39,7 @@
 </script>
 
 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
diff --git a/src/routes/console/project-[project]/auth/authentikOAuth.svelte b/src/routes/console/project-[project]/auth/authentikOAuth.svelte
index e204be4e06..7df8877a51 100644
--- a/src/routes/console/project-[project]/auth/authentikOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/authentikOAuth.svelte
@@ -39,7 +39,7 @@
 </script>
 
 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
diff --git a/src/routes/console/project-[project]/auth/createTeam.svelte b/src/routes/console/project-[project]/auth/createTeam.svelte
index e049c907c5..65528f2c00 100644
--- a/src/routes/console/project-[project]/auth/createTeam.svelte
+++ b/src/routes/console/project-[project]/auth/createTeam.svelte
@@ -41,8 +41,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
-    <svelte:fragment slot="header">Create team</svelte:fragment>
+<Modal title="Create team" {error} size="big" bind:show={showCreate} onSubmit={create}>
     <FormList>
         <InputText
             id="name"
diff --git a/src/routes/console/project-[project]/auth/createUser.svelte b/src/routes/console/project-[project]/auth/createUser.svelte
index 6d4114112e..cd8e57a7f4 100644
--- a/src/routes/console/project-[project]/auth/createUser.svelte
+++ b/src/routes/console/project-[project]/auth/createUser.svelte
@@ -58,8 +58,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
-    <svelte:fragment slot="header">Create user</svelte:fragment>
+<Modal title="Create user" {error} size="big" bind:show={showCreate} onSubmit={create}>
     <FormList>
         <InputText
             id="name"
diff --git a/src/routes/console/project-[project]/auth/gitlabOAuth.svelte b/src/routes/console/project-[project]/auth/gitlabOAuth.svelte
index 510e4a5c60..e93d4ae8fe 100644
--- a/src/routes/console/project-[project]/auth/gitlabOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/gitlabOAuth.svelte
@@ -37,7 +37,7 @@
 </script>
 
 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
diff --git a/src/routes/console/project-[project]/auth/googleOAuth.svelte b/src/routes/console/project-[project]/auth/googleOAuth.svelte
index c8fd0390bc..c06c99b6f9 100644
--- a/src/routes/console/project-[project]/auth/googleOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/googleOAuth.svelte
@@ -35,7 +35,7 @@
 </script>
 
 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
diff --git a/src/routes/console/project-[project]/auth/mainOAuth.svelte b/src/routes/console/project-[project]/auth/mainOAuth.svelte
index 36d0aa89f2..f8c11649e0 100644
--- a/src/routes/console/project-[project]/auth/mainOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/mainOAuth.svelte
@@ -35,7 +35,7 @@
 </script>
 
 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
diff --git a/src/routes/console/project-[project]/auth/microsoftOAuth.svelte b/src/routes/console/project-[project]/auth/microsoftOAuth.svelte
index 10925962af..266713e8e9 100644
--- a/src/routes/console/project-[project]/auth/microsoftOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/microsoftOAuth.svelte
@@ -38,7 +38,7 @@
 </script>
 
 <Modal {error} onSubmit={update} size="big" show on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
diff --git a/src/routes/console/project-[project]/auth/oidcOAuth.svelte b/src/routes/console/project-[project]/auth/oidcOAuth.svelte
index 6fade4f7f5..719759e141 100644
--- a/src/routes/console/project-[project]/auth/oidcOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/oidcOAuth.svelte
@@ -61,7 +61,7 @@
 </script>
 
 <Modal {error} onSubmit={update} size="big" show on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
diff --git a/src/routes/console/project-[project]/auth/oktaOAuth.svelte b/src/routes/console/project-[project]/auth/oktaOAuth.svelte
index 548a99576f..b9e640f8d6 100644
--- a/src/routes/console/project-[project]/auth/oktaOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/oktaOAuth.svelte
@@ -43,7 +43,7 @@
 </script>
 
 <Modal {error} onSubmit={update} size="big" show on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
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 ba5b59902d..295910ba32 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
@@ -44,8 +44,7 @@
     }
 </script>
 
-<Modal {error} onSubmit={create} size="big" bind:show={showCreate}>
-    <svelte:fragment slot="header">Create membership</svelte:fragment>
+<Modal title="Create membership" {error} onSubmit={create} size="big" bind:show={showCreate}>
     <FormList>
         <InputEmail
             id="email"
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 358a41161c..42cca27aea 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
@@ -38,12 +38,12 @@
 </script>
 
 <Modal
+    title="Delete Member"
     bind:show={showDelete}
     onSubmit={deleteMembership}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <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}'?
     </p>
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 2fa2eb8197..e7eb30c85f 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
@@ -29,12 +29,12 @@
 </script>
 
 <Modal
+    title="Delete team"
     bind:show={showDelete}
     onSubmit={deleteTeam}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete team</svelte:fragment>
     <p data-private>
         Are you sure you want to delete <b>{team.name}</b>?
     </p>
diff --git a/src/routes/console/project-[project]/auth/templates/resetEmail.svelte b/src/routes/console/project-[project]/auth/templates/resetEmail.svelte
index 4e09434a6f..aa69592e26 100644
--- a/src/routes/console/project-[project]/auth/templates/resetEmail.svelte
+++ b/src/routes/console/project-[project]/auth/templates/resetEmail.svelte
@@ -45,7 +45,7 @@
     {error}
     bind:show
     headerDivider={false}>
-    <svelte:fragment slot="header">Reset Email Template?</svelte:fragment>
+    <svelte:fragment slot="title">Reset Email Template?</svelte:fragment>
     <p class="text">
         Are you sure you want to reset the email template?
         <b>Default values will be set in all inputs.</b>
diff --git a/src/routes/console/project-[project]/auth/templates/resetSms.svelte b/src/routes/console/project-[project]/auth/templates/resetSms.svelte
index 43f79b5724..ed91fd01bc 100644
--- a/src/routes/console/project-[project]/auth/templates/resetSms.svelte
+++ b/src/routes/console/project-[project]/auth/templates/resetSms.svelte
@@ -45,7 +45,7 @@
     {error}
     bind:show
     headerDivider={false}>
-    <svelte:fragment slot="header">Reset SMS Template?</svelte:fragment>
+    <svelte:fragment slot="title">Reset SMS Template?</svelte:fragment>
     <p class="text">
         Are you sure you want to reset the SMS template?
         <b>Default values will be set in all inputs.</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 9c52d2446e..adce57f4aa 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/deleteAllSessions.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/deleteAllSessions.svelte
@@ -32,12 +32,12 @@
 </script>
 
 <Modal
+    title="Delete all sessions"
     bind:show={showDeleteAll}
     onSubmit={deleteAllSessions}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <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>
     </p>
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 b127a62dff..b13ac80bcb 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/deleteMembership.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/deleteMembership.svelte
@@ -40,12 +40,12 @@
 </script>
 
 <Modal
+    title="Delete member"
     bind:show={showDelete}
     onSubmit={deleteMembership}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete member</svelte:fragment>
     {#if selectedMembership}
         <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/user-[user]/deleteSession.svelte b/src/routes/console/project-[project]/auth/user-[user]/deleteSession.svelte
index 5da825bb55..5e8474301b 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/deleteSession.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/deleteSession.svelte
@@ -32,13 +32,12 @@
 </script>
 
 <Modal
+    title="Delete sessions"
     bind:show={showDelete}
     onSubmit={deleteSession}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete sessions</svelte:fragment>
-
     <p>Are you sure you want to delete this session?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
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 9427d6631e..9b31482701 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/deleteUser.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/deleteUser.svelte
@@ -33,12 +33,12 @@
 </script>
 
 <Modal
+    title="Delete user"
     bind:show={showDelete}
     onSubmit={deleteUser}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <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">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
diff --git a/src/routes/console/project-[project]/createVariable.svelte b/src/routes/console/project-[project]/createVariable.svelte
index e7c80b6292..c637896b5f 100644
--- a/src/routes/console/project-[project]/createVariable.svelte
+++ b/src/routes/console/project-[project]/createVariable.svelte
@@ -35,8 +35,8 @@
     }
 </script>
 
-<Modal headerDivider={false} bind:show={showCreate} onSubmit={handleVariable} size="big">
-    <svelte:fragment slot="header">
+<Modal bind:show={showCreate} onSubmit={handleVariable} size="big">
+    <svelte:fragment slot="title">
         {selectedVar ? 'Update' : 'Create'}
         {isGlobal ? 'global' : 'environment'} variable
     </svelte:fragment>
diff --git a/src/routes/console/project-[project]/databases/create.svelte b/src/routes/console/project-[project]/databases/create.svelte
index 00aedcd506..8e08fa2a23 100644
--- a/src/routes/console/project-[project]/databases/create.svelte
+++ b/src/routes/console/project-[project]/databases/create.svelte
@@ -39,8 +39,7 @@
     };
 </script>
 
-<Modal size="big" onSubmit={create} bind:show={showCreate}>
-    <svelte:fragment slot="header">Create database</svelte:fragment>
+<Modal title="Create database" size="big" onSubmit={create} bind:show={showCreate}>
     <FormList>
         <InputText
             id="name"
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte
index 264eaf6eea..8b32cbe101 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/(filters)/filters.svelte
@@ -62,8 +62,11 @@
         {/if}
     </Button>
 
-    <Modal bind:show={showFiltersMobile} size="big">
-        <svelte:fragment slot="header">Filters</svelte:fragment>
+    <Modal
+        title="Filters"
+        description="Apply filter rules to refine the table view"
+        bind:show={showFiltersMobile}
+        size="big">
         <Content on:apply={(e) => (applied = e.detail.applied)} on:clear={() => (applied = 0)} />
         <svelte:fragment slot="footer">
             <Button text on:click={clearAll}>Clear all</Button>
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 a7bba8a7b5..e3dcc0223b 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
@@ -47,12 +47,12 @@
 </script>
 
 <Modal
+    title="Delete attribute"
     icon="exclamation"
     state="warning"
     headerDivider={false}
     bind:show={showDelete}
     onSubmit={handleDelete}>
-    <svelte:fragment slot="header">Delete attribute</svelte:fragment>
     <p class="text" data-private>
         Are you sure you want to delete <b data-private>{selectedAttribute?.key}</b> from
         <b data-private>{$collection?.name}</b>?
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
index 9ee62ebaf4..0354366e79 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
@@ -59,7 +59,7 @@
 
 {#if selectedAttribute}
     <Modal {error} size="big" bind:show={showEdit} onSubmit={submit} icon={option?.icon}>
-        <svelte:fragment slot="header">
+        <svelte:fragment slot="title">
             <div class="u-flex u-cross-center u-gap-8">
                 {option?.name}
                 {#if option?.type === 'relationship'}
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 2b4aab6a5f..641841c528 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
@@ -99,7 +99,7 @@
 </script>
 
 <Modal {error} size="big" bind:show={showCreate} onSubmit={submit} icon={$option?.icon}>
-    <svelte:fragment slot="header">
+    <svelte:fragment slot="title">
         {#if selectedOption === 'Relationship'}
             <span class="u-flex u-gap-16 u-cross-center">
                 {selectedOption}
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 1aa01095cd..4a080aff6d 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
@@ -61,12 +61,17 @@
 </script>
 
 <Modal
+    title="Delete document"
     icon="exclamation"
     state="warning"
     onSubmit={handleDelete}
     bind:show={showDelete}
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete document</svelte:fragment>
+    <p data-private>
+        Are you sure you want to delete <b
+            >the document from <span data-private>{$collection.name}</span></b
+        >?
+    </p>
 
     {#if relAttributes?.length}
         <p class="text">This document contains the following relationships:</p>
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 cb3c4f0a71..b026065367 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
@@ -99,8 +99,7 @@
     }
 </script>
 
-<Modal bind:error size="big" onSubmit={create} bind:show={showCreateIndex}>
-    <svelte:fragment slot="header">Create index</svelte:fragment>
+<Modal title="Create index" bind:error size="big" onSubmit={create} bind:show={showCreateIndex}>
     <FormList>
         <InputText id="key" label="Index Key" placeholder="Enter Key" bind:value={key} autofocus />
         <InputSelect options={types} id="type" label="Index type" bind:value={selectedType} />
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 350b5036ad..4550516fbf 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
@@ -40,13 +40,12 @@
 </script>
 
 <Modal
+    title="Delete index"
     icon="exclamation"
     state="warning"
     onSubmit={handleDelete}
     bind:show={showDelete}
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete index</svelte:fragment>
-
     <p data-private>
         Are you sure you want to delete <b>'{selectedIndex.key}' from {$collection.name}</b>?
     </p>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
index 86f21edd4b..54d16cab6f 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
@@ -8,8 +8,7 @@
     //TODO: add error message when index failed
 </script>
 
-<Modal size="big" bind:show={showOverview}>
-    <svelte:fragment slot="header">Overview</svelte:fragment>
+<Modal title="Overview" size="big" bind:show={showOverview}>
     <FormList>
         <InputText
             id="key"
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
index a0917e087b..6e11394b25 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/relationshipsModal.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <Modal size="big" bind:show icon="relationship" headerDivider={false}>
-    <svelte:fragment slot="header">
+    <svelte:fragment slot="title">
         <span data-private>
             {selectedRelationship.key}
         </span>
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 c0edca68f8..04226550ce 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
@@ -38,13 +38,12 @@
 </script>
 
 <Modal
+    title="Delete collection"
     icon="exclamation"
     state="warning"
     bind:show={showDelete}
     onSubmit={handleDelete}
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete collection</svelte:fragment>
-
     <p data-private>
         Are you sure you want to delete <b>{$collection.name}</b>?
     </p>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 59d5c33ecb..2c5d01dc98 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -254,14 +254,13 @@
 </FloatingActionBar>
 
 <Modal
+    title="Delete Documents"
     icon="exclamation"
     state="warning"
     bind:show={showDelete}
     onSubmit={handleDelete}
     headerDivider={false}
     closable={!deleting}>
-    <svelte:fragment slot="header">Delete Documents</svelte:fragment>
-
     <div>
         <p class="text" data-private>
             Are you sure you want to delete <b>{selectedDb.length}</b>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/createCollection.svelte b/src/routes/console/project-[project]/databases/database-[database]/createCollection.svelte
index 80e3aeab68..eaacedcbcb 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/createCollection.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/createCollection.svelte
@@ -46,8 +46,7 @@
     };
 </script>
 
-<Modal size="big" bind:show={showCreate} onSubmit={create}>
-    <svelte:fragment slot="header">Create collection</svelte:fragment>
+<Modal title="Create collection" size="big" bind:show={showCreate} onSubmit={create}>
     <FormList>
         <InputText
             id="name"
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 d3fd1921df..4a4c7d2e19 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/delete.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/delete.svelte
@@ -33,12 +33,12 @@
 </script>
 
 <Modal
+    title="Delete database"
     icon="exclamation"
     state="warning"
     bind:show={showDelete}
     onSubmit={handleDelete}
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete database</svelte:fragment>
     <p class="text" data-private>
         Are you sure you want to delete <b>{$database.name}</b>?
     </p>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
index c7ad3fda56..3ed4f08f49 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
@@ -123,13 +123,13 @@
 </FloatingActionBar>
 
 <Modal
+    title="Delete Collections"
     icon="exclamation"
     state="warning"
     bind:show={showDelete}
     onSubmit={handleDelete}
     headerDivider={false}
     closable={!deleting}>
-    <svelte:fragment slot="header">Delete Collections</svelte:fragment>
     <p class="text" data-private>
         Are you sure you want to delete <b>{selected.length}</b>
         {selected.length > 1 ? 'collections' : 'collection'}?
diff --git a/src/routes/console/project-[project]/databases/table.svelte b/src/routes/console/project-[project]/databases/table.svelte
index eb95ea57b5..b5629867ff 100644
--- a/src/routes/console/project-[project]/databases/table.svelte
+++ b/src/routes/console/project-[project]/databases/table.svelte
@@ -122,13 +122,13 @@
 </FloatingActionBar>
 
 <Modal
+    title="Delete Database"
     icon="exclamation"
     state="warning"
     bind:show={showDelete}
     onSubmit={handleDelete}
     headerDivider={false}
     closable={!deleting}>
-    <svelte:fragment slot="header">Delete Database</svelte:fragment>
     <p class="text" data-private>
         Are you sure you want to delete <b>{selected.length}</b>
         {selected.length > 1 ? 'databases' : 'database'}?
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 15cfc4d3a8..69aefb4462 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/activate.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/activate.svelte
@@ -35,8 +35,7 @@
     };
 </script>
 
-<Modal bind:show={showActivate} onSubmit={handleSubmit}>
-    <svelte:fragment slot="header">Activate Deployment</svelte:fragment>
+<Modal title="Activate Deployment" bind:show={showActivate} onSubmit={handleSubmit}>
     <p>Are you sure you want to activate this deployment?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showActivate = false)}>Cancel</Button>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte b/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
index feb29f8899..8524564976 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
@@ -83,8 +83,7 @@
     }
 </script>
 
-<Modal size="big" bind:show>
-    <svelte:fragment slot="header">Create CLI deployment</svelte:fragment>
+<Modal title="Create CLI deployment" size="big" bind:show>
     <p class="text">
         Deploy your function using the Appwrite CLI by running the following command inside your
         function's folder.
diff --git a/src/routes/console/project-[project]/functions/function-[function]/createGit.svelte b/src/routes/console/project-[project]/functions/function-[function]/createGit.svelte
index b26990804c..592f824746 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/createGit.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/createGit.svelte
@@ -8,8 +8,7 @@
     export let show = false;
 </script>
 
-<Modal size="big" bind:show headerDivider={false}>
-    <svelte:fragment slot="header">Create git deployment</svelte:fragment>
+<Modal title="Create git deployment" size="big" bind:show headerDivider={false}>
     {#if $func.installationId && $func.providerRepositoryId}
         <p class="text">
             Deploy your function from the Git provider of your choice by following the steps below.
diff --git a/src/routes/console/project-[project]/functions/function-[function]/createManual.svelte b/src/routes/console/project-[project]/functions/function-[function]/createManual.svelte
index d506044f19..830d96174c 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/createManual.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/createManual.svelte
@@ -48,8 +48,7 @@
     }
 </script>
 
-<Modal {error} size="big" bind:show onSubmit={create}>
-    <svelte:fragment slot="header">Create manual deployment</svelte:fragment>
+<Modal title="Create manual deployment" {error} size="big" bind:show onSubmit={create}>
     <p class="text">
         Manually deploy a function by uploading a zip file containing the source code and a relative
         path to the entry point.
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 5f45e6d923..b0b9ce6bf3 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/delete.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/delete.svelte
@@ -35,12 +35,12 @@
 </script>
 
 <Modal
+    title="Delete deployment"
     bind:show={showDelete}
     onSubmit={handleSubmit}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <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">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
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 b84794bade..fc180b167b 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
@@ -87,13 +87,13 @@
 </script>
 
 <Modal
+    title="Execute function"
     headerDivider={false}
     bind:show
     size="big"
     onSubmit={handleSubmit}
     on:close={close}
     bind:error>
-    <svelte:fragment slot="header">Execute function</svelte:fragment>
     <p class="text">
         Manually execute your function. <a
             class="link"
diff --git a/src/routes/console/project-[project]/functions/function-[function]/redeployModal.svelte b/src/routes/console/project-[project]/functions/function-[function]/redeployModal.svelte
index 4716fe0f20..6d68e2ec35 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/redeployModal.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/redeployModal.svelte
@@ -38,8 +38,7 @@
     }
 </script>
 
-<Modal size="big" bind:show onSubmit={redeploy} headerDivider={false}>
-    <svelte:fragment slot="header">Redeploy function</svelte:fragment>
+<Modal title="Redeploy function" size="big" bind:show onSubmit={redeploy} headerDivider={false}>
     <p class="text">
         Are you sure you want to redeploy <b>{$func.name}</b>? Redeploying may affect your
         production code.
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/deleteModal.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/deleteModal.svelte
index e9af3e4c92..27a6962b42 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/deleteModal.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/deleteModal.svelte
@@ -32,12 +32,12 @@
 </script>
 
 <Modal
+    title="Delete function"
     bind:show={showDelete}
     onSubmit={handleSubmit}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <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
         project?
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/disconnectRepo.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/disconnectRepo.svelte
index 674fa7459c..9069c57b98 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/disconnectRepo.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/disconnectRepo.svelte
@@ -56,13 +56,13 @@
 </script>
 
 <Modal
+    title="Disconnect Git repository"
     bind:show
     bind:error
     onSubmit={handleSubmit}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Disconnect Git repository</svelte:fragment>
     <p data-private>
         Are you sure you want to disconnect {$func.name}? This will affect future deployments to
         this function.
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte
index 9398679e01..f88730c0b5 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/gitConfigurationModal.svelte
@@ -124,8 +124,13 @@
         ) ?? null;
 </script>
 
-<Modal headerDivider={false} bind:show size="big" bind:error onSubmit={handleSubmit}>
-    <svelte:fragment slot="header">Git configuration</svelte:fragment>
+<Modal
+    title="Git configuration"
+    headerDivider={false}
+    bind:show
+    size="big"
+    bind:error
+    onSubmit={handleSubmit}>
     <p class="text">
         Configure a Git repository that will trigger your function deployments when updated.
     </p>
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 59b9d8e440..33f99fc6d1 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/delete.svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/delete.svelte
@@ -34,12 +34,12 @@
 </script>
 
 <Modal
+    title="Delete API key"
     bind:show={showDelete}
     onSubmit={handleDelete}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete API key</svelte:fragment>
     <p>The API key will be permanently deleted. This action is irreversible.</p>
 
     <svelte:fragment slot="footer">
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 a2caf2d774..2420ed8034 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/delete.svelte
@@ -34,12 +34,12 @@
 </script>
 
 <Modal
+    title="Delete platform"
     bind:show={showDelete}
     onSubmit={handleDelete}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header">Delete platform</svelte:fragment>
     <p>The Platform will be permanently deleted. This action is irreversible.</p>
 
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/project-[project]/promoteVariableModal.svelte b/src/routes/console/project-[project]/promoteVariableModal.svelte
index 7d158cc128..785ef5f740 100644
--- a/src/routes/console/project-[project]/promoteVariableModal.svelte
+++ b/src/routes/console/project-[project]/promoteVariableModal.svelte
@@ -19,8 +19,9 @@
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <svelte:fragment slot="header"
-        >{isConflicting ? 'Overwrite global variable' : 'Promote variable'}</svelte:fragment>
+    <svelte:fragment slot="title">
+        {isConflicting ? 'Overwrite global variable' : 'Promote variable'}
+    </svelte:fragment>
     {#if isConflicting}
         <p data-private>
             Promoting this variable will overwrite your global variable with the same name. Are you
diff --git a/src/routes/console/project-[project]/rawVariableEditor.svelte b/src/routes/console/project-[project]/rawVariableEditor.svelte
index d54f3ad00d..540f7ea21d 100644
--- a/src/routes/console/project-[project]/rawVariableEditor.svelte
+++ b/src/routes/console/project-[project]/rawVariableEditor.svelte
@@ -110,8 +110,12 @@
     }
 </script>
 
-<Modal headerDivider={false} bind:show={showEditor} onSubmit={handleSubmit} size="big">
-    <svelte:fragment slot="header">Editor</svelte:fragment>
+<Modal
+    title="Editor"
+    headerDivider={false}
+    bind:show={showEditor}
+    onSubmit={handleSubmit}
+    size="big">
     <p>
         Edit {isGlobal ? 'global' : 'environment'} variables below or download as a
         <span class="inline-code">.{tab}</span> file.
diff --git a/src/routes/console/project-[project]/settings/GitDisconnectModal.svelte b/src/routes/console/project-[project]/settings/GitDisconnectModal.svelte
index 4dab51f6c0..34296e3080 100644
--- a/src/routes/console/project-[project]/settings/GitDisconnectModal.svelte
+++ b/src/routes/console/project-[project]/settings/GitDisconnectModal.svelte
@@ -46,13 +46,13 @@
 </script>
 
 <Modal
+    title="Disconnect installation"
     icon="exclamation"
     state="warning"
     headerDivider={false}
     bind:show={showGitDisconnect}
     onSubmit={handleSubmit}
     size="big">
-    <svelte:fragment slot="header">Disconnect installation</svelte:fragment>
     <p>
         Are you sure you want to disconnect this git installation? This will affect future
         deployments to the following functions:
diff --git a/src/routes/console/project-[project]/settings/GitInstallationModal.svelte b/src/routes/console/project-[project]/settings/GitInstallationModal.svelte
index 27d119cdd4..ced76dbe25 100644
--- a/src/routes/console/project-[project]/settings/GitInstallationModal.svelte
+++ b/src/routes/console/project-[project]/settings/GitInstallationModal.svelte
@@ -18,8 +18,7 @@
     }
 </script>
 
-<Modal headerDivider={false} bind:show={showGitInstall} size="big">
-    <svelte:fragment slot="header">Install</svelte:fragment>
+<Modal title="Install" headerDivider={false} bind:show={showGitInstall} size="big">
     <p>Select a provider to import an existing git repositories.</p>
 
     <div class="u-flex u-cross-center u-flex-vertical u-gap-16">
diff --git a/src/routes/console/project-[project]/settings/deleteProject.svelte b/src/routes/console/project-[project]/settings/deleteProject.svelte
index bf289f970e..c0476e7641 100644
--- a/src/routes/console/project-[project]/settings/deleteProject.svelte
+++ b/src/routes/console/project-[project]/settings/deleteProject.svelte
@@ -55,12 +55,12 @@
 </CardGrid>
 
 <Modal
+    title="Delete project"
     bind:show={showDelete}
     onSubmit={handleDelete}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <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
         resources. <b>This action is irreversible</b>.
diff --git a/src/routes/console/project-[project]/settings/disableAllServices.svelte b/src/routes/console/project-[project]/settings/disableAllServices.svelte
index 1cf11235ec..d051fff4d0 100644
--- a/src/routes/console/project-[project]/settings/disableAllServices.svelte
+++ b/src/routes/console/project-[project]/settings/disableAllServices.svelte
@@ -6,8 +6,12 @@
     export let handleDisableAll;
 </script>
 
-<Modal icon="exclamation" state="warning" bind:show onSubmit={handleDisableAll}>
-    <svelte:fragment slot="header">Disable all services</svelte:fragment>
+<Modal
+    title="Disable all services"
+    icon="exclamation"
+    state="warning"
+    bind:show
+    onSubmit={handleDisableAll}>
     <p class="text" data-private>
         Are you sure you want to disable all services? This will disable API requests to your
         project.
diff --git a/src/routes/console/project-[project]/settings/enableAllServices.svelte b/src/routes/console/project-[project]/settings/enableAllServices.svelte
index e3189a7397..f386df8473 100644
--- a/src/routes/console/project-[project]/settings/enableAllServices.svelte
+++ b/src/routes/console/project-[project]/settings/enableAllServices.svelte
@@ -6,8 +6,7 @@
     export let handleEnableAll;
 </script>
 
-<Modal bind:show onSubmit={handleEnableAll}>
-    <svelte:fragment slot="header">Enable all services</svelte:fragment>
+<Modal title="Enable all services" bind:show onSubmit={handleEnableAll}>
     <p class="text" data-private>All project services will be enabled.</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
diff --git a/src/routes/console/project-[project]/settings/migrations/details.svelte b/src/routes/console/project-[project]/settings/migrations/details.svelte
index de58d82957..e21942d15e 100644
--- a/src/routes/console/project-[project]/settings/migrations/details.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/details.svelte
@@ -49,7 +49,7 @@
 </script>
 
 <Modal bind:show on:close={() => (migrationId = null)} size="big">
-    <svelte:fragment slot="header">
+    <svelte:fragment slot="title">
         {#if details.status === 'failed'}
             Resolve migration issues
         {:else}
diff --git a/src/routes/console/project-[project]/settings/migrations/exportModal.svelte b/src/routes/console/project-[project]/settings/migrations/exportModal.svelte
index 7f2407468d..fce0b98fae 100644
--- a/src/routes/console/project-[project]/settings/migrations/exportModal.svelte
+++ b/src/routes/console/project-[project]/settings/migrations/exportModal.svelte
@@ -97,8 +97,7 @@
     };
 </script>
 
-<Modal bind:show {onSubmit}>
-    <svelte:fragment slot="header">Export to self-hosted instance</svelte:fragment>
+<Modal title="Export to self-hosted instance" bind:show {onSubmit}>
     <div class="modal-contents">
         <Alert isStandalone>
             <svelte:fragment slot="title">API key creation</svelte:fragment>
diff --git a/src/routes/console/project-[project]/settings/transferProject.svelte b/src/routes/console/project-[project]/settings/transferProject.svelte
index cba255afd1..735f3e75d5 100644
--- a/src/routes/console/project-[project]/settings/transferProject.svelte
+++ b/src/routes/console/project-[project]/settings/transferProject.svelte
@@ -45,8 +45,7 @@
     };
 </script>
 
-<Modal bind:show onSubmit={handleTransfer} headerDivider={false}>
-    <svelte:fragment slot="header">Transfer project</svelte:fragment>
+<Modal title="Transfer project" bind:show onSubmit={handleTransfer} headerDivider={false}>
     <p>Are you sure you want to transfer <b>{$project.name}</b> to <b>{teamName}</b>?</p>
     <p>
         Members who are not part of the destination organization must be invited to gain access to
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 de1d211f25..e1416a95a9 100644
--- a/src/routes/console/project-[project]/settings/webhooks/[webhook]/delete.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/delete.svelte
@@ -34,12 +34,12 @@
 </script>
 
 <Modal
+    title="Delete webhook"
     bind:show={showDelete}
     onSubmit={handleDelete}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <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}'?
     </p>
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 17076da343..360a2414d7 100644
--- a/src/routes/console/project-[project]/settings/webhooks/[webhook]/regenerate.svelte
+++ b/src/routes/console/project-[project]/settings/webhooks/[webhook]/regenerate.svelte
@@ -32,8 +32,7 @@
     }
 </script>
 
-<Modal bind:show onSubmit={regenerate}>
-    <svelte:fragment slot="header">Regenerate Key</svelte:fragment>
+<Modal title="Regenerate Key" bind:show onSubmit={regenerate}>
     <p class="u-text">
         Are you sure you want to generate a new Signature Key?
         <b>You will not be able to recover your current key.</b>
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 a624cd575c..2cdfdc682f 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
@@ -48,8 +48,7 @@
     }
 </script>
 
-<Modal size="big" {error} bind:show={showCreate} onSubmit={create}>
-    <svelte:fragment slot="header">Create file</svelte:fragment>
+<Modal title="Create file" size="big" {error} bind:show={showCreate} onSubmit={create}>
     <FormList>
         <div>
             <InputFile
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 be5d8d7c29..4ffbb1868e 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/deleteBucket.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/deleteBucket.svelte
@@ -32,12 +32,12 @@
 </script>
 
 <Modal
+    title="Delete bucket"
     bind:show={showDelete}
     onSubmit={deleteUser}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <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">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
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 f5f940fb57..6c2239ad2d 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/deleteFile.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/deleteFile.svelte
@@ -33,12 +33,12 @@
 </script>
 
 <Modal
+    title="Delete file"
     bind:show={showDelete}
     onSubmit={deleteFile}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <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">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
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 f4109045ae..0701a56975 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
@@ -34,12 +34,12 @@
 </script>
 
 <Modal
+    title="Delete file"
     bind:show={showDelete}
     onSubmit={deleteFile}
     icon="exclamation"
     state="warning"
     headerDivider={false}>
-    <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">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
diff --git a/src/routes/console/project-[project]/storage/create.svelte b/src/routes/console/project-[project]/storage/create.svelte
index 21ad8f8d61..a8b4643d4e 100644
--- a/src/routes/console/project-[project]/storage/create.svelte
+++ b/src/routes/console/project-[project]/storage/create.svelte
@@ -45,8 +45,7 @@
     }
 </script>
 
-<Modal {error} onSubmit={create} size="big" bind:show={showCreate}>
-    <svelte:fragment slot="header">Create bucket</svelte:fragment>
+<Modal title="Create bucket" {error} onSubmit={create} size="big" bind:show={showCreate}>
     <FormList>
         <InputText
             id="name"
diff --git a/src/routes/console/project-[project]/uploadVariablesModal.svelte b/src/routes/console/project-[project]/uploadVariablesModal.svelte
index 7473b4a5e1..1d8e7b4066 100644
--- a/src/routes/console/project-[project]/uploadVariablesModal.svelte
+++ b/src/routes/console/project-[project]/uploadVariablesModal.svelte
@@ -61,8 +61,9 @@
 </script>
 
 <Modal headerDivider={false} bind:show onSubmit={handleSubmit} bind:error>
-    <svelte:fragment slot="header"
-        >Import new {isGlobal ? 'global' : 'environment'} variables</svelte:fragment>
+    <svelte:fragment slot="title">
+        Import new {isGlobal ? 'global' : 'environment'} variables
+    </svelte:fragment>
     <div class="u-flex u-flex-vertical u-gap-24">
         <p>
             Import new {isGlobal ? 'global' : 'environment'} variables from .env file that will be passed