diff --git a/src/lib/pages/domains/index.svelte b/src/lib/pages/domains/index.svelte
index 196e15fb5..07938c3e8 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 dc6332a5c..50097d153 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/project-[project]/auth/templates/resetEmail.svelte b/src/routes/console/project-[project]/auth/templates/resetEmail.svelte
index 4e09434a6..aa69592e2 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 43f79b572..ed91fd01b 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]/functions/function-[function]/createCli.svelte b/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
index feb29f889..852456497 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 b26990804..592f82474 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 d506044f1..830d96174 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]/redeployModal.svelte b/src/routes/console/project-[project]/functions/function-[function]/redeployModal.svelte
index 4716fe0f2..6d68e2ec3 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/disconnectRepo.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/disconnectRepo.svelte
index 674fa7459..9069c57b9 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 9398679e0..f88730c0b 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]/rawVariableEditor.svelte b/src/routes/console/project-[project]/rawVariableEditor.svelte
index d54f3ad00..540f7ea21 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 4dab51f6c..34296e308 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 27d119cdd..ced76dbe2 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">