From 3fc775064582ffcede7341ff3780cfec25432e4f Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 6 Feb 2025 18:41:13 +0100
Subject: [PATCH] fix: cardgrid typography

---
 package.json                                  |  4 +-
 pnpm-lock.yaml                                | 28 +++----
 src/lib/components/cardGrid.svelte            | 11 ++-
 src/lib/components/viewSelector.svelte        | 25 +++---
 src/lib/layout/footer.svelte                  | 77 +++++++++++++------
 .../(console)/account/deleteAccount.svelte    | 14 ++--
 .../(console)/account/identities.svelte       |  8 +-
 .../account/payments/billingAddress.svelte    | 10 +--
 .../account/payments/paymentMethods.svelte    | 17 +---
 .../(console)/account/updateEmail.svelte      |  5 +-
 src/routes/(console)/account/updateMfa.svelte |  2 +-
 .../(console)/account/updateName.svelte       |  2 +-
 .../(console)/account/updatePassword.svelte   |  7 +-
 .../billing/availableCredit.svelte            |  7 +-
 .../billing/billingAddress.svelte             |  8 +-
 .../billing/budgetAlert.svelte                | 21 +++--
 .../billing/budgetCap.svelte                  |  9 +--
 .../billing/paymentHistory.svelte             |  8 +-
 .../billing/paymentMethods.svelte             |  5 +-
 .../billing/planSummary.svelte                |  9 +--
 .../billing/taxId.svelte                      |  2 +-
 .../organization-[organization]/header.svelte | 54 +++++--------
 .../settings/+page.svelte                     | 15 ++--
 .../settings/BAA.svelte                       |  6 +-
 .../settings/Soc2.svelte                      |  8 +-
 .../settings/downloadDPA.svelte               | 14 +---
 .../usage/[[invoice]]/+page.svelte            | 59 +++++---------
 .../usage/[[invoice]]/totalMembers.svelte     |  5 +-
 .../project-[project]/auth/+page.svelte       | 10 +--
 .../security/updateMembershipPrivacy.svelte   |  6 +-
 .../auth/security/updateMockNumbers.svelte    | 20 +++--
 .../security/updatePasswordDictionary.svelte  |  2 +-
 .../security/updatePasswordHistory.svelte     |  2 +-
 .../security/updatePersonalDataCheck.svelte   |  2 +-
 .../auth/security/updateSessionAlerts.svelte  |  2 +-
 .../auth/security/updateSessionLength.svelte  |  7 +-
 .../auth/security/updateSessionsLimit.svelte  |  2 +-
 .../auth/security/updateUsersLimit.svelte     |  9 +--
 .../auth/settings/+page.svelte                |  4 +-
 .../auth/teams/team-[team]/dangerZone.svelte  | 13 +---
 .../auth/teams/team-[team]/updateName.svelte  |  3 +-
 .../auth/teams/team-[team]/updatePrefs.svelte |  8 +-
 .../auth/templates/+page.svelte               | 13 ++--
 .../auth/templates/emailSignature.svelte      |  4 +-
 .../auth/user-[user]/dangerZone.svelte        | 12 +--
 .../auth/user-[user]/updateEmail.svelte       |  9 +--
 .../auth/user-[user]/updateLabels.svelte      |  8 +-
 .../auth/user-[user]/updateMfa.svelte         |  4 +-
 .../auth/user-[user]/updateName.svelte        |  3 +-
 .../auth/user-[user]/updatePassword.svelte    |  7 +-
 .../auth/user-[user]/updatePhone.svelte       |  8 +-
 .../auth/user-[user]/updatePrefs.svelte       |  4 +-
 .../document-[document]/+page.svelte          | 34 ++++----
 .../document-[document]/data/+page.svelte     |  2 +-
 .../document-[document]/document.svelte       |  4 +-
 .../settings/dangerZone.svelte                | 10 +--
 .../settings/displayName.svelte               | 10 +--
 .../settings/updateName.svelte                |  3 +-
 .../settings/updatePermissions.svelte         | 19 +++--
 .../settings/updateSecurity.svelte            |  2 +-
 .../settings/updateStatus.svelte              |  3 +-
 .../database-[database]/settings/+page.svelte | 16 ++--
 .../deployment-[deployment]/+page.svelte      | 10 +--
 .../settings/dangerZone.svelte                | 11 +--
 .../settings/updateConfiguration.svelte       |  9 +--
 .../settings/updateEvents.svelte              |  4 +-
 .../settings/updateLogging.svelte             |  7 +-
 .../settings/updateName.svelte                |  3 +-
 .../settings/updatePermissions.svelte         | 19 +++--
 .../settings/updateRuntime.svelte             |  3 +-
 .../settings/updateSchedule.svelte            | 19 +++--
 .../settings/updateScopes.svelte              | 19 +++--
 .../settings/updateTimeout.svelte             |  4 +-
 .../messaging/message-[message]/delete.svelte | 10 +--
 .../message-[message]/emailMessage.svelte     |  4 +-
 .../provider-[provider]/dangerZone.svelte     |  8 +-
 .../provider-[provider]/updateName.svelte     |  3 +-
 .../provider-[provider]/updateSettings.svelte | 20 ++---
 .../keys/[key]/+page@project-[project].svelte | 26 +++----
 .../keys/[key]/updateExpirationDate.svelte    |  4 +-
 .../[platform]/+page@project-[project].svelte | 12 ++-
 .../platforms/[platform]/android.svelte       |  6 +-
 .../platforms/[platform]/appleIOS.svelte      |  7 +-
 .../platforms/[platform]/appleMacOS.svelte    |  7 +-
 .../platforms/[platform]/appleTvOS.svelte     |  7 +-
 .../platforms/[platform]/appleWatchOS.svelte  |  7 +-
 .../[platform]/flutterAndroid.svelte          |  6 +-
 .../platforms/[platform]/flutterIOS.svelte    |  7 +-
 .../platforms/[platform]/flutterLinux.svelte  |  4 +-
 .../platforms/[platform]/flutterMacOS.svelte  |  7 +-
 .../[platform]/flutterWindows.svelte          |  4 +-
 .../overview/platforms/[platform]/web.svelte  |  4 +-
 .../project-[project]/settings/+page.svelte   |  5 +-
 .../settings/deleteProject.svelte             | 10 +--
 .../settings/migrations/+page.svelte          | 53 ++++++-------
 .../settings/smtp/+page.svelte                | 10 +--
 .../settings/updateInstallations.svelte       |  7 +-
 .../settings/updateName.svelte                | 11 ++-
 .../settings/updateServices.svelte            |  8 +-
 .../settings/usage/[[invoice]]/+page.svelte   | 53 ++++---------
 .../webhooks/[webhook]/dangerZone.svelte      |  6 +-
 .../webhooks/[webhook]/details.svelte         |  3 +-
 .../webhooks/[webhook]/updateEvents.svelte    |  6 +-
 .../webhooks/[webhook]/updateName.svelte      |  4 +-
 .../webhooks/[webhook]/updateSecurity.svelte  |  8 +-
 .../webhooks/[webhook]/updateSignature.svelte | 15 ++--
 .../webhooks/[webhook]/updateURL.svelte       |  3 +-
 .../domain-[domain]/SSLCertificates.svelte    | 10 +--
 .../domain-[domain]/deleteDomain.svelte       |  5 +-
 .../domain-[domain]/domainDetails.svelte      |  8 +-
 .../site-[site]/settings/dangerZone.svelte    |  8 +-
 .../settings/updateBuildSettings.svelte       |  8 +-
 .../site-[site]/settings/updateName.svelte    |  2 +-
 .../settings/updateRepository.svelte          |  6 +-
 .../settings/updateRuntimeSettings.svelte     |  9 +--
 .../site-[site]/settings/updateSPA.svelte     |  5 +-
 .../site-[site]/settings/updateTimeout.svelte |  4 +-
 .../bucket-[bucket]/file-[file]/+page.svelte  | 12 ++-
 .../bucket-[bucket]/settings/+page.svelte     | 58 ++++++--------
 .../settings/updateMaxFileSize.svelte         |  4 +-
 .../project-[project]/updateVariables.svelte  | 24 +++---
 121 files changed, 540 insertions(+), 791 deletions(-)

diff --git a/package.json b/package.json
index 78542df12..90ed93c9d 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,9 @@
     "dependencies": {
         "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c68",
         "@appwrite.io/pink-legacy": "^1.0.0",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a95cd769",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c0165c68",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 503288b05..8d4240e61 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,14 +15,14 @@ importers:
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c68
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c68(svelte@4.2.19)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.0
         version: 1.0.0
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a95cd769
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a95cd769(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c0165c68
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c0165c68(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -218,14 +218,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c68':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c68}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769e8c1aa6975cf5d238ec3baceb44b8111':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769e8c1aa6975cf5d238ec3baceb44b8111}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c683ef2af62c8a5e2769aeb6588f24bf47c':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c683ef2af62c8a5e2769aeb6588f24bf47c}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -239,8 +239,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.0':
     resolution: {integrity: sha512-EZk/wX8oDhIsCXf2A0oQjdNOaHvh5MnWbLQI4pAiGrdy5qQGPoU19AK6iVX6z3QoOq7geoEu0zVwAowBy5hZbQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a95cd769':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a95cd769}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c0165c68':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c0165c68}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4089,11 +4089,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c68(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769e8c1aa6975cf5d238ec3baceb44b8111(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c683ef2af62c8a5e2769aeb6588f24bf47c(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4106,9 +4106,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a95cd769(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@c0165c68(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a95cd769e8c1aa6975cf5d238ec3baceb44b8111(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@c0165c683ef2af62c8a5e2769aeb6588f24bf47c(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.2(svelte@4.2.19)
diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte
index f12b7db0c..54d23375e 100644
--- a/src/lib/components/cardGrid.svelte
+++ b/src/lib/components/cardGrid.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Divider, Layout, Card } from '@appwrite.io/pink-svelte';
+    import { Divider, Layout, Card, Typography } from '@appwrite.io/pink-svelte';
 
     export let hideOverflow = false;
     export let hideFooter = false;
@@ -8,8 +8,13 @@
 <Card.Base>
     <Layout.Stack gap="xl" justifyContent="space-around">
         <div class="common-section grid-1-2" class:hideOverflow>
-            <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
-                <slot />
+            <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-4">
+                <Typography.Title size="s"><slot name="title" /></Typography.Title>
+                {#if $$slots.default}
+                    <Typography.Text>
+                        <slot />
+                    </Typography.Text>
+                {/if}
             </div>
             <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0">
                 <slot name="aside" />
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index 3b819e781..79d4988d2 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -1,12 +1,19 @@
 <script lang="ts">
-    import { Button, InputCheckbox } from '$lib/elements/forms';
+    import { InputCheckbox } from '$lib/elements/forms';
     import { page } from '$app/stores';
     import type { Writable } from 'svelte/store';
     import { preferences } from '$lib/stores/preferences';
     import { onMount } from 'svelte';
     import { View } from '$lib/helpers/load';
     import type { Column } from '$lib/helpers/types';
-    import { ActionMenu, Icon, Layout, Popover, ToggleButton } from '@appwrite.io/pink-svelte';
+    import {
+        ActionMenu,
+        Icon,
+        Layout,
+        Popover,
+        ToggleButton,
+        Button
+    } from '@appwrite.io/pink-svelte';
     import { IconViewBoards, IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte';
     import { goto } from '$app/navigation';
 
@@ -16,9 +23,7 @@
     export let hideView = false;
     export let hideColumns = false;
     export let allowNoColumns = false;
-    export let showColsTextMobile = false;
     export let fullWidthMobile = false;
-    export let hideText = false;
 
     onMount(async () => {
         if (isCustomCollection) {
@@ -82,17 +87,13 @@
 {#if !hideColumns && view === View.Table}
     {#if $columns?.length}
         <Popover let:toggle>
-            <Button
+            <Button.Button
                 size="s"
-                secondary
+                variant="secondary"
                 badge={selectedColumnsNumber.toString()}
-                on:click={toggle}
-                {fullWidthMobile}>
+                on:click={toggle}>
                 <Icon slot="start" icon={IconViewBoards} />
-                {#if !hideText}
-                    <span class="text {showColsTextMobile ? '' : 'is-only-desktop'}">Columns</span>
-                {/if}
-            </Button>
+            </Button.Button>
             <svelte:fragment slot="tooltip">
                 <ActionMenu.Root>
                     <Layout.Stack>
diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index 59a091c53..05ff3350d 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -2,7 +2,7 @@
     import { isCloud } from '$lib/system';
     import { version } from '$routes/(console)/store';
     import { IconCloud, IconDiscord, IconGithub } from '@appwrite.io/pink-icons-svelte';
-    import { Layout, Typography, Link, Icon, Divider } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography, Link, Icon, Divider, Button } from '@appwrite.io/pink-svelte';
 
     const currentYear = new Date().getFullYear();
 </script>
@@ -10,69 +10,95 @@
 <footer>
     <Divider />
     <Layout.Stack direction="row">
-        <Layout.Stack direction="row">
+        <Layout.Stack direction="row" alignItems="center" gap="l">
             <Typography.Caption variant="400">
                 ⓒ {currentYear} Appwrite. All rights reserved.
             </Typography.Caption>
-            <Link.Anchor
-                variant="quiet"
-                href="https://github.com/appwrite/appwrite"
-                target="_blank"
-                rel="noreferrer"
-                aria-label="Appwrite on Github">
-                <Icon size="s" icon={IconGithub} />
-            </Link.Anchor>
-            <Link.Anchor
-                variant="quiet"
-                href="https://appwrite.io/discord"
-                target="_blank"
-                rel="noreferrer"
-                aria-label="Appwrite on Discord">
-                <Icon size="s" icon={IconDiscord} />
-            </Link.Anchor>
+            <span class="divider-wrapper">
+                <Divider vertical />
+            </span>
+            <Layout.Stack direction="row" gap="xxs" inline>
+                <Button.Anchor
+                    icon
+                    size="xs"
+                    variant="ghost"
+                    href="https://github.com/appwrite/appwrite"
+                    target="_blank"
+                    rel="noreferrer"
+                    aria-label="Appwrite on Github">
+                    <Icon size="s" icon={IconGithub} />
+                </Button.Anchor>
+                <Button.Anchor
+                    icon
+                    size="xs"
+                    variant="ghost"
+                    href="https://appwrite.io/discord"
+                    target="_blank"
+                    rel="noreferrer"
+                    aria-label="Appwrite on Discord">
+                    <Icon size="s" icon={IconDiscord} />
+                </Button.Anchor>
+            </Layout.Stack>
         </Layout.Stack>
-        <Layout.Stack direction="row" justifyContent="flex-end">
+        <Layout.Stack direction="row" justifyContent="flex-end" gap="l" alignItems="center">
             {#if isCloud}
                 <Icon size="s" icon={IconCloud} />
             {/if}
             {#if $version}
                 <Link.Anchor
+                    size="s"
                     variant="quiet"
                     href="https://github.com/appwrite/appwrite/releases"
                     aria-label="Appwrite releases on Github"
                     target="_blank"
                     rel="noreferrer">
-                    <Typography.Caption variant="400">Version {$version}</Typography.Caption>
+                    Version {$version}
                 </Link.Anchor>
+                <span class="divider-wrapper">
+                    <Divider vertical />
+                </span>
             {/if}
             <Link.Anchor
+                size="s"
                 variant="quiet"
                 href="https://appwrite.io/docs"
                 target="_blank"
                 rel="noreferrer">
-                <Typography.Caption variant="400">Docs</Typography.Caption>
+                Docs
             </Link.Anchor>
+            <span class="divider-wrapper">
+                <Divider vertical />
+            </span>
             <Link.Anchor
+                size="s"
                 variant="quiet"
                 href="https://appwrite.io/terms"
                 target="_blank"
                 rel="noreferrer">
-                <Typography.Caption variant="400">Terms</Typography.Caption>
+                Terms
             </Link.Anchor>
+            <span class="divider-wrapper">
+                <Divider vertical />
+            </span>
             <Link.Anchor
+                size="s"
                 variant="quiet"
                 href="https://appwrite.io/privacy"
                 target="_blank"
                 rel="noreferrer">
-                <Typography.Caption variant="400">Privacy</Typography.Caption>
+                Privacy
             </Link.Anchor>
             {#if isCloud}
+                <span class="divider-wrapper">
+                    <Divider vertical />
+                </span>
                 <Link.Anchor
+                    size="s"
                     variant="quiet"
                     href="https://appwrite.io/cookies"
                     target="_blank"
                     rel="noreferrer">
-                    <Typography.Caption variant="400">Cookies</Typography.Caption>
+                    Cookies
                 </Link.Anchor>
             {/if}
         </Layout.Stack>
@@ -80,6 +106,9 @@
 </footer>
 
 <style lang="scss">
+    .divider-wrapper {
+        height: 18px;
+    }
     footer {
         margin-block-start: auto;
         margin-inline: 2rem;
diff --git a/src/routes/(console)/account/deleteAccount.svelte b/src/routes/(console)/account/deleteAccount.svelte
index e7026e86c..e87837f82 100644
--- a/src/routes/(console)/account/deleteAccount.svelte
+++ b/src/routes/(console)/account/deleteAccount.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { AvatarInitials, BoxAvatar, CardGrid, Heading } from '$lib/components';
+    import { AvatarInitials, BoxAvatar, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { user } from '$lib/stores/user';
     import Delete from './delete.svelte';
@@ -7,14 +7,10 @@
     let showDelete = false;
 </script>
 
-<CardGrid danger>
-    <div>
-        <Heading tag="h2" size="7">Delete account</Heading>
-    </div>
-    <p>
-        Your account will be permanently deleted and access will be lost to any of your teams and
-        data. This action is irreversible.
-    </p>
+<CardGrid>
+    <svelte:fragment slot="title">Delete account</svelte:fragment>
+    Your account will be permanently deleted and access will be lost to any of your teams and data. This
+    action is irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="image">
diff --git a/src/routes/(console)/account/identities.svelte b/src/routes/(console)/account/identities.svelte
index 092c9e54b..cc0f4329f 100644
--- a/src/routes/(console)/account/identities.svelte
+++ b/src/routes/(console)/account/identities.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -33,10 +33,8 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="7">Identities</Heading>
-    <p class="text">
-        Identities are your connected GitHub accounts. You can sign in using these accounts.
-    </p>
+    <svelte:fragment slot="title">Identities</svelte:fragment>
+    Identities are your connected GitHub accounts. You can sign in using these accounts.
 
     <svelte:fragment slot="aside">
         {#if $identities.length === 0}
diff --git a/src/routes/(console)/account/payments/billingAddress.svelte b/src/routes/(console)/account/payments/billingAddress.svelte
index 1b6992331..a5617e7a7 100644
--- a/src/routes/(console)/account/payments/billingAddress.svelte
+++ b/src/routes/(console)/account/payments/billingAddress.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, DropList, DropListItem, Empty, Heading } from '$lib/components';
+    import { CardGrid, DropList, DropListItem, Empty } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import {
         Table,
@@ -40,12 +40,8 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="6">Billing Address</Heading>
-
-    <p class="text">
-        View or update your billing address. This address will be included in your invoices from
-        Appwrite.
-    </p>
+    <svelte:fragment slot="title">Billing Address</svelte:fragment>
+    View or update your billing address. This address will be included in your invoices from Appwrite.
     <svelte:fragment slot="aside">
         {#if $addressList.total && countryList?.total}
             <Table noMargin noStyles transparent>
diff --git a/src/routes/(console)/account/payments/paymentMethods.svelte b/src/routes/(console)/account/payments/paymentMethods.svelte
index e94407fb0..073185ff1 100644
--- a/src/routes/(console)/account/payments/paymentMethods.svelte
+++ b/src/routes/(console)/account/payments/paymentMethods.svelte
@@ -1,12 +1,5 @@
 <script lang="ts">
-    import {
-        CardGrid,
-        CreditCardInfo,
-        DropList,
-        DropListItem,
-        Empty,
-        Heading
-    } from '$lib/components';
+    import { CardGrid, CreditCardInfo, DropList, DropListItem, Empty } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import {
@@ -45,12 +38,8 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="6">Payment Methods</Heading>
-
-    <p class="text">
-        View or update your payment methods. These can be applied to any organizations you have
-        created.
-    </p>
+    <svelte:fragment slot="title">Payment Methods</svelte:fragment>
+    View or update your payment methods. These can be applied to any organizations you have created.
     <svelte:fragment slot="aside">
         {#if $paymentMethods?.total && filteredMethods?.length > 0}
             <Table noMargin noStyles transparent>
diff --git a/src/routes/(console)/account/updateEmail.svelte b/src/routes/(console)/account/updateEmail.svelte
index b5b12fba2..ef4d23e90 100644
--- a/src/routes/(console)/account/updateEmail.svelte
+++ b/src/routes/(console)/account/updateEmail.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputPassword, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -37,8 +37,7 @@
 
 <Form onSubmit={updateEmail}>
     <CardGrid>
-        <Heading tag="h2" size="7">Email</Heading>
-
+        <svelte:fragment slot="title">Email</svelte:fragment>
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText id="email" label="Email" placeholder="Enter email" bind:value={email} />
diff --git a/src/routes/(console)/account/updateMfa.svelte b/src/routes/(console)/account/updateMfa.svelte
index e9f8bcd06..775367056 100644
--- a/src/routes/(console)/account/updateMfa.svelte
+++ b/src/routes/(console)/account/updateMfa.svelte
@@ -136,7 +136,7 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="7">Multi-factor authentication</Heading>
+    <svelte:fragment slot="title">Multi-factor authentication</svelte:fragment>
 
     <svelte:fragment slot="aside">
         <div class="u-flex u-flex-vertical u-gap-32">
diff --git a/src/routes/(console)/account/updateName.svelte b/src/routes/(console)/account/updateName.svelte
index 72c521e6c..796ce6cbe 100644
--- a/src/routes/(console)/account/updateName.svelte
+++ b/src/routes/(console)/account/updateName.svelte
@@ -36,7 +36,7 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h2" size="7">Name</Heading>
+        <svelte:fragment slot="title">Name</svelte:fragment>
 
         <svelte:fragment slot="aside">
             <FormList>
diff --git a/src/routes/(console)/account/updatePassword.svelte b/src/routes/(console)/account/updatePassword.svelte
index 2004db143..09066fb24 100644
--- a/src/routes/(console)/account/updatePassword.svelte
+++ b/src/routes/(console)/account/updatePassword.svelte
@@ -30,10 +30,8 @@
 
 <Form onSubmit={updatePassword}>
     <CardGrid>
-        <Heading tag="h2" size="7">Password</Heading>
-        <p class="text">
-            Forgot your password? <a class="link" href={`${base}/recover`}>Recover your password</a>
-        </p>
+        <svelte:fragment slot="title">Password</svelte:fragment>
+        Forgot your password? <a class="link" href={`${base}/recover`}>Recover your password</a>
 
         <svelte:fragment slot="aside">
             <FormList>
@@ -41,7 +39,6 @@
                     id="oldPassword"
                     label="Old password"
                     placeholder="Enter password"
-                    showPasswordButton={true}
                     bind:value={oldPassword} />
                 <InputPassword
                     id="newPassword"
diff --git a/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte b/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
index 441ca0473..c07e5c62a 100644
--- a/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
@@ -91,11 +91,10 @@
 </script>
 
 <CardGrid hideFooter={$organization?.billingPlan !== BillingPlan.FREE}>
-    <Heading tag="h2" size="6">
+    <svelte:fragment slot="title">
         {$organization?.billingPlan === BillingPlan.FREE ? 'Credits' : 'Available credit'}
-    </Heading>
-
-    <p class="text">Appwrite credit will automatically be applied to your next invoice.</p>
+    </svelte:fragment>
+    Appwrite credit will automatically be applied to your next invoice.
     <svelte:fragment slot="aside">
         {#if $organization?.billingPlan === BillingPlan.FREE}
             <Alert type="info">
diff --git a/src/routes/(console)/organization-[organization]/billing/billingAddress.svelte b/src/routes/(console)/organization-[organization]/billing/billingAddress.svelte
index 87f491317..a12c4a843 100644
--- a/src/routes/(console)/organization-[organization]/billing/billingAddress.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/billingAddress.svelte
@@ -51,12 +51,8 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="6">Billing address</Heading>
-
-    <p class="text">
-        View or update your billing address. This address will be included in your invoices from
-        Appwrite.
-    </p>
+    <svelte:fragment slot="title">Billing address</svelte:fragment>
+    View or update your billing address. This address will be included in your invoices from Appwrite.
     <svelte:fragment slot="aside">
         {#if $organization?.billingAddressId && billingAddress}
             <div class="box">
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte b/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
index fe9cbd27a..ab17c2b94 100644
--- a/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
@@ -81,18 +81,15 @@
 
 <Form onSubmit={updateBudget}>
     <CardGrid>
-        <Heading tag="h2" size="6">Billing alerts</Heading>
-
-        <p class="text">
-            {#if !$currentPlan.budgeting}
-                Get notified by email when your organization meets a percentage of your budget cap. <b
-                    >{tierToPlan($organization.billingPlan).name} organizations will receive one notification
-                    at 75% resource usage.</b>
-            {:else}
-                Get notified by email when your organization meets or exceeds a percentage of your
-                specified billing alert(s).
-            {/if}
-        </p>
+        <svelte:fragment slot="title">Billing alerts</svelte:fragment>
+        {#if !$currentPlan.budgeting}
+            Get notified by email when your organization meets a percentage of your budget cap. <b
+                >{tierToPlan($organization.billingPlan).name} organizations will receive one notification
+                at 75% resource usage.</b>
+        {:else}
+            Get notified by email when your organization meets or exceeds a percentage of your
+            specified billing alert(s).
+        {/if}
         <svelte:fragment slot="aside">
             {#if !$currentPlan.budgeting}
                 <Alert type="info">
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
index b9c9b5eb3..fae2d3707 100644
--- a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
@@ -50,12 +50,9 @@
 
 <Form onSubmit={updateBudget}>
     <CardGrid>
-        <Heading tag="h2" size="6">Budget cap</Heading>
-
-        <p class="text">
-            Restrict your resource usage by setting a budget cap. Cap usage is reset at the
-            beginning of each billing cycle.
-        </p>
+        <svelte:fragment slot="title">Budget Cap</svelte:fragment>
+        Restrict your resource usage by setting a budget cap. Cap usage is reset at the beginning of
+        each billing cycle.
         <svelte:fragment slot="aside">
             {#if !$currentPlan.budgeting}
                 <Alert type="info">
diff --git a/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte b/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte
index b86de5fac..8ed57e843 100644
--- a/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte
@@ -68,12 +68,8 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="6">Payment history</Heading>
-
-    <p class="text">
-        Transaction history for this organization. Download invoices for more details about your
-        payments.
-    </p>
+    <svelte:fragment slot="title">Payment History</svelte:fragment>
+    Transaction history for this organization. Download invoices for more details about your payments.
     <svelte:fragment slot="aside">
         {#if invoiceList.total > 0}
             <TableScroll noMargin transparent noStyles>
diff --git a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
index b511f6e31..15f5bab31 100644
--- a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
@@ -95,9 +95,8 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="6" id="paymentMethod">Payment methods</Heading>
-
-    <p class="text">View or update your organization payment methods here.</p>
+    <svelte:fragment slot="title">Payment Methods</svelte:fragment>
+    View or update your organization payment methods here.
     <svelte:fragment slot="aside">
         <div class="u-flex u-flex-vertical u-gap-8">
             {#if $organization?.paymentMethodId}
diff --git a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
index 226f94cf1..c114a86a4 100644
--- a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
@@ -31,12 +31,9 @@
 
 {#if $organization}
     <CardGrid>
-        <Heading tag="h2" size="6">Payment estimates</Heading>
-
-        <p class="text">
-            A breakdown of your estimated upcoming payment for the current billing period. Totals
-            displayed exclude accumulated credits and applicable taxes.
-        </p>
+        <svelte:fragment slot="title">Payment Estimates</svelte:fragment>
+        A breakdown of your estimated upcoming payment for the current billing period. Totals displayed
+        exclude accumulated credits and applicable taxes.
         <svelte:fragment slot="aside">
             <p class="text u-bold">
                 Billing period: {toLocaleDate($organization?.billingCurrentInvoiceDate)} - {toLocaleDate(
diff --git a/src/routes/(console)/organization-[organization]/billing/taxId.svelte b/src/routes/(console)/organization-[organization]/billing/taxId.svelte
index 003012cbb..75051f33c 100644
--- a/src/routes/(console)/organization-[organization]/billing/taxId.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/taxId.svelte
@@ -36,7 +36,7 @@
 
 <Form onSubmit={updateTaxId}>
     <CardGrid>
-        <Heading tag="h2" size="6">Tax ID</Heading>
+        <svelte:fragment slot="title">Tax ID</svelte:fragment>
         Add a tax identification number to your organization.
         <svelte:fragment slot="aside">
             <FormList>
diff --git a/src/routes/(console)/organization-[organization]/header.svelte b/src/routes/(console)/organization-[organization]/header.svelte
index d90bfc2b3..0c63c1e53 100644
--- a/src/routes/(console)/organization-[organization]/header.svelte
+++ b/src/routes/(console)/organization-[organization]/header.svelte
@@ -2,27 +2,15 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { AvatarGroup, Heading, Tab, Tabs } from '$lib/components';
+    import { AvatarGroup, Tab, Tabs } from '$lib/components';
     import { BillingPlan } from '$lib/constants';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDate } from '$lib/helpers/date';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
-    import {
-        daysLeftInTrial,
-        getServiceLimit,
-        plansInfo,
-        readOnly,
-        tierToPlan
-    } from '$lib/stores/billing';
-    import {
-        members,
-        newMemberModal,
-        newOrgModal,
-        organization,
-        organizationList
-    } from '$lib/stores/organization';
+    import { daysLeftInTrial, getServiceLimit, plansInfo, readOnly } from '$lib/stores/billing';
+    import { members, newMemberModal, newOrgModal, organization } from '$lib/stores/organization';
     import {
         canSeeBilling,
         canSeeProjects,
@@ -32,7 +20,7 @@
     } from '$lib/stores/roles';
     import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
-    import { Icon, Tooltip, Typography } from '@appwrite.io/pink-svelte';
+    import { Icon, Tooltip, Typography, Layout } from '@appwrite.io/pink-svelte';
 
     let areMembersLimited: boolean;
     $: organization.subscribe(() => {
@@ -120,24 +108,24 @@
                 {/if}
             </span>
             <div class="u-margin-inline-start-auto">
-                <div class="u-flex u-gap-16 u-cross-center">
-                    <a href={`${path}/members`} class="is-not-mobile">
-                        <AvatarGroup size="s" {avatars} total={$members?.total ?? 0} />
-                    </a>
+                <Layout.Stack direction="row" alignItems="center" gap="xl">
+                    {#if $members.total > 1}
+                        <a href={`${path}/members`} class="is-not-mobile">
+                            <AvatarGroup size="xs" {avatars} total={$members?.total ?? 0} />
+                        </a>
+                    {/if}
 
-                    <div>
-                        {#if $isOwner}
-                            <Button
-                                secondary
-                                size="s"
-                                on:click={() => newMemberModal.set(true)}
-                                disabled={areMembersLimited}>
-                                <Icon icon={IconPlus} size="s" slot="start" />
-                                Invite
-                            </Button>
-                        {/if}
-                    </div>
-                </div>
+                    {#if $isOwner}
+                        <Button
+                            secondary
+                            size="s"
+                            on:click={() => newMemberModal.set(true)}
+                            disabled={areMembersLimited}>
+                            <Icon icon={IconPlus} size="s" slot="start" />
+                            Invite
+                        </Button>
+                    {/if}
+                </Layout.Stack>
             </div>
         </svelte:fragment>
         <Tabs>
diff --git a/src/routes/(console)/organization-[organization]/settings/+page.svelte b/src/routes/(console)/organization-[organization]/settings/+page.svelte
index 98b236e6d..808cb02eb 100644
--- a/src/routes/(console)/organization-[organization]/settings/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/+page.svelte
@@ -51,8 +51,7 @@
     {#if $organization}
         <Form onSubmit={updateName}>
             <CardGrid>
-                <Heading tag="h6" size="7">Name</Heading>
-
+                <svelte:fragment slot="title">Name</svelte:fragment>
                 <svelte:fragment slot="aside">
                     <ul>
                         <InputText
@@ -76,14 +75,10 @@
             <Soc2 />
         {/if}
 
-        <CardGrid danger>
-            <div>
-                <Heading tag="h6" size="7">Delete organization</Heading>
-            </div>
-            <p>
-                The organization will be permanently deleted, including all projects and data
-                associated with this organization. This action is irreversible.
-            </p>
+        <CardGrid>
+            <svelte:fragment slot="title">Delete Organization</svelte:fragment>
+            The organization will be permanently deleted, including all projects and data associated
+            with this organization. This action is irreversible.
             <svelte:fragment slot="aside">
                 <BoxAvatar>
                     <svelte:fragment slot="image">
diff --git a/src/routes/(console)/organization-[organization]/settings/BAA.svelte b/src/routes/(console)/organization-[organization]/settings/BAA.svelte
index 970735832..1ee6e426f 100644
--- a/src/routes/(console)/organization-[organization]/settings/BAA.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/BAA.svelte
@@ -7,10 +7,8 @@
 </script>
 
 <CardGrid>
-    <div>
-        <Heading tag="h6" size="7">BAA</Heading>
-    </div>
-    <p class="text">After requesting a BAA, we will contact you via email for the next steps.</p>
+    <svelte:fragment slot="title">BAA</svelte:fragment>
+    After requesting a BAA, we will contact you via email for the next steps.
     <svelte:fragment slot="aside">
         <Box>
             <h6>
diff --git a/src/routes/(console)/organization-[organization]/settings/Soc2.svelte b/src/routes/(console)/organization-[organization]/settings/Soc2.svelte
index 9f91a25a2..b1ea65377 100644
--- a/src/routes/(console)/organization-[organization]/settings/Soc2.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/Soc2.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Box, CardGrid, Heading } from '$lib/components';
+    import { Box, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import Soc2Modal from './Soc2Modal.svelte';
 
@@ -7,10 +7,8 @@
 </script>
 
 <CardGrid>
-    <div>
-        <Heading tag="h6" size="7">SOC-2</Heading>
-    </div>
-    <p class="text">After requesting SOC-2, we will contact you via email for the next steps.</p>
+    <svelte:fragment slot="title">SOC-2</svelte:fragment>
+    After requesting SOC-2, we will contact you via email for the next steps.
     <svelte:fragment slot="aside">
         <Box>
             <h6>
diff --git a/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte b/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte
index 39ce1ce82..767d026e1 100644
--- a/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte
@@ -15,16 +15,10 @@
 </script>
 
 <CardGrid>
-    <div>
-        <Heading tag="h6" size="7">DPA</Heading>
-    </div>
-    <p class="text">
-        After downloading, have the DPA signed by your organization's compliance authority, such as
-        your CEO or Compliance Manager, and submit it to <a
-            class="link"
-            href="mailto:privacy@appwrite.io">privacy@appwrite.io</a
-        >.
-    </p>
+    <svelte:fragment slot="title">DPA</svelte:fragment>
+    After downloading, have the DPA signed by your organization's compliance authority, such as your
+    CEO or Compliance Manager, and submit it to
+    <a class="link" href="mailto:privacy@appwrite.io">privacy@appwrite.io</a>.
     <svelte:fragment slot="aside">
         <Box>
             <h6>
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
index 27a59f68e..1f19a1de7 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
@@ -80,12 +80,9 @@
     </div>
 
     <CardGrid>
-        <Heading tag="h6" size="7">Bandwidth</Heading>
-
-        <p class="text">
-            Calculated for all bandwidth used across all projects in your organization. Resets at
-            the start of each billing cycle.
-        </p>
+        <svelte:fragment slot="title">Bandwidth</svelte:fragment>
+        Calculated for all bandwidth used across all projects in your organization. Resets at the start
+        of each billing cycle.
 
         <svelte:fragment slot="aside">
             {#if data.organizationUsage.bandwidth}
@@ -147,9 +144,8 @@
     </CardGrid>
 
     <CardGrid>
-        <Heading tag="h6" size="7">Users</Heading>
-
-        <p class="text">The total number of users across all projects in your organization.</p>
+        <svelte:fragment slot="title">Users</svelte:fragment>
+        The total number of users across all projects in your organization.
         <svelte:fragment slot="aside">
             {#if data.organizationUsage.users}
                 {@const current = data.organizationUsage.usersTotal}
@@ -199,11 +195,8 @@
     </CardGrid>
 
     <CardGrid>
-        <Heading tag="h6" size="7">Database reads and writes</Heading>
-
-        <p class="text">
-            The total number of database reads and writes across all projects in your organization.
-        </p>
+        <svelte:fragment slot="title">Database reads and writes</svelte:fragment>
+        The total number of database reads and writes across all projects in your organization.
         <svelte:fragment slot="aside">
             {#if data.organizationUsage.databasesReads || data.organizationUsage.databasesWrites}
                 <div style:margin-top="-1.5em" style:margin-bottom="-1em">
@@ -260,11 +253,8 @@
     </CardGrid>
 
     <CardGrid>
-        <Heading tag="h6" size="7">Executions</Heading>
-
-        <p class="text">
-            Calculated for all functions that are executed in all projects in your organization.
-        </p>
+        <svelte:fragment slot="title">Executions</svelte:fragment>
+        Calculated for all functions that are executed in all projects in your organization.
 
         <svelte:fragment slot="aside">
             {#if data.organizationUsage.executionsTotal}
@@ -317,11 +307,8 @@
     </CardGrid>
 
     <CardGrid>
-        <Heading tag="h6" size="7">Storage</Heading>
-
-        <p class="text">
-            Calculated for all your files, deployments, builds, databases and backups.
-        </p>
+        <svelte:fragment slot="title">Storage</svelte:fragment>
+        Calculated for all your files, deployments, builds, databases and backups.
 
         <svelte:fragment slot="aside">
             {#if data.organizationUsage.storageTotal}
@@ -388,12 +375,9 @@
     </CardGrid>
 
     <CardGrid>
-        <Heading tag="h6" size="7">GB hours</Heading>
-
-        <p class="text">
-            GB hours represent the memory usage (in gigabytes) of your function executions and
-            builds, multiplied by the total execution time (in hours).
-        </p>
+        <svelte:fragment slot="title">GB hours</svelte:fragment>
+        GB hours represent the memory usage (in gigabytes) of your function executions and builds, multiplied
+        by the total execution time (in hours).
 
         <svelte:fragment slot="aside">
             {#if data.organizationUsage.storageTotal}
@@ -449,15 +433,12 @@
     </CardGrid>
 
     <CardGrid>
-        <Heading tag="h6" size="7">Phone OTP</Heading>
-        <p class="text">
-            OTPs are billed per SMS message, with rates varying by recipient country. For a detailed
-            cost breakdown, see the <a
-                href="https://appwrite.io/docs/advanced/platform/phone-otp"
-                class="link">pricing page</a
-            >.
-        </p>
-        <p>You will not be charged for Phone OTPs before February 10th.</p>
+        <svelte:fragment slot="title">Phone OTP</svelte:fragment>
+        OTPs are billed per SMS message, with rates varying by recipient country. For a detailed cost
+        breakdown, see the
+        <a href="https://appwrite.io/docs/advanced/platform/phone-otp" class="link">pricing page</a
+        >.<br />
+        You will not be charged for Phone OTPs before February 10th.
         <svelte:fragment slot="aside">
             {#if data.organizationUsage.authPhoneTotal}
                 <div class="u-flex u-main-space-between">
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte
index 00bed58e5..8234284c7 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte
@@ -27,9 +27,8 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">Members</Heading>
-
-    <p class="text">The number of members in your organization.</p>
+    <svelte:fragment slot="title">Members</svelte:fragment>
+    The number of members in your organization.
     <svelte:fragment slot="aside">
         {#if $organization.billingPlan !== BillingPlan.FREE}
             <div class="u-flex u-flex-vertical">
diff --git a/src/routes/(console)/project-[project]/auth/+page.svelte b/src/routes/(console)/project-[project]/auth/+page.svelte
index 6a46807ff..85cbde1cc 100644
--- a/src/routes/(console)/project-[project]/auth/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/+page.svelte
@@ -53,7 +53,7 @@
             <SearchQuery search={data.search} placeholder="Search by name, email, phone, or ID" />
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <ViewSelector view={View.Table} {columns} hideView allowNoColumns showColsTextMobile />
+            <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
             <Button on:mousedown={() => ($showCreateUser = true)} event="create_user" size="s">
                 <Icon size="s" icon={IconPlus} slot="start" />
                 <span class="text">Create user</span>
@@ -124,12 +124,12 @@
                                             type={success ? 'success' : undefined}
                                             content={user.emailVerification &&
                                             user.phoneVerification
-                                                ? 'verified'
+                                                ? 'Verified'
                                                 : user.emailVerification
-                                                  ? 'verified email'
+                                                  ? 'Verified email'
                                                   : user.phoneVerification
-                                                    ? 'verified phone'
-                                                    : 'unverified'} />
+                                                    ? 'Verified phone'
+                                                    : 'Unverified'} />
                                     {:else}
                                         <Badge
                                             size="xs"
diff --git a/src/routes/(console)/project-[project]/auth/security/updateMembershipPrivacy.svelte b/src/routes/(console)/project-[project]/auth/security/updateMembershipPrivacy.svelte
index 5c4af4386..6b8b6f800 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateMembershipPrivacy.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateMembershipPrivacy.svelte
@@ -40,10 +40,8 @@
 
 <Form onSubmit={updateMembershipsPrivacy}>
     <CardGrid>
-        <Heading tag="h2" size="7" id="personal-data">Memberships privacy</Heading>
-        <Typography.Text>
-            Set privacy preferences to manage which details team members can view about one another.
-        </Typography.Text>
+        <svelte:fragment slot="title">Memberships Privacy</svelte:fragment>
+        Set privacy preferences to manage which details team members can view about one another.
         <svelte:fragment slot="aside">
             <Selector.Checkbox
                 id="membershipsUserName"
diff --git a/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte b/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
index fc19d37d8..020f6c323 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
@@ -82,17 +82,15 @@
 
 <Form onSubmit={updateMockNumbers}>
     <CardGrid hideFooter={isComponentDisabled}>
-        <Heading tag="h6" size="7" id="variables">Mock phone numbers</Heading>
-        <p>
-            Generate <b>fictional</b> numbers to simulate phone verification when testing demo
-            accounts for submitting your application to the App Store or Google Play.
-            <a
-                href="https://appwrite.io/docs/products/auth/security#mock-phone-numbers"
-                target="_blank"
-                class="u-underline"
-                rel="noopener noreferrer">
-                Learn more</a>
-        </p>
+        <svelte:fragment slot="title">Mock Phone Numbers</svelte:fragment>
+        Generate <b>fictional</b> numbers to simulate phone verification when testing demo accounts
+        for submitting your application to the App Store or Google Play.
+        <a
+            href="https://appwrite.io/docs/products/auth/security#mock-phone-numbers"
+            target="_blank"
+            class="u-underline"
+            rel="noopener noreferrer">
+            Learn more</a>
         <svelte:fragment slot="aside">
             {#if isComponentDisabled}
                 <EmptyCardImageCloud source="email_signature_card" noAspectRatio>
diff --git a/src/routes/(console)/project-[project]/auth/security/updatePasswordDictionary.svelte b/src/routes/(console)/project-[project]/auth/security/updatePasswordDictionary.svelte
index 28759f5bb..3712a0584 100644
--- a/src/routes/(console)/project-[project]/auth/security/updatePasswordDictionary.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updatePasswordDictionary.svelte
@@ -35,7 +35,7 @@
 
 <Form onSubmit={updatePasswordDictionary}>
     <CardGrid>
-        <Heading tag="h2" size="7" id="password-dictionary">Password dictionary</Heading>
+        <svelte:fragment slot="title">Password Dictionary</svelte:fragment>
         <svelte:fragment slot="aside">
             <InputSwitch
                 bind:value={passwordDictionary}
diff --git a/src/routes/(console)/project-[project]/auth/security/updatePasswordHistory.svelte b/src/routes/(console)/project-[project]/auth/security/updatePasswordHistory.svelte
index c8e2ec29a..b880e09d8 100644
--- a/src/routes/(console)/project-[project]/auth/security/updatePasswordHistory.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updatePasswordHistory.svelte
@@ -38,7 +38,7 @@
 
 <Form onSubmit={updatePasswordHistoryLimit}>
     <CardGrid>
-        <Heading tag="h2" size="7" id="password-history">Password history</Heading>
+        <svelte:fragment slot="title">Password History</svelte:fragment>
         <svelte:fragment slot="aside">
             <InputSwitch
                 bind:value={passwordHistoryEnabled}
diff --git a/src/routes/(console)/project-[project]/auth/security/updatePersonalDataCheck.svelte b/src/routes/(console)/project-[project]/auth/security/updatePersonalDataCheck.svelte
index c954cf2c4..012785ebc 100644
--- a/src/routes/(console)/project-[project]/auth/security/updatePersonalDataCheck.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updatePersonalDataCheck.svelte
@@ -35,7 +35,7 @@
 
 <Form onSubmit={updatePersonalDataCheck}>
     <CardGrid>
-        <Heading tag="h2" size="7" id="personal-data">Personal data</Heading>
+        <svelte:fragment slot="title">Personal Data</svelte:fragment>
         <svelte:fragment slot="aside">
             <InputSwitch
                 bind:value={authPersonalDataCheck}
diff --git a/src/routes/(console)/project-[project]/auth/security/updateSessionAlerts.svelte b/src/routes/(console)/project-[project]/auth/security/updateSessionAlerts.svelte
index 19f35942f..33d1f9f6a 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateSessionAlerts.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateSessionAlerts.svelte
@@ -32,7 +32,7 @@
 
 <Form onSubmit={updateSessionAlerts}>
     <CardGrid>
-        <Heading tag="h2" size="7" id="personal-data">Session alerts</Heading>
+        <svelte:fragment slot="title">Session Alerts</svelte:fragment>
         <svelte:fragment slot="aside">
             <InputSwitch
                 bind:value={authSessionAlerts}
diff --git a/src/routes/(console)/project-[project]/auth/security/updateSessionLength.svelte b/src/routes/(console)/project-[project]/auth/security/updateSessionLength.svelte
index 8706d5d6b..5ab08a47a 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateSessionLength.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateSessionLength.svelte
@@ -34,11 +34,8 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="7" id="session-length">Session length</Heading>
-    <p>
-        If you reduce the limit, users who are currently logged in will be logged out of the
-        application.
-    </p>
+    <svelte:fragment slot="title">Session Length</svelte:fragment>
+    If you reduce the limit, users who are currently logged in will be logged out of the application.
     <svelte:fragment slot="aside">
         <Layout.Stack direction="row">
             <InputNumber id="length" label="Length" bind:value={$value} min={0} />
diff --git a/src/routes/(console)/project-[project]/auth/security/updateSessionsLimit.svelte b/src/routes/(console)/project-[project]/auth/security/updateSessionsLimit.svelte
index f2303391d..a69277c06 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateSessionsLimit.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateSessionsLimit.svelte
@@ -33,7 +33,7 @@
 
 <Form onSubmit={updateSessionsLimit}>
     <CardGrid>
-        <Heading tag="h2" size="7" id="sessions-limit">Sessions limit</Heading>
+        <svelte:fragment slot="title">Sessions limit</svelte:fragment>
         <Typography.Text>
             <p>Maximum number of active sessions allowed per user.</p>
         </Typography.Text>
diff --git a/src/routes/(console)/project-[project]/auth/security/updateUsersLimit.svelte b/src/routes/(console)/project-[project]/auth/security/updateUsersLimit.svelte
index 7620cd9aa..39781a51b 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateUsersLimit.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateUsersLimit.svelte
@@ -55,12 +55,9 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="7" id="users-limit">Users limit</Heading>
-    <Typography.Text>
-        Limit new users from signing up for your project, regardless of authentication method. You
-        can still create users and team memberships from your Appwrite console.
-    </Typography.Text>
-
+    <svelte:fragment slot="title">Users Limit</svelte:fragment>
+    Limit new users from signing up for your project, regardless of authentication method. You can still
+    create users and team memberships from your Appwrite console.
     <svelte:fragment slot="aside">
         <Layout.Stack>
             <Layout.Stack direction="row" alignItems="center">
diff --git a/src/routes/(console)/project-[project]/auth/settings/+page.svelte b/src/routes/(console)/project-[project]/auth/settings/+page.svelte
index f100c19f5..7f605b0d7 100644
--- a/src/routes/(console)/project-[project]/auth/settings/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/settings/+page.svelte
@@ -47,8 +47,8 @@
 {#if $authMethods && $project}
     <Container>
         <CardGrid>
-            <Heading tag="h2" size="7">Auth methods</Heading>
-            <Typography.Text>Enable the authentication methods you wish to use.</Typography.Text>
+            <svelte:fragment slot="title">Auth Methods</svelte:fragment>
+            Enable the authentication methods you wish to use.
             <svelte:fragment slot="aside">
                 <Layout.Stack gap="l" direction="row" wrap="wrap">
                     {#each $authMethods.list as box}
diff --git a/src/routes/(console)/project-[project]/auth/teams/team-[team]/dangerZone.svelte b/src/routes/(console)/project-[project]/auth/teams/team-[team]/dangerZone.svelte
index 8806d08ea..d558c0efb 100644
--- a/src/routes/(console)/project-[project]/auth/teams/team-[team]/dangerZone.svelte
+++ b/src/routes/(console)/project-[project]/auth/teams/team-[team]/dangerZone.svelte
@@ -7,15 +7,10 @@
     let showDelete = false;
 </script>
 
-<CardGrid danger>
-    <div>
-        <Heading tag="h6" size="7">Delete team</Heading>
-    </div>
-
-    <p>
-        The team will be permanently deleted, including all data associated with this team. This
-        action is irreversible.
-    </p>
+<CardGrid>
+    <svelte:fragment slot="title">Delete Team</svelte:fragment>
+    The team will be permanently deleted, including all data associated with this team. This action is
+    irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="image">
diff --git a/src/routes/(console)/project-[project]/auth/teams/team-[team]/updateName.svelte b/src/routes/(console)/project-[project]/auth/teams/team-[team]/updateName.svelte
index 8e0f51109..8a03dc96f 100644
--- a/src/routes/(console)/project-[project]/auth/teams/team-[team]/updateName.svelte
+++ b/src/routes/(console)/project-[project]/auth/teams/team-[team]/updateName.svelte
@@ -37,8 +37,7 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h6" size="7">Name</Heading>
-
+        <svelte:fragment slot="title">Name</svelte:fragment>
         <svelte:fragment slot="aside">
             <ul>
                 <InputText
diff --git a/src/routes/(console)/project-[project]/auth/teams/team-[team]/updatePrefs.svelte b/src/routes/(console)/project-[project]/auth/teams/team-[team]/updatePrefs.svelte
index 66cfa5233..e391ebfd5 100644
--- a/src/routes/(console)/project-[project]/auth/teams/team-[team]/updatePrefs.svelte
+++ b/src/routes/(console)/project-[project]/auth/teams/team-[team]/updatePrefs.svelte
@@ -58,11 +58,9 @@
 
 <Form onSubmit={updatePrefs}>
     <CardGrid>
-        <Heading tag="h6" size="7">Preferences</Heading>
-        <p>
-            You can update your team's preferences by storing shared information on the teams's
-            objects so they can easily be shared across members.
-        </p>
+        <svelte:fragment slot="title">Preferences</svelte:fragment>
+        You can update your team's preferences by storing shared information on the teams's objects so
+        they can easily be shared across members.
         <svelte:fragment slot="aside">
             {#if prefs}
                 {#each prefs as [key, value], index}
diff --git a/src/routes/(console)/project-[project]/auth/templates/+page.svelte b/src/routes/(console)/project-[project]/auth/templates/+page.svelte
index e030a535d..ab7d26675 100644
--- a/src/routes/(console)/project-[project]/auth/templates/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/templates/+page.svelte
@@ -124,14 +124,11 @@
     {/if}
 
     <CardGrid>
-        <Heading size="7" tag="h3">Email templates</Heading>
-        <p class="text">
-            Use templates to send and process account management emails. <a
-                href="https://appwrite.io/docs/advanced/platform/message-templates"
-                class="link">
-                Learn more about email templates.
-            </a>
-        </p>
+        <svelte:fragment slot="title">Email Templates</svelte:fragment>
+        Use templates to send and process account management emails.
+        <a href="https://appwrite.io/docs/advanced/platform/message-templates" class="link">
+            Learn more about email templates.
+        </a>
 
         <svelte:fragment slot="aside">
             <Collapsible>
diff --git a/src/routes/(console)/project-[project]/auth/templates/emailSignature.svelte b/src/routes/(console)/project-[project]/auth/templates/emailSignature.svelte
index 718bf25a3..c2af0f1be 100644
--- a/src/routes/(console)/project-[project]/auth/templates/emailSignature.svelte
+++ b/src/routes/(console)/project-[project]/auth/templates/emailSignature.svelte
@@ -11,8 +11,8 @@
 </script>
 
 <CardGrid>
-    <Heading size="7" tag="h3">Email signature</Heading>
-    <p class="text">Enable or disable Appwrite branding in your email template signature.</p>
+    <svelte:fragment slot="title">Email Signature</svelte:fragment>
+    Enable or disable Appwrite branding in your email template signature.
 
     <svelte:fragment slot="aside">
         <EmptyCardImageCloud source="email_signature_card" let:nextTier noAspectRatio>
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/dangerZone.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/dangerZone.svelte
index a6583ed6f..38fea1717 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/dangerZone.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/dangerZone.svelte
@@ -22,14 +22,10 @@
     $: accessedAt = ($user as unknown as { accessedAt: string }).accessedAt;
 </script>
 
-<CardGrid danger>
-    <div>
-        <Heading tag="h6" size="7">Delete user</Heading>
-    </div>
-    <p>
-        The user will be permanently deleted, including all data associated with this user. This
-        action is irreversible.
-    </p>
+<CardGrid>
+    <svelte:fragment slot="title">Delete User</svelte:fragment>
+    The user will be permanently deleted, including all data associated with this user. This action is
+    irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="image">
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 8a18491e3..aac561e42 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/updateEmail.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/updateEmail.svelte
@@ -35,12 +35,9 @@
 
 <Form onSubmit={updateEmail}>
     <CardGrid>
-        <Heading tag="h6" size="7">Email</Heading>
-        <p>
-            Update user's email. An Email should be formatted as: <span class="inline-code"
-                >name@example.com</span
-            >.
-        </p>
+        <svelte:fragment slot="title">Email</svelte:fragment>
+        Update user's email. An Email should be formatted as:
+        <span class="inline-code">name@example.com</span>.
         <svelte:fragment slot="aside">
             <ul>
                 <InputEmail
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/updateLabels.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/updateLabels.svelte
index 72ae74dde..56e9fbf10 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/updateLabels.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/updateLabels.svelte
@@ -63,11 +63,9 @@
 
 <Form onSubmit={updateLabels}>
     <CardGrid>
-        <Heading tag="h6" size="7">Labels</Heading>
-        <p class="text">
-            Categorize and manage your users based on specific criteria by assigning them
-            customizable labels. New label-based roles will be assigned.
-        </p>
+        <svelte:fragment slot="title">Labels</svelte:fragment>
+        Categorize and manage your users based on specific criteria by assigning them customizable labels.
+        New label-based roles will be assigned.
         <svelte:fragment slot="aside">
             <ul class="common-section">
                 <InputTags
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/updateMfa.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/updateMfa.svelte
index d3d43ab0f..9c3c43316 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/updateMfa.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/updateMfa.svelte
@@ -51,8 +51,8 @@
 
 <Form onSubmit={updateMfa}>
     <CardGrid>
-        <Heading tag="h6" size="7">Multi-factor authentication</Heading>
-        <p class="text">MFA allows users to enhance the security of their accounts in your app.</p>
+        <svelte:fragment slot="title">Multi-factor Authentication</svelte:fragment>
+        MFA allows users to enhance the security of their accounts in your app.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputChoice
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 74d9db9cc..663bcb310 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/updateName.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/updateName.svelte
@@ -35,8 +35,7 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h6" size="7">Name</Heading>
-
+        <svelte:fragment slot="title">Name</svelte:fragment>
         <svelte:fragment slot="aside">
             <ul data-private>
                 <InputText
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 0045cb093..4432ca9f6 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/updatePassword.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/updatePassword.svelte
@@ -29,11 +29,8 @@
 
 <Form onSubmit={updatePassword}>
     <CardGrid>
-        <div>
-            <Heading tag="h6" size="7">Password</Heading>
-        </div>
-
-        <p>Enter a new password. A password must contain at least 8 characters.</p>
+        <svelte:fragment slot="title">Password</svelte:fragment>
+        Enter a new password. A password must contain at least 8 characters.
         <svelte:fragment slot="aside">
             <ul>
                 <InputPassword
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 55bd4a771..943d72e82 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/updatePhone.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/updatePhone.svelte
@@ -35,11 +35,9 @@
 
 <Form onSubmit={updatePhone}>
     <CardGrid>
-        <Heading tag="h6" size="7">Phone</Heading>
-        <p>
-            Update user's phone. Phone number must start with '+' and maximum of 15 digits, for
-            example: +14155552671.
-        </p>
+        <svelte:fragment slot="title">Phone</svelte:fragment>
+        Update user's phone. Phone number must start with '+' and maximum of 15 digits, for example:
+        +14155552671.
         <svelte:fragment slot="aside">
             <ul>
                 <InputPhone
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 536946f69..9ddd67f54 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/updatePrefs.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/updatePrefs.svelte
@@ -54,8 +54,8 @@
 
 <Form onSubmit={updatePrefs}>
     <CardGrid>
-        <Heading tag="h6" size="7">Preferences</Heading>
-        <p>Add custom user preferences to share them across devices and sessions.</p>
+        <svelte:fragment slot="title">Preferences</svelte:fragment>
+        Add custom user preferences to share them across devices and sessions.
         <svelte:fragment slot="aside">
             {#if prefs}
                 {#each prefs as [key, value], index}
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte
index 0ee809bd9..772d0914e 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte
@@ -57,7 +57,7 @@
 
 <Container>
     <CardGrid>
-        <Heading tag="h2" size="7">Metadata</Heading>
+        <svelte:fragment slot="title">Metadata</svelte:fragment>
         <svelte:fragment slot="aside">
             <div>
                 <p>Created: {toLocaleDateTime($doc.$createdAt)}</p>
@@ -66,19 +66,16 @@
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">Permissions</Heading>
-        <p>
-            A user requires appropriate permissions at either the <b>collection level</b> or
-            <b>document level</b> to access a document. If no permissions are configured, no user
-            can access the document
-            <a
-                href="https://appwrite.io/docs/products/databases/permissions"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">Learn more about database permissions</a
-            >.
-        </p>
-
+        <svelte:fragment slot="title">Permissions</svelte:fragment>
+        A user requires appropriate permissions at either the <b>collection level</b> or
+        <b>document level</b> to access a document. If no permissions are configured, no user can
+        access the document
+        <a
+            href="https://appwrite.io/docs/products/databases/permissions"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link">Learn more about database permissions</a
+        >.
         <svelte:fragment slot="aside">
             {#if $collection.documentSecurity}
                 {#if showPermissionAlert}
@@ -115,12 +112,9 @@
         </svelte:fragment>
     </CardGrid>
 
-    <CardGrid danger>
-        <Heading tag="h6" size="7">Delete document</Heading>
-        <p>
-            The document will be permanently deleted, including all the data within it. This action
-            is irreversible.
-        </p>
+    <CardGrid>
+        <svelte:fragment slot="title">Delete Document</svelte:fragment>
+        The document will be permanently deleted, including all the data within it. This action is irreversible.
         <svelte:fragment slot="aside">
             <BoxAvatar>
                 <svelte:fragment slot="title">
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte
index b96634b09..6ce94ba1c 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/data/+page.svelte
@@ -119,7 +119,7 @@
         {#each $collection.attributes as attribute}
             {@const label = attribute.key}
             <CardGrid>
-                <Heading tag="h6" size="7">{label}</Heading>
+                <svelte:fragment slot="title">{label}</svelte:fragment>
                 <svelte:fragment slot="aside">
                     <AttributeItem {attribute} bind:formValues={$work} {label} {editing} />
                 </svelte:fragment>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/document.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/document.svelte
index 2c0f7faa7..b7d79832d 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/document.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/document.svelte
@@ -79,8 +79,8 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">Data</Heading>
-    <p>Update document data based on the attributes created earlier.</p>
+    <svelte:fragment slot="title">Data</svelte:fragment>
+    Update document data based on the attributes created earlier.
     <svelte:fragment slot="aside">
         <AttributeForm attributes={$collection.attributes} bind:formValues={$work} gap="16" />
     </svelte:fragment>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/dangerZone.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/dangerZone.svelte
index dec225ffd..f77e73b0e 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/dangerZone.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/dangerZone.svelte
@@ -8,12 +8,10 @@
     let showDelete = false;
 </script>
 
-<CardGrid danger>
-    <Heading tag="h6" size="7">Delete collection</Heading>
-    <p>
-        The collection will be permanently deleted, including all the documents within it. This
-        action is irreversible.
-    </p>
+<CardGrid>
+    <svelte:fragment slot="title">Delete Collection</svelte:fragment>
+    The collection will be permanently deleted, including all the documents within it. This action is
+    irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="title">
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte
index 4680acaa8..913c9e854 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte
@@ -57,12 +57,10 @@
 
 <Form onSubmit={updateDisplayName}>
     <CardGrid>
-        <Heading tag="h6" size="7" id="display-name">Display name</Heading>
-        <p class="text">
-            Select string attributes as display names for your documents. The selected names will be
-            used as short forms to identify documents in the Appwrite console, like when creating
-            database relationships. You can specify up to 5 names.
-        </p>
+        <svelte:fragment slot="title">Display Name</svelte:fragment>
+        Select string attributes as display names for your documents. The selected names will be used
+        as short forms to identify documents in the Appwrite console, like when creating database relationships.
+        You can specify up to 5 names.
 
         <svelte:fragment slot="aside">
             <div class="u-flex u-flex-vertical u-gap-4">
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 6170e6b24..b136bc17a 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
@@ -46,8 +46,7 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h6" size="7">Name</Heading>
-
+        <svelte:fragment slot="title">Name</svelte:fragment>
         <svelte:fragment slot="aside">
             <ul>
                 <InputText
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte
index b32bb7723..69ddef1f2 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte
@@ -56,16 +56,15 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7" id="permissions">Permissions</Heading>
-    <p class="text">
-        Choose who can access your collection and documents. For more about <a
-            href="https://appwrite.io/docs/products/databases/permissions"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">
-            Permissions
-        </a>.
-    </p>
+    <svelte:fragment slot="title">Permissions</svelte:fragment>
+    Choose who can access your collection and documents. For more about
+    <a
+        href="https://appwrite.io/docs/products/databases/permissions"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="link">
+        Permissions
+    </a>.
     <svelte:fragment slot="aside">
         {#if collectionPermissions}
             <Permissions bind:permissions={collectionPermissions} withCreate />
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/updateSecurity.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/updateSecurity.svelte
index a2019cdc4..154e1256d 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/updateSecurity.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/updateSecurity.svelte
@@ -45,7 +45,7 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7" id="document-security">Document security</Heading>
+    <svelte:fragment slot="title">Document Security</svelte:fragment>
     <svelte:fragment slot="aside">
         <FormList>
             <InputSwitch
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/updateStatus.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/updateStatus.svelte
index 70661890a..49a2be0b8 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/updateStatus.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/updateStatus.svelte
@@ -46,8 +46,7 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="7">{$collection.name}</Heading>
-
+    <svelte:fragment slot="title">{$collection.name}</svelte:fragment>
     <svelte:fragment slot="aside">
         <ul>
             <InputSwitch
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/settings/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/settings/+page.svelte
index ad8b9f485..2bbf34d13 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/settings/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/settings/+page.svelte
@@ -71,8 +71,7 @@
 
         <Form onSubmit={updateName}>
             <CardGrid>
-                <Heading tag="h6" size="7">Name</Heading>
-
+                <svelte:fragment slot="title">Name</svelte:fragment>
                 <svelte:fragment slot="aside">
                     <ul>
                         <InputText
@@ -96,15 +95,10 @@
             </CardGrid>
         </Form>
 
-        <CardGrid danger>
-            <div>
-                <Heading tag="h6" size="7">Delete database</Heading>
-            </div>
-
-            <p>
-                The database will be permanently deleted, including all collections within it. This
-                action is irreversible.
-            </p>
+        <CardGrid>
+            <svelte:fragment slot="title">Delete Database</svelte:fragment>
+            The database will be permanently deleted, including all collections within it. This action
+            is irreversible.
             <svelte:fragment slot="aside">
                 <BoxAvatar>
                     <svelte:fragment slot="title">
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
index 734e4f306..f3787fee8 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
@@ -136,12 +136,10 @@
     </div>
 
     {#if !data.activeDeployment}
-        <CardGrid danger>
-            <Heading tag="h6" size="7">Delete deployment</Heading>
-            <p>
-                The deployment will be permanently deleted, including all data associated with it.
-                This action is irreversible.
-            </p>
+        <CardGrid>
+            <svelte:fragment slot="title">Delete Deployment</svelte:fragment>
+            The deployment will be permanently deleted, including all data associated with it. This action
+            is irreversible.
             <svelte:fragment slot="aside">
                 <BoxAvatar>
                     <p>Last updated: {toLocaleDateTime($func.$updatedAt)}</p>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/dangerZone.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/dangerZone.svelte
index 2efabe367..924f4e8ff 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/dangerZone.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/dangerZone.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { BoxAvatar, CardGrid } from '$lib/components';
-    import Heading from '$lib/components/heading.svelte';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import Delete from './deleteModal.svelte';
@@ -10,12 +9,10 @@
     let showDelete = false;
 </script>
 
-<CardGrid danger>
-    <Heading tag="h6" size="7">Delete function</Heading>
-    <p>
-        The function will be permanently deleted, including all deployments associated with it. This
-        action is irreversible.
-    </p>
+<CardGrid>
+    <svelte:fragment slot="title">Delete Function</svelte:fragment>
+    The function will be permanently deleted, including all deployments associated with it. This action
+    is irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="title">
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte
index 008ff7ff8..00b32d134 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte
@@ -168,16 +168,13 @@
 
 <Form onSubmit={updateConfiguration}>
     <CardGrid>
-        <Heading tag="h6" size="7">Configuration</Heading>
-        <p class="text">
-            Connect a Git repository for automatic deployments, or set install and build commands
-            for your function.
-        </p>
+        <svelte:fragment slot="title">Configuration</svelte:fragment>
+        Connect a Git repository for automatic deployments, or set install and build commands for your
+        function.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText
                     required
-                    hideRequired
                     label="Entrypoint"
                     id="Entrypoint"
                     placeholder="Enter an entrypoint (e.g. 'index.js')"
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 a66b6626b..2e12f905a 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
@@ -95,8 +95,8 @@
 
 <Form onSubmit={updateEvents}>
     <CardGrid>
-        <Heading tag="h6" size="7" id="events">Events</Heading>
-        <p>Set the events that will trigger your function. Maximum 100 events allowed.</p>
+        <svelte:fragment slot="title">Events</svelte:fragment>
+        Set the events that will trigger your function. Maximum 100 events allowed.
         <svelte:fragment slot="aside">
             {#if $eventSet.size}
                 <TableList>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateLogging.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateLogging.svelte
index 53cf050e6..e1af651ef 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateLogging.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateLogging.svelte
@@ -67,11 +67,8 @@
 
 <Form onSubmit={updateLogging}>
     <CardGrid>
-        <Heading tag="h6" size="7">Execution logs</Heading>
-        <p>
-            Enable or disable execution logs. We recommend disabling them for better performance in
-            production.
-        </p>
+        <svelte:fragment slot="title">Execution Logs</svelte:fragment>
+        Enable or disable execution logs. We recommend disabling them for better performance in production.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputSwitch label="Logs" id="logging" bind:value={functionLogging}>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateName.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateName.svelte
index 3051debe4..b1ef73a98 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateName.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateName.svelte
@@ -61,8 +61,7 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h6" size="7">Name</Heading>
-
+        <svelte:fragment slot="title">Name</svelte:fragment>
         <svelte:fragment slot="aside">
             <ul>
                 <InputText
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updatePermissions.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updatePermissions.svelte
index 41a8ecbe3..cf329cf4d 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updatePermissions.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updatePermissions.svelte
@@ -71,16 +71,15 @@
 
 <Form onSubmit={updatePermissions}>
     <CardGrid>
-        <Heading tag="h6" size="7" id="permissions">Execute access</Heading>
-        <p>
-            Choose who can execute this function using the client API. Learn more about <a
-                href="https://appwrite.io/docs/advanced/platform/permissions"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">
-                Permissions
-            </a>.
-        </p>
+        <svelte:fragment slot="title">Execute Access</svelte:fragment>
+        Choose who can execute this function using the client API. Learn more about
+        <a
+            href="https://appwrite.io/docs/advanced/platform/permissions"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link">
+            Permissions
+        </a>.
         <svelte:fragment slot="aside">
             <Roles bind:roles={permissions} />
         </svelte:fragment>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateRuntime.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateRuntime.svelte
index 1f06dbe9c..a8343ff7f 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateRuntime.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateRuntime.svelte
@@ -90,8 +90,7 @@
 
 <Form onSubmit={updateRuntime}>
     <CardGrid>
-        <Heading tag="h6" size="7">Runtime</Heading>
-
+        <svelte:fragment slot="title">Runtime</svelte:fragment>
         <svelte:fragment slot="aside">
             <FormList>
                 <InputSelect
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateSchedule.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateSchedule.svelte
index d59ccecf8..5ca4f1ce8 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateSchedule.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateSchedule.svelte
@@ -61,16 +61,15 @@
 
 <Form onSubmit={updateSchedule}>
     <CardGrid>
-        <Heading tag="h6" size="7" id="schedule">Schedule</Heading>
-        <p>
-            Set a Cron schedule to trigger your function. Leave blank for no schedule. <a
-                href="https://appwrite.io/docs/products/functions/execution#schedule"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">
-                More details on Cron syntax here</a
-            >.
-        </p>
+        <svelte:fragment slot="title">Schedule</svelte:fragment>
+        Set a Cron schedule to trigger your function. Leave blank for no schedule.
+        <a
+            href="https://appwrite.io/docs/products/functions/execution#schedule"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link">
+            More details on Cron syntax here</a
+        >.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputCron
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateScopes.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateScopes.svelte
index 4b800b2a9..af7a71fae 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateScopes.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateScopes.svelte
@@ -65,16 +65,15 @@
 
 <Form onSubmit={updateScopes}>
     <CardGrid>
-        <Heading tag="h6" size="7">Scopes</Heading>
-        <p class="text">
-            Select scopes to grant the dynamic key generated temporarily for your function. It is
-            best practice to allow only necessary permissions. <a
-                href="https://appwrite.io/docs/advanced/platform/api-keys#scopes"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">Learn more</a
-            >.
-        </p>
+        <svelte:fragment slot="title">Scopes</svelte:fragment>
+        Select scopes to grant the dynamic key generated temporarily for your function. It is best practice
+        to allow only necessary permissions.
+        <a
+            href="https://appwrite.io/docs/advanced/platform/api-keys#scopes"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link">Learn more</a
+        >.
         <svelte:fragment slot="aside">
             {#if functionScopes !== null}
                 <Scopes bind:scopes={functionScopes} />
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateTimeout.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateTimeout.svelte
index 9c4f07753..fbb3a7454 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateTimeout.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/updateTimeout.svelte
@@ -61,8 +61,8 @@
 
 <Form onSubmit={updateTimeout}>
     <CardGrid>
-        <Heading tag="h6" size="7" id="timeout">Timeout</Heading>
-        <p>Limit the execution time of your function. Maximum value is 900 seconds (15 minutes).</p>
+        <svelte:fragment slot="title">Timeout</svelte:fragment>
+        Limit the execution time of your function. Maximum value is 900 seconds (15 minutes).
         <svelte:fragment slot="aside">
             <FormList>
                 <InputNumber
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/delete.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/delete.svelte
index 4ffdf4b2d..ef9fd579b 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/delete.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/delete.svelte
@@ -11,12 +11,10 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">Delete message</Heading>
-    <p>
-        The message will be permanently deleted{message.status === 'scheduled'
-            ? ', and its delivery will be canceled'
-            : ''}. This action is irreversible.
-    </p>
+    <svelte:fragment slot="title">Delete Message</svelte:fragment>
+    The message will be permanently deleted{message.status === 'scheduled'
+        ? ', and its delivery will be canceled'
+        : ''}. This action is irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="title">
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte
index 36c479683..aa93de22d 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte
@@ -66,9 +66,7 @@
 
 <Form onSubmit={update}>
     <CardGrid hideFooter={!isDraft}>
-        <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
-            <Heading tag="h6" size="7">Message</Heading>
-        </div>
+        <svelte:fragment slot="title">Message</svelte:fragment>
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText id="subject" label="Subject" disabled={!isDraft} bind:value={subject}
diff --git a/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/dangerZone.svelte b/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/dangerZone.svelte
index ad935aaf8..e18a6e6cc 100644
--- a/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/dangerZone.svelte
+++ b/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/dangerZone.svelte
@@ -21,11 +21,9 @@
     import { base } from '$app/paths';
 </script>
 
-<CardGrid danger>
-    <div>
-        <Heading tag="h6" size="7">Delete provider</Heading>
-    </div>
-    <p>The provider's instance will be permanently deleted. This action is irreversible.</p>
+<CardGrid>
+    <svelte:fragment slot="title">Delete Provider</svelte:fragment>
+    The provider's instance will be permanently deleted. This action is irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="title">
diff --git a/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/updateName.svelte b/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/updateName.svelte
index 93991d10e..5e6dcfd03 100644
--- a/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/updateName.svelte
+++ b/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/updateName.svelte
@@ -101,8 +101,7 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h6" size="7">Name</Heading>
-
+        <svelte:fragment slot="title">Name</svelte:fragment>
         <svelte:fragment slot="aside">
             <ul data-private>
                 <InputText
diff --git a/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte b/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
index c7af0e6ad..9283f792a 100644
--- a/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
+++ b/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/updateSettings.svelte
@@ -218,18 +218,14 @@
 
 <Form onSubmit={update}>
     <CardGrid>
-        <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
-            <Heading tag="h6" size="7">Settings</Heading>
-        </div>
-        <p>
-            Configure the settings to <Button
-                link
-                href={`https://appwrite.io/docs/products/messaging/${provider}`}
-                external>enable {displayName}</Button> to send {message}, or <Button
-                link
-                on:click={() => (newMemberModal = true)}>invite a team member</Button> to complete the
-            provider settings.
-        </p>
+        <svelte:fragment slot="title">Settings</svelte:fragment>
+        Configure the settings to <Button
+            link
+            href={`https://appwrite.io/docs/products/messaging/${provider}`}
+            external>enable {displayName}</Button> to send {message}, or <Button
+            link
+            on:click={() => (newMemberModal = true)}>invite a team member</Button> to complete the provider
+        settings.
         <svelte:fragment slot="aside">
             <!-- Must wait until ready or else the files input won't be set properly -->
             {#if ready}
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 bbf1c1b6e..b938b0918 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
@@ -85,9 +85,7 @@
 <Container>
     {@const accessedAt = $key.accessedAt ? toLocaleDate($key.accessedAt) : 'never'}
     <CardGrid>
-        <div data-private>
-            <Heading tag="h6" size="7">{$key.name}</Heading>
-        </div>
+        <svelte:fragment slot="title">{$key.name}</svelte:fragment>
         <svelte:fragment slot="aside">
             <p>
                 Last accessed: {accessedAt}<br />
@@ -97,7 +95,7 @@
     </CardGrid>
 
     <CardGrid>
-        <Heading tag="h6" size="7">API key secret</Heading>
+        <svelte:fragment slot="title">API Key Secret</svelte:fragment>
         <svelte:fragment slot="aside">
             <Secret copyEvent="key" bind:value={secret} />
         </svelte:fragment>
@@ -105,8 +103,8 @@
 
     <Form onSubmit={updateName}>
         <CardGrid>
-            <Heading tag="h6" size="7">Name</Heading>
-            <p class="text">Choose any name that will help you distinguish between API keys.</p>
+            <svelte:fragment slot="title">Name</svelte:fragment>
+            Choose any name that will help you distinguish between API keys.
             <svelte:fragment slot="aside">
                 <FormList>
                     <InputText
@@ -125,11 +123,9 @@
     </Form>
     <Form onSubmit={updateScopes}>
         <CardGrid>
-            <Heading tag="h6" size="7">Scopes</Heading>
-            <p class="text">
-                You can choose which permission scope to grant your application. It is a best
-                practice to allow only the permissions you need to meet your project goals.
-            </p>
+            <svelte:fragment slot="title">Scopes</svelte:fragment>
+            You can choose which permission scope to grant your application. It is a best practice to
+            allow only the permissions you need to meet your project goals.
             <svelte:fragment slot="aside">
                 {#if scopes !== null}
                     <Scopes bind:scopes />
@@ -148,11 +144,9 @@
 
     <UpdateExpirationDate />
 
-    <CardGrid danger>
-        <div>
-            <Heading tag="h6" size="7">Delete API key</Heading>
-        </div>
-        <p>The API key will be permanently deleted. This action is irreversible.</p>
+    <CardGrid>
+        <svelte:fragment slot="title">Delete API Key</svelte:fragment>
+        The API key will be permanently deleted. This action is irreversible.
         <svelte:fragment slot="aside">
             <Box>
                 <div class="u-flex u-gap-16">
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 2a819a37a..063d910f0 100644
--- a/src/routes/(console)/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
@@ -45,8 +45,8 @@
 
 <Form onSubmit={updateExpire}>
     <CardGrid>
-        <Heading tag="h6" size="7">Expiration date</Heading>
-        <p class="text">Set a date after which your API key will expire.</p>
+        <svelte:fragment slot="title">Expiration Date</svelte:fragment>
+        Set a date after which your API key will expire.
         <svelte:fragment slot="aside">
             {#if isExpired}
                 <Alert type="error" dismissible on:dismiss={() => (alertsDismissed = true)}>
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 d9005ad9f..61dc43e2a 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
@@ -71,8 +71,8 @@
 <Container>
     <Form onSubmit={updateName}>
         <CardGrid>
-            <Heading tag="h6" size="7">Name</Heading>
-            <p class="text">Choose any name that will help you distinguish between platforms.</p>
+            <svelte:fragment slot="title">Name</svelte:fragment>
+            Choose any name that will help you distinguish between platforms.
             <svelte:fragment slot="aside">
                 <FormList>
                     <InputText
@@ -92,11 +92,9 @@
 
     <svelte:component this={types[$platform.type]} />
 
-    <CardGrid danger>
-        <div>
-            <Heading tag="h6" size="7">Delete platform</Heading>
-        </div>
-        <p>The Platform will be permanently deleted. This action is irreversible.</p>
+    <CardGrid>
+        <svelte:fragment slot="title">Delete Platform</svelte:fragment>
+        The Platform will be permanently deleted. This action is irreversible.
         <svelte:fragment slot="aside">
             <Box>
                 <div class="u-flex u-gap-16">
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 0c18d467f..1536cf0f8 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/android.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/android.svelte
@@ -46,10 +46,8 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Package name</Heading>
-        <p class="text">
-            Your package name is generally the applicationId in your app-level build.gradle file.
-        </p>
+        <svelte:fragment slot="title">Package Name</svelte:fragment>
+        Your package name is generally the applicationId in your app-level build.gradle file.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText
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 717e74d58..3707ce01c 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleIOS.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleIOS.svelte
@@ -46,11 +46,8 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Bundle ID</Heading>
-        <p class="text">
-            You can find your Bundle Identifier in the General tab for your app's primary target in
-            Xcode.
-        </p>
+        <svelte:fragment slot="title">Bundle ID</svelte:fragment>
+        You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText
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 d3ee9f781..d64706f29 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
@@ -46,11 +46,8 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Bundle ID</Heading>
-        <p class="text">
-            You can find your Bundle Identifier in the General tab for your app's primary target in
-            Xcode.
-        </p>
+        <svelte:fragment slot="title">Bundle ID</svelte:fragment>
+        You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText
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 b003d7167..78e36a8e8 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
@@ -46,11 +46,8 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Bundle ID</Heading>
-        <p class="text">
-            You can find your Bundle Identifier in the General tab for your app's primary target in
-            Xcode.
-        </p>
+        <svelte:fragment slot="title">Bundle ID</svelte:fragment>
+        You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText
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 1f2874532..06937016b 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
@@ -46,11 +46,8 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Bundle ID</Heading>
-        <p class="text">
-            You can find your Bundle Identifier in the General tab for your app's primary target in
-            Xcode.
-        </p>
+        <svelte:fragment slot="title">Bundle ID</svelte:fragment>
+        You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText
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 c3e30ad26..67d1ed5f5 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
@@ -46,10 +46,8 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Package name</Heading>
-        <p class="text">
-            Your package name is generally the applicationId in your app-level build.gradle file.
-        </p>
+        <svelte:fragment slot="title">Package Name</svelte:fragment>
+        Your package name is generally the applicationId in your app-level build.gradle file.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText
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 ceddc2018..6448597e0 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
@@ -46,11 +46,8 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Bundle ID</Heading>
-        <p class="text">
-            You can find your Bundle Identifier in the General tab for your app's primary target in
-            Xcode.
-        </p>
+        <svelte:fragment slot="title">Bundle ID</svelte:fragment>
+        You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText
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 1f0179b9a..d91689a91 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
@@ -46,8 +46,8 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Package name</Heading>
-        <p class="text">Your application name.</p>
+        <svelte:fragment slot="title">Package Name</svelte:fragment>
+        Your application name.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText
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 e3b842650..30529eab7 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
@@ -46,11 +46,8 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Bundle ID</Heading>
-        <p class="text">
-            You can find your Bundle Identifier in the General tab for your app's primary target in
-            Xcode.
-        </p>
+        <svelte:fragment slot="title">Bundle ID</svelte:fragment>
+        You can find your Bundle Identifier in the General tab for your app's primary target in Xcode.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText
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 90e5a1de6..dc2d44f15 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
@@ -46,8 +46,8 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Package name</Heading>
-        <p class="text">Your application name.</p>
+        <svelte:fragment slot="title">Package Name</svelte:fragment>
+        Your application name.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText
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 34aafe9b9..e8fbf50ef 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/web.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/web.svelte
@@ -41,8 +41,8 @@
 
 <Form onSubmit={updateHostname}>
     <CardGrid>
-        <Heading tag="h6" size="7">Hostname</Heading>
-        <p class="text">You can use * to allow wildcard hostnames or subdomains.</p>
+        <svelte:fragment slot="title">Hostname</svelte:fragment>
+        You can use * to allow wildcard hostnames or subdomains.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText
diff --git a/src/routes/(console)/project-[project]/settings/+page.svelte b/src/routes/(console)/project-[project]/settings/+page.svelte
index ab0493239..86f1578b8 100644
--- a/src/routes/(console)/project-[project]/settings/+page.svelte
+++ b/src/routes/(console)/project-[project]/settings/+page.svelte
@@ -87,9 +87,8 @@
                 isGlobal={true}
                 variableList={data.variables} />
             <CardGrid>
-                <Heading tag="h6" size="7">Transfer project</Heading>
-                <p class="text">Transfer your project to another organization that you own.</p>
-
+                <svelte:fragment slot="title">Transfer Project</svelte:fragment>
+                Transfer your project to another organization that you own.
                 <svelte:fragment slot="aside">
                     <FormList>
                         <InputSelect
diff --git a/src/routes/(console)/project-[project]/settings/deleteProject.svelte b/src/routes/(console)/project-[project]/settings/deleteProject.svelte
index 9c6ab2887..a669a9586 100644
--- a/src/routes/(console)/project-[project]/settings/deleteProject.svelte
+++ b/src/routes/(console)/project-[project]/settings/deleteProject.svelte
@@ -43,13 +43,9 @@
 </script>
 
 <CardGrid>
-    <div>
-        <Heading tag="h6" size="7">Delete project</Heading>
-    </div>
-    <p>
-        The project will be permanently deleted, including all the metadata, resources and stats
-        within it. This action is irreversible.
-    </p>
+    <svelte:fragment slot="title">Delete Project</svelte:fragment>
+    The project will be permanently deleted, including all the metadata, resources and stats within it.
+    This action is irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="title">
diff --git a/src/routes/(console)/project-[project]/settings/migrations/+page.svelte b/src/routes/(console)/project-[project]/settings/migrations/+page.svelte
index 2f697b3a0..1cd5c2fbf 100644
--- a/src/routes/(console)/project-[project]/settings/migrations/+page.svelte
+++ b/src/routes/(console)/project-[project]/settings/migrations/+page.svelte
@@ -134,16 +134,15 @@
 
 <Container>
     <CardGrid>
-        <Heading tag="h3" size="7">Import project data</Heading>
-        <p class="text">
-            Import data from another platform or from a different Appwrite instance. <a
-                class="link"
-                href="https://appwrite.io/docs/advanced/migrations"
-                target="_blank"
-                rel="noopener noreferrer">
-                Learn about which platforms are supported</a
-            >.
-        </p>
+        <svelte:fragment slot="title">Import Project Data</svelte:fragment>
+        Import data from another platform or from a different Appwrite instance.
+        <a
+            class="link"
+            href="https://appwrite.io/docs/advanced/migrations"
+            target="_blank"
+            rel="noopener noreferrer">
+            Learn about which platforms are supported</a
+        >.
         <svelte:fragment slot="aside">
             {#if data.migrations.length}
                 <div class="u-flex">
@@ -230,15 +229,14 @@
     </CardGrid>
     {#if isSelfHosted}
         <CardGrid>
-            <Heading tag="h3" size="7">Deploy to Cloud</Heading>
-            <p class="text">
-                Export data from your project to Appwrite Cloud. <a
-                    class="link"
-                    href="https://appwrite.io/docs/advanced/migrations/self-hosted"
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    Learn more in our documentation.</a>
-            </p>
+            <svelte:fragment slot="title">Deploy To Cloud</svelte:fragment>
+            Export data from your project to Appwrite Cloud.
+            <a
+                class="link"
+                href="https://appwrite.io/docs/advanced/migrations/self-hosted"
+                target="_blank"
+                rel="noopener noreferrer">
+                Learn more in our documentation.</a>
             <svelte:fragment slot="aside">
                 <div class="import-box">
                     <div class="u-flex u-cross-center u-gap-8">
@@ -258,15 +256,14 @@
         </CardGrid>
     {:else}
         <CardGrid>
-            <Heading tag="h3" size="7">Export to self-hosted instance</Heading>
-            <p class="text">
-                Export data from your project to a self-hosted instance. <a
-                    class="link"
-                    href="https://appwrite.io/docs/advanced/migrations/self-hosted"
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    Learn more in our documentation.</a>
-            </p>
+            <svelte:fragment slot="title">Export To Self-hosted Instance</svelte:fragment>
+            Export data from your project to a self-hosted instance.
+            <a
+                class="link"
+                href="https://appwrite.io/docs/advanced/migrations/self-hosted"
+                target="_blank"
+                rel="noopener noreferrer">
+                Learn more in our documentation.</a>
             <svelte:fragment slot="aside">
                 <div class="import-box">
                     <div class="u-flex u-cross-center u-gap-8">
diff --git a/src/routes/(console)/project-[project]/settings/smtp/+page.svelte b/src/routes/(console)/project-[project]/settings/smtp/+page.svelte
index b6ea4ee3f..898414b75 100644
--- a/src/routes/(console)/project-[project]/settings/smtp/+page.svelte
+++ b/src/routes/(console)/project-[project]/settings/smtp/+page.svelte
@@ -124,13 +124,9 @@
 <Container>
     <Form onSubmit={updateSmtp}>
         <CardGrid>
-            <Heading tag="h6" size="7">SMTP server</Heading>
-            <p class="text">
-                You can customize the email service by providing your own SMTP server. View your
-                email templates <a
-                    href={`${base}/project-${$project.$id}/auth/templates`}
-                    class="link">here</a>
-            </p>
+            <svelte:fragment slot="title">SMTP Server</svelte:fragment>
+            You can customize the email service by providing your own SMTP server. View your email templates
+            <a href={`${base}/project-${$project.$id}/auth/templates`} class="link">here</a>
             <svelte:fragment slot="aside">
                 {#if $organization.billingPlan === BillingPlan.FREE}
                     <Alert type="info">
diff --git a/src/routes/(console)/project-[project]/settings/updateInstallations.svelte b/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
index 429646ed8..05ca93b4b 100644
--- a/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
+++ b/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
@@ -90,11 +90,8 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">Git configuration</Heading>
-    <p class="text">
-        Add a Git installation to your project. You can connect a repository in your function
-        settings.
-    </p>
+    <svelte:fragment slot="title">Git Configuration</svelte:fragment>
+    Add a Git installation to your project. You can connect a repository in your function settings.
     <svelte:fragment slot="aside">
         {#if total > 0}
             <div>
diff --git a/src/routes/(console)/project-[project]/settings/updateName.svelte b/src/routes/(console)/project-[project]/settings/updateName.svelte
index 09f6a686c..b98d2136d 100644
--- a/src/routes/(console)/project-[project]/settings/updateName.svelte
+++ b/src/routes/(console)/project-[project]/settings/updateName.svelte
@@ -41,11 +41,11 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">API credentials</Heading>
-    <p class="text">Access Appwrite services using this project's API Endpoint and Project ID.</p>
+    <svelte:fragment slot="title">API Credentials</svelte:fragment>
+    Access Appwrite services using this project's API Endpoint and Project ID.
     <svelte:fragment slot="aside">
-        <CopyInput label="Project ID" showLabel={true} value={$project.$id} />
-        <CopyInput label="API Endpoint" showLabel={true} value={endpoint} />
+        <CopyInput label="Project ID" value={$project.$id} />
+        <CopyInput label="API Endpoint" value={endpoint} />
     </svelte:fragment>
     <svelte:fragment slot="actions">
         <Button
@@ -59,8 +59,7 @@
 {#if $canWriteProjects}
     <Form onSubmit={updateName}>
         <CardGrid>
-            <Heading tag="h6" size="7">Name</Heading>
-
+            <svelte:fragment slot="title">Name</svelte:fragment>
             <svelte:fragment slot="aside">
                 <FormList>
                     <InputText
diff --git a/src/routes/(console)/project-[project]/settings/updateServices.svelte b/src/routes/(console)/project-[project]/settings/updateServices.svelte
index 1c93e1de9..660c943d3 100644
--- a/src/routes/(console)/project-[project]/settings/updateServices.svelte
+++ b/src/routes/(console)/project-[project]/settings/updateServices.svelte
@@ -81,11 +81,9 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">Services</Heading>
-    <p class="text">
-        Choose services you wish to enable or disable for the client API. When disabled, the
-        services are not accessible to client SDKs but remain accessible to server SDKs.
-    </p>
+    <svelte:fragment slot="title">Services</svelte:fragment>
+    Choose services you wish to enable or disable for the client API. When disabled, the services are
+    not accessible to client SDKs but remain accessible to server SDKs.
     <svelte:fragment slot="aside">
         <Layout.Stack>
             <Layout.Stack direction="row" justifyContent="flex-end">
diff --git a/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte b/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
index e860accbb..0be3df831 100644
--- a/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
@@ -111,11 +111,8 @@
                 </div>-->
     </div>
     <CardGrid>
-        <Heading tag="h4" size="7">Bandwidth</Heading>
-        <p class="text">
-            Calculated for all bandwidth used across your project. Resets at the start of each
-            billing cycle.
-        </p>
+        <svelte:fragment slot="title">Bandwidth</svelte:fragment>
+        Calculated for all bandwidth used across your project. Resets at the start of each billing cycle.
         <svelte:fragment slot="aside">
             {#if network}
                 {@const humanized = humanFileSize(total(network))}
@@ -160,10 +157,8 @@
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">Users</Heading>
-
-        <p class="text">Total user in your project.</p>
-
+        <svelte:fragment slot="title">Users</svelte:fragment>
+        Total user in your project.
         <svelte:fragment slot="aside">
             {#if users}
                 {@const current = formatNum(usersTotal)}
@@ -203,10 +198,8 @@
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">Database reads and writes</Heading>
-
-        <p class="text">Total database reads and writes in your project.</p>
-
+        <svelte:fragment slot="title">Database Reads And Writes</svelte:fragment>
+        Total database reads and writes in your project.
         <svelte:fragment slot="aside">
             {#if dbReads || dbWrites}
                 <div style:margin-top="-1.5em" style:margin-bottom="-1em">
@@ -245,12 +238,8 @@
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">Executions</Heading>
-
-        <p class="text">
-            Calculated for all functions that are executed in all projects in your project.
-        </p>
-
+        <svelte:fragment slot="title">Executions</svelte:fragment>
+        Calculated for all functions that are executed in all projects in your project.
         <svelte:fragment slot="aside">
             {#if executions}
                 {@const current = formatNum(executionsTotal)}
@@ -315,12 +304,8 @@
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">Storage</Heading>
-
-        <p class="text">
-            Calculated for all your files, deployments, builds, databases and backups.
-        </p>
-
+        <svelte:fragment slot="title">Storage</svelte:fragment>
+        Calculated for all your files, deployments, builds, databases and backups.
         <svelte:fragment slot="aside">
             {#if storage}
                 {@const humanized = humanFileSize(storage)}
@@ -376,12 +361,9 @@
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">GB hours</Heading>
-
-        <p class="text">
-            GB hours represent the memory usage (in gigabytes) of your function executions and
-            builds, multiplied by the total execution time (in hours).
-        </p>
+        <svelte:fragment slot="title">GB Hours</svelte:fragment>
+        GB hours represent the memory usage (in gigabytes) of your function executions and builds, multiplied
+        by the total execution time (in hours).
         <svelte:fragment slot="aside">
             {#if data.usage.executionsMbSecondsTotal}
                 {@const totalGbHours = mbSecondsToGBHours(
@@ -434,12 +416,9 @@
         </svelte:fragment>
     </CardGrid>
     <CardGrid>
-        <Heading tag="h6" size="7">Phone OTP</Heading>
-        <p class="text">
-            Calculated for all Phone OTP sent across your project. Resets at the start of each
-            billing cycle.
-        </p>
-        <p>You will not be charged for Phone OTPs before February 10th.</p>
+        <svelte:fragment slot="title">Phone OTP</svelte:fragment>
+        Calculated for all Phone OTP sent across your project. Resets at the start of each billing cycle.<br />
+        You will not be charged for Phone OTPs before February 10th.
         <svelte:fragment slot="aside">
             {#if data.usage.authPhoneTotal}
                 <div class="u-flex u-main-space-between">
diff --git a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/dangerZone.svelte b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/dangerZone.svelte
index c24a86152..cc6e8254c 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/dangerZone.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/dangerZone.svelte
@@ -9,10 +9,8 @@
 </script>
 
 <CardGrid>
-    <div>
-        <Heading tag="h2" size="7">Delete webhook</Heading>
-    </div>
-    <p>The webhook will be permanently deleted. This action is irreversible.</p>
+    <svelte:fragment slot="title">Delete Webhooks</svelte:fragment>
+    The webhook will be permanently deleted. This action is irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="title">
diff --git a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/details.svelte b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/details.svelte
index 37424e263..9da29e69e 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/details.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/details.svelte
@@ -55,8 +55,7 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="7">{$webhook.url}</Heading>
-
+    <svelte:fragment slot="title">{$webhook.url}</svelte:fragment>
     <svelte:fragment slot="aside">
         <div class="u-flex u-gap-16">
             <ul class="u-stretch">
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 dfddfe67d..92eb18907 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateEvents.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateEvents.svelte
@@ -69,10 +69,8 @@
 
 <Form onSubmit={updateEvents}>
     <CardGrid>
-        <Heading tag="h6" size="7">Events</Heading>
-        <p class="text">
-            Set the events that will trigger your webhook. Maximum 100 events allowed.
-        </p>
+        <svelte:fragment slot="title">Events</svelte:fragment>
+        Set the events that will trigger your webhook. Maximum 100 events allowed.
         <svelte:fragment slot="aside">
             {#if $eventSet.size}
                 <TableList>
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 fcbca7cd7..8946d1709 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateName.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateName.svelte
@@ -48,8 +48,8 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h2" size="7">Name</Heading>
-        <p>Choose any name that will help you distinguish between Webhooks.</p>
+        <svelte:fragment slot="title">Name</svelte:fragment>
+        Choose any name that will help you distinguish between Webhooks.
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText
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 2f375174a..3d72a691f 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateSecurity.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateSecurity.svelte
@@ -59,11 +59,9 @@
 
 <Form onSubmit={updateSecurity}>
     <CardGrid>
-        <Heading tag="h2" size="7">Security</Heading>
-        <p class="text">
-            Set an optional basic HTTP authentication username and password to protect your endpoint
-            from unauthorized access.
-        </p>
+        <svelte:fragment slot="title">Security</svelte:fragment>
+        Set an optional basic HTTP authentication username and password to protect your endpoint from
+        unauthorized access.
         <svelte:fragment slot="aside">
             <FormList>
                 <div>
diff --git a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateSignature.svelte b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateSignature.svelte
index 4d2db1e82..a8c9e9bce 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateSignature.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateSignature.svelte
@@ -8,14 +8,13 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h2" size="7">Signature key</Heading>
-    <p>
-        Add the Signature Key to the X-Appwrite-Webhook-Signature header to validate your webhooks. <a
-            href="https://appwrite.io/docs/advanced/platform/webhooks#verification"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">Learn more about webhook validation.</a>
-    </p>
+    <svelte:fragment slot="title">Signature Key</svelte:fragment>
+    Add the Signature Key to the X-Appwrite-Webhook-Signature header to validate your webhooks.
+    <a
+        href="https://appwrite.io/docs/advanced/platform/webhooks#verification"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="link">Learn more about webhook validation.</a>
     <svelte:fragment slot="aside">
         <div>
             <p>Key</p>
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 c37169404..d966a65e0 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateURL.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateURL.svelte
@@ -48,8 +48,7 @@
 
 <Form onSubmit={updateUrl}>
     <CardGrid>
-        <Heading tag="h2" size="7">URL</Heading>
-
+        <svelte:fragment slot="title">URL</svelte:fragment>
         <svelte:fragment slot="aside">
             <FormList>
                 <InputText
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/domain-[domain]/SSLCertificates.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/domain-[domain]/SSLCertificates.svelte
index 5581a5f67..0483c3665 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/domain-[domain]/SSLCertificates.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/domain-[domain]/SSLCertificates.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
     import { CardGrid } from '$lib/components';
-    import Heading from '$lib/components/heading.svelte';
-    import { toLocaleDateTime } from '$lib/helpers/date';
     import type { Models } from '@appwrite.io/console';
     import { Table } from '@appwrite.io/pink-svelte';
 
@@ -9,11 +7,9 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">SSL certificates</Heading>
-    <p>
-        SSL certificates secure your site with HTTPS, protecting data and boosting trust. Appwrite
-        renews your SSL certificates automatically.
-    </p>
+    <svelte:fragment slot="title">SSL Certificates</svelte:fragment>
+    SSL certificates secure your site with HTTPS, protecting data and boosting trust. Appwrite renews
+    your SSL certificates automatically.
     <svelte:fragment slot="aside">
         <Table.Root>
             <svelte:fragment slot="header">
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/domain-[domain]/deleteDomain.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/domain-[domain]/deleteDomain.svelte
index 384cb391e..2a0bbf376 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/domain-[domain]/deleteDomain.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/domain-[domain]/deleteDomain.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { BoxAvatar, CardGrid } from '$lib/components';
-    import Heading from '$lib/components/heading.svelte';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import type { Models } from '@appwrite.io/console';
@@ -11,8 +10,8 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">Delete domain</Heading>
-    <p>Deleting this domain will remove the domain from all associated projects.</p>
+    <svelte:fragment slot="title">Delete Domain</svelte:fragment>
+    Deleting this domain will remove the domain from all associated projects.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="title">
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domains/domain-[domain]/domainDetails.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domains/domain-[domain]/domainDetails.svelte
index 7b3507daa..94ec2e8f9 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/domains/domain-[domain]/domainDetails.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/domains/domain-[domain]/domainDetails.svelte
@@ -12,11 +12,9 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">SSL certificates</Heading>
-    <p>
-        SSL certificates secure your site with HTTPS, protecting data and boosting trust. Appwrite
-        renews your SSL certificates automatically.
-    </p>
+    <svelte:fragment slot="title">SSL Certificates</svelte:fragment>
+    SSL certificates secure your site with HTTPS, protecting data and boosting trust. Appwrite renews
+    your SSL certificates automatically.
     <svelte:fragment slot="aside">
         <Layout.Stack gap="xl">
             <Layout.Stack gap="xl" direction="row">
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/dangerZone.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/dangerZone.svelte
index 0fff3adc8..479520b49 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/dangerZone.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/dangerZone.svelte
@@ -11,11 +11,9 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7">Delete site</Heading>
-    <p>
-        The site will be permanently deleted, including all deployments associated with it. This
-        action is irreversible.
-    </p>
+    <svelte:fragment slot="title">Delete Site</svelte:fragment>
+    The site will be permanently deleted, including all deployments associated with it. This action is
+    irreversible.
     <svelte:fragment slot="aside">
         <BoxAvatar>
             <svelte:fragment slot="title">
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte
index b588e2d62..7972e7bb1 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte
@@ -81,11 +81,9 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h6" size="7">Build settings</Heading>
-        <p class="text">
-            Default build settings are configured based on your framework, ensuring optimal
-            performance. Adjust the settings here if needed.
-        </p>
+        <svelte:fragment slot="title">Build Settings</svelte:fragment>
+        Default build settings are configured based on your framework, ensuring optimal performance.
+        Adjust the settings here if needed.
         <svelte:fragment slot="aside">
             <InputSelect
                 id="framework"
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateName.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateName.svelte
index 9f4c2f29b..0df7470df 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateName.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateName.svelte
@@ -54,7 +54,7 @@
 
 <Form onSubmit={updateName}>
     <CardGrid>
-        <Heading tag="h6" size="7">Name</Heading>
+        <svelte:fragment slot="title">Name</svelte:fragment>
         <svelte:fragment slot="aside">
             <InputText
                 id="name"
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRepository.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRepository.svelte
index 3c26c9de7..2278de74d 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRepository.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRepository.svelte
@@ -116,10 +116,8 @@
 
 <Form onSubmit={updateConfiguration}>
     <CardGrid>
-        <Heading tag="h6" size="7">Repository</Heading>
-        <p class="text">
-            Automatically deploy changes for every commit pushed to your Git repository.
-        </p>
+        <svelte:fragment slot="title">Repository</svelte:fragment>
+        Automatically deploy changes for every commit pushed to your Git repository.
         <svelte:fragment slot="aside">
             {#if repository === false}
                 <Layout.Stack gap="xl">
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRuntimeSettings.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRuntimeSettings.svelte
index 8f5928073..546c1e549 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRuntimeSettings.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateRuntimeSettings.svelte
@@ -60,12 +60,9 @@
 
 <Form onSubmit={updateRuntime}>
     <CardGrid>
-        <Heading tag="h6" size="7">Runtime settings</Heading>
-        <p class="text">
-            Select the runtime for building and serving your site. Version changes apply on redeploy
-            and can be updated here.
-        </p>
-
+        <svelte:fragment slot="title">Runtime Settings</svelte:fragment>
+        Select the runtime for building and serving your site. Version changes apply on redeploy and
+        can be updated here.
         <svelte:fragment slot="aside">
             <InputSelect
                 label="Build runtime"
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateSPA.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateSPA.svelte
index 1600d980a..66d28937e 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateSPA.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateSPA.svelte
@@ -60,9 +60,8 @@
 
 <Form onSubmit={updateSPA}>
     <CardGrid>
-        <Heading tag="h6" size="7">Single page application</Heading>
-        <p>Provide a fallback file for advanced routing and proper page handling in SPA mode.</p>
-
+        <svelte:fragment slot="title">Single Page Application</svelte:fragment>
+        Provide a fallback file for advanced routing and proper page handling in SPA mode.
         <svelte:fragment slot="aside">
             <InputChoice
                 id="spa"
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateTimeout.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateTimeout.svelte
index ff8e57ffe..8454dae35 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateTimeout.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateTimeout.svelte
@@ -53,8 +53,8 @@
 
 <Form onSubmit={updateTimeout}>
     <CardGrid>
-        <Heading tag="h6" size="7" id="timeout">Timeout</Heading>
-        <p>Set a time limit for the execution of your site. The maximum value is 30 seconds.</p>
+        <svelte:fragment slot="title">Timeout</svelte:fragment>
+        Set a time limit for the execution of your site. The maximum value is 30 seconds.
         <svelte:fragment slot="aside">
             <InputNumber
                 min={1}
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
index 53fe70365..19f204236 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
@@ -118,11 +118,9 @@
         </CardGrid>
 
         <CardGrid>
-            <Heading tag="h6" size="7">Permissions</Heading>
-            <p>
-                Assign read or write permissions at the bucket level or file level. If bucket level
-                permissions are enabled, file permissions will be ignored.
-            </p>
+            <svelte:fragment slot="title">Permissions</svelte:fragment>
+            Assign read or write permissions at the bucket level or file level. If bucket level permissions
+            are enabled, file permissions will be ignored.
             <svelte:fragment slot="aside">
                 {#if $bucket.fileSecurity}
                     {#if showFileAlert}
@@ -157,8 +155,8 @@
         </CardGrid>
 
         <CardGrid>
-            <Heading tag="h6" size="7">Delete file</Heading>
-            <p>The file will be permanently deleted. This action is irreversible.</p>
+            <svelte:fragment slot="title">Delete File</svelte:fragment>
+            The file will be permanently deleted. This action is irreversible.
             <svelte:fragment slot="aside">
                 <BoxAvatar>
                     <svelte:fragment slot="title">
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 00f4afeb3..76e263174 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
@@ -224,8 +224,7 @@
     {#if $bucket}
         <Form onSubmit={toggleBucket}>
             <CardGrid>
-                <Heading tag="h2" size="7">{$bucket.name}</Heading>
-
+                <svelte:fragment slot="title">{$bucket.name}</svelte:fragment>
                 <svelte:fragment slot="aside">
                     <div>
                         <FormList>
@@ -252,7 +251,7 @@
 
         <Form onSubmit={updateName}>
             <CardGrid>
-                <Heading tag="h6" size="7">Name</Heading>
+                <svelte:fragment slot="title">Name</svelte:fragment>
                 <svelte:fragment slot="aside">
                     <FormList>
                         <InputText
@@ -278,16 +277,15 @@
 
         <Form onSubmit={updatePermissions}>
             <CardGrid hideOverflow>
-                <Heading tag="h6" size="7" id="permissions">Permissions</Heading>
-                <p class="text">
-                    Choose who can access your buckets and files. For more information, visit our <a
-                        href="https://appwrite.io/docs/advanced/platform/permissions"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="link">
-                        Permissions guide
-                    </a>.
-                </p>
+                <svelte:fragment slot="title">Permissions</svelte:fragment>
+                Choose who can access your buckets and files. For more information, visit our
+                <a
+                    href="https://appwrite.io/docs/advanced/platform/permissions"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="link">
+                    Permissions guide
+                </a>.
                 <svelte:fragment slot="aside">
                     {#if bucketPermissions}
                         <Permissions bind:permissions={bucketPermissions} withCreate />
@@ -301,7 +299,7 @@
 
         <Form onSubmit={updateFileSecurity}>
             <CardGrid>
-                <Heading tag="h6" size="7" id="file-security">File security</Heading>
+                <svelte:fragment slot="title">File Security</svelte:fragment>
                 <svelte:fragment slot="aside">
                     <FormList>
                         <InputSwitch
@@ -332,11 +330,9 @@
 
         <Form onSubmit={updateSecurity}>
             <CardGrid>
-                <Heading tag="h2" size="7">Security settings</Heading>
-                <p class="text">
-                    Enable or disable security services for the bucket including <b>Ecryption</b>
-                    and <b>Antivirus scanning.</b>
-                </p>
+                <svelte:fragment slot="title">Security Settings</svelte:fragment>
+                Enable or disable security services for the bucket including <b>Ecryption</b>
+                and <b>Antivirus scanning.</b>
                 <svelte:fragment slot="aside">
                     <FormList>
                         <InputChoice
@@ -371,11 +367,9 @@
 
         <Form onSubmit={updateCompression}>
             <CardGrid>
-                <Heading tag="h2" size="6">Compression</Heading>
-                <p class="text">
-                    Choose an algorithm for compression. For files larger than 20MB, compression
-                    will be skipped even if it's enabled.
-                </p>
+                <svelte:fragment slot="title">Compression</svelte:fragment>
+                Choose an algorithm for compression. For files larger than 20MB, compression will be
+                skipped even if it's enabled.
                 <svelte:fragment slot="aside">
                     <FormList>
                         <InputSelect
@@ -396,11 +390,9 @@
 
         <Form onSubmit={updateAllowedExtensions}>
             <CardGrid hideOverflow>
-                <Heading tag="h6" size="7" id="extensions">Allowed file extensions</Heading>
-                <p class="text">
-                    Allowed file extensions. A maximum of 100 file extensions can be added. Leave
-                    blank to allow all file types.
-                </p>
+                <svelte:fragment slot="title">Allowed File Extension</svelte:fragment>
+                Allowed file extensions. A maximum of 100 file extensions can be added. Leave blank to
+                allow all file types.
                 <svelte:fragment slot="aside">
                     <ul class="common-section">
                         <InputTags
@@ -437,11 +429,9 @@
         </Form>
 
         <CardGrid>
-            <Heading tag="h6" size="7">Delete bucket</Heading>
-            <p class="text">
-                The bucket will be permanently deleted, including all the files within it. This
-                action is irreversible.
-            </p>
+            <svelte:fragment slot="title">Delete Bucket</svelte:fragment>
+            The bucket will be permanently deleted, including all the files within it. This action is
+            irreversible.
             <svelte:fragment slot="aside">
                 <BoxAvatar>
                     <svelte:fragment slot="title">
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 617f82ba2..50347f113 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
@@ -37,8 +37,8 @@
 
 <Form onSubmit={updateMaxSize}>
     <CardGrid>
-        <Heading tag="h2" size="7">Maximum file size</Heading>
-        <p class="text">Set the maximum file size allowed in the bucket.</p>
+        <svelte:fragment slot="title">Maximum File Size</svelte:fragment>
+        Set the maximum file size allowed in the bucket.
         <svelte:fragment slot="aside">
             {#if isCloud}
                 {@const size = humanFileSize(sizeToBytes(service, 'MB', 1000))}
diff --git a/src/routes/(console)/project-[project]/updateVariables.svelte b/src/routes/(console)/project-[project]/updateVariables.svelte
index 9e4f8e5f8..d303d8cda 100644
--- a/src/routes/(console)/project-[project]/updateVariables.svelte
+++ b/src/routes/(console)/project-[project]/updateVariables.svelte
@@ -2,7 +2,7 @@
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { Button } from '$lib/elements/forms';
-    import { CardGrid, Heading, Empty, Output, PaginationInline } from '$lib/components';
+    import { CardGrid, Empty, Output, PaginationInline } from '$lib/components';
     import UploadVariables from './uploadVariablesModal.svelte';
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
@@ -192,22 +192,16 @@
 </script>
 
 <CardGrid>
-    <Heading tag="h6" size="7" id="variables">
-        {isGlobal ? 'Global variables' : 'Environment variables'}
-    </Heading>
+    <svelte:fragment slot="title"
+        >{isGlobal ? 'Global variables' : 'Environment variables'}</svelte:fragment>
     {#if isGlobal}
-        <p>
-            Set the environment variables or secret keys that will be passed to all functions and
-            sites within your project.
-        </p>
+        Set the environment variables or secret keys that will be passed to all functions and sites
+        within your project.
     {:else}
-        <p>
-            Set the environment variables or secret keys that will be passed to your {product}.
-            Global variables can be found in <Link
-                href={`${base}/project-${$project.$id}/settings#variables`}>
-                project settings</Link
-            >.
-        </p>
+        Set the environment variables or secret keys that will be passed to your {product}. Global
+        variables can be found in <Link href={`${base}/project-${$project.$id}/settings#variables`}>
+            project settings</Link
+        >.
     {/if}
     <svelte:fragment slot="aside">
         <Layout.Stack justifyContent="space-between" direction="row">