From 4dbd0b3a149a243f33e7ac6dc6f78d7d05ca0503 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 13 Oct 2022 13:50:40 -0700
Subject: [PATCH] Replace old heading elements with Heading component

---
 src/lib/components/gridItem1.svelte              |  3 ++-
 src/lib/components/modal.svelte                  |  6 +++---
 src/lib/layout/shell.svelte                      | 11 ++++++-----
 src/lib/layout/usage.svelte                      | 14 +++++++-------
 src/lib/layout/wizardStep.svelte                 |  5 +++--
 src/routes/console/account/+page.svelte          | 10 +++++-----
 .../console/account/organizations/+page.svelte   | 11 +++++++++--
 src/routes/console/account/sessions/+page.svelte |  4 ++--
 .../organization-[organization]/+page.svelte     |  5 ++---
 .../members/+page.svelte                         |  4 ++--
 .../settings/+page.svelte                        |  6 +++---
 .../authentication/security/+page.svelte         |  6 +++---
 .../authentication/settings/+page.svelte         |  4 ++--
 .../authentication/teams/[team]/+page.svelte     |  8 ++++----
 .../authentication/user/[user]/+page.svelte      | 16 ++++++++--------
 .../project-[project]/databases/+page.svelte     |  4 ++--
 .../databases/database/[database]/+page.svelte   |  4 ++--
 .../collection/[collection]/+page.svelte         |  4 ++--
 .../[collection]/attributes/+page.svelte         |  4 ++--
 .../document/[document]/+page.svelte             |  8 ++++----
 .../document/[document]/_document.svelte         |  4 ++--
 .../[collection]/settings/+page.svelte           | 10 +++++-----
 .../database/[database]/settings/+page.svelte    |  8 ++++----
 .../project-[project]/overview/+layout.svelte    |  4 ++--
 .../project-[project]/overview/keys/+page.svelte |  3 ++-
 .../keys/[key]/+page@project-[project].svelte    | 14 +++++++-------
 .../overview/platforms/+page.svelte              |  4 ++--
 .../[platform]/+page@project-[project].svelte    |  6 +++---
 .../platforms/[platform]/appleIOS.svelte         |  4 ++--
 .../platforms/[platform]/appleMacOS.svelte       |  4 ++--
 .../platforms/[platform]/appleTvOS.svelte        |  4 ++--
 .../platforms/[platform]/appleWatchOS.svelte     |  4 ++--
 .../platforms/[platform]/flutterAndroid.svelte   |  4 ++--
 .../platforms/[platform]/flutterIOS.svelte       |  4 ++--
 .../platforms/[platform]/flutterLinux.svelte     |  4 ++--
 .../platforms/[platform]/flutterMacOS.svelte     |  4 ++--
 .../platforms/[platform]/flutterWindows.svelte   |  4 ++--
 .../overview/platforms/[platform]/web.svelte     |  4 ++--
 .../project-[project]/settings/+page.svelte      | 10 +++++-----
 .../project-[project]/storage/+page.svelte       |  4 ++--
 .../bucket/[bucket]/file/[file]/+page.svelte     |  8 ++++----
 .../bucket/[bucket]/settings/+page.svelte        | 16 ++++++++--------
 42 files changed, 139 insertions(+), 129 deletions(-)

diff --git a/src/lib/components/gridItem1.svelte b/src/lib/components/gridItem1.svelte
index 8220f6429..e5041f9da 100644
--- a/src/lib/components/gridItem1.svelte
+++ b/src/lib/components/gridItem1.svelte
@@ -1,4 +1,5 @@
 <script>
+    import { Heading } from '$lib/components';
     export let href;
 </script>
 
@@ -6,7 +7,7 @@
     <div class="grid-item-1">
         <div class="grid-item-1-start-start">
             <div class="eyebrow-heading-3"><slot name="eyebrow" /></div>
-            <h2 class="heading-level-6"><slot name="title" /></h2>
+            <Heading tag="h2" size="6"><slot name="title" /></Heading>
         </div>
         <div class="grid-item-1-start-end">
             <slot name="status" />
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index d2ff5b89c..4a42b7533 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -2,7 +2,7 @@
     import { browser } from '$app/environment';
     import { createEventDispatcher } from 'svelte';
     import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
-    import { Alert } from '$lib/components';
+    import { Alert, Heading } from '$lib/components';
     import { clickOnEnter } from '$lib/helpers/a11y';
 
     export let show = false;
@@ -76,9 +76,9 @@
                         <span class="icon-exclamation" aria-hidden="true" />
                     </div>
                 {/if}
-                <h4 class="heading-level-5">
+                <Heading tag="h4" size="5">
                     <slot name="header" />
-                </h4>
+                </Heading>
                 {#if closable}
                     <button
                         type="button"
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 79d720472..9b682a08d 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -9,7 +9,8 @@
         DropListLink,
         AvatarGroup,
         Tabs,
-        Tab
+        Tab,
+        Heading
     } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
@@ -106,13 +107,13 @@
                         <button
                             class="button is-text u-padding-inline-0"
                             on:click={() => (showDropdown = !showDropdown)}>
-                            <h1 class="heading-level-4">
+                            <Heading tag="h1" size="4">
                                 <span class="text"> {$organization.name}</span>
 
                                 <span
                                     class={`icon-cheveron-${showDropdown ? 'up' : 'down'}`}
                                     aria-hidden="true" />
-                            </h1>
+                            </Heading>
                         </button>
                         <svelte:fragment slot="list">
                             {#each $titleDropdown as org}
@@ -147,9 +148,9 @@
                         </div>
                     </div>
                 {:else}
-                    <h1 class="heading-level-4">
+                    <Heading tag="h1" size="4">
                         <span class="text">{$title ? $title : '-'}</span>
-                    </h1>
+                    </Heading>
                 {/if}
                 {#if $page.url.pathname.includes('/console/account')}
                     <div class="u-margin-inline-start-auto">
diff --git a/src/lib/layout/usage.svelte b/src/lib/layout/usage.svelte
index 7f3b15f66..979f70e2b 100644
--- a/src/lib/layout/usage.svelte
+++ b/src/lib/layout/usage.svelte
@@ -5,7 +5,7 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
     import { BarChart, LineChart } from '$lib/charts';
-    import { Card, DropTabs, DropTabsItem, Tiles } from '$lib/components';
+    import { Card, DropTabs, DropTabsItem, Heading, Tiles } from '$lib/components';
     import { Colors } from '$lib/charts/config';
     import type { Models } from '@aw-labs/appwrite-console';
 
@@ -39,7 +39,7 @@
 
 <Container>
     <div class="u-flex u-main-space-between common-section">
-        <h2 class="heading-level-5">{title}</h2>
+        <Heading tag="h2" size="5">{title}</Heading>
         <DropTabs>
             <DropTabsItem on:click={() => (range = '24h')} disabled={range === '24h'}>
                 24h
@@ -54,7 +54,7 @@
     </div>
     <Card>
         {#if count}
-            <h6 class="heading-level-6">{last(count).value}</h6>
+            <Heading tag="h6" size="6">{last(count).value}</Heading>
             <p>{countMetadata.title}</p>
             <div class="u-margin-block-start-16" />
             <BarChart
@@ -69,7 +69,7 @@
     <Tiles>
         <Card isTile>
             {#if created}
-                <h6 class="heading-level-6">{total(created)}</h6>
+                <Heading tag="h6" size="6">{total(created)}</Heading>
                 <p>{createdMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
                 <LineChart
@@ -84,7 +84,7 @@
         </Card>
         <Card isTile>
             {#if read}
-                <h6 class="heading-level-6">{total(read)}</h6>
+                <Heading tag="h6" size="6">{total(read)}</Heading>
                 <p>{readMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
                 <LineChart
@@ -99,7 +99,7 @@
         </Card>
         <Card isTile>
             {#if updated}
-                <h6 class="heading-level-6">{total(updated)}</h6>
+                <Heading tag="h6" size="6">{total(updated)}</Heading>
                 <p>{updatedMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
                 <LineChart
@@ -114,7 +114,7 @@
         </Card>
         <Card isTile>
             {#if deleted}
-                <h6 class="heading-level-6">{total(deleted)}</h6>
+                <Heading tag="h6" size="6">{total(deleted)}</Heading>
                 <p>{deletedMetadata.title}</p>
                 <div class="u-margin-block-start-16" />
                 <LineChart
diff --git a/src/lib/layout/wizardStep.svelte b/src/lib/layout/wizardStep.svelte
index 622f800c2..73e50eeac 100644
--- a/src/lib/layout/wizardStep.svelte
+++ b/src/lib/layout/wizardStep.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { Heading } from '$lib/components';
     import { wizard } from '$lib/stores/wizard';
 
     /**
@@ -12,9 +13,9 @@
 </script>
 
 <header class="form-header">
-    <h1 class="heading-level-6">
+    <Heading tag="h1" size="6">
         <slot name="title" />
-    </h1>
+    </Heading>
     {#if $$slots.subtitle}
         <p>
             <slot name="subtitle" />
diff --git a/src/routes/console/account/+page.svelte b/src/routes/console/account/+page.svelte
index d4d0ab560..2baf8035c 100644
--- a/src/routes/console/account/+page.svelte
+++ b/src/routes/console/account/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Button, Form, FormList, InputText, InputPassword } from '$lib/elements/forms';
-    import { CardGrid, Box, Avatar } from '$lib/components';
+    import { CardGrid, Box, Avatar, Heading } from '$lib/components';
     import { Container } from '$lib/layout';
     import { onMount } from 'svelte';
     import { user } from '$lib/stores/user';
@@ -78,7 +78,7 @@
 <Container>
     <Form on:submit={updateName}>
         <CardGrid>
-            <h6 class="heading-level-7">Update Name</h6>
+            <Heading tag="h6" size="7">Update Name</Heading>
 
             <svelte:fragment slot="aside">
                 <ul>
@@ -99,7 +99,7 @@
     </Form>
     <Form on:submit={updateEmail}>
         <CardGrid>
-            <h6 class="heading-level-7">Update Email</h6>
+            <Heading tag="h6" size="7">Update Email</Heading>
 
             <svelte:fragment slot="aside">
                 <FormList>
@@ -129,7 +129,7 @@
     </Form>
     <Form on:submit={updatePassword}>
         <CardGrid>
-            <h6 class="heading-level-7">Update Password</h6>
+            <Heading tag="h6" size="7">Update Password</Heading>
             <p class="text">
                 Forgot your password? <a class="link" href={`${base}/recover`}
                     >Recover your password</a>
@@ -161,7 +161,7 @@
     </Form>
     <CardGrid>
         <div>
-            <h6 class="heading-level-7">Delete Account</h6>
+            <Heading tag="h6" size="7">Delete Account</Heading>
         </div>
         <p>
             Your account will be permanently deleted and access will be lost to any of your teams
diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte
index 577a22b94..b6e791b84 100644
--- a/src/routes/console/account/organizations/+page.svelte
+++ b/src/routes/console/account/organizations/+page.svelte
@@ -1,6 +1,13 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { GridItem1, Empty, Pagination, AvatarGroup, CardContainer } from '$lib/components';
+    import {
+        GridItem1,
+        Empty,
+        Pagination,
+        AvatarGroup,
+        CardContainer,
+        Heading
+    } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import CreateOrganization from '../../_createOrganization.svelte';
@@ -34,7 +41,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <h2 class="heading-level-5">Organizations</h2>
+        <Heading tag="h2" size="5">Organizations</Heading>
 
         <Button
             on:click={() => {
diff --git a/src/routes/console/account/sessions/+page.svelte b/src/routes/console/account/sessions/+page.svelte
index b0c9c190c..cf10b0fac 100644
--- a/src/routes/console/account/sessions/+page.svelte
+++ b/src/routes/console/account/sessions/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Empty, Pagination } from '$lib/components';
+    import { Empty, Heading, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
     import {
@@ -41,7 +41,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <h2 class="heading-level-5">Sessions</h2>
+        <Heading tag="h2" size="5">Sessions</Heading>
 
         <Button secondary on:click={logoutAll}>
             <span class="text">Logout all sessions</span>
diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte
index 7788eba71..2fb86f259 100644
--- a/src/routes/console/organization-[organization]/+page.svelte
+++ b/src/routes/console/organization-[organization]/+page.svelte
@@ -2,7 +2,7 @@
     import { afterNavigate, goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { Pill } from '$lib/elements';
-    import { GridItem1, Empty, Pagination } from '$lib/components';
+    import { GridItem1, Heading, Empty, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { Query, type Models } from '@aw-labs/appwrite-console';
@@ -68,8 +68,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <h2 class="heading-level-5">Projects</h2>
-
+        <Heading tag="h2" size="5">Projects</Heading>
         <Button
             on:click={() => {
                 showCreate = true;
diff --git a/src/routes/console/organization-[organization]/members/+page.svelte b/src/routes/console/organization-[organization]/members/+page.svelte
index 623fd70c5..f4b02e21c 100644
--- a/src/routes/console/organization-[organization]/members/+page.svelte
+++ b/src/routes/console/organization-[organization]/members/+page.svelte
@@ -8,7 +8,7 @@
         TableCellText,
         TableRow
     } from '$lib/elements/table';
-    import { Avatar, Pagination } from '$lib/components';
+    import { Avatar, Heading, Pagination } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
@@ -63,7 +63,7 @@
 <Container>
     {#if $memberList?.total}
         <div class="u-flex u-gap-12 common-section u-main-space-between">
-            <h2 class="heading-level-5">Members</h2>
+            <Heading tag="h2" size="5">Members</Heading>
 
             <Button on:click={() => newMemberModal.set(true)}>
                 <span class="icon-plus" aria-hidden="true" />
diff --git a/src/routes/console/organization-[organization]/settings/+page.svelte b/src/routes/console/organization-[organization]/settings/+page.svelte
index b7a159bdc..cb496d6d2 100644
--- a/src/routes/console/organization-[organization]/settings/+page.svelte
+++ b/src/routes/console/organization-[organization]/settings/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Box, AvatarGroup } from '$lib/components';
+    import { CardGrid, Box, AvatarGroup, Heading } from '$lib/components';
     import { InputText, Form, Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
@@ -55,7 +55,7 @@
     {#if $organization}
         <Form on:submit={updateName}>
             <CardGrid>
-                <h6 class="heading-level-7">Update Name</h6>
+                <Heading tag="h6" size="7">Update Name</Heading>
 
                 <svelte:fragment slot="aside">
                     <ul>
@@ -76,7 +76,7 @@
 
         <CardGrid>
             <div>
-                <h6 class="heading-level-7">Delete Organization</h6>
+                <Heading tag="h6" size="7">Delete Organization</Heading>
             </div>
             <p>
                 The organization will be permanently deleted, including all projects and data
diff --git a/src/routes/console/project-[project]/authentication/security/+page.svelte b/src/routes/console/project-[project]/authentication/security/+page.svelte
index 317d800e3..82f573e90 100644
--- a/src/routes/console/project-[project]/authentication/security/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/security/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { Pill } from '$lib/elements/';
     import { Button, InputNumber, InputSelect } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
@@ -71,7 +71,7 @@
 
 <Container>
     <CardGrid>
-        <h2 class="heading-level-6">Users Limit</h2>
+        <Heading tag="h2" size="6">Users Limit</Heading>
         <p>
             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. <b>
@@ -138,7 +138,7 @@
     </CardGrid>
 
     <CardGrid>
-        <h2 class="heading-level-6">Session Length (Coming Soon)</h2>
+        <Heading tag="h2" size="6">Session Length (Coming Soon)</Heading>
         <p>
             If you reduce the limit, users who are currently logged in will be logged out of the
             application.
diff --git a/src/routes/console/project-[project]/authentication/settings/+page.svelte b/src/routes/console/project-[project]/authentication/settings/+page.svelte
index be9a2b270..ac4a4ad9b 100644
--- a/src/routes/console/project-[project]/authentication/settings/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/settings/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { InputSwitch } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
@@ -47,7 +47,7 @@
 {#if $authMethods && $OAuthProviders}
     <Container>
         <CardGrid>
-            <h2 class="heading-level-7">Authentication Methods</h2>
+            <Heading tag="h2" size="7">Authentication Methods</Heading>
             <p>Enable the authentication methods you wish to use.</p>
             <svelte:fragment slot="aside">
                 <form class="form">
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte
index 1aa5cfaeb..c7ac58ccf 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Avatar, CardGrid, Box } from '$lib/components';
+    import { Avatar, CardGrid, Box, Heading } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button, InputText, Form } from '$lib/elements/forms';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -46,7 +46,7 @@
         <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
             <Avatar size={48} name={$team.name} src={getAvatar($team.name)} />
             <div>
-                <h6 class="heading-level-7">{$team.name}</h6>
+                <Heading tag="h6" size="7">{$team.name}</Heading>
             </div>
         </div>
         <svelte:fragment slot="aside">
@@ -59,7 +59,7 @@
 
     <Form on:submit={updateName}>
         <CardGrid>
-            <h6 class="heading-level-7">Update Name</h6>
+            <Heading tag="h6" size="7">Update Name</Heading>
 
             <svelte:fragment slot="aside">
                 <ul>
@@ -84,7 +84,7 @@
 
     <CardGrid>
         <div>
-            <h6 class="heading-level-7">Danger Zone</h6>
+            <Heading tag="h6" size="7">Danger Zone</Heading>
         </div>
 
         <p>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte
index 6d293e8d1..41ba9c96a 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Avatar, CardGrid, Box, DropList, DropListItem } from '$lib/components';
+    import { Avatar, CardGrid, Box, DropList, DropListItem, Heading } from '$lib/components';
     import { Pill } from '$lib/elements';
     import {
         Button,
@@ -196,7 +196,7 @@
             {#if $user.email || $user.phone}
                 {#if $user.name}
                     <Avatar size={48} src={getAvatar($user.name)} name={$user.name} />
-                    <h6 class="heading-level-7">{$user.name}</h6>
+                    <Heading tag="h6" size="7">{$user.name}</Heading>
                 {:else}
                     <div class="avatar">
                         <span class="icon-minus-sm" aria-hidden="true" />
@@ -283,7 +283,7 @@
 
     <Form on:submit={updateName}>
         <CardGrid>
-            <h6 class="heading-level-7">Update Name</h6>
+            <Heading tag="h6" size="7">Update Name</Heading>
 
             <svelte:fragment slot="aside">
                 <ul>
@@ -304,7 +304,7 @@
 
     <Form on:submit={updateEmail}>
         <CardGrid>
-            <h6 class="heading-level-7">Update Email</h6>
+            <Heading tag="h6" size="7">Update Email</Heading>
             <svelte:fragment slot="aside">
                 <ul>
                     <InputEmail
@@ -324,7 +324,7 @@
 
     <Form on:submit={updatePhone}>
         <CardGrid>
-            <h6 class="heading-level-7">Update Phone</h6>
+            <Heading tag="h6" size="7">Update Phone</Heading>
             <svelte:fragment slot="aside">
                 <ul>
                     <InputPhone
@@ -345,7 +345,7 @@
     <Form on:submit={updatePassword}>
         <CardGrid>
             <div>
-                <h6 class="heading-level-7">Update Password</h6>
+                <Heading tag="h6" size="7">Update Password</Heading>
             </div>
 
             <p>
@@ -372,7 +372,7 @@
 
     <Form on:submit={updatePrefs}>
         <CardGrid>
-            <h6 class="heading-level-7">User Preferences</h6>
+            <Heading tag="h6" size="7">User Preferences</Heading>
             <p>
                 You can update your user preferences by storing information on the user's objects so
                 they can easily be shared across devices and sessions.
@@ -446,7 +446,7 @@
 
     <CardGrid>
         <div>
-            <h6 class="heading-level-7">Danger Zone</h6>
+            <Heading tag="h6" size="7">Danger Zone</Heading>
         </div>
         <p>
             The user will be permanently deleted, including all data associated with this user. This
diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte
index dda659047..8bb880d00 100644
--- a/src/routes/console/project-[project]/databases/+page.svelte
+++ b/src/routes/console/project-[project]/databases/+page.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Copy, GridItem1, CardContainer } from '$lib/components';
+    import { Empty, Pagination, Copy, GridItem1, CardContainer, Heading } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
@@ -31,7 +31,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <h2 class="heading-level-5">Databases</h2>
+        <Heading tag="h2" size="5">Databases</Heading>
 
         <Button on:click={() => (showCreate = true)}>
             <span class="icon-plus" aria-hidden="true" /> <span class="text">Create database</span>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
index a493d8fee..94b5c9ecd 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Copy, GridItem1, CardContainer } from '$lib/components';
+    import { Empty, Pagination, Copy, GridItem1, CardContainer, Heading } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
@@ -34,7 +34,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <h2 class="heading-level-5">Collections</h2>
+        <Heading tag="h2" size="5">Collections</Heading>
 
         <Button on:click={() => (showCreate = true)}>
             <span class="icon-plus" aria-hidden="true" />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
index cc053fa2c..3afdb591a 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte
@@ -8,7 +8,7 @@
         TableCellHead,
         TableCell
     } from '$lib/elements/table';
-    import { Empty, Pagination, Copy } from '$lib/components';
+    import { Empty, Pagination, Copy, Heading } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { collection, documentList } from './store';
     import { Container } from '$lib/layout';
@@ -44,7 +44,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <h2 class="heading-level-5">Documents</h2>
+        <Heading tag="h2" size="5">Documents</Heading>
 
         <Button disabled={!$collection?.attributes?.length} on:click={openWizard}>
             <span class="icon-plus" aria-hidden="true" />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
index 014da3a29..739048045 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/attributes/+page.svelte
@@ -9,7 +9,7 @@
         TableCell
     } from '$lib/elements/table';
     import { Button } from '$lib/elements/forms';
-    import { DropList, DropListItem, Empty, Pagination } from '$lib/components';
+    import { DropList, DropListItem, Empty, Heading, Pagination } from '$lib/components';
     import { collection } from '../store';
     import type { Attributes } from '../store';
     import { Container } from '$lib/layout';
@@ -33,7 +33,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <h2 class="heading-level-5">Attributes</h2>
+        <Heading tag="h2" size="5">Attributes</Heading>
 
         <Button on:click={() => (showCreate = true)}>
             <span class="icon-plus" aria-hidden="true" />
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 4f788fcc2..d1c86a89d 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
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Box } from '$lib/components';
+    import { CardGrid, Box, Heading } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -52,7 +52,7 @@
 <Container>
     {#if $doc}
         <CardGrid>
-            <h2 class="heading-level-7">Document</h2>
+            <Heading tag="h2" size="7">Document</Heading>
             <svelte:fragment slot="aside">
                 <div>
                     <p>Created: {toLocaleDateTime($doc.$createdAt)}</p>
@@ -63,7 +63,7 @@
         <Document />
 
         <CardGrid>
-            <h6 class="heading-level-7">Update Permissions</h6>
+            <Heading tag="h6" size="7">Update Permissions</Heading>
             <p>
                 Assign read or write permissions at the <b> Collection Level</b> or
                 <b> Document Level</b>. If collection Level permissions are assigned, permissions
@@ -84,7 +84,7 @@
         </CardGrid>
 
         <CardGrid>
-            <h6 class="heading-level-7">Delete document</h6>
+            <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.
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 a1fb8791b..01fff58ad 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
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { CardGrid } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { collection } from '../../store';
     import { doc } from './store';
     import { onMount } from 'svelte';
@@ -55,7 +55,7 @@
 </script>
 
 <CardGrid>
-    <h6 class="heading-level-7">Update Data</h6>
+    <Heading tag="h6" size="7">Update Data</Heading>
     <p>Update document data based on the attributes created earlier.</p>
     <svelte:fragment slot="aside">
         <form class="form u-grid u-gap-16">
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
index e7991b3a0..352eb14ea 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert, CardGrid, Box } from '$lib/components';
+    import { Alert, CardGrid, Box, Heading } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button, InputText, InputSwitch, Helper } from '$lib/elements/forms';
     import { Permissions } from '$lib/components/permissions';
@@ -117,7 +117,7 @@
 <Container>
     {#if $collection}
         <CardGrid>
-            <h2 class="heading-level-7">{$collection.name}</h2>
+            <Heading tag="h2" size="7">{$collection.name}</Heading>
 
             <svelte:fragment slot="aside">
                 <ul>
@@ -140,7 +140,7 @@
         </CardGrid>
 
         <CardGrid>
-            <h6 class="heading-level-7">Update Name</h6>
+            <Heading tag="h6" size="7">Update Name</Heading>
 
             <svelte:fragment slot="aside">
                 <ul>
@@ -163,7 +163,7 @@
             </svelte:fragment>
         </CardGrid>
         <CardGrid>
-            <h6 class="heading-level-7">Update Permissions</h6>
+            <Heading tag="h6" size="7">Update Permissions</Heading>
             <p>
                 Assign read or write permissions at the <b>Collection Level</b> or
                 <b>Document Level</b>. If collection Level permissions are assigned, permissions
@@ -214,7 +214,7 @@
         </CardGrid>
 
         <CardGrid>
-            <h6 class="heading-level-7">Delete collection</h6>
+            <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.
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 44b42c23b..88143451a 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
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Card, Avatar, CardGrid, Box } from '$lib/components';
+    import { Card, Avatar, CardGrid, Box, Heading } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button, InputText, Helper } from '$lib/elements/forms';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -51,7 +51,7 @@
                 <div class="grid-1-2-col-1">
                     <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
                         <Avatar size={48} name={$database.name} src={getAvatar($database.name)} />
-                        <h6 class="heading-level-7">{$database.name}</h6>
+                        <Heading tag="h6" size="7">{$database.name}</Heading>
                     </div>
                 </div>
                 <div class="grid-1-2-col-2">
@@ -62,7 +62,7 @@
         </Card>
 
         <CardGrid>
-            <h6 class="heading-level-7">Update Name</h6>
+            <Heading tag="h6" size="7">Update Name</Heading>
 
             <svelte:fragment slot="aside">
                 <ul>
@@ -89,7 +89,7 @@
 
         <CardGrid>
             <div>
-                <h6 class="heading-level-7">Danger Zone</h6>
+                <Heading tag="h6" size="7">Danger Zone</Heading>
             </div>
 
             <p>
diff --git a/src/routes/console/project-[project]/overview/+layout.svelte b/src/routes/console/project-[project]/overview/+layout.svelte
index 00972707c..90b691bac 100644
--- a/src/routes/console/project-[project]/overview/+layout.svelte
+++ b/src/routes/console/project-[project]/overview/+layout.svelte
@@ -9,7 +9,7 @@
     import { usage } from './store';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
-    import { DropList, DropListItem } from '$lib/components';
+    import { DropList, DropListItem, Heading } from '$lib/components';
     import { BarChart, LineChart } from '$lib/charts';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
 
@@ -284,7 +284,7 @@
         {/if}
 
         <section class="common-section u-margin-block-start-100">
-            <h2 class="heading-level-5">Integrations</h2>
+            <Heading tag="h2" size="5">Integrations</Heading>
             <div class="tabs u-margin-block-start-24 u-sep-block-end">
                 <button
                     class="tabs-button-scroll is-start u-hide"
diff --git a/src/routes/console/project-[project]/overview/keys/+page.svelte b/src/routes/console/project-[project]/overview/keys/+page.svelte
index 5f611048c..7c86fd9de 100644
--- a/src/routes/console/project-[project]/overview/keys/+page.svelte
+++ b/src/routes/console/project-[project]/overview/keys/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import {
         Table,
@@ -16,7 +17,7 @@
 </script>
 
 <div class="common-section u-flex u-gap-12">
-    <h3 class="heading-level-7">API Keys</h3>
+    <Heading tag="h3" size="7">API Keys</Heading>
     <span class="u-margin-inline-start-auto">
         <Button on:click={() => (show = true)}>
             <span class="icon-plus" aria-hidden="true" />
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 29b8e2f59..9c150e600 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
@@ -2,7 +2,7 @@
     import { afterNavigate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { CardGrid, Secret } from '$lib/components';
+    import { CardGrid, Heading, Secret } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import InputDateTime from '$lib/elements/forms/inputDateTime.svelte';
     import { difference } from '$lib/helpers/array';
@@ -127,7 +127,7 @@
         {@const accessedAt = $key.accessedAt ? toLocaleDateTime($key.accessedAt) : 'never'}
         <CardGrid>
             <div>
-                <h6 class="heading-level-7">{$key.name}</h6>
+                <Heading tag="h6" size="7">{$key.name}</Heading>
             </div>
             <svelte:fragment slot="aside">
                 <p>
@@ -138,7 +138,7 @@
         </CardGrid>
 
         <CardGrid>
-            <h6 class="heading-level-7">API Key Secret</h6>
+            <Heading tag="h6" size="7">API Key Secret</Heading>
             <svelte:fragment slot="aside">
                 <Secret bind:value={secret} />
             </svelte:fragment>
@@ -146,7 +146,7 @@
 
         <Form on:submit={updateName}>
             <CardGrid>
-                <h6 class="heading-level-7">Update Name</h6>
+                <Heading tag="h6" size="7">Update Name</Heading>
                 <p class="text">Choose any name that will help you distinguish between API keys.</p>
                 <svelte:fragment slot="aside">
                     <FormList>
@@ -166,7 +166,7 @@
         </Form>
         <Form on:submit={updateScopes}>
             <CardGrid>
-                <h6 class="heading-level-7">Update Scopes</h6>
+                <Heading tag="h6" size="7">Update 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.
@@ -187,7 +187,7 @@
         </Form>
         <Form on:submit={updateExpire}>
             <CardGrid>
-                <h6 class="heading-level-7">Update Expiration Date</h6>
+                <Heading tag="h6" size="7">Update Expiration Date</Heading>
                 <p class="text">Choose any name that will help you distinguish between API keys.</p>
                 <svelte:fragment slot="aside">
                     <FormList>
@@ -202,7 +202,7 @@
         </Form>
         <CardGrid>
             <div>
-                <h6 class="heading-level-7">Delete API Key</h6>
+                <Heading tag="h6" size="7">Delete API Key</Heading>
             </div>
             <p>The API Key will be permanently deleted. This action is irreversible.</p>
             <svelte:fragment slot="aside">
diff --git a/src/routes/console/project-[project]/overview/platforms/+page.svelte b/src/routes/console/project-[project]/overview/platforms/+page.svelte
index 33c12edca..dae4cd3eb 100644
--- a/src/routes/console/project-[project]/overview/platforms/+page.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { DropList, DropListItem, GridItem1 } from '$lib/components';
+    import { DropList, DropListItem, GridItem1, Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { wizard } from '$lib/stores/wizard';
@@ -35,7 +35,7 @@
 </script>
 
 <div class="common-section u-flex u-gap-12">
-    <h3 class="heading-level-7">Platforms</h3>
+    <Heading tag="h3" size="7">Platforms</Heading>
     <span class="u-margin-inline-start-auto">
         <DropList
             bind:show={showDropdown}
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 d90fa15e4..c85ade90b 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
@@ -2,7 +2,7 @@
     import { afterNavigate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { CardGrid } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { updateLayout } from '$lib/stores/layout';
@@ -95,7 +95,7 @@
     {#if loaded}
         <Form on:submit={updateName}>
             <CardGrid>
-                <h6 class="heading-level-7">Update Name</h6>
+                <Heading tag="h6" size="7">Update Name</Heading>
                 <p class="text">
                     Choose any name that will help you distinguish between platforms.
                 </p>
@@ -120,7 +120,7 @@
 
         <CardGrid>
             <div>
-                <h6 class="heading-level-7">Delete Platform</h6>
+                <Heading tag="h6" size="7">Delete Platform</Heading>
             </div>
             <p>The Platform will be permanently deleted. This action is irreversible.</p>
             <svelte:fragment slot="aside">
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 7e59c89a6..8e75bf735 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleIOS.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -37,7 +37,7 @@
 
 <Form on:submit={updateHostname}>
     <CardGrid>
-        <h6 class="heading-level-7">Update Bundle ID</h6>
+        <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">
             You can find your Bundle Identifier in the General tab for your app's primary target in
             Xcode.
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 7e59c89a6..8e75bf735 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -37,7 +37,7 @@
 
 <Form on:submit={updateHostname}>
     <CardGrid>
-        <h6 class="heading-level-7">Update Bundle ID</h6>
+        <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">
             You can find your Bundle Identifier in the General tab for your app's primary target in
             Xcode.
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 7e59c89a6..8e75bf735 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -37,7 +37,7 @@
 
 <Form on:submit={updateHostname}>
     <CardGrid>
-        <h6 class="heading-level-7">Update Bundle ID</h6>
+        <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">
             You can find your Bundle Identifier in the General tab for your app's primary target in
             Xcode.
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 7e59c89a6..8e75bf735 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -37,7 +37,7 @@
 
 <Form on:submit={updateHostname}>
     <CardGrid>
-        <h6 class="heading-level-7">Update Bundle ID</h6>
+        <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">
             You can find your Bundle Identifier in the General tab for your app's primary target in
             Xcode.
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 a20b3d033..d3c39bba3 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -37,7 +37,7 @@
 
 <Form on:submit={updateHostname}>
     <CardGrid>
-        <h6 class="heading-level-7">Update Package Name</h6>
+        <Heading tag="h6" size="7">Update Package Name</Heading>
         <p class="text">
             Your package name is generally the applicationId in your app-level build.gradle file.
         </p>
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 7e59c89a6..8e75bf735 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -37,7 +37,7 @@
 
 <Form on:submit={updateHostname}>
     <CardGrid>
-        <h6 class="heading-level-7">Update Bundle ID</h6>
+        <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">
             You can find your Bundle Identifier in the General tab for your app's primary target in
             Xcode.
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 9a6ae1536..313722e74 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -37,7 +37,7 @@
 
 <Form on:submit={updateHostname}>
     <CardGrid>
-        <h6 class="heading-level-7">Update Package Name</h6>
+        <Heading tag="h6" size="7">Update Package Name</Heading>
         <p class="text">Your application name.</p>
         <svelte:fragment slot="aside">
             <FormList>
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 7e59c89a6..8e75bf735 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -37,7 +37,7 @@
 
 <Form on:submit={updateHostname}>
     <CardGrid>
-        <h6 class="heading-level-7">Update Bundle ID</h6>
+        <Heading tag="h6" size="7">Update Bundle ID</Heading>
         <p class="text">
             You can find your Bundle Identifier in the General tab for your app's primary target in
             Xcode.
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 9a6ae1536..313722e74 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -37,7 +37,7 @@
 
 <Form on:submit={updateHostname}>
     <CardGrid>
-        <h6 class="heading-level-7">Update Package Name</h6>
+        <Heading tag="h6" size="7">Update Package Name</Heading>
         <p class="text">Your application name.</p>
         <svelte:fragment slot="aside">
             <FormList>
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 2d1a7efd4..b8cd72d26 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/web.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid } from '$lib/components';
+    import { CardGrid, Heading } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -39,7 +39,7 @@
 
 <Form on:submit={updateHostname}>
     <CardGrid>
-        <h6 class="heading-level-7">Update Hostname</h6>
+        <Heading tag="h6" size="7">Update Hostname</Heading>
         <p class="text">You can use * to allow wildcard hostnames or subdomains.</p>
         <svelte:fragment slot="aside">
             <FormList>
diff --git a/src/routes/console/project-[project]/settings/+page.svelte b/src/routes/console/project-[project]/settings/+page.svelte
index 663857030..c718bd66a 100644
--- a/src/routes/console/project-[project]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/settings/+page.svelte
@@ -6,7 +6,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { project } from '../store';
     import { services, type Service } from '$lib/stores/project-services';
-    import { CardGrid, CopyInput, Box } from '$lib/components';
+    import { CardGrid, CopyInput, Box, Heading } from '$lib/components';
     import { Button, Form, FormList, InputText, InputSwitch } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import Delete from './_deleteProject.svelte';
@@ -65,7 +65,7 @@
     {#if $project}
         <Form on:submit={updateName}>
             <CardGrid>
-                <h6 class="heading-level-7">Update Name</h6>
+                <Heading tag="h6" size="7">Update Name</Heading>
 
                 <svelte:fragment slot="aside">
                     <FormList>
@@ -85,7 +85,7 @@
         </Form>
 
         <CardGrid>
-            <h6 class="heading-level-7">API Credentials</h6>
+            <Heading tag="h6" size="7">API Credentials</Heading>
             <p class="text">
                 Access Appwrite services using your API Endpoint and Project ID. You can connect
                 Appwrite to your applications and server-side code by <a href="#/" class="link"
@@ -102,7 +102,7 @@
         </CardGrid>
 
         <CardGrid>
-            <h6 class="heading-level-7">Services</h6>
+            <Heading tag="h6" size="7">Services</Heading>
             <p class="text">Choose services you wish to enable or disable.</p>
             <svelte:fragment slot="aside">
                 <FormList>
@@ -125,7 +125,7 @@
 
         <CardGrid>
             <div>
-                <h6 class="heading-level-7">Delete Project</h6>
+                <Heading tag="h6" size="7">Delete Project</Heading>
             </div>
             <p>
                 The project will be permanently deleted, including all the metadata, resources and
diff --git a/src/routes/console/project-[project]/storage/+page.svelte b/src/routes/console/project-[project]/storage/+page.svelte
index 9df27dda3..fae4f5930 100644
--- a/src/routes/console/project-[project]/storage/+page.svelte
+++ b/src/routes/console/project-[project]/storage/+page.svelte
@@ -2,7 +2,7 @@
     import { page } from '$app/stores';
     import { goto } from '$app/navigation';
     import { Button } from '$lib/elements/forms';
-    import { Empty, Pagination, Copy, GridItem1, CardContainer } from '$lib/components';
+    import { Empty, Pagination, Copy, GridItem1, CardContainer, Heading } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Query, type Models } from '@aw-labs/appwrite-console';
     import Create from './_create.svelte';
@@ -32,7 +32,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <h2 class="heading-level-5">Buckets</h2>
+        <Heading tag="h2" size="5">Buckets</Heading>
 
         <Button on:click={() => (showCreate = true)}>
             <span class="icon-plus" aria-hidden="true" /> <span class="text">Create bucket</span>
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 2271aec85..09c900016 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
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Box, Copy } from '$lib/components';
+    import { CardGrid, Box, Copy, Heading } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
@@ -86,7 +86,7 @@
                     </div>
                 </a>
                 <div>
-                    <h2 class="heading-level-7">{$file.name}</h2>
+                    <Heading tag="h2" size="7">{$file.name}</Heading>
                     <Copy value={getView($file.$id)}>
                         <Pill button><i class="icon-duplicate" />File URL</Pill>
                     </Copy>
@@ -109,7 +109,7 @@
         </CardGrid>
 
         <CardGrid>
-            <h6 class="heading-level-7">Update Permissions</h6>
+            <Heading tag="h6" size="7">Update 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.
@@ -128,7 +128,7 @@
         </CardGrid>
 
         <CardGrid>
-            <h6 class="heading-level-7">Delete file</h6>
+            <Heading tag="h6" size="7">Delete file</Heading>
             <p>
                 The file will be permanently deleted, including all the files within it. This action
                 is irreversible.
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 14767ef91..ff005faae 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
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Box } from '$lib/components';
+    import { CardGrid, Box, Heading } from '$lib/components';
     import { Container } from '$lib/layout';
     import {
         Form,
@@ -208,7 +208,7 @@
     {#if $bucket}
         <Form on:submit={toggleBucket}>
             <CardGrid>
-                <h2 class="heading-level-7">{$bucket.name}</h2>
+                <Heading tag="h2" size="7">{$bucket.name}</Heading>
 
                 <svelte:fragment slot="aside">
                     <ul>
@@ -229,7 +229,7 @@
 
         <Form on:submit={updateName}>
             <CardGrid>
-                <h6 class="heading-level-7">Update Name</h6>
+                <Heading tag="h6" size="7">Update Name</Heading>
                 <svelte:fragment slot="aside">
                     <ul>
                         <InputText
@@ -250,7 +250,7 @@
 
         <Form on:submit={updatePermissions}>
             <CardGrid>
-                <h6 class="heading-level-7">Update Permissions</h6>
+                <Heading tag="h6" size="7">Update Permissions</Heading>
                 <p>
                     Assign read or write permissions at the <b>Bucket Level</b> or
                     <b>File Level</b>. If Bucket Level permissions are assigned, file permissions
@@ -293,7 +293,7 @@
 
         <Form on:submit={updateSecurity}>
             <CardGrid>
-                <h2 class="heading-level-7">Update Security Settings</h2>
+                <Heading tag="h2" size="7">Update Security Settings</Heading>
                 <p>
                     Enable or disable security services for the bucket including <b>Ecryption</b>
                     and <b>Antivirus scanning.</b>
@@ -362,7 +362,7 @@
 
         <Form on:submit={updateMaxSize}>
             <CardGrid>
-                <h2 class="heading-level-6">Update Maximum File Size</h2>
+                <Heading tag="h2" size="6">Update Maximum File Size</Heading>
                 <p>Set the maximum file size allowed in the bucket.</p>
                 <svelte:fragment slot="aside">
                     <ul class="u-flex u-gap-12">
@@ -383,7 +383,7 @@
 
         <Form on:submit={updateAllowedExtensions}>
             <CardGrid>
-                <h6 class="heading-level-7">Update Allowed File Extensions</h6>
+                <Heading tag="h6" size="7">Update Allowed File Extensions</Heading>
                 <p>
                     A maxiumum of 100 file extensions can be added. Leave blank to allow all file
                     types.
@@ -419,7 +419,7 @@
         </Form>
 
         <CardGrid>
-            <h6 class="heading-level-7">Delete Bucket</h6>
+            <Heading tag="h6" size="7">Delete Bucket</Heading>
             <p>
                 The bucket will be permanently deleted, including all the files within it. This
                 action is irreversible.