From c0f2292876a4511533bcda8cca84522edc20ee05 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 3 Mar 2025 10:59:27 +0100
Subject: [PATCH 1/9] design fixes with chen

---
 .../project-[project]/sites/(components)/logs.svelte |  2 +-
 .../sites/(components)/selectRootModal.svelte        |  8 +++++++-
 .../sites/create-site/configuration.svelte           |  1 +
 .../sites/create-site/deploying/+page.svelte         |  3 ++-
 .../sites/create-site/deploying/+page.ts             | 12 +++++++++---
 .../repository-[repository]/+page.svelte             |  2 +-
 .../templates/template-[template]/+page.svelte       |  2 +-
 7 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/routes/(console)/project-[project]/sites/(components)/logs.svelte b/src/routes/(console)/project-[project]/sites/(components)/logs.svelte
index c6a919eba..71fc61bf2 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/logs.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/logs.svelte
@@ -94,7 +94,7 @@
         </Layout.Stack>
     {/if}
     {#key buildLogs}
-        <Logs logs={buildLogs || 'No logs available'} bind:theme={$app.themeInUse} />
+        <Logs logs={buildLogs || 'Waiting for build to start...'} bind:theme={$app.themeInUse} />
     {/key}
     {#if ['processing', 'building'].includes(status)}
         <Layout.Stack alignItems="flex-end">
diff --git a/src/routes/(console)/project-[project]/sites/(components)/selectRootModal.svelte b/src/routes/(console)/project-[project]/sites/(components)/selectRootModal.svelte
index 2d8cdea15..cf63bbc25 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/selectRootModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/selectRootModal.svelte
@@ -99,10 +99,15 @@
         }
     }
 
+    function handleSubmit() {
+        rootDir = currentPath;
+        show = false;
+    }
+
     // $: console.log(rootDir);
 </script>
 
-<Modal title="Root directory" bind:show>
+<Modal title="Root directory" bind:show onSubmit={handleSubmit}>
     <span slot="description">
         Select the directory where your site code is located using the menu below.
     </span>
@@ -110,5 +115,6 @@
 
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Save</Button>
     </svelte:fragment>
 </Modal>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration.svelte
index 23ea6c5cd..984786eea 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/configuration.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/configuration.svelte
@@ -182,6 +182,7 @@
                                                         </Tooltip>
                                                     {:else}
                                                         <InteractiveText
+                                                            variant="secret"
                                                             isVisible={false}
                                                             text={variable.value} />
                                                     {/if}
diff --git a/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte
index 86254dc6d..794d503bb 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte
@@ -42,7 +42,8 @@
             framework={data.frameworks.frameworks.find((f) => f.key === data.site.framework)}
             repositoryName={data?.repository?.name}
             branch={data.repository?.id ? data.site.providerBranch : ''}
-            rootDir={data.repository?.id ? data.site.providerRootDirectory : ''} />
+            rootDir={data.repository?.id ? data.site.providerRootDirectory : ''}
+            domain={data.proxyRuleList.rules[0]?.domain} />
     </svelte:fragment>
     <svelte:fragment slot="footer">
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
diff --git a/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.ts b/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.ts
index d537c10f5..c5569ebf0 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.ts
+++ b/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.ts
@@ -1,20 +1,26 @@
-import { sdk } from '$lib/stores/sdk';
+import { RuleType, sdk } from '$lib/stores/sdk';
 import { error } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
+import { Query } from '@appwrite.io/console';
 
 export const load: PageLoad = async ({ url }) => {
     if (!url.searchParams.has('site')) error(404, 'Site is not optional');
     if (!url.searchParams.has('deployment')) error(404, 'Deployment is not optional');
     const siteId = url.searchParams.get('site');
     const deploymentId = url.searchParams.get('deployment');
-    const [site, deployment] = await Promise.all([
+    const [site, deployment, proxyRuleList] = await Promise.all([
         sdk.forProject.sites.get(siteId),
-        sdk.forProject.sites.getDeployment(siteId, deploymentId)
+        sdk.forProject.sites.getDeployment(siteId, deploymentId),
+        sdk.forProject.proxy.listRules([
+            Query.equal('type', [RuleType.DEPLOYMENT]),
+            Query.equal('automation', `site=${siteId}`)
+        ])
     ]);
 
     return {
         site,
         deployment,
+        proxyRuleList,
         repository: site?.installationId
             ? await sdk.forProject.vcs.getRepository(site.installationId, site.providerRepositoryId)
             : undefined
diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
index dac1e48b7..6bb5ff475 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
@@ -209,7 +209,7 @@
         </Layout.Stack>
     </Form>
     <svelte:fragment slot="aside">
-        <Aside {framework} repositoryName={data.repository.name} {branch} {rootDir} {domain} />
+        <Aside {framework} repositoryName={data.repository.name} {branch} {rootDir} />
     </svelte:fragment>
 
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
index 5e8c84ef3..562ac8d49 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
@@ -336,7 +336,7 @@
         </Layout.Stack>
     </Form>
     <svelte:fragment slot="aside">
-        <Aside {framework} {repositoryName} {branch} {rootDir} {domain} showAfter={showSiteConfig}>
+        <Aside {framework} {repositoryName} {branch} {rootDir} showAfter={showSiteConfig}>
             <Layout.Stack>
                 <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
                     <Typography.Text

From f222c5e2a6afe66315eea14249863578f2952c22 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 3 Mar 2025 11:10:29 +0100
Subject: [PATCH 2/9] fix: manual site

---
 .../sites/create-site/deploying/+page.svelte     |  1 -
 .../sites/create-site/manual/+page.svelte        | 10 ++++++----
 .../sites/create-site/manual/aside.svelte        | 16 +++++++++++++---
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte
index 794d503bb..ce2f40f81 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte
@@ -37,7 +37,6 @@
         </Fieldset>
     </Layout.Stack>
     <svelte:fragment slot="aside">
-        <!-- TODO: fix use repository name instead of id-->
         <Aside
             framework={data.frameworks.frameworks.find((f) => f.key === data.site.framework)}
             repositoryName={data?.repository?.name}
diff --git a/src/routes/(console)/project-[project]/sites/create-site/manual/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/manual/+page.svelte
index d5aca19fe..92ca325e5 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/manual/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/manual/+page.svelte
@@ -14,8 +14,9 @@
     import { BuildRuntime, Framework, ID } from '@appwrite.io/console';
     import type { Models } from '@appwrite.io/console';
     import Configuration from '../configuration.svelte';
-    import Domain from '../domain.svelte';
     import InputFile from '$lib/elements/forms/inputFile.svelte';
+    import { buildVerboseDomain } from '../store';
+    import { project } from '$routes/(console)/project-[project]/store';
 
     export let data;
     let showExitModal = false;
@@ -23,10 +24,9 @@
     let formComponent: Form;
     let isSubmitting = writable(false);
 
-    let name = '';
+    let name = 'My website';
     let id = ID.unique();
     let domain = id;
-    let domainIsValid = true;
     let framework: Models.Framework = data.frameworks.frameworks[0];
     let adapter = framework?.adapters[0];
     let installCommand = adapter?.installCommand;
@@ -37,6 +37,8 @@
 
     async function create() {
         try {
+            domain = await buildVerboseDomain(name, $project.name, id);
+
             const fr = Object.values(Framework).find((f) => f === framework.key);
             const buildRuntime = Object.values(BuildRuntime).find(
                 (f) => f === framework.buildRuntime
@@ -126,7 +128,7 @@
                 bind:variables
                 frameworks={data.frameworks.frameworks} />
 
-            <Domain bind:domain bind:domainIsValid />
+            <!-- <Domain bind:domain bind:domainIsValid /> -->
         </Layout.Stack>
     </Form>
     <svelte:fragment slot="aside">
diff --git a/src/routes/(console)/project-[project]/sites/create-site/manual/aside.svelte b/src/routes/(console)/project-[project]/sites/create-site/manual/aside.svelte
index e3c12292b..00b68cacf 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/manual/aside.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/manual/aside.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
+    import { base } from '$app/paths';
     import { Card } from '$lib/components';
     import { Button, InputSelect } from '$lib/elements/forms';
+    import { app } from '$lib/stores/app';
     import { IconDownload } from '@appwrite.io/pink-icons-svelte';
     import { Icon, Image, Layout, Typography } from '@appwrite.io/pink-svelte';
 
     let framework: 'react' | 'vue' | 'angular' | 'svelte' | 'web' = 'web';
+
+    let starterKit;
 </script>
 
 <Card padding="xs">
@@ -27,10 +31,16 @@
             ]}
             bind:value={framework} />
 
-        <Image src="https://placehold.co/349x201/111/bbb?text=Preview&font=inter" alt="preview" />
+        <Image
+            ratio="16/9"
+            src={starterKit?.preview ||
+                ($app.themeInUse === 'dark'
+                    ? `${base}/images/sites/screenshot-placeholder-dark.svg`
+                    : `${base}/images/sites/screenshot-placeholder-light.svg`)}
+            alt="preview" />
 
-        <Button size="s" fullWidth secondary href="#">
-            <Icon icon={IconDownload} /> Starter kit
+        <Button fullWidth secondary href="#">
+            <Icon icon={IconDownload} slot="start" /> Starter kit
         </Button>
     </Layout.Stack>
 </Card>

From 9ff3816730f7779b8ce888ed6cd2f4224e9995c0 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 3 Mar 2025 11:21:01 +0100
Subject: [PATCH 3/9] fix: edgecase

---
 .../(components)/deploymentDomains.svelte     | 70 ++++++++++---------
 .../importSiteVariablesModal.svelte           |  7 +-
 .../sites/site-[site]/domainsOverview.svelte  | 16 ++---
 3 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/src/routes/(console)/project-[project]/sites/(components)/deploymentDomains.svelte b/src/routes/(console)/project-[project]/sites/(components)/deploymentDomains.svelte
index 1a4be6b7d..378a6ed3a 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/deploymentDomains.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/deploymentDomains.svelte
@@ -10,37 +10,43 @@
 </script>
 
 <Layout.Stack gap="xxs" direction="row" alignItems="center">
-    <Link external href={`${$protocol}${domains.rules[0].domain}`} variant="muted">
-        <Layout.Stack gap="xxs" direction="row" alignItems="center">
-            <Trim alternativeTrim>
-                <Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
-                    {domains.rules[0].domain}
-                </Typography.Text>
-            </Trim>
-            <Icon icon={IconExternalLink} size="s" />
-        </Layout.Stack>
-    </Link>
-    {#if domains.rules.length > 1}
-        <Popover padding="none" let:toggle>
-            <Tag size="s" on:click={toggle}>
-                +{domains.rules.length - 1}
-            </Tag>
-            <svelte:fragment slot="tooltip">
-                <ActionMenu.Root>
-                    {#each domains.rules as rule, i}
-                        {#if i !== 0}
-                            <ActionMenu.Item.Anchor
-                                href={`${$protocol}${rule.domain}`}
-                                external
-                                leadingIcon={IconExternalLink}>
-                                <Trim alternativeTrim>
-                                    {rule.domain}
-                                </Trim>
-                            </ActionMenu.Item.Anchor>
-                        {/if}
-                    {/each}
-                </ActionMenu.Root>
-            </svelte:fragment>
-        </Popover>
+    {#if domains.total}
+        <Link external href={`${$protocol}${domains.rules[0]?.domain}`} variant="muted">
+            <Layout.Stack gap="xxs" direction="row" alignItems="center">
+                <Trim alternativeTrim>
+                    <Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
+                        {domains.rules[0]?.domain}
+                    </Typography.Text>
+                </Trim>
+                <Icon icon={IconExternalLink} size="s" />
+            </Layout.Stack>
+        </Link>
+        {#if domains.rules.length > 1}
+            <Popover padding="none" let:toggle>
+                <Tag size="s" on:click={toggle}>
+                    +{domains.rules.length - 1}
+                </Tag>
+                <svelte:fragment slot="tooltip">
+                    <ActionMenu.Root>
+                        {#each domains.rules as rule, i}
+                            {#if i !== 0}
+                                <ActionMenu.Item.Anchor
+                                    href={`${$protocol}${rule.domain}`}
+                                    external
+                                    leadingIcon={IconExternalLink}>
+                                    <Trim alternativeTrim>
+                                        {rule.domain}
+                                    </Trim>
+                                </ActionMenu.Item.Anchor>
+                            {/if}
+                        {/each}
+                    </ActionMenu.Root>
+                </svelte:fragment>
+            </Popover>
+        {/if}
+    {:else}
+        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
+            No domains available
+        </Typography.Text>
     {/if}
 </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/importSiteVariablesModal.svelte b/src/routes/(console)/project-[project]/sites/create-site/importSiteVariablesModal.svelte
index 83386ae25..bedd73d0c 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/importSiteVariablesModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/importSiteVariablesModal.svelte
@@ -61,7 +61,7 @@
                             Drag and drop files here or click to upload
                         </Typography.Text>
                         <Tooltip>
-                            <Layout.Stack alignItems="center" justifyContent="center">
+                            <Layout.Stack alignItems="center" justifyContent="center" inline>
                                 <Icon icon={IconInfo} size="s" />
                             </Layout.Stack>
                             <svelte:fragment slot="tooltip">
@@ -69,8 +69,9 @@
                             </svelte:fragment>
                         </Tooltip>
                     </Layout.Stack>
-                    <Typography.Caption variant="400"
-                        >Up to 100 variables allowed</Typography.Caption>
+                    <Typography.Caption variant="400">
+                        Up to 100 variables allowed
+                    </Typography.Caption>
                 </Layout.Stack>
             </Upload.Dropzone>
             {#if variables?.length > 0}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte
index 09fa45572..e9db49008 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/domainsOverview.svelte
@@ -5,7 +5,7 @@
     import OpenOnMobileModal from '../(components)/openOnMobileModal.svelte';
     import { timeFromNow } from '$lib/helpers/date';
     import { IconExternalLink, IconQrcode } from '@appwrite.io/pink-icons-svelte';
-    import { consoleVariables, protocol } from '$routes/(console)/store';
+    import { protocol } from '$routes/(console)/store';
     import { type Models } from '@appwrite.io/console';
     import { Link } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
@@ -16,11 +16,11 @@
     let showDomainQR = false;
     let selectedDomainURL: string;
 
-    $: hasCustomDomain = proxyRuleList?.total
-        ? proxyRuleList.rules.some((rule) =>
-              rule.domain.includes($consoleVariables._APP_DOMAIN_TARGET)
-          )
-        : false;
+    // $: hasCustomDomain = proxyRuleList?.total
+    //     ? proxyRuleList.rules.some((rule) =>
+    //           rule.domain.includes($consoleVariables._APP_DOMAIN_TARGET)
+    //       )
+    //     : false;
 </script>
 
 <Layout.Stack>
@@ -42,7 +42,7 @@
             {#if proxyRuleList?.rules?.length <= 1}
                 <Layout.Stack gap="l">
                     <Layout.Stack gap="xxs">
-                        <Typography.Text variant="l-500">
+                        <Typography.Text variant="m-500">
                             Add your first custom domain
                         </Typography.Text>
                         <Typography.Caption variant="500" color="--color-fgcolor-neutral-tertiary">
@@ -53,7 +53,7 @@
                     <div>
                         <Button
                             secondary
-                            size="xs"
+                            size="s"
                             href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/domains/add-domain`}>
                             Add domain
                         </Button>

From 828144d578980b98988dc4211018f20b17cf530a Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 3 Mar 2025 11:30:10 +0100
Subject: [PATCH 4/9] fix: project settings empty state

---
 .../settings/updateInstallations.svelte       | 91 +++++++------------
 1 file changed, 33 insertions(+), 58 deletions(-)

diff --git a/src/routes/(console)/project-[project]/settings/updateInstallations.svelte b/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
index 6a537ca38..b72dacfca 100644
--- a/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
+++ b/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
     import { page } from '$app/stores';
-    import {
-        Alert,
-        Arrow,
-        AvatarGroup,
-        CardGrid,
-        PaginationInline,
-        SvgIcon
-    } from '$lib/components';
+    import { Alert, CardGrid, PaginationInline } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
@@ -17,19 +10,21 @@
     import dayjs from 'dayjs';
     import { isSelfHosted } from '$lib/system';
     import { consoleVariables } from '$routes/(console)/store';
-    import { ActionMenu, Icon, Popover, Table } from '@appwrite.io/pink-svelte';
     import {
-        IconAppwrite,
-        IconAzure,
-        IconBitBucket,
+        ActionMenu,
+        Card,
+        Empty,
+        Icon,
+        Layout,
+        Popover,
+        Table
+    } from '@appwrite.io/pink-svelte';
+    import {
         IconExternalLink,
         IconGithub,
-        IconGitlab,
         IconPlus,
         IconXCircle
     } from '@appwrite.io/pink-icons-svelte';
-    import Avatar from '$lib/components/avatar.svelte';
-    import { iconPath } from '$lib/stores/app';
 
     export let total: number;
     export let limit: number;
@@ -157,51 +152,37 @@
                 </Table.Root>
             </div>
             {#if total > limit}
-                <div class="u-flex u-main-space-between">
+                <Layout.Stack justifyContent="space-between">
                     <p class="text">Total installations: {total}</p>
                     <PaginationInline
                         {limit}
                         sum={total}
                         on:change={navigateInstallations}
                         bind:offset />
-                </div>
+                </Layout.Stack>
             {/if}
-        {:else}
-            {#if isSelfHosted && !isVcsEnabled}
-                <Alert type="info">
-                    <svelte:fragment slot="title">
-                        Installing Git to a self-hosted instance
-                    </svelte:fragment>
-                    When installing Git in a locally hosted Appwrite project, you must first configure
-                    environment variables.
-                    <svelte:fragment slot="buttons">
-                        <Button
-                            href="https://appwrite.io/docs/advanced/self-hosting/functions"
-                            external
-                            text>
-                            Learn more
-                        </Button>
-                    </svelte:fragment>
-                </Alert>
-            {/if}
-            <article class="card-git card is-border-dashed is-no-shadow">
-                <div class="u-flex u-cross-center u-flex-vertical u-gap-32">
-                    <div class="u-flex u-cross-center u-flex-vertical u-gap-8">
-                        <AvatarGroup icons={[IconGithub, IconGitlab, IconBitBucket, IconAzure]} />
-                        <Arrow direction="down" />
-                        <Avatar alt="appwrite" --icon-fill="var(--color-bgcolor-accent)">
-                            <Icon icon={IconAppwrite} />
-                        </Avatar>
-                    </div>
-                    <Button
-                        disabled={isSelfHosted && !isVcsEnabled}
-                        on:click={() => (showGitIstall = true)}
-                        secondary>
-                        <span class="text">Add installation</span>
-                    </Button>
-                </div>
-            </article>
+        {:else if isSelfHosted && !isVcsEnabled}
+            <Alert type="info">
+                <svelte:fragment slot="title">
+                    Installing Git to a self-hosted instance
+                </svelte:fragment>
+                Before installing Git in a locally hosted Appwrite project, ensure your environment variables
+                are configured.
+            </Alert>
         {/if}
+        <Card.Base padding="none" border="dashed">
+            <Empty
+                type="secondary"
+                title="No installation was added to the project yet"
+                description="Add an installation to connect repositories">
+                <svelte:fragment slot="actions">
+                    <Button secondary href={configureGitHub()} external>
+                        <Icon icon={IconGithub} size="s" slot="start" />
+                        Add installation
+                    </Button>
+                </svelte:fragment>
+            </Empty>
+        </Card.Base>
     </svelte:fragment>
 </CardGrid>
 
@@ -212,9 +193,3 @@
 {#if showGitDisconnect}
     <GitDisconnectModal bind:showGitDisconnect {selectedInstallation} />
 {/if}
-
-<style>
-    :global(.git-installation-avatar-group .icon-gitlab, .icon-bitBucket, .icon-azure) {
-        color: hsl(var(--color-neutral-50));
-    }
-</style>

From c2d113acb511bc9401c8876f54c66ab5a05f2334 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 3 Mar 2025 14:33:51 +0400
Subject: [PATCH 5/9] fix: titles

---
 package.json                                  |   4 +-
 pnpm-lock.yaml                                |  28 ++--
 src/lib/components/filePicker.svelte          |  13 +-
 src/lib/components/heading.svelte             |  23 ---
 src/lib/components/index.ts                   |   1 -
 src/lib/layout/containerHeader.svelte         |   8 +-
 src/lib/layout/gridHeader.svelte              |   5 +-
 src/lib/layout/logs.svelte                    |   8 +-
 src/lib/layout/unauthenticated.svelte         |  44 +-----
 src/lib/layout/usageMultiple.svelte           |   4 +-
 .../layout/wizardSecondaryContainer.svelte    |   5 +-
 src/lib/layout/wizardStep.svelte              |   7 +-
 src/lib/wizards/functions/cover.svelte        |  14 +-
 src/routes/(console)/+error.svelte            |  10 +-
 .../account/organizations/+page.svelte        |   5 +-
 .../(console)/account/payments/+page.svelte   |   4 +-
 src/routes/(console)/account/updateMfa.svelte |   4 +-
 .../(console)/account/updateName.svelte       |   2 +-
 .../(console)/account/updatePassword.svelte   |   2 +-
 .../create-organization/+page.svelte          |  22 ++-
 .../organization-[organization]/+page.svelte  |   5 +-
 .../billing/+page.svelte                      |   5 +-
 .../billing/availableCredit.svelte            |   2 +-
 .../billing/billingAddress.svelte             |   2 +-
 .../billing/budgetAlert.svelte                |   2 +-
 .../billing/budgetCap.svelte                  |   2 +-
 .../billing/paymentHistory.svelte             |   1 -
 .../billing/paymentMethods.svelte             |   3 +-
 .../billing/planSummary.svelte                |   2 +-
 .../billing/taxId.svelte                      |   2 +-
 .../domain-[domain]/settings/+page.svelte     |   4 +-
 .../settings/+page.svelte                     |   2 +-
 .../settings/BAA.svelte                       |   2 +-
 .../settings/downloadDPA.svelte               |   2 +-
 .../usage/[[invoice]]/+page.svelte            |   5 +-
 .../usage/[[invoice]]/totalMembers.svelte     |   2 +-
 .../(console)/project-[project]/+error.svelte |   4 +-
 .../security/updateMembershipPrivacy.svelte   |   2 +-
 .../security/updatePasswordDictionary.svelte  |   2 +-
 .../security/updatePasswordHistory.svelte     |   2 +-
 .../security/updatePersonalDataCheck.svelte   |   2 +-
 .../auth/security/updateSessionAlerts.svelte  |   2 +-
 .../auth/security/updateSessionLength.svelte  |   2 +-
 .../auth/security/updateSessionsLimit.svelte  |   2 +-
 .../auth/security/updateUsersLimit.svelte     |   2 +-
 .../auth/settings/+page.svelte                |   2 +-
 .../auth/teams/team-[team]/+page.svelte       |   2 +-
 .../auth/teams/team-[team]/updateName.svelte  |   2 +-
 .../auth/templates/emailSignature.svelte      |   2 +-
 .../auth/user-[user]/dangerZone.svelte        |   2 +-
 .../auth/user-[user]/targets/+page.svelte     |   1 -
 .../auth/user-[user]/updateEmail.svelte       |   2 +-
 .../auth/user-[user]/updateName.svelte        |   2 +-
 .../auth/user-[user]/updatePassword.svelte    |   2 +-
 .../auth/user-[user]/updatePhone.svelte       |   2 +-
 .../auth/user-[user]/updatePrefs.svelte       |   2 +-
 .../auth/user-[user]/updateStatus.svelte      |   2 +-
 .../collection-[collection]/+layout.svelte    |  17 +--
 .../collection-[collection]/+page.svelte      |  34 +++--
 .../create/+page.svelte                       | 136 ++++++++++++++++++
 .../createDocument.svelte                     |  83 -----------
 .../document-[document]/+page.svelte          |   2 +-
 .../document-[document]/attributeItem.svelte  |  84 +++++------
 .../attributes/relationship.svelte            |  22 +--
 .../document-[document]/data/+page.svelte     |   2 +-
 .../document-[document]/document.svelte       |   4 +-
 .../indexes/+page.svelte                      |   4 +-
 .../settings/dangerZone.svelte                |   2 +-
 .../settings/displayName.svelte               |   2 +-
 .../settings/updateSecurity.svelte            |   2 +-
 .../settings/updateStatus.svelte              |   2 +-
 .../wizard/step1.svelte                       |  17 ---
 .../wizard/step2.svelte                       |  34 -----
 .../collection-[collection]/wizard/store.ts   |  31 ----
 .../database-[database]/settings/+page.svelte |   2 +-
 .../functions/create-function/+page.svelte    |  14 +-
 .../function-[function]/+page.svelte          |  21 ++-
 .../deployment-[deployment]/+page.svelte      |   1 -
 .../function-[function]/settings/+page.svelte |   5 +-
 .../settings/executeFunction.svelte           |   5 +-
 .../settings/updateConfiguration.svelte       |   1 -
 .../settings/updateEvents.svelte              |   1 -
 .../settings/updateLogging.svelte             |   2 +-
 .../settings/updateName.svelte                |   2 +-
 .../settings/updatePermissions.svelte         |   2 +-
 .../settings/updateRuntime.svelte             |   2 +-
 .../settings/updateSchedule.svelte            |   2 +-
 .../settings/updateScopes.svelte              |   2 +-
 .../settings/updateTimeout.svelte             |   2 +-
 .../usage/[[period]]/+page.svelte             |   9 +-
 .../functions/templates/+page.svelte          |   5 +-
 .../template-[template]/+page.svelte          |   7 +-
 .../project-[project]/messaging/+page.svelte  |   7 +-
 .../messaging/message-[message]/delete.svelte |   2 +-
 .../message-[message]/emailMessage.svelte     |   2 +-
 .../message-[message]/overview.svelte         |   7 +-
 .../message-[message]/pushMessage.svelte      |   6 +-
 .../message-[message]/smsMessage.svelte       |   5 +-
 .../message-[message]/updateTargets.svelte    |  13 +-
 .../message-[message]/updateTopics.svelte     |   6 +-
 .../messaging/providers/+page.svelte          |   7 +-
 .../provider-[provider]/dangerZone.svelte     |   2 +-
 .../provider-[provider]/updateName.svelte     |   2 +-
 .../provider-[provider]/updateSettings.svelte |   2 +-
 .../provider-[provider]/updateStatus.svelte   |   5 +-
 .../topics/topic-[topic]/+page.svelte         |   5 +-
 .../topic-[topic]/settings/dangerZone.svelte  |   9 +-
 .../topic-[topic]/settings/details.svelte     |   6 +-
 .../topic-[topic]/settings/updateName.svelte  |   4 +-
 .../settings/updatePermissions.svelte         |   4 +-
 .../project-[project]/overview/+layout.svelte |   4 +-
 .../keys/[key]/+page@project-[project].svelte |   2 +-
 .../keys/[key]/updateExpirationDate.svelte    |   2 +-
 .../[platform]/+page@project-[project].svelte |   2 +-
 .../platforms/[platform]/android.svelte       |   2 +-
 .../platforms/[platform]/appleIOS.svelte      |   2 +-
 .../platforms/[platform]/appleMacOS.svelte    |   2 +-
 .../platforms/[platform]/appleTvOS.svelte     |   2 +-
 .../platforms/[platform]/appleWatchOS.svelte  |   2 +-
 .../[platform]/flutterAndroid.svelte          |   2 +-
 .../platforms/[platform]/flutterIOS.svelte    |   2 +-
 .../platforms/[platform]/flutterLinux.svelte  |   2 +-
 .../platforms/[platform]/flutterMacOS.svelte  |   2 +-
 .../[platform]/flutterWindows.svelte          |   2 +-
 .../overview/platforms/[platform]/web.svelte  |   2 +-
 .../settings/migrations/details.svelte        |  11 --
 .../settings/updateInstallations.svelte       |   1 -
 .../settings/updateName.svelte                |   2 +-
 .../settings/updateServices.svelte            |   2 +-
 .../settings/usage/[[invoice]]/+page.svelte   |   9 +-
 .../webhooks/[webhook]/updateEvents.svelte    |   2 +-
 .../webhooks/[webhook]/updateName.svelte      |   2 +-
 .../webhooks/[webhook]/updateSecurity.svelte  |   6 +-
 .../webhooks/[webhook]/updateSignature.svelte |   2 +-
 .../webhooks/[webhook]/updateURL.svelte       |   2 +-
 .../site-[site]/instantRollbackModal.svelte   |   2 +-
 .../sites/site-[site]/settings/store.ts       |   2 +-
 .../settings/updateBuildSettings.svelte       |   2 +-
 .../site-[site]/settings/updateName.svelte    |   2 +-
 .../settings/updateRepository.svelte          |   2 +-
 .../settings/updateRuntimeSettings.svelte     |   2 +-
 .../site-[site]/settings/updateSPA.svelte     |   2 +-
 .../project-[project]/sites/usage/+page.ts    |   3 +-
 .../project-[project]/storage/+page.svelte    |   2 +-
 .../storage/bucket-[bucket]/+page.svelte      |   8 +-
 .../bucket-[bucket]/file-[file]/+page.svelte  |   6 +-
 .../bucket-[bucket]/settings/+page.svelte     |   2 +-
 .../uploadVariablesModal.svelte               |   5 +-
 .../(public)/auth/magic-url/+page.svelte      |   4 +-
 .../(public)/auth/oauth2/failure/+page.svelte |   6 +-
 .../(public)/auth/oauth2/success/+page.svelte |   6 +-
 src/routes/+error.svelte                      |   6 +-
 tests/unit/components/heading.test.ts         |  14 --
 153 files changed, 480 insertions(+), 623 deletions(-)
 delete mode 100644 src/lib/components/heading.svelte
 create mode 100644 src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte
 delete mode 100644 src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/createDocument.svelte
 delete mode 100644 src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte
 delete mode 100644 src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
 delete mode 100644 src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/store.ts
 delete mode 100644 tests/unit/components/heading.test.ts

diff --git a/package.json b/package.json
index d55dc621b..68f7e91d5 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,9 @@
     "dependencies": {
         "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a ",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@fd6b940d ",
         "@appwrite.io/pink-legacy": "^1.0.2",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@af8d85a",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@fd6b940d",
         "@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 fc52d2bba..a66adfbed 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@dd94b87a '
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a(svelte@4.2.19)
+        specifier: 'https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@fd6b940d '
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@fd6b940d(svelte@4.2.19)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.2
         version: 1.0.2
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@af8d85a
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@af8d85a(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@fd6b940d
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@fd6b940d(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -215,14 +215,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@af8d85aaf667fa1918b812468dfbbf10718a0355':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@af8d85aaf667fa1918b812468dfbbf10718a0355}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@fd6b940d':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@fd6b940d}
     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@dd94b87a':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@fd6b940d412c5bf880e0ca176c47d5fdb05bedd3':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@fd6b940d412c5bf880e0ca176c47d5fdb05bedd3}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -236,8 +236,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.2':
     resolution: {integrity: sha512-1AYNcfbV+x0Tyj56CoieSq5g7+u+7F5/LDVN/z+Hx1kp9gj7xc1eT39Dy832xxfihImF6ksjp0FXEMVSBR8cew==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@af8d85a':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@af8d85a}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@fd6b940d':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@fd6b940d}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4099,11 +4099,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@af8d85aaf667fa1918b812468dfbbf10718a0355(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@fd6b940d(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@dd94b87a(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@fd6b940d412c5bf880e0ca176c47d5fdb05bedd3(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4116,9 +4116,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@af8d85a(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@fd6b940d(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@af8d85aaf667fa1918b812468dfbbf10718a0355(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@fd6b940d412c5bf880e0ca176c47d5fdb05bedd3(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.3(svelte@4.2.19)
diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte
index d9dc6b9e3..d885b1384 100644
--- a/src/lib/components/filePicker.svelte
+++ b/src/lib/components/filePicker.svelte
@@ -20,11 +20,11 @@
     import FormList from '$lib/elements/forms/formList.svelte';
     import { writable } from 'svelte/store';
     import { onMount } from 'svelte';
-    import Heading from './heading.svelte';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import Empty from './empty.svelte';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let show: boolean;
     export let mimeTypeQuery: string = 'image/';
@@ -479,12 +479,9 @@
                                                     --color-border="var(--color-neutral-15)">
                                                     <div class="common-section">
                                                         <div class="u-text-center common-section">
-                                                            <Heading
-                                                                size="7"
-                                                                tag="h2"
-                                                                trimmed={false}>
+                                                            <Typography.Title size="s">
                                                                 No files found within this bucket.
-                                                            </Heading>
+                                                            </Typography.Title>
                                                             <p class="text u-line-height-1-5">
                                                                 Need a hand? Learn more in our <a
                                                                     class="link"
@@ -510,9 +507,7 @@
                                 --shadow-small="none"
                                 --color-border="var(--color-neutral-15)">
                                 <div class="u-text-center u-flex-vertical u-cross-center u-gap-24">
-                                    <Heading size="7" tag="h2" trimmed={false}>
-                                        No buckets found
-                                    </Heading>
+                                    <Typography.Title size="s">No buckets found</Typography.Title>
                                     <Button
                                         secondary
                                         external
diff --git a/src/lib/components/heading.svelte b/src/lib/components/heading.svelte
deleted file mode 100644
index 9ef0315f6..000000000
--- a/src/lib/components/heading.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-    type NumSize = 1 | 2 | 3 | 4 | 5 | 6 | 7;
-    type Size = NumSize | `${NumSize}`;
-
-    export let tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    export let size: Size;
-    export let trimmed = true;
-    export let trimmedSecondLine = false;
-    export let id: string = null;
-    let classes = '';
-    export { classes as class };
-    export let style = '';
-</script>
-
-<svelte:element
-    this={tag}
-    class={`heading-level-${size} u-min-width-0 ${classes}`}
-    class:u-trim-1={trimmed}
-    class:u-trim-2={trimmedSecondLine}
-    {style}
-    {id}>
-    <slot />
-</svelte:element>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index bbc8dc792..7f71cd1ba 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -46,7 +46,6 @@ export { default as Tabs } from './tabs.svelte';
 export { default as Tab } from './tab.svelte';
 export { default as EventModal } from './eventModal.svelte';
 export { default as Status } from './status.svelte';
-export { default as Heading } from './heading.svelte';
 export { default as Output } from './output.svelte';
 export { default as Support } from './support.svelte';
 export { default as ViewSelector } from './viewSelector.svelte';
diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index a989113f1..7294e8550 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert, DropList, Heading } from '$lib/components';
+    import { Alert, DropList } from '$lib/components';
     import { BillingPlan } from '$lib/constants';
     import { Link, Pill } from '$lib/elements';
     import {
@@ -17,11 +17,9 @@
     import { createEventDispatcher, onMount } from 'svelte';
     import { ContainerButton } from '.';
     import { goto } from '$app/navigation';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let title: string;
-    export let titleTag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2';
-    export let titleSize: '1' | '2' | '3' | '4' | '5' | '6' | '7' = '5';
     export let serviceId = title.toLocaleLowerCase() as PlanServices;
     export let total: number = null;
     export let alertType: 'info' | 'success' | 'warning' | 'error' | 'default' = 'warning';
@@ -117,7 +115,7 @@
 
 <Layout.Stack direction="row" alignContent="center">
     <Layout.Stack direction="row">
-        <Heading tag={titleTag} size={titleSize}>{title}</Heading>
+        <Typography.Title size="m">{title}</Typography.Title>
         {#if isCloud && isLimited}
             <DropList bind:show={showDropdown} width="16">
                 {#if hasProjectLimitation}
diff --git a/src/lib/layout/gridHeader.svelte b/src/lib/layout/gridHeader.svelte
index 27b478ac8..9b66018bb 100644
--- a/src/lib/layout/gridHeader.svelte
+++ b/src/lib/layout/gridHeader.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Heading, ViewSelector } from '$lib/components';
+    import { ViewSelector } from '$lib/components';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import type { View } from '$lib/helpers/load';
     import type { Column } from '$lib/helpers/types';
     import type { Writable } from 'svelte/store';
@@ -14,7 +15,7 @@
 </script>
 
 <header class="grid-header">
-    <Heading tag="h2" size="5">{title}</Heading>
+    <Typography.Title size="m">{title}</Typography.Title>
     <div class="u-flex u-gap-16 u-contents-mobile">
         <ViewSelector
             {view}
diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
index 207e26915..4246c8f98 100644
--- a/src/lib/layout/logs.svelte
+++ b/src/lib/layout/logs.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { hoursToDays, timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
     import { log } from '$lib/stores/logs';
-    import { Alert, Card, Code, Copy, Heading, Id, SvgIcon, Tab, Tabs } from '../components';
+    import { Alert, Card, Code, Copy, Id, SvgIcon, Tab, Tabs } from '../components';
     import { calculateTime } from '$lib/helpers/timeConversion';
     import {
         TableBody,
@@ -18,7 +18,7 @@
     import { organization } from '$lib/stores/organization';
     import { Button } from '$lib/elements/forms';
     import { BillingPlan } from '$lib/constants';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Tooltip, Typography } from '@appwrite.io/pink-svelte';
 
     let selectedRequest = 'parameters';
     let selectedResponse = 'logs';
@@ -201,7 +201,7 @@
                     <div class="code-panel-content grid-1-2">
                         <div
                             class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16 mobile-only-inline-20-padding">
-                            <Heading tag="h3" size="6">Request</Heading>
+                            <Typography.Title size="s">Request</Typography.Title>
                             <div class="u-sep-block-end">
                                 <Tabs>
                                     <Tab
@@ -314,7 +314,7 @@
                         <div class="u-sep-block-end is-only-mobile u-padding-block-start-16" />
                         <div
                             class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0 mobile-only-inline-20-padding mobile-only-block-start-20-padding">
-                            <Heading tag="h3" size="6">Response</Heading>
+                            <Typography.Title size="s">Request</Typography.Title>
                             <div class="u-sep-block-end">
                                 <Tabs>
                                     <Tab
diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index ecbeb5196..ba694c3d9 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { Avatar, AvatarInitials, Card, Heading } from '$lib/components';
+    import { Avatar, AvatarInitials, Card } from '$lib/components';
     import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
     import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
     import LoginDark from '$lib/images/login/login-dark-mode.png';
@@ -93,26 +93,7 @@
                     alt="promo" />
 
                 <div class="u-text-center auth-container">
-                    <div class="is-only-mobile u-width-full-line">
-                        <Heading
-                            size="5"
-                            tag="h3"
-                            class="u-margin-block-start-16"
-                            trimmed={false}
-                            style="font-weight:normal">
-                            {generateTitle()}
-                        </Heading>
-                    </div>
-                    <div class="is-not-mobile u-width-full-line">
-                        <Heading
-                            size="4"
-                            tag="h3"
-                            class="u-margin-block-start-32"
-                            trimmed={false}
-                            style="font-weight:normal">
-                            {generateTitle()}
-                        </Heading>
-                    </div>
+                    <Typography.Title size="m">{generateTitle()}</Typography.Title>
                     <p class="u-margin-block-start-16">
                         {generateDesc()}
                     </p>
@@ -122,26 +103,7 @@
             <section
                 class="u-flex u-flex-vertical u-main-center u-cross-center u-height-100-percent u-width-full-line review-container">
                 <div class="u-text-center">
-                    <div class="is-only-mobile u-width-full-line">
-                        <Heading
-                            size="5"
-                            tag="h3"
-                            class="u-margin-block-start-48"
-                            trimmed={false}
-                            style="font-weight:normal">
-                            {generateTitle()}
-                        </Heading>
-                    </div>
-                    <div class="is-not-mobile u-width-full-line">
-                        <Heading
-                            size="3"
-                            tag="h3"
-                            class="u-margin-block-start-32"
-                            trimmed={false}
-                            style="font-weight:normal">
-                            {generateTitle()}
-                        </Heading>
-                    </div>
+                    <Typography.Title size="m">{generateTitle()}</Typography.Title>
                 </div>
 
                 <p class="body-text-1 u-margin-block-start-16 u-text-center">{generateDesc()}</p>
diff --git a/src/lib/layout/usageMultiple.svelte b/src/lib/layout/usageMultiple.svelte
index c2756141b..cf42b1bbb 100644
--- a/src/lib/layout/usageMultiple.svelte
+++ b/src/lib/layout/usageMultiple.svelte
@@ -2,7 +2,7 @@
     import { Container } from '$lib/layout';
     import { BarChart, Legend, type LegendData } from '$lib/charts';
     import { accumulateFromEndingTotal } from '$lib/layout/usage.svelte';
-    import { Card, Heading, SecondaryTabs, SecondaryTabsItem } from '$lib/components';
+    import { Card, SecondaryTabs, SecondaryTabsItem } from '$lib/components';
     import { page } from '$app/stores';
     import { type Models } from '@appwrite.io/console';
     import { formatNumberWithCommas } from '$lib/helpers/numbers';
@@ -20,7 +20,7 @@
 <Container overlapCover={overlapContainerCover}>
     {#if showHeader}
         <div class="u-flex u-main-space-between common-section">
-            <Heading tag="h2" size="5">{title}</Heading>
+            <Typography.Title>{title}</Typography.Title>
 
             {#if path}
                 <SecondaryTabs>
diff --git a/src/lib/layout/wizardSecondaryContainer.svelte b/src/lib/layout/wizardSecondaryContainer.svelte
index f6b8f6908..167fbba6c 100644
--- a/src/lib/layout/wizardSecondaryContainer.svelte
+++ b/src/lib/layout/wizardSecondaryContainer.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
-    import { Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import WizardExitModal from './wizardExitModal.svelte';
     import { goto } from '$app/navigation';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     type $$Props =
         | {
@@ -42,7 +42,8 @@
     <div class="wizard-secondary-container">
         <header class="wizard-secondary-header">
             <div class="u-flex u-main-space-between u-gap-32 u-cross-center">
-                <Heading size={5} tag="h1"><slot name="title" /></Heading>
+                <Typography.Title><slot name="title" /></Typography.Title>
+
                 <Button
                     text
                     icon
diff --git a/src/lib/layout/wizardStep.svelte b/src/lib/layout/wizardStep.svelte
index 5a3a5dae3..5ab8b014b 100644
--- a/src/lib/layout/wizardStep.svelte
+++ b/src/lib/layout/wizardStep.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { Heading } from '$lib/components';
     import { wizard } from '$lib/stores/wizard';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
     import { onDestroy } from 'svelte';
 
     /**
@@ -23,9 +22,7 @@
 
 <Layout.Stack>
     <header class="form-header" class:hide-divider={!$$slots.subtitle}>
-        <Heading tag="h1" size="6">
-            <slot name="title" />
-        </Heading>
+        <Typography.Title><slot name="title" /></Typography.Title>
         {#if $$slots.subtitle}
             <p>
                 <slot name="subtitle" />
diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
index a7d430b66..d31eaae83 100644
--- a/src/lib/wizards/functions/cover.svelte
+++ b/src/lib/wizards/functions/cover.svelte
@@ -28,7 +28,7 @@
 
 <script lang="ts">
     import { base } from '$app/paths';
-    import { AvatarGroup, Box, Heading } from '$lib/components';
+    import { AvatarGroup, Box } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { wizard } from '$lib/stores/wizard';
     import { repository, templateConfig, template as templateStore } from './store';
@@ -44,7 +44,7 @@
     import { isSelfHosted } from '$lib/system';
     import { consoleVariables } from '$routes/(console)/store';
     import { featuredTemplatesList, starterTemplate } from '$lib/stores/templates';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Tooltip, Typography } from '@appwrite.io/pink-svelte';
     import { IconDeno, IconDotnet } from '@appwrite.io/pink-icons-svelte';
 
     const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
@@ -66,7 +66,7 @@
         <div class="git-container u-position-relative">
             <div class="grid-1-1 u-gap-24">
                 <div class="card u-cross-child-start u-height-100-percent">
-                    <Heading size="6" tag="h6">Connect Git repository</Heading>
+                    <Typography.Title>Connect Git repository</Typography.Title>
                     <p class="u-margin-block-start-8">
                         Create and deploy a function with a connected git repository.
                     </p>
@@ -87,9 +87,9 @@
                             style="border-radius: var(--border-radius-medium)">
                             <div
                                 class="u-flex-vertical u-height-100-percent u-main-center u-cross-center u-gap-16 u-padding-inline-24">
-                                <Heading size="7" tag="h6" trimmed={false}>
+                                <Typography.Title size="s">
                                     Connect your self-hosted instance to Git
-                                </Heading>
+                                </Typography.Title>
                                 <p>
                                     Configure your self-hosted instance to connect your function to
                                     a Git repository.
@@ -107,7 +107,7 @@
 
                 <div class="card u-height-100-percent">
                     <section class="common-section">
-                        <Heading size="6" tag="h6">Quick start</Heading>
+                        <Typography.Title size="s">Quick start</Typography.Title>
                         <p class="u-margin-block-start-8">Use a starter template.</p>
                         <ul
                             class="grid-box u-margin-block-start-16"
@@ -197,7 +197,7 @@
                     </Button>
                     <div class="u-sep-block-start common-section" />
                     <section class="common-section">
-                        <Heading size="6" tag="h6">Templates</Heading>
+                        <Typography.Title size="s">Templates</Typography.Title>
                         <p class="text u-margin-block-start-8">
                             Find the right template for your use case.
                         </p>
diff --git a/src/routes/(console)/+error.svelte b/src/routes/(console)/+error.svelte
index 6b71031bd..075ff3d8f 100644
--- a/src/routes/(console)/+error.svelte
+++ b/src/routes/(console)/+error.svelte
@@ -1,15 +1,17 @@
 <script>
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 </script>
 
 <Container>
-    <div class="u-flex-vertical u-gap-16">
-        <Heading size="1" tag="h3">{$page.error.status || 'Invalid Argument'}</Heading>
-        <Heading size="4" tag="h4" trimmed={false}>{$page.error.message}</Heading>
+    <div>
+        <Typography.Title size="xl">{$page.error.status || 'Invalid Argument'}</Typography.Title>
+        <Typography.Title>{$page.error.message}</Typography.Title>
+    </div>
+    <div>
         <Button href={base}>Back to the console</Button>
     </div>
 </Container>
diff --git a/src/routes/(console)/account/organizations/+page.svelte b/src/routes/(console)/account/organizations/+page.svelte
index 5ea70ddb9..b5286b08d 100644
--- a/src/routes/(console)/account/organizations/+page.svelte
+++ b/src/routes/(console)/account/organizations/+page.svelte
@@ -5,7 +5,6 @@
         Empty,
         AvatarGroup,
         CardContainer,
-        Heading,
         PaginationWithLimit
     } from '$lib/components';
     import { Button } from '$lib/elements/forms';
@@ -21,7 +20,7 @@
     import { toLocaleDate } from '$lib/helpers/date';
     import { BillingPlan } from '$lib/constants';
     import { goto } from '$app/navigation';
-    import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
+    import { Icon, Tooltip, Typography } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
@@ -47,7 +46,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Organizations</Heading>
+        <Typography.Title>Organizations</Typography.Title>
 
         <Button on:click={createOrg} event="create_organization">
             <Icon icon={IconPlus} slot="start" size="s" />
diff --git a/src/routes/(console)/account/payments/+page.svelte b/src/routes/(console)/account/payments/+page.svelte
index 1e00b42eb..8eb25c9e2 100644
--- a/src/routes/(console)/account/payments/+page.svelte
+++ b/src/routes/(console)/account/payments/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-    import { Heading } from '$lib/components';
     import { Container } from '$lib/layout';
     import PaymentMethods from './paymentMethods.svelte';
     import BillingAddress from './billingAddress.svelte';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import { confirmPayment } from '$lib/stores/stripe';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     let showPayment = false;
 
@@ -20,7 +20,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Payment details</Heading>
+        <Typography.Title size="s">Payment details</Typography.Title>
     </div>
     <PaymentMethods bind:showPayment />
     <BillingAddress />
diff --git a/src/routes/(console)/account/updateMfa.svelte b/src/routes/(console)/account/updateMfa.svelte
index e572aad29..88f377758 100644
--- a/src/routes/(console)/account/updateMfa.svelte
+++ b/src/routes/(console)/account/updateMfa.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, EyebrowHeading, Heading } from '$lib/components';
+    import { CardGrid, EyebrowHeading } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, FormList, InputChoice } from '$lib/elements/forms';
+    import { Button, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
diff --git a/src/routes/(console)/account/updateName.svelte b/src/routes/(console)/account/updateName.svelte
index 23bf75b52..c78305bc6 100644
--- a/src/routes/(console)/account/updateName.svelte
+++ b/src/routes/(console)/account/updateName.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, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/account/updatePassword.svelte b/src/routes/(console)/account/updatePassword.svelte
index d723cb4e6..aa338f3e5 100644
--- a/src/routes/(console)/account/updatePassword.svelte
+++ b/src/routes/(console)/account/updatePassword.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button, Form, FormList, InputPassword } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
diff --git a/src/routes/(console)/create-organization/+page.svelte b/src/routes/(console)/create-organization/+page.svelte
index be91c6978..5155ed62b 100644
--- a/src/routes/(console)/create-organization/+page.svelte
+++ b/src/routes/(console)/create-organization/+page.svelte
@@ -190,18 +190,16 @@
             </p>
             <PlanSelection bind:billingPlan {anyOrgFree} isNewOrg />
             {#if billingPlan !== BillingPlan.FREE}
-                <FormList class="u-margin-block-start-24">
-                    <InputTags
-                        bind:tags={collaborators}
-                        label="Invite members by email"
-                        popover={Default}
-                        placeholder="Enter email address(es)"
-                        validityRegex={emailRegex}
-                        validityMessage="Invalid email address"
-                        id="members" />
-                    <SelectPaymentMethod bind:methods bind:value={paymentMethodId} bind:taxId
-                    ></SelectPaymentMethod>
-                </FormList>
+                <InputTags
+                    bind:tags={collaborators}
+                    label="Invite members by email"
+                    popover={Default}
+                    placeholder="Enter email address(es)"
+                    validityRegex={emailRegex}
+                    validityMessage="Invalid email address"
+                    id="members" />
+                <SelectPaymentMethod bind:methods bind:value={paymentMethodId} bind:taxId
+                ></SelectPaymentMethod>
                 {#if !couponData?.code}
                     <Button text on:click={() => (showCreditModal = true)}>
                         <Icon icon={IconPlus} slot="start" size="s" />
diff --git a/src/routes/(console)/organization-[organization]/+page.svelte b/src/routes/(console)/organization-[organization]/+page.svelte
index 7e0258d11..4a5753db7 100644
--- a/src/routes/(console)/organization-[organization]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/+page.svelte
@@ -15,7 +15,6 @@
         DropListItem,
         Empty,
         GridItem1,
-        Heading,
         PaginationWithLimit
     } from '$lib/components';
     import { goto } from '$app/navigation';
@@ -31,7 +30,7 @@
     import { onMount, type ComponentType } from 'svelte';
     import { canWriteProjects } from '$lib/stores/roles';
     import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
-    import { Badge, Icon } from '@appwrite.io/pink-svelte';
+    import { Badge, Icon, Typography } from '@appwrite.io/pink-svelte';
     import {
         IconAndroid,
         IconApple,
@@ -146,7 +145,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Projects</Heading>
+        <Typography.Title>Projects</Typography.Title>
 
         <DropList bind:show={showDropdown} placement="bottom-end">
             {#if $canWriteProjects}
diff --git a/src/routes/(console)/organization-[organization]/billing/+page.svelte b/src/routes/(console)/organization-[organization]/billing/+page.svelte
index 017a1dec0..74130709f 100644
--- a/src/routes/(console)/organization-[organization]/billing/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/+page.svelte
@@ -9,7 +9,7 @@
     import AvailableCredit from './availableCredit.svelte';
     import PaymentHistory from './paymentHistory.svelte';
     import TaxId from './taxId.svelte';
-    import { Alert, Heading } from '$lib/components';
+    import { Alert } from '$lib/components';
     import { failedInvoice, paymentMethods, tierToPlan, upgradeURL } from '$lib/stores/billing';
     import type { PaymentMethodData } from '$lib/sdk/billing';
     import { onMount } from 'svelte';
@@ -21,6 +21,7 @@
     import { selectedInvoice, showRetryModal } from './store';
     import { Button } from '$lib/elements/forms';
     import { goto } from '$app/navigation';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let data;
 
@@ -117,7 +118,7 @@
         </Alert>
     {/if}
     <div class="common-section">
-        <Heading tag="h2" size="5">Billing</Heading>
+        <Typography.Title>Billing</Typography.Title>
     </div>
     <PlanSummary
         creditList={data?.creditList}
diff --git a/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte b/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
index c07e5c62a..bf25b8228 100644
--- a/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert, CardGrid, Empty, Heading, PaginationInline } from '$lib/components';
+    import { Alert, CardGrid, Empty, PaginationInline } from '$lib/components';
     import {
         TableBody,
         TableCellHead,
diff --git a/src/routes/(console)/organization-[organization]/billing/billingAddress.svelte b/src/routes/(console)/organization-[organization]/billing/billingAddress.svelte
index a12c4a843..1b989ba15 100644
--- a/src/routes/(console)/organization-[organization]/billing/billingAddress.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/billingAddress.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, DropList, Heading } from '$lib/components';
+    import { CardGrid, DropList } from '$lib/components';
     import DropListItem from '$lib/components/dropListItem.svelte';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte b/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
index 5c69a3e19..0b518d4c1 100644
--- a/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert, CardGrid, Heading } from '$lib/components';
+    import { Alert, CardGrid } from '$lib/components';
     import { BillingPlan, Dependencies } from '$lib/constants';
     import { tierToPlan, upgradeURL } from '$lib/stores/billing';
     import { Button, Form, FormList, InputSelectSearch } from '$lib/elements/forms';
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
index 225100a9f..9a0d31872 100644
--- a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert, CardGrid, Heading } from '$lib/components';
+    import { Alert, CardGrid } from '$lib/components';
     import { BillingPlan, Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputNumber, InputSwitch } from '$lib/elements/forms';
     import { showUsageRatesModal, upgradeURL } from '$lib/stores/billing';
diff --git a/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte b/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte
index 3a1329f62..50146c466 100644
--- a/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte
@@ -6,7 +6,6 @@
         DropListItem,
         DropListLink,
         EmptySearch,
-        Heading,
         PaginationInline
     } from '$lib/components';
     import { Pill } from '$lib/elements';
diff --git a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
index a18474bdd..ab4b51c7a 100644
--- a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
@@ -7,8 +7,7 @@
         CreditCardBrandImage,
         CreditCardInfo,
         DropList,
-        DropListItem,
-        Heading
+        DropListItem
     } from '$lib/components';
     import { BillingPlan, Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
index 0fe0649af..2353a55d5 100644
--- a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { Card, CardGrid, Collapsible, CollapsibleItem, Heading } from '$lib/components';
+    import { Card, CardGrid, Collapsible, CollapsibleItem } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDate } from '$lib/helpers/date';
     import { plansInfo, tierToPlan, upgradeURL } from '$lib/stores/billing';
diff --git a/src/routes/(console)/organization-[organization]/billing/taxId.svelte b/src/routes/(console)/organization-[organization]/billing/taxId.svelte
index 75051f33c..6dc97f78e 100644
--- a/src/routes/(console)/organization-[organization]/billing/taxId.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/taxId.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, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/+page.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/+page.svelte
index dd478c967..7b08129ed 100644
--- a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { Heading } from '$lib/components';
     import { Container } from '$lib/layout';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import ChangeOrganization from './changeOrganization.svelte';
     import DeleteDomain from './deleteDomain.svelte';
 
@@ -8,7 +8,7 @@
 </script>
 
 <Container>
-    <Heading tag="h2" size="5">Settings</Heading>
+    <Typography.Title>Settings</Typography.Title>
     <ChangeOrganization domain={data.domain} organizations={data.organizations} />
     <DeleteDomain domain={data.domain} />
 </Container>
diff --git a/src/routes/(console)/organization-[organization]/settings/+page.svelte b/src/routes/(console)/organization-[organization]/settings/+page.svelte
index 0788e3092..caf4aa612 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, BoxAvatar, AvatarGroup, Heading } from '$lib/components';
+    import { CardGrid, BoxAvatar, AvatarGroup } from '$lib/components';
     import { InputText, Form, Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/organization-[organization]/settings/BAA.svelte b/src/routes/(console)/organization-[organization]/settings/BAA.svelte
index 1ee6e426f..40c799874 100644
--- a/src/routes/(console)/organization-[organization]/settings/BAA.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/BAA.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 BaaModal from './BAAModal.svelte';
 
diff --git a/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte b/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte
index 767d026e1..c67ad9894 100644
--- a/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/downloadDPA.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 { base } from '$app/paths';
     import { sdk } from '$lib/stores/sdk';
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
index 1f19a1de7..e5ed1ffcf 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { Card, CardGrid, Heading, ProgressBarBig } from '$lib/components';
+    import { Card, CardGrid, ProgressBarBig } from '$lib/components';
     import {
         getServiceLimit,
         showUsageRatesModal,
@@ -20,6 +20,7 @@
     import TotalMembers from './totalMembers.svelte';
     import { tooltip } from '$lib/actions/tooltip';
     import { formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let data;
 
@@ -38,7 +39,7 @@
 
 <Container>
     <div class="u-flex u-cross-center u-main-space-between">
-        <Heading tag="h2" size="5">Usage</Heading>
+        <Typography.Title>Usage</Typography.Title>
 
         {#if $organization?.billingPlan === BillingPlan.FREE}
             <Button
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte
index 8234284c7..2e3ad968d 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { AvatarInitials, CardGrid, Heading, Paginator } from '$lib/components';
+    import { AvatarInitials, CardGrid, Paginator } from '$lib/components';
     import { EmptyCardCloud } from '$lib/components/billing';
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
diff --git a/src/routes/(console)/project-[project]/+error.svelte b/src/routes/(console)/project-[project]/+error.svelte
index be0053176..fa225ecb7 100644
--- a/src/routes/(console)/project-[project]/+error.svelte
+++ b/src/routes/(console)/project-[project]/+error.svelte
@@ -1,10 +1,10 @@
 <script>
     import { page } from '$app/stores';
-    import { Heading } from '$lib/components';
     import { Container } from '$lib/layout';
+    import { Typography } from '@appwrite.io/pink-svelte';
 </script>
 
 <Container>
-    <Heading size="1" tag="h3">{$page.error.status || 'Invalid Argument'}</Heading>
+    <Typography.Title size="xl">{$page.error.status || 'Invalid Argument'}</Typography.Title>
     <p class="body-text-2 u-bold u-margin-block-start-4">{$page.error.message}</p>
 </Container>
diff --git a/src/routes/(console)/project-[project]/auth/security/updateMembershipPrivacy.svelte b/src/routes/(console)/project-[project]/auth/security/updateMembershipPrivacy.svelte
index 4dc18daa8..afc2db962 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateMembershipPrivacy.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateMembershipPrivacy.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, InputChoice } from '$lib/elements/forms';
     import { FormList } from '$lib/elements/forms';
diff --git a/src/routes/(console)/project-[project]/auth/security/updatePasswordDictionary.svelte b/src/routes/(console)/project-[project]/auth/security/updatePasswordDictionary.svelte
index 646a544bf..e388deb41 100644
--- a/src/routes/(console)/project-[project]/auth/security/updatePasswordDictionary.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updatePasswordDictionary.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, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/project-[project]/auth/security/updatePasswordHistory.svelte b/src/routes/(console)/project-[project]/auth/security/updatePasswordHistory.svelte
index fa6fb10d8..8f654ef5d 100644
--- a/src/routes/(console)/project-[project]/auth/security/updatePasswordHistory.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updatePasswordHistory.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, InputNumber, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/project-[project]/auth/security/updatePersonalDataCheck.svelte b/src/routes/(console)/project-[project]/auth/security/updatePersonalDataCheck.svelte
index d1468f5e6..320cce6c4 100644
--- a/src/routes/(console)/project-[project]/auth/security/updatePersonalDataCheck.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updatePersonalDataCheck.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, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/project-[project]/auth/security/updateSessionAlerts.svelte b/src/routes/(console)/project-[project]/auth/security/updateSessionAlerts.svelte
index 6cc83999f..447e2caa0 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateSessionAlerts.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateSessionAlerts.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, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/project-[project]/auth/security/updateSessionLength.svelte b/src/routes/(console)/project-[project]/auth/security/updateSessionLength.svelte
index fc979f10c..14edb541c 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateSessionLength.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateSessionLength.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, InputNumber, InputSelect } from '$lib/elements/forms';
     import { createTimeUnitPair } from '$lib/helpers/unit';
diff --git a/src/routes/(console)/project-[project]/auth/security/updateSessionsLimit.svelte b/src/routes/(console)/project-[project]/auth/security/updateSessionsLimit.svelte
index 64cef37e1..06ef31dd0 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateSessionsLimit.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateSessionsLimit.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, InputNumber } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/project-[project]/auth/security/updateUsersLimit.svelte b/src/routes/(console)/project-[project]/auth/security/updateUsersLimit.svelte
index c28b6996d..a126d2798 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateUsersLimit.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateUsersLimit.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 { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
diff --git a/src/routes/(console)/project-[project]/auth/settings/+page.svelte b/src/routes/(console)/project-[project]/auth/settings/+page.svelte
index 4db2360a5..a61fa26d7 100644
--- a/src/routes/(console)/project-[project]/auth/settings/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/settings/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { InputSwitch } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
diff --git a/src/routes/(console)/project-[project]/auth/teams/team-[team]/+page.svelte b/src/routes/(console)/project-[project]/auth/teams/team-[team]/+page.svelte
index 582a302fc..ba407edbd 100644
--- a/src/routes/(console)/project-[project]/auth/teams/team-[team]/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/teams/team-[team]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Heading, AvatarInitials } from '$lib/components';
+    import { CardGrid, AvatarInitials } from '$lib/components';
     import { Container } from '$lib/layout';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { team } from './store';
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 c94b822d8..7a46b328e 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
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     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, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/project-[project]/auth/templates/emailSignature.svelte b/src/routes/(console)/project-[project]/auth/templates/emailSignature.svelte
index 3554d0d3b..59b9fa5ea 100644
--- a/src/routes/(console)/project-[project]/auth/templates/emailSignature.svelte
+++ b/src/routes/(console)/project-[project]/auth/templates/emailSignature.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, EmptyCardImageCloud, Heading } from '$lib/components';
+    import { CardGrid, EmptyCardImageCloud } from '$lib/components';
     import Button from '$lib/elements/forms/button.svelte';
     import { app } from '$lib/stores/app';
     import { upgradeURL } from '$lib/stores/billing';
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 310b313c5..d59c6760a 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/dangerZone.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/dangerZone.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <script lang="ts">
-    import { CardGrid, BoxAvatar, Heading, AvatarInitials } from '$lib/components';
+    import { CardGrid, BoxAvatar, AvatarInitials } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { writable } from 'svelte/store';
     import DeleteUser from './deleteUser.svelte';
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/targets/+page.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/targets/+page.svelte
index 6e7938a54..0dc14b568 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/targets/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/targets/+page.svelte
@@ -2,7 +2,6 @@
     import { Button } from '$lib/elements/forms';
     import {
         PaginationWithLimit,
-        Heading,
         ViewSelector,
         EmptyFilter,
         EmptySearch,
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 aa1f998c3..3415c7a17 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/updateEmail.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/updateEmail.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputEmail } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 663bcb310..5be083764 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/updateName.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/updateName.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 dfd687a17..d7a3f25d8 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/updatePassword.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/updatePassword.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button, Form, InputPassword } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
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 9ce42941e..55bf616f6 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/updatePhone.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/updatePhone.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputPhone } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 04926fc36..6bd14582e 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/updatePrefs.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/updatePrefs.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/project-[project]/auth/user-[user]/updateStatus.svelte b/src/routes/(console)/project-[project]/auth/user-[user]/updateStatus.svelte
index 92666ac27..46e9e34a1 100644
--- a/src/routes/(console)/project-[project]/auth/user-[user]/updateStatus.svelte
+++ b/src/routes/(console)/project-[project]/auth/user-[user]/updateStatus.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { AvatarInitials, CardGrid, DropList, DropListItem, Heading } from '$lib/components';
+    import { AvatarInitials, CardGrid, DropList, DropListItem } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
index 42e112f94..8caa48503 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -29,10 +29,9 @@
     import { project } from '$routes/(console)/project-[project]/store';
     import { page } from '$app/stores';
     import CreateIndex from './indexes/createIndex.svelte';
-    import { wizard } from '$lib/stores/wizard';
-    import CreateDocument from './createDocument.svelte';
     import { base } from '$app/paths';
     import { canWriteCollections } from '$lib/stores/roles';
+    import { IconLockClosed, IconPlus, IconPuzzle } from '@appwrite.io/pink-icons-svelte';
 
     let unsubscribe: { (): void };
 
@@ -58,9 +57,11 @@
             label: 'Create document',
             keys: $page.url.pathname.endsWith($collection.$id) ? ['c'] : ['c', 'd'],
             callback() {
-                wizard.start(CreateDocument);
+                goto(
+                    `${base}/project-${$project?.$id}/databases/database-${$database?.$id}/collection-${$collection?.$id}/create`
+                );
             },
-            icon: 'plus',
+            icon: IconPlus,
             group: 'documents'
         },
         {
@@ -69,7 +70,7 @@
             callback() {
                 addSubPanel(CreateAttributePanel);
             },
-            icon: 'plus',
+            icon: IconPlus,
             group: 'attributes',
             disabled: !$canWriteCollections
         },
@@ -165,7 +166,7 @@
                 $page.url.pathname.endsWith('permissions') ||
                 $page.url.pathname.endsWith('settings') ||
                 !$canWriteCollections,
-            icon: 'puzzle'
+            icon: IconPuzzle
         },
         {
             label: 'Document security',
@@ -179,7 +180,7 @@
                 $page.url.pathname.endsWith('document-security') ||
                 $page.url.pathname.endsWith('settings') ||
                 !$canWriteCollections,
-            icon: 'lock-closed'
+            icon: IconLockClosed
         },
         {
             label: 'Create index',
@@ -187,7 +188,7 @@
             callback() {
                 initCreateIndex();
             },
-            icon: 'plus',
+            icon: IconPlus,
             group: 'indexes',
             disabled: !$canWriteCollections
         }
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 fecc6a70d..0c8815d03 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
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Empty, EmptySearch, Heading, PaginationWithLimit } from '$lib/components';
+    import { Empty, EmptySearch, PaginationWithLimit } from '$lib/components';
     import { Filters, hasPageQueries, queries } from '$lib/components/filters';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { Button } from '$lib/elements/forms';
@@ -8,16 +8,15 @@
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
     import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
-    import { wizard } from '$lib/stores/wizard';
     import { Card, Icon, Layout, Empty as PinkEmpty } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
     import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte';
     import type { Option } from './attributes/store';
     import CreateAttribute from './createAttribute.svelte';
-    import Create from './createDocument.svelte';
     import { collection, columns } from './store';
     import Table from './table.svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { base } from '$app/paths';
 
     export let data: PageData;
 
@@ -36,14 +35,7 @@
             elements: 'elements' in attribute ? attribute.elements : null
         }))
     );
-
-    function openWizard() {
-        if (!$canWriteDocuments) return;
-        wizard.start(Create);
-    }
-
     $: hasAttributes = !!$collection.attributes.length;
-
     $: hasValidAttributes = $collection?.attributes?.some((attr) => attr.status === 'available');
 </script>
 
@@ -58,7 +50,7 @@
                 <ViewSelector view={data.view} {columns} hideView allowNoColumns />
                 <Button
                     disabled={!(hasAttributes && hasValidAttributes)}
-                    on:click={openWizard}
+                    href={`${base}/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/create`}
                     event="create_document">
                     <Icon icon={IconPlus} slot="start" size="s" />
                     Create document
@@ -99,8 +91,24 @@
                     allowCreate={$canWriteDocuments}
                     single
                     href="https://appwrite.io/docs/products/databases/documents"
-                    target="document"
-                    on:click={openWizard} />
+                    target="document">
+                    <svelte:fragment slot="actions">
+                        <Button
+                            external
+                            href="https://appwrite.io/docs/products/databases/documents"
+                            text
+                            event="empty_documentation"
+                            size="s"
+                            ariaLabel="create document">Documentation</Button>
+                        <Button
+                            href={`${base}/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/create`}
+                            secondary
+                            disabled={!$canWriteDocuments}
+                            size="s">
+                            Create document
+                        </Button>
+                    </svelte:fragment>
+                </Empty>
             {/if}
         {:else}
             <Card.Base padding="none">
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte
new file mode 100644
index 000000000..370fb3487
--- /dev/null
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte
@@ -0,0 +1,136 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Wizard } from '$lib/layout';
+    import { Alert, Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { goto } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { writable } from 'svelte/store';
+    import AttributeForm from '../document-[document]/attributeForm.svelte';
+    import { Permissions } from '$lib/components/permissions';
+    import type { PageData } from './$types';
+    import type { Attributes } from '../store';
+    import { ID } from '@appwrite.io/console';
+
+    export let data: PageData;
+
+    let showExitModal = false;
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    type CreateDocument = {
+        id?: string;
+        document: object;
+        permissions: string[];
+        attributes: Attributes[];
+    };
+
+    function createDocumentWritable() {
+        const availableAttributes = (data.collection.attributes as unknown as Attributes[]).filter(
+            (a) => a.status === 'available'
+        );
+        const initial = {
+            id: null,
+            document: availableAttributes.reduce((acc, attr) => {
+                acc[attr.key] = attr.array ? [] : null;
+
+                return acc;
+            }, {}),
+            permissions: [],
+            attributes: availableAttributes
+        };
+
+        const store = writable<CreateDocument>({ ...initial });
+
+        return store;
+    }
+
+    const createDocument = createDocumentWritable();
+
+    async function create() {
+        try {
+            const { $id } = await sdk.forProject.databases.createDocument(
+                $page.params.database,
+                $page.params.collection,
+                $createDocument.id ?? ID.unique(),
+                $createDocument.document,
+                $createDocument.permissions
+            );
+
+            addNotification({
+                message: 'Document has been created',
+                type: 'success'
+            });
+            trackEvent(Submit.DocumentCreate, {
+                customId: !!$createDocument.id
+            });
+            goto(
+                `${base}/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/document-${$id}`
+            );
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.DocumentCreate);
+        }
+    }
+</script>
+
+<Wizard
+    title="Create document"
+    href={`${base}/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/`}
+    bind:showExitModal
+    column
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Data">
+                <AttributeForm
+                    bind:formValues={$createDocument.document}
+                    attributes={$createDocument.attributes}
+                    bind:customId={$createDocument.id} />
+            </Fieldset>
+
+            <Fieldset legend="Permissions">
+                <Layout.Stack gap="xl">
+                    <Typography.Text>
+                        Choose which permission scopes to grant your application. It is best
+                        practice to allow only the permissions you need to meet your project goals.
+                    </Typography.Text>
+                    {#if data.collection.documentSecurity}
+                        <Alert.Inline status="info">
+                            <svelte:fragment slot="title"
+                                >Document security is enabled</svelte:fragment>
+                            Users will be able to access this document if they have been granted
+                            <b>either document or collection permissions</b>.
+                        </Alert.Inline>
+                        <Permissions bind:permissions={$createDocument.permissions} />
+                    {:else}
+                        <Alert.Inline status="info">
+                            <svelte:fragment slot="title"
+                                >Document security is disabled</svelte:fragment>
+                            If you want to assign document permissions, navigate to Collection settings
+                            and enable document security. Otherwise, only collection permissions will
+                            be used.
+                        </Alert.Inline>
+                    {/if}
+                </Layout.Stack>
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button
+            fullWidthMobile
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Wizard>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/createDocument.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/createDocument.svelte
deleted file mode 100644
index 4d49f3502..000000000
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/createDocument.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-    import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Dependencies } from '$lib/constants';
-    import { WizardWithSteps } from '$lib/layout';
-    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { wizard } from '$lib/stores/wizard';
-    import { ID } from '@appwrite.io/console';
-    import { onDestroy, onMount } from 'svelte';
-    import { attributes } from './store';
-    import Step1 from './wizard/step1.svelte';
-    import Step2 from './wizard/step2.svelte';
-    import { createDocument } from './wizard/store';
-
-    const databaseId = $page.params.database;
-    const collectionId = $page.params.collection;
-
-    onMount(initializeDocument);
-
-    function initializeDocument() {
-        $createDocument.attributes = $attributes.filter((a) => a.status === 'available');
-        $attributes.forEach((attr) => {
-            if (attr.array) {
-                $createDocument.document[attr.key] = [];
-            } else {
-                $createDocument.document[attr.key] = null;
-            }
-        });
-    }
-
-    async function create() {
-        try {
-            await sdk.forProject.databases.createDocument(
-                databaseId,
-                collectionId,
-                $createDocument.id ?? ID.unique(),
-                $createDocument.document,
-                $createDocument.permissions
-            );
-            await invalidate(Dependencies.DOCUMENTS);
-
-            addNotification({
-                message: 'Document has been created',
-                type: 'success'
-            });
-            trackEvent(Submit.DocumentCreate, {
-                customId: !!$createDocument.id
-            });
-
-            createDocument.reset();
-            wizard.hide();
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-            trackError(error, Submit.DocumentCreate);
-        }
-    }
-
-    onDestroy(() => {
-        $createDocument.id = null;
-        $createDocument.document = {};
-        $createDocument.attributes = [];
-        $createDocument.permissions = [];
-    });
-
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Data',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Permissions',
-        component: Step2,
-        optional: true
-    });
-</script>
-
-<WizardWithSteps title="Create document" steps={stepsComponents} on:finish={create} />
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 b9ce1a6ec..3edff9117 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, BoxAvatar, Heading } from '$lib/components';
+    import { CardGrid, BoxAvatar } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte
index cae64501e..b5943db85 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { Button, FormList } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { capitalize } from '$lib/helpers/string';
-    import { Icon } from '@appwrite.io/pink-svelte';
-    import type { Attributes } from '../store';
-    import Attribute from './attribute.svelte';
+    import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import Attribute from './attribute.svelte';
+    import type { Attributes } from '../store';
 
     export let attribute: Attributes;
     export let formValues: object = {};
@@ -47,55 +47,47 @@
 
 {#if attribute.array}
     {#if formValues[attribute.key]?.length === 0}
-        <div class="u-flex u-cross-center u-main-space-between">
-            <span class="label u-margin-0">
-                {label}
-                <span class="optional u-margin-inline-start-8">
+        <Layout.Stack direction="row" alignContent="space-between">
+            <Layout.Stack gap="xxs" direction="row" alignItems="center">
+                <Typography.Text variant="m-500">{label}</Typography.Text>
+                <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
                     {getAttributeType(attribute)}
-                </span>
-            </span>
-            <Button text on:click={() => addArrayItem(attribute.key)}>
+                </Typography.Text>
+            </Layout.Stack>
+            <Button secondary on:click={() => addArrayItem(attribute.key)}>
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Add item
             </Button>
-        </div>
+        </Layout.Stack>
     {:else}
-        <ul class="u-grid u-gap-4">
+        <Layout.Stack>
             {#each [...formValues[attribute.key].keys()] as index}
-                <li class="form-item is-multiple u-gap-8">
-                    <div class="form-item-part u-stretch">
-                        <Attribute
-                            {attribute}
-                            id={`${attribute.key}-${index}`}
-                            optionalText={index === 0 ? getAttributeType(attribute) : undefined}
-                            label={index === 0 ? label : ''}
-                            bind:value={formValues[attribute.key][index]} />
-                    </div>
-                    <div class="form-item-part u-cross-child-end">
-                        <Button
-                            noMargin
-                            text
-                            icon
-                            on:click={() => removeArrayItem(attribute.key, index)}>
-                            <span class="icon-x" aria-hidden="true" />
-                        </Button>
-                    </div>
-                </li>
+                <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
+                    <Attribute
+                        {attribute}
+                        id={`${attribute.key}-${index}`}
+                        optionalText={index === 0 ? getAttributeType(attribute) : undefined}
+                        label={index === 0 ? label : ''}
+                        bind:value={formValues[attribute.key][index]} />
+                    <Button text icon on:click={() => removeArrayItem(attribute.key, index)}>
+                        <span class="icon-x" aria-hidden="true" />
+                    </Button>
+                </Layout.Stack>
             {/each}
-            <Button text on:click={() => addArrayItem(attribute.key)}>
-                <Icon icon={IconPlus} slot="start" size="s" />
-                Add item
-            </Button>
-        </ul>
+            <div>
+                <Button secondary on:click={() => addArrayItem(attribute.key)}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add item
+                </Button>
+            </div>
+        </Layout.Stack>
     {/if}
 {:else}
-    <FormList>
-        <Attribute
-            {editing}
-            {attribute}
-            {label}
-            optionalText={getAttributeType(attribute)}
-            id={attribute.key}
-            bind:value={formValues[attribute.key]} />
-    </FormList>
+    <Attribute
+        {editing}
+        {attribute}
+        {label}
+        optionalText={getAttributeType(attribute)}
+        id={attribute.key}
+        bind:value={formValues[attribute.key]} />
 {/if}
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
index 82cced9eb..f287f072f 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
@@ -9,7 +9,7 @@
     import { onMount } from 'svelte';
     import { doc } from '../store';
     import { isRelationshipToMany } from './store';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let id: string;
@@ -98,16 +98,16 @@
 
 {#if isRelationshipToMany(attribute)}
     <div class="u-width-full-line">
-        <div class="u-flex u-cross-center u-main-space-between">
-            <div>
-                <Label required={attribute.required} {optionalText} for={id}>
-                    {label}
-                </Label>
-            </div>
+        <Layout.Stack direction="row" alignContent="space-between">
+            <Layout.Stack gap="xxs" direction="row" alignItems="center">
+                <Typography.Text variant="m-500">{label}</Typography.Text>
+                <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
+                    {optionalText}
+                </Typography.Text>
+            </Layout.Stack>
             {#if editing || total === 0}
                 <Button
-                    text
-                    noMargin
+                    secondary
                     on:click={() => {
                         showInput = true;
                     }}>
@@ -115,8 +115,7 @@
                     Add item
                 </Button>
             {/if}
-        </div>
-
+        </Layout.Stack>
         <ul class="u-flex-vertical u-gap-4 u-margin-block-start-4">
             {#if !editing && relatedList?.length}
                 {#each relatedList as item, i}
@@ -236,6 +235,7 @@
                 <PaginationInline {limit} bind:offset sum={total} hidePages />
             </div>
         {/if}
+
         {#if total > 0 && !editing}
             <Button
                 text
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 6ce94ba1c..1ca69ecb3 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
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { page } from '$app/stores';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
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 b7d79832d..f36b4daef 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, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { collection } from '../store';
     import { doc } from './store';
     import { onMount } from 'svelte';
@@ -82,7 +82,7 @@
     <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" />
+        <AttributeForm attributes={$collection.attributes} bind:formValues={$work} />
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 0429ed34f..7209794d8 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Empty, DropList, DropListItem, Heading } from '$lib/components';
+    import { Empty, DropList, DropListItem } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Container } from '$lib/layout';
     import { collection, indexes } from '../store';
@@ -150,7 +150,7 @@
             allowCreate={$canWriteCollections}
             on:click={() => (showCreateDropdown = true)}>
             <div class="u-text-center">
-                <Heading size="7" tag="h2">Create an attribute to get started.</Heading>
+                <Typography.Title size="s">Create an attribute to get started.</Typography.Title>
                 <p class="body-text-2 u-bold u-margin-block-start-4">
                     Need a hand? Learn more in our documentation.
                 </p>
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 2aef64b7b..eb64d0fff 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
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { BoxAvatar, CardGrid, Heading } from '$lib/components';
+    import { BoxAvatar, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { collection } from '../store';
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 825d9b19e..26d58e5d7 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
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputSelect, InputSelectSearch, InputText } from '$lib/elements/forms';
     import { last, symmetricDifference } from '$lib/helpers/array';
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 c29d87a71..b0ce64444 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
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, FormList, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 49a2be0b8..3fdc52f96 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
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, InputSwitch } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte
deleted file mode 100644
index abb845a14..000000000
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-    import { WizardStep } from '$lib/layout';
-    import AttributeForm from '../document-[document]/attributeForm.svelte';
-    import { createDocument } from './store';
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Data</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Provide document data based on attributes you created earlier.
-    </svelte:fragment>
-
-    <AttributeForm
-        bind:formValues={$createDocument.document}
-        attributes={$createDocument.attributes}
-        bind:customId={$createDocument.id} />
-</WizardStep>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
deleted file mode 100644
index 7c86c1b16..000000000
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-    import { Permissions } from '$lib/components/permissions';
-    import { WizardStep } from '$lib/layout';
-    import { createDocument } from './store';
-    import { collection } from '../store';
-    import { Alert } from '@appwrite.io/pink-svelte';
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Permissions</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Choose who can access your collection and documents. For more information, visit our <a
-            href="https://appwrite.io/docs/products/databases/permissions"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">
-            Permissions guide
-        </a>.
-    </svelte:fragment>
-    {#if $collection.documentSecurity}
-        <Alert.Inline status="info">
-            <svelte:fragment slot="title">Document security is enabled</svelte:fragment>
-            Users will be able to access this document if they have been granted
-            <b>either document or collection permissions</b>.
-        </Alert.Inline>
-        <Permissions bind:permissions={$createDocument.permissions} />
-    {:else}
-        <Alert.Inline status="info">
-            <svelte:fragment slot="title">Document security is disabled</svelte:fragment>
-            If you want to assign document permissions, navigate to Collection settings and enable document
-            security. Otherwise, only collection permissions will be used.
-        </Alert.Inline>
-    {/if}
-</WizardStep>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/store.ts b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/store.ts
deleted file mode 100644
index 04cd8ed9f..000000000
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/store.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { writable } from 'svelte/store';
-import type { Attributes } from '../store';
-
-type CreateDocument = {
-    id?: string;
-    document: object;
-    permissions: string[];
-    attributes: Attributes[];
-};
-
-const initialCreateDocument: CreateDocument = {
-    id: null,
-    document: {},
-    permissions: [],
-    attributes: []
-};
-
-function createDocumentWritable() {
-    const store = writable<CreateDocument>({ ...initialCreateDocument });
-
-    const reset = () => {
-        store.set({ ...initialCreateDocument });
-    };
-
-    return {
-        ...store,
-        reset
-    };
-}
-
-export const createDocument = createDocumentWritable();
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 6278dce3f..6cecdb91a 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
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { BoxAvatar, Card, CardGrid, Heading } from '$lib/components';
+    import { BoxAvatar, Card, CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, Helper, InputText } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
diff --git a/src/routes/(console)/project-[project]/functions/create-function/+page.svelte b/src/routes/(console)/project-[project]/functions/create-function/+page.svelte
index e5f71a715..58d7478bc 100644
--- a/src/routes/(console)/project-[project]/functions/create-function/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/create-function/+page.svelte
@@ -27,7 +27,7 @@
 
 <script lang="ts">
     import { base } from '$app/paths';
-    import { AvatarGroup, Box, Heading } from '$lib/components';
+    import { AvatarGroup, Box } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { wizard } from '$lib/stores/wizard';
     import { templateConfig, template as templateStore } from './store';
@@ -45,7 +45,7 @@
     import CreateManual from './wizard/createManual.svelte';
     import { repository } from '$lib/stores/vcs';
     import { Repositories } from '$lib/components/git';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Tooltip, Typography } from '@appwrite.io/pink-svelte';
     import { IconDeno, IconDotnet } from '@appwrite.io/pink-icons-svelte';
 
     const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
@@ -72,7 +72,7 @@
         <div class="git-container u-position-relative">
             <div class="grid-1-1 u-gap-24">
                 <div class="card u-cross-child-start u-height-100-percent">
-                    <Heading size="6" tag="h6">Connect Git repository</Heading>
+                    <Typography.Title size="s">Connect Git repository</Typography.Title>
                     <p class="u-margin-block-start-8">
                         Create and deploy a function with a connected git repository.
                     </p>
@@ -93,9 +93,9 @@
                             style="border-radius: var(--border-radius-medium)">
                             <div
                                 class="u-flex-vertical u-height-100-percent u-main-center u-cross-center u-gap-16 u-padding-inline-24">
-                                <Heading size="7" tag="h6" trimmed={false}>
+                                <Typography.Title size="s">
                                     Connect your self-hosted instance to Git
-                                </Heading>
+                                </Typography.Title>
                                 <p>
                                     Configure your self-hosted instance to connect your function to
                                     a Git repository.
@@ -113,7 +113,7 @@
 
                 <div class="card u-height-100-percent">
                     <section class="common-section">
-                        <Heading size="6" tag="h6">Quick start</Heading>
+                        <Typography.Title size="s">Quick start</Typography.Title>
                         <p class="u-margin-block-start-8">Use a starter template.</p>
                         <ul
                             class="grid-box u-margin-block-start-16"
@@ -203,7 +203,7 @@
                     </Button>
                     <div class="u-sep-block-start common-section" />
                     <section class="common-section">
-                        <Heading size="6" tag="h6">Templates</Heading>
+                        <Typography.Title size="s">Templates</Typography.Title>
                         <p class="text u-margin-block-start-8">
                             Find the right template for your use case.
                         </p>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte
index d16efc6e7..b8c087333 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import {
-        Empty,
-        Heading,
-        PaginationWithLimit,
-        Alert,
-        ViewSelector,
-        EmptySearch
-    } from '$lib/components';
+    import { Empty, PaginationWithLimit, Alert, ViewSelector, EmptySearch } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { deploymentList, func } from './store';
     import { Container, ContainerHeader } from '$lib/layout';
@@ -28,6 +21,7 @@
     import { Pill } from '$lib/elements';
     import { onMount } from 'svelte';
     import { canWriteFunctions } from '$lib/stores/roles';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let data;
 
@@ -143,7 +137,8 @@
     {#if !data?.deploymentList?.total && !data?.query}
         <Empty single target="deployment">
             <div class="u-text-center">
-                <Heading size="7" tag="h2">Create your first deployment to get started.</Heading>
+                <Typography.Title size="s"
+                    >Create your first deployment to get started.</Typography.Title>
                 <p class="body-text-2 u-bold u-margin-block-start-4">
                     Learn more about deployments in our Documentation.
                 </p>
@@ -162,7 +157,7 @@
         {@const activeDeployment = data.activeDeployment}
 
         <div class="common-section">
-            <Heading tag="h3" size="7">Active</Heading>
+            <Typography.Title size="s">Active</Typography.Title>
         </div>
         {#if data?.activeDeployment && !$func.live && showAlert}
             <Alert
@@ -207,8 +202,8 @@
         {:else if !$deploymentList.total && !data?.query}
             <Empty single target="deployment">
                 <div class="u-text-center">
-                    <Heading size="7" tag="h2"
-                        >Create your first deployment to get started.</Heading>
+                    <Typography.Title size="s"
+                        >Create your first deployment to get started.</Typography.Title>
                     <p class="body-text-2 u-bold u-margin-block-start-4">
                         Learn more about deployments in our Documentation.
                     </p>
@@ -244,7 +239,7 @@
             </Empty>
         {/if}
         <div class="u-margin-block-start-48">
-            <Heading tag="h3" size="7">All deployments</Heading>
+            <Typography.Title size="s">All deployments</Typography.Title>
             <div class="u-flex u-main-space-between is-not-mobile u-margin-block-start-16">
                 <div class="u-flex u-gap-8 u-cross-center u-flex-wrap">
                     <QuickFilters {columns} />
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 5233a04ca..4815cd33e 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
@@ -10,7 +10,6 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { deployment } from './store';
-    import Heading from '$lib/components/heading.svelte';
     import BoxAvatar from '$lib/components/boxAvatar.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import Delete from '../delete.svelte';
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/+page.svelte
index d59f2e339..862862ee5 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/+page.svelte
@@ -18,9 +18,10 @@
     import { sdk } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
     import { invalidate } from '$app/navigation';
-    import { Alert, Heading } from '$lib/components';
+    import { Alert } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { trackEvent } from '$lib/actions/analytics';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let data;
     let showAlert = true;
@@ -42,7 +43,7 @@
 </script>
 
 <Container>
-    <Heading tag="h2" size="5">Settings</Heading>
+    <Typography.Title>Settings</Typography.Title>
     {#if $func.version === 'v2' && showAlert}
         <Alert
             type="warning"
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/settings/executeFunction.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/settings/executeFunction.svelte
index 8d43b7f15..b98a86cde 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/settings/executeFunction.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/settings/executeFunction.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { CardGrid, Heading, SvgIcon } from '$lib/components';
+    import { CardGrid, SvgIcon } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { project } from '$routes/(console)/project-[project]/store';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { func } from '../store';
 </script>
 
@@ -13,7 +14,7 @@
             <SvgIcon size={64} iconSize="large" name={$func.runtime.split('-')[0]}></SvgIcon>
         </div>
         <div class="u-flex-vertical u-gap-4">
-            <Heading tag="h6" size="7">{$func.name}</Heading>
+            <Typography.Title size="s">{$func.name}</Typography.Title>
 
             <p class="text u-capitalize">{$func.runtime}</p>
         </div>
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 00b32d134..b8b0233d3 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
@@ -10,7 +10,6 @@
         Collapsible,
         CollapsibleItem,
         EyebrowHeading,
-        Heading,
         SvgIcon
     } from '$lib/components';
     import { Dependencies } from '$lib/constants';
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 1484d8874..e191289b1 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
@@ -1,7 +1,6 @@
 <script lang="ts">
     import CardGrid from '$lib/components/cardGrid.svelte';
     import Empty from '$lib/components/empty.svelte';
-    import Heading from '$lib/components/heading.svelte';
 
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
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 3bf967c36..1bef03eac 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
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     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 } from '$lib/elements/forms';
     import InputSwitch from '$lib/elements/forms/inputSwitch.svelte';
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 b1ef73a98..eb2b3ddfe 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
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     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, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 9dc360a45..67e461698 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
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     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 } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 a8343ff7f..cf93e975b 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
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { BillingPlan, Dependencies } from '$lib/constants';
     import { Button, Form, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 5ca4f1ce8..6eb076eff 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
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     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, InputCron } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 af7a71fae..a418a5b12 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
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     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 } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 fbb3a7454..7b1abea85 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
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     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, InputNumber } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
index 95e9e8a25..c01ce72d7 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { Card, SecondaryTabsItem, SecondaryTabs, Heading } from '$lib/components';
+    import { Card, SecondaryTabsItem, SecondaryTabs } from '$lib/components';
     import { BarChart } from '$lib/charts';
     import { page } from '$app/stores';
     import type { PageData } from './$types';
     import { formatNumberWithCommas } from '$lib/helpers/numbers';
     import { base } from '$app/paths';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let data: PageData;
     $: total = data.executionsTotal;
@@ -16,7 +17,7 @@
 
 <Container>
     <div class="u-flex u-main-space-between common-section">
-        <Heading tag="h2" size="5">Functions</Heading>
+        <Typography.Title>Functions</Typography.Title>
         <SecondaryTabs>
             <SecondaryTabsItem
                 href={`${base}/project-${data.project.$id}/functions/function-${data.function.$id}/usage/24h`}
@@ -37,7 +38,7 @@
     </div>
     {#if count}
         <Card>
-            <Heading tag="h6" size="6">{formatNumberWithCommas(total)}</Heading>
+            <Typography.Title>{formatNumberWithCommas(total)}</Typography.Title>
             <p>Executions</p>
             <div class="u-margin-block-start-16" />
             <BarChart
@@ -52,7 +53,7 @@
 
     {#if mbSecondsCount}
         <Card>
-            <Heading tag="h6" size="6">{formatNumberWithCommas(gbHoursTotal)}</Heading>
+            <Typography.Title>{formatNumberWithCommas(gbHoursTotal)}</Typography.Title>
             <p>GB Hours</p>
             <div class="u-margin-block-start-16" />
             <BarChart
diff --git a/src/routes/(console)/project-[project]/functions/templates/+page.svelte b/src/routes/(console)/project-[project]/functions/templates/+page.svelte
index f3043e185..83ab46475 100644
--- a/src/routes/(console)/project-[project]/functions/templates/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/templates/+page.svelte
@@ -6,7 +6,6 @@
         Collapsible,
         CollapsibleItem,
         EmptySearch,
-        Heading,
         Pagination,
         SvgIcon
     } from '$lib/components';
@@ -20,7 +19,7 @@
     import type { Models } from '@appwrite.io/console';
     import { functionsList } from '../store';
     import { debounce } from '$lib/helpers/debounce';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Tooltip, Typography } from '@appwrite.io/pink-svelte';
     import { capitalize } from '$lib/helpers/string';
 
     export let data;
@@ -124,7 +123,7 @@
 
 <Container>
     <div class="u-flex u-gap-8 u-cross-center">
-        <Heading tag="h2" size="5">Templates</Heading>
+        <Typography.Title>Templates</Typography.Title>
         <div class="tag eyebrow-heading-3">
             <span class="text u-x-small">Experimental</span>
         </div>
diff --git a/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte
index e07244345..41b75e0eb 100644
--- a/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Card, Collapsible, Heading } from '$lib/components';
+    import { Card, Collapsible } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { Container, ContainerButton } from '$lib/layout';
@@ -13,6 +13,7 @@
     import { organization } from '$lib/stores/organization';
     import { functionsList } from '../../store';
     import { canWriteFunctions } from '$lib/stores/roles';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     $: buttonDisabled =
         isCloud && isServiceLimited('functions', $organization?.billingPlan, $functionsList?.total);
@@ -59,7 +60,7 @@
         </section>
         <section>
             <Card>
-                <Heading size="7" tag="h3">
+                <Typography.Title size="s">
                     <span class="u-flex u-cross-center u-gap-16 functions-avatar-holder">
                         <div class="avatar is-size-small">
                             <span
@@ -69,7 +70,7 @@
                         </div>
                         {$template.name}
                     </span>
-                </Heading>
+                </Typography.Title>
                 <p class="u-margin-block-start-24">{$template.tagline}</p>
 
                 <div class="u-flex u-gap-16 u-main-end u-margin-block-start-24 u-flex-wrap">
diff --git a/src/routes/(console)/project-[project]/messaging/+page.svelte b/src/routes/(console)/project-[project]/messaging/+page.svelte
index 6c3a9b7dd..d9770f274 100644
--- a/src/routes/(console)/project-[project]/messaging/+page.svelte
+++ b/src/routes/(console)/project-[project]/messaging/+page.svelte
@@ -6,7 +6,6 @@
         EmptyFilter,
         EmptySearch,
         FloatingActionBar,
-        Heading,
         Id,
         Modal,
         PaginationWithLimit,
@@ -43,7 +42,7 @@
     import type { Column } from '$lib/helpers/types';
     import { writable } from 'svelte/store';
     import { canWriteMessages } from '$lib/stores/roles';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let data: PageData;
     let selected: string[] = [];
@@ -237,9 +236,9 @@
     {:else}
         <Empty single target="message" on:click={() => ($showCreate = true)}>
             <div class="u-text-center">
-                <Heading size="7" tag="h2" trimmed={false}>
+                <Typography.Title size="s">
                     Create your first message to get started.
-                </Heading>
+                </Typography.Title>
                 <p class="body-text-2 u-bold u-margin-block-start-4">
                     Need a hand? Learn more in our documentation.
                 </p>
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 143b7e3fd..11c55fd91 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/delete.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/delete.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { BoxAvatar, CardGrid, Heading } from '$lib/components';
+    import { BoxAvatar, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import type { Models } from '@appwrite.io/console';
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 aa93de22d..47560f433 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import {
         Button,
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/overview.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/overview.svelte
index c9bbe244f..9ce223947 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/overview.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/overview.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import ProviderType from '../providerType.svelte';
     import MessageStatusPill from '../messageStatusPill.svelte';
@@ -9,6 +9,7 @@
     import SendModal from './sendModal.svelte';
     import ScheduleModal from './scheduleModal.svelte';
     import CancelModal from './cancelModal.svelte';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let message: Models.Message & { data: Record<string, string> };
     export let topics: Models.Topic[];
@@ -23,9 +24,9 @@
 <CardGrid hideFooter={['processing', 'sent'].includes(message.status)}>
     <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
         <ProviderType type={message.providerType} size="l">
-            <Heading tag="h6" size="7">
+            <Typography.Title size="s">
                 <ProviderType type={message.providerType} noIcon />
-            </Heading>
+            </Typography.Title>
         </ProviderType>
     </div>
     <svelte:fragment slot="aside">
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/pushMessage.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/pushMessage.svelte
index 50c44833e..a3f6a41c7 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/pushMessage.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/pushMessage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import {
         Button,
         Form,
@@ -19,7 +19,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { validateData } from '../wizard/pushFormList.svelte';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Icon, Typography } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     /* eslint  @typescript-eslint/no-explicit-any: 'off' */
@@ -103,7 +103,7 @@
 <Form onSubmit={update}>
     <CardGrid hideFooter={message.status != 'draft'}>
         <div class="grid-1-2-col-1 u-flex-vertical u-cross-start u-gap-16">
-            <Heading tag="h6" size="7">Message</Heading>
+            <Typography.Title size="s">Message</Typography.Title>
             <div class="u-flex u-margin-block-start-24 u-width-full-line">
                 <PushPhone {title} {body} />
             </div>
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/smsMessage.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/smsMessage.svelte
index d71353c40..adf131f39 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/smsMessage.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/smsMessage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button, Form, FormList, InputTextarea } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
     import SMSPhone from '../smsPhone.svelte';
@@ -9,6 +9,7 @@
     import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let message: Models.Message & { data: Record<string, string> };
 
@@ -49,7 +50,7 @@
 <Form onSubmit={update}>
     <CardGrid hideFooter={message.status != 'draft'}>
         <div class="grid-1-2-col-1 u-flex-vertical u-cross-start u-gap-16">
-            <Heading tag="h6" size="7">Message</Heading>
+            <Typography.Title size="s">Message</Typography.Title>
             <SMSPhone {content} />
         </div>
         <svelte:fragment slot="aside">
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/updateTargets.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/updateTargets.svelte
index f533b8f31..c4cb21e1a 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/updateTargets.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/updateTargets.svelte
@@ -8,14 +8,7 @@
         TableHeader,
         TableRow
     } from '$lib/elements/table';
-    import {
-        CardGrid,
-        Heading,
-        Empty,
-        PaginationInline,
-        EmptySearch,
-        Alert
-    } from '$lib/components';
+    import { CardGrid, Empty, PaginationInline, EmptySearch, Alert } from '$lib/components';
     import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
@@ -27,7 +20,7 @@
     import UserTargetsModal from '../userTargetsModal.svelte';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Icon, Typography } from '@appwrite.io/pink-svelte';
 
     export let message: Models.Message & { data: Record<string, unknown> };
     export let selectedTargetsById: Record<string, Models.Target>;
@@ -134,7 +127,7 @@
 
 <Form onSubmit={update}>
     <CardGrid hideFooter={!isDraft}>
-        <Heading tag="h6" size="7" id="variables">Targets</Heading>
+        <Typography.Title size="s">Targets</Typography.Title>
         <svelte:fragment slot="aside">
             {@const sum = targetIds.length || Object.values(recipients).length}
             {@const dataSource =
diff --git a/src/routes/(console)/project-[project]/messaging/message-[message]/updateTopics.svelte b/src/routes/(console)/project-[project]/messaging/message-[message]/updateTopics.svelte
index 1019dc5fd..1a01fa18d 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/updateTopics.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/updateTopics.svelte
@@ -8,7 +8,7 @@
         TableHeader,
         TableRow
     } from '$lib/elements/table';
-    import { CardGrid, Heading, Empty, PaginationInline, EmptySearch } from '$lib/components';
+    import { CardGrid, Empty, PaginationInline, EmptySearch } from '$lib/components';
     import TopicsModal from '../topicsModal.svelte';
     import { sdk } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
@@ -21,7 +21,7 @@
     import { getTotal } from '../wizard/store';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Icon, Typography } from '@appwrite.io/pink-svelte';
 
     export let message: Models.Message;
     export let selectedTopicsById: Record<string, Models.Topic>;
@@ -86,7 +86,7 @@
 
 <Form onSubmit={update}>
     <CardGrid hideFooter={message.status != 'draft'}>
-        <Heading tag="h6" size="7" id="variables">Topics</Heading>
+        <Typography.Title size="s">Topics</Typography.Title>
         <svelte:fragment slot="aside">
             {@const sum = topicIds.length}
             {#if sum}
diff --git a/src/routes/(console)/project-[project]/messaging/providers/+page.svelte b/src/routes/(console)/project-[project]/messaging/providers/+page.svelte
index 271218a07..dd4e8b955 100644
--- a/src/routes/(console)/project-[project]/messaging/providers/+page.svelte
+++ b/src/routes/(console)/project-[project]/messaging/providers/+page.svelte
@@ -6,7 +6,6 @@
         EmptySearch,
         SearchQuery,
         PaginationWithLimit,
-        Heading,
         ViewSelector,
         EmptyFilter
     } from '$lib/components';
@@ -18,7 +17,7 @@
     import Table from './table.svelte';
     import { base } from '$app/paths';
     import { canWriteProviders } from '$lib/stores/roles';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
     import { View } from '$lib/helpers/load';
 
     export let data: PageData;
@@ -65,9 +64,9 @@
     {:else}
         <Empty single target="provider">
             <div class="u-text-center">
-                <Heading size="7" tag="h2" trimmed={false}>
+                <Typography.Title size="s">
                     Create your first provider to get started.
-                </Heading>
+                </Typography.Title>
                 <p class="body-text-2 u-bold u-margin-block-start-4">
                     Need a hand? Learn more in our documentation.
                 </p>
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 eb7d61580..033c6a399 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
@@ -10,7 +10,7 @@
 </script>
 
 <script lang="ts">
-    import { CardGrid, BoxAvatar, Heading } from '$lib/components';
+    import { CardGrid, BoxAvatar } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { writable } from 'svelte/store';
     import { provider } from './store';
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 5e6dcfd03..f44f90294 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
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { onMount } from 'svelte';
     import { provider } from './store';
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 9283f792a..2b62a2685 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
@@ -8,7 +8,7 @@
     import { Dependencies } from '$lib/constants';
     import { MessagingProviderType, type Models } from '@appwrite.io/console';
     import SettingsFormList from '../settingsFormList.svelte';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button, Form } from '$lib/elements/forms';
     import { onMount } from 'svelte';
     import CreateMember from '$routes/(console)/organization-[organization]/createMember.svelte';
diff --git a/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte b/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte
index adb34d307..1eecb6deb 100644
--- a/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte
+++ b/src/routes/(console)/project-[project]/messaging/providers/provider-[provider]/updateStatus.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, InputSwitch } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
@@ -11,6 +11,7 @@
     import Provider, { Providers } from '../../provider.svelte';
     import ProviderType from '../../providerType.svelte';
     import { provider as providerData } from './store';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     let enabled: boolean = null;
 
@@ -129,7 +130,7 @@
 <CardGrid>
     <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
         <Provider provider={$providerData.provider} size="l">
-            <Heading tag="h6" size="7">{$providerData.name}</Heading>
+            <Typography.Title size="s">{$providerData.name}</Typography.Title>
         </Provider>
     </div>
     <svelte:fragment slot="aside">
diff --git a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/+page.svelte b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/+page.svelte
index 24eda155f..52597f85a 100644
--- a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/+page.svelte
+++ b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/+page.svelte
@@ -6,7 +6,6 @@
         EmptySearch,
         SearchQuery,
         PaginationWithLimit,
-        Heading,
         ViewSelector,
         EmptyFilter
     } from '$lib/components';
@@ -27,7 +26,7 @@
     import { writable } from 'svelte/store';
     import type { Column } from '$lib/helpers/types';
     import { base } from '$app/paths';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Icon, Typography } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
@@ -90,7 +89,7 @@
 <Container>
     <div class="u-flex u-flex-vertical">
         <div class="u-flex u-main-space-between">
-            <Heading tag="h2" size="5">Subscribers</Heading>
+            <Typography.Title>Subscribers</Typography.Title>
             <div class="is-only-mobile">
                 <Button on:click={() => (showAdd = true)} event="create_subscriber">
                     <Icon icon={IconPlus} slot="start" size="s" />
diff --git a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/dangerZone.svelte b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/dangerZone.svelte
index 4758bcd6f..716ba9b69 100644
--- a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/dangerZone.svelte
+++ b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/dangerZone.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-    import { CardGrid, BoxAvatar, Heading } from '$lib/components';
+    import { CardGrid, BoxAvatar } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { topic, topicTotal } from '../store';
     import DeleteTopic from '../deleteTopic.svelte';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     let showDelete = false;
 </script>
 
-<CardGrid danger>
-    <div>
-        <Heading tag="h6" size="7">Delete topic</Heading>
-    </div>
+<CardGrid>
+    <svelte:fragment slot="title">Delete topic</svelte:fragment>
     <p>
         The topic will be permanently deleted, including all data associated with this topic. This
         action is irreversible.
diff --git a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/details.svelte b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/details.svelte
index be120ba35..6c855a568 100644
--- a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/details.svelte
+++ b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/details.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { topic, topicTotal } from '../store';
 </script>
 
 <CardGrid>
-    <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
-        <Heading tag="h6" size="7">Details</Heading>
-    </div>
+    <svelte:fragment slot="title">Details</svelte:fragment>
     <svelte:fragment slot="aside">
         <div class="u-flex u-main-space-between">
             <div data-private>
diff --git a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/updateName.svelte b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/updateName.svelte
index ad1e1998b..e9d2587cf 100644
--- a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/updateName.svelte
+++ b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/updateName.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { onMount } from 'svelte';
     import { topic } from '../store';
@@ -34,7 +34,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>
diff --git a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/updatePermissions.svelte b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/updatePermissions.svelte
index 7fff86143..55ef25d4f 100644
--- a/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/updatePermissions.svelte
+++ b/src/routes/(console)/project-[project]/messaging/topics/topic-[topic]/settings/updatePermissions.svelte
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     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 } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -44,7 +44,7 @@
 
 <Form onSubmit={updatePermissions}>
     <CardGrid>
-        <Heading tag="h6" size="7" id="permissions">Subscription access</Heading>
+        <svelte:fragment slot="title">Subscription access</svelte:fragment>
         <p>
             Choose who can subscribe to this topic using the client API. Learn more about <a
                 href="https://appwrite.io/docs/advanced/platform/permissions"
diff --git a/src/routes/(console)/project-[project]/overview/+layout.svelte b/src/routes/(console)/project-[project]/overview/+layout.svelte
index 668c35aaa..8d998a7d8 100644
--- a/src/routes/(console)/project-[project]/overview/+layout.svelte
+++ b/src/routes/(console)/project-[project]/overview/+layout.svelte
@@ -11,7 +11,7 @@
     import { page } from '$app/stores';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import { PlatformsPanel } from '$lib/commandCenter/panels';
-    import { Heading, Tab, Tabs } from '$lib/components';
+    import { Tab, Tabs } from '$lib/components';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { Container, type UsagePeriods } from '$lib/layout';
     import { onMount, setContext, SvelteComponent } from 'svelte';
@@ -203,7 +203,7 @@
         {/if}
 
         <Layout.Stack gap="xl">
-            <Heading tag="h2" size="5" id="integrations">Integrations</Heading>
+            <Typography.Title>Integrations</Typography.Title>
             <Layout.Stack gap="xl" direction="row" justifyContent="space-between">
                 <Tabs>
                     <Tab
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 f10ed0489..6ba0c885b 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
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Box, CardGrid, Heading, Secret } from '$lib/components';
+    import { Box, CardGrid, Secret } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { symmetricDifference } from '$lib/helpers/array';
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 3d4722d86..8ac103f9a 100644
--- a/src/routes/(console)/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
+++ b/src/routes/(console)/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { Alert, CardGrid, Heading } from '$lib/components';
+    import { Alert, CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList } from '$lib/elements/forms';
     import { diffDays } from '$lib/helpers/date';
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 32c8dd5fb..c6f490d8f 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
@@ -11,7 +11,7 @@
     import AppleWatchOs from './appleWatchOS.svelte';
     import AppleTvos from './appleTvOS.svelte';
     import Android from './android.svelte';
-    import { Box, CardGrid, Heading } from '$lib/components';
+    import { Box, CardGrid } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
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 b3ff88a6c..b0f1c7665 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/android.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/android.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 3707ce01c..1239c77ca 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleIOS.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleIOS.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 d64706f29..5aec0da80 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleMacOS.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 78e36a8e8..718ccccab 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleTvOS.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 06937016b..a77c3fa9c 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/appleWatchOS.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 fa45bc68f..18183930d 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterAndroid.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 6448597e0..460710577 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterIOS.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 5f05b052c..b11dbdb18 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterLinux.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 30529eab7..5d9bbed8b 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterMacOS.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 bbce784a9..d36c9afc6 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/flutterWindows.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 e8fbf50ef..4c4e8e555 100644
--- a/src/routes/(console)/project-[project]/overview/platforms/[platform]/web.svelte
+++ b/src/routes/(console)/project-[project]/overview/platforms/[platform]/web.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/project-[project]/settings/migrations/details.svelte b/src/routes/(console)/project-[project]/settings/migrations/details.svelte
index 0166eb22e..182b7a1e7 100644
--- a/src/routes/(console)/project-[project]/settings/migrations/details.svelte
+++ b/src/routes/(console)/project-[project]/settings/migrations/details.svelte
@@ -136,17 +136,6 @@
         }
     }
 
-    .meta {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 0.5rem;
-        padding: 1.5rem;
-
-        :nth-child(2n) {
-            font-weight: 600;
-        }
-    }
-
     .icon-wrapper {
         position: relative;
 
diff --git a/src/routes/(console)/project-[project]/settings/updateInstallations.svelte b/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
index 6a537ca38..4d92f6095 100644
--- a/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
+++ b/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
@@ -29,7 +29,6 @@
         IconXCircle
     } from '@appwrite.io/pink-icons-svelte';
     import Avatar from '$lib/components/avatar.svelte';
-    import { iconPath } from '$lib/stores/app';
 
     export let total: number;
     export let limit: number;
diff --git a/src/routes/(console)/project-[project]/settings/updateName.svelte b/src/routes/(console)/project-[project]/settings/updateName.svelte
index cd93f8542..6e44327ee 100644
--- a/src/routes/(console)/project-[project]/settings/updateName.svelte
+++ b/src/routes/(console)/project-[project]/settings/updateName.svelte
@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, CopyInput, Heading } from '$lib/components';
+    import { CardGrid, CopyInput } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/project-[project]/settings/updateServices.svelte b/src/routes/(console)/project-[project]/settings/updateServices.svelte
index d5f47a51b..e544437e4 100644
--- a/src/routes/(console)/project-[project]/settings/updateServices.svelte
+++ b/src/routes/(console)/project-[project]/settings/updateServices.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 { InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 f8b7c54b8..11fbbfc7b 100644
--- a/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { CardGrid, Heading, Card, ProgressBarBig } from '$lib/components';
+    import { CardGrid, Card, ProgressBarBig } from '$lib/components';
     import {
         TableRow,
         TableBody,
@@ -23,6 +23,7 @@
     import Collapsible from '$lib/components/collapsible.svelte';
     import CollapsibleItem from '$lib/components/collapsibleItem.svelte';
     import { getCountryName } from '$lib/helpers/diallingCodes.js';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let data;
 
@@ -64,7 +65,7 @@
 
 <Container>
     <div class="u-flex u-cross-center u-main-space-between">
-        <Heading tag="h2" size="5">Usage</Heading>
+        <Typography.Title>Usage</Typography.Title>
 
         {#if $organization?.billingPlan === BillingPlan.FREE}
             <Button href={$upgradeURL}>
@@ -117,8 +118,8 @@
             {#if network}
                 {@const humanized = humanFileSize(total(network))}
                 <div class="u-flex u-gap-8 u-cross-baseline">
-                    <Heading tag="h5" size="4">{humanized.value}</Heading>
-                    <Heading tag="h6" size="6">{humanized.unit}</Heading>
+                    <Typography.Title>{humanized.value}</Typography.Title>
+                    <Typography.Title size="s">{humanized.unit}</Typography.Title>
                 </div>
                 <BarChart
                     options={{
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 733ea7241..0de4e2ac2 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateEvents.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateEvents.svelte
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Empty, EventModal, Heading } from '$lib/components';
+    import { CardGrid, Empty, EventModal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form } from '$lib/elements/forms';
     import { TableCell, TableCellText, TableList } from '$lib/elements/table';
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 8946d1709..ecb73362c 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateName.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateName.svelte
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 0f03dc199..f7cd13f7a 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateSecurity.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateSecurity.svelte
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import {
         Button,
@@ -16,7 +16,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { webhook } from './store';
-    import { Selector } from '@appwrite.io/pink-svelte';
+    import { Selector, Typography } from '@appwrite.io/pink-svelte';
 
     const projectId = $page.params.project;
     let httpUser: string = null;
@@ -65,7 +65,7 @@
         unauthorized access.
         <svelte:fragment slot="aside">
             <div>
-                <Heading tag="h3" size="7">HTTP Authentication</Heading>
+                <Typography.Title size="s">HTTP Authentication</Typography.Title>
                 <p class="text">Use to secure your endpoint from untrusted sources.</p>
             </div>
             <InputText label="User" id="user" placeholder="Enter username" bind:value={httpUser} />
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 2c332d97e..ddbd8da2a 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateSignature.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateSignature.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Heading, Secret } from '$lib/components';
+    import { CardGrid, Secret } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Link } from '@appwrite.io/pink-svelte';
     import Regenerate from './regenerate.svelte';
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 d966a65e0..3d602bbce 100644
--- a/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateURL.svelte
+++ b/src/routes/(console)/project-[project]/settings/webhooks/[webhook]/updateURL.svelte
@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/instantRollbackModal.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/instantRollbackModal.svelte
index 5f43ed02c..c2ee374a1 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/instantRollbackModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/instantRollbackModal.svelte
@@ -7,7 +7,7 @@
     import { Button, InputCheckbox } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { Query, type Models } from '@appwrite.io/console';
+    import { type Models } from '@appwrite.io/console';
     import DeploymentDomains from '../(components)/deploymentDomains.svelte';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/store.ts b/src/routes/(console)/project-[project]/sites/site-[site]/settings/store.ts
index 03823d136..7b0c5c905 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/store.ts
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/store.ts
@@ -1,3 +1,3 @@
 import { writable } from 'svelte/store';
 
-export let showConnectRepo = writable(false);
+export const showConnectRepo = writable(false);
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 4ef95227a..653953ede 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
@@ -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, InputSelect, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 0df7470df..3b8290775 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
@@ -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, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 c6d7dd9a0..f9c77df9b 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
@@ -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, InputChoice, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 490669479..3beaaeae3 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
@@ -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, InputSelect } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
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 39d1c0179..08e004207 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
@@ -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, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
diff --git a/src/routes/(console)/project-[project]/sites/usage/+page.ts b/src/routes/(console)/project-[project]/sites/usage/+page.ts
index 1be4eb88b..349bf84de 100644
--- a/src/routes/(console)/project-[project]/sites/usage/+page.ts
+++ b/src/routes/(console)/project-[project]/sites/usage/+page.ts
@@ -1,8 +1,7 @@
 import { sdk } from '$lib/stores/sdk';
 import { Dependencies } from '$lib/constants';
-import { Query } from '@appwrite.io/console';
 
-export const load = async ({ params, depends, parent }) => {
+export const load = async ({ depends }) => {
     depends(Dependencies.SITES);
 
     const usage = await sdk.forProject.sites.listUsage();
diff --git a/src/routes/(console)/project-[project]/storage/+page.svelte b/src/routes/(console)/project-[project]/storage/+page.svelte
index 245c13bb9..e05fa95de 100644
--- a/src/routes/(console)/project-[project]/storage/+page.svelte
+++ b/src/routes/(console)/project-[project]/storage/+page.svelte
@@ -70,7 +70,7 @@
             single
             href="https://appwrite.io/docs/products/storage"
             target="bucket"
-            on:click={() => (showCreateBucket = true)} />
+            on:click={() => showCreateBucket.set(true)} />
     {/if}
 </Container>
 
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
index df31aecf5..a351d2c29 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
@@ -19,7 +19,7 @@
         PaginationWithLimit,
         SearchQuery
     } from '$lib/components';
-    import { BillingPlan, Dependencies } from '$lib/constants';
+    import { Dependencies } from '$lib/constants';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDate } from '$lib/helpers/date';
@@ -29,17 +29,17 @@
         humanFileSize,
         sizeToBytes
     } from '$lib/helpers/sizeConvertion';
-    import { Container, ContainerHeader } from '$lib/layout';
+    import { Container } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
     import { addNotification } from '$lib/stores/notifications';
     import { uploader } from '$lib/stores/uploader';
     import { wizard } from '$lib/stores/wizard';
-    import { getServiceLimit, showUsageRatesModal, tierToPlan } from '$lib/stores/billing';
+    import { getServiceLimit } from '$lib/stores/billing';
     import { sdk } from '$lib/stores/sdk.js';
     import Create from './create-file/create.svelte';
     import DeleteFile from './deleteFile.svelte';
     import { isCloud } from '$lib/system';
-    import { Layout, Tooltip, Table, Icon } from '@appwrite.io/pink-svelte';
+    import { Layout, Table, Icon } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
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 d627e8673..a758661b4 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, BoxAvatar, Heading, Alert, CopyInput } from '$lib/components';
+    import { CardGrid, BoxAvatar, Alert, CopyInput } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { file } from './store';
@@ -15,6 +15,7 @@
     import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { bucket } from '../store';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     let showFileAlert = true;
     onMount(async () => {
@@ -93,8 +94,7 @@
                     </div>
                 </a>
                 <div class="u-flex u-flex-vertical u-gap-4">
-                    <Heading tag="h2" size="7" trimmed={false} trimmedSecondLine={true}
-                        >{$file.name}</Heading>
+                    <Typography.Title size="s">{$file.name}</Typography.Title>
                     <p>{$file.mimeType}</p>
                 </div>
             </div>
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 03030ae74..6c6733d8d 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
@@ -58,7 +58,7 @@
 
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { BoxAvatar, CardGrid, Heading } from '$lib/components';
+    import { BoxAvatar, CardGrid } from '$lib/components';
     import { Permissions } from '$lib/components/permissions';
     import { Dependencies } from '$lib/constants';
     import { Pill } from '$lib/elements';
diff --git a/src/routes/(console)/project-[project]/uploadVariablesModal.svelte b/src/routes/(console)/project-[project]/uploadVariablesModal.svelte
index faf99c413..0086fca11 100644
--- a/src/routes/(console)/project-[project]/uploadVariablesModal.svelte
+++ b/src/routes/(console)/project-[project]/uploadVariablesModal.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
     import Alert from '$lib/components/alert.svelte';
-    import { Button, InputFile } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import type { Models } from '@appwrite.io/console';
-    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
-    import { Icon, Layout, Tooltip, Typography, Upload } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography, Upload } from '@appwrite.io/pink-svelte';
     import { parse } from 'envfile';
 
     export let isGlobal: boolean;
diff --git a/src/routes/(public)/auth/magic-url/+page.svelte b/src/routes/(public)/auth/magic-url/+page.svelte
index 0dc589b16..db8274c45 100644
--- a/src/routes/(public)/auth/magic-url/+page.svelte
+++ b/src/routes/(public)/auth/magic-url/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Heading } from '$lib/components';
     import { getApiEndpoint } from '$lib/stores/sdk';
     import { Account, Client } from '@appwrite.io/console';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
 
     const client = new Client();
@@ -21,7 +21,7 @@
     });
 </script>
 
-<Heading tag="h1" size="1">Missing redirect URL</Heading>
+<Typography.Title size="xl">Missing redirect URL</Typography.Title>
 <p>
     Your Magic URL login flow is missing a proper redirect URL. Please check the
     <a href="https://appwrite.io/docs/references/cloud/client-web/account#createMagicURLSession"
diff --git a/src/routes/(public)/auth/oauth2/failure/+page.svelte b/src/routes/(public)/auth/oauth2/failure/+page.svelte
index e3c56f811..eaf8f46c7 100644
--- a/src/routes/(public)/auth/oauth2/failure/+page.svelte
+++ b/src/routes/(public)/auth/oauth2/failure/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Heading } from '$lib/components';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     const project = $page.url.searchParams.get('project');
     const link = `appwrite-callback-${project}://${$page.url.search}`;
@@ -16,7 +16,7 @@
 {#await redirect then}
     <article class="card u-padding-16">
         <div class="u-flex u-flex-vertical u-gap-16">
-            <Heading tag="h1" size="4">Login failed</Heading>
+            <Typography.Title>Login failed</Typography.Title>
             <p class="text">You will be automatically redirected back to your app shortly.</p>
             <p class="text">
                 If you are not redirected, please click on the following
@@ -28,7 +28,7 @@
 {:catch}
     <article class="card u-padding-16">
         <div class="u-flex u-flex-vertical u-gap-16">
-            <Heading tag="h1" size="4">Missing redirect URL</Heading>
+            <Typography.Title>Missing redirect URL</Typography.Title>
             <p class="text">
                 Your OAuth login flow is missing a proper redirect URL. Please check the
                 <a
diff --git a/src/routes/(public)/auth/oauth2/success/+page.svelte b/src/routes/(public)/auth/oauth2/success/+page.svelte
index 69dc8ac41..12f844f19 100644
--- a/src/routes/(public)/auth/oauth2/success/+page.svelte
+++ b/src/routes/(public)/auth/oauth2/success/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Heading } from '$lib/components';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     const project = $page.url.searchParams.get('project');
     const link = `appwrite-callback-${project}://${$page.url.search}`;
@@ -16,7 +16,7 @@
 {#await redirect then}
     <article class="card u-padding-16">
         <div class="u-flex u-flex-vertical u-gap-16">
-            <Heading tag="h1" size="4">You're now logged in</Heading>
+            <Typography.Title>You're now logged in</Typography.Title>
             <p class="text">You will be automatically redirected back to your app shortly.</p>
             <p class="text">
                 If you are not redirected, please click on the following
@@ -28,7 +28,7 @@
 {:catch}
     <article class="card u-padding-16">
         <div class="u-flex u-flex-vertical u-gap-16">
-            <Heading tag="h1" size="4">Missing redirect URL</Heading>
+            <Typography.Title>Missing redirect URL</Typography.Title>
             <p class="text">
                 Your OAuth login flow is missing a proper redirect URL. Please check the
                 <a
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index aeb76ff92..7330cc773 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,13 +1,13 @@
 <script>
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Unauthenticated } from '$lib/layout';
+    import { Typography } from '@appwrite.io/pink-svelte';
 </script>
 
 <Unauthenticated>
-    <Heading size="1" tag="h3">{$page.error.status || 'Invalid Argument'}</Heading>
-    <Heading size="3" tag="h4">{$page.error.message}</Heading>
+    <Typography.Title size="xl">{$page.error.status || 'Invalid Argument'}</Typography.Title>
+    <Typography.Title>{$page.error.message}</Typography.Title>
     <Button href={base}>Back to the console</Button>
 </Unauthenticated>
diff --git a/tests/unit/components/heading.test.ts b/tests/unit/components/heading.test.ts
deleted file mode 100644
index 54efeba71..000000000
--- a/tests/unit/components/heading.test.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { expect, test } from 'vitest';
-import { render } from '@testing-library/svelte';
-import { Heading } from '../../../src/lib/components';
-
-test('shows heading', () => {
-    const tag = 'h1';
-    const size = '7';
-
-    const { container } = render(Heading, { tag, size });
-
-    const headings = container.querySelectorAll(tag);
-    expect(headings.length).toEqual(1);
-    expect(headings[0].className).includes(`heading-level-${size}`);
-});

From 627d04715aa1d4afffb15acd62957d614d508c80 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 3 Mar 2025 11:45:03 +0100
Subject: [PATCH 6/9] fix: settings

---
 .../settings/updateRepository.svelte          | 58 ++++++++++++-------
 1 file changed, 38 insertions(+), 20 deletions(-)

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 f9c77df9b..b2741acba 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
@@ -3,14 +3,13 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form, InputChoice, InputText } from '$lib/elements/forms';
+    import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { BuildRuntime, Framework, type Models } from '@appwrite.io/console';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { onMount } from 'svelte';
     import DisconnectRepo from './disconnectRepo.svelte';
-    import InputSelectSearch from '$lib/elements/forms/inputSelectSearch.svelte';
     import { sortBranches } from '$lib/stores/vcs';
     import {
         Empty,
@@ -19,7 +18,9 @@
         Layout,
         Skeleton,
         Typography,
-        Card as PinkCard
+        Card as PinkCard,
+        Input,
+        Selector
     } from '@appwrite.io/pink-svelte';
     import Card from '$lib/components/card.svelte';
     import { IconGithub } from '@appwrite.io/pink-icons-svelte';
@@ -121,43 +122,57 @@
         <svelte:fragment slot="aside">
             {#if repository === false}
                 <Layout.Stack gap="xl">
-                    <Card isTile padding="s" radius="s">
+                    <Card isTile padding="xs" radius="s" variant="secondary">
                         <Layout.Stack
                             direction="row"
                             justifyContent="space-between"
                             alignItems="center"
                             gap="xs">
                             <Layout.Stack direction="row" gap="s">
-                                <Icon size="s" icon={IconGithub} />
-                                <Layout.Stack gap="xxs">
+                                <Icon icon={IconGithub} color="--color-fgcolor-neutral-primary" />
+                                <Layout.Stack gap="xxxs">
                                     <Skeleton variant="line" width={100} height={20} />
-                                    <Skeleton variant="line" width={100} height={15} />
+                                    <Skeleton variant="line" width={200} height={15} />
                                 </Layout.Stack>
                             </Layout.Stack>
                         </Layout.Stack>
                     </Card>
 
                     <Fieldset legend="Branch">
-                        <Layout.Stack gap="l">
-                            <Skeleton variant="line" width={300} height={45} />
-                            <Skeleton variant="line" width={300} height={45} />
-                            <Skeleton variant="line" width={300} height={45} />
+                        <Layout.Stack gap="xl">
+                            <Layout.Stack gap="xs">
+                                <Skeleton variant="line" width={100} height={20} />
+                                <Skeleton variant="line" width={300} height={32} />
+                            </Layout.Stack>
+                            <Layout.Stack gap="xs">
+                                <Skeleton variant="line" width={100} height={20} />
+                                <Skeleton variant="line" width={300} height={32} />
+                            </Layout.Stack>
+                            <Layout.Stack gap="xs">
+                                <Skeleton variant="line" width={100} height={20} />
+                                <Skeleton variant="line" width={300} height={15} />
+                                <Skeleton variant="line" width={300} height={15} />
+                            </Layout.Stack>
                         </Layout.Stack>
                     </Fieldset>
                 </Layout.Stack>
             {:else if repository}
                 <Layout.Stack gap="xl">
-                    <Card isTile padding="s" radius="s">
+                    <Card isTile padding="xs" radius="s" variant="secondary">
                         <Layout.Stack direction="row" gap="s">
                             <Layout.Stack direction="row" gap="s">
-                                <Icon size="s" icon={IconGithub} />
-                                <Layout.Stack gap="none">
+                                <Icon icon={IconGithub} color="--color-fgcolor-neutral-primary" />
+                                <Layout.Stack gap="xxxs">
                                     <Typography.Text
                                         variant="m-400"
-                                        color="--color-fgcolor-accent-neutral">
+                                        color="--color-fgcolor-neutral-primary">
                                         {repository.name}
                                     </Typography.Text>
-                                    Last updated: {toLocaleDateTime(repository.pushedAt)}
+                                    <Typography.Caption
+                                        variant="400"
+                                        color="--color-fgcolor-neutral-tertiary">
+                                        Last updated: {toLocaleDateTime(repository.pushedAt)}
+                                    </Typography.Caption>
                                 </Layout.Stack>
                             </Layout.Stack>
                             <Button secondary on:click={() => (showDisconnect = true)}>
@@ -167,8 +182,8 @@
                     </Card>
 
                     <Fieldset legend="Branch">
-                        <Layout.Stack gap="l">
-                            <InputSelectSearch
+                        <Layout.Stack gap="xl">
+                            <Input.ComboBox
                                 required={true}
                                 id="branch"
                                 label="Production branch"
@@ -194,10 +209,13 @@
                                     bind:value={selectedDir} />
                                 <Button secondary size="s">Select</Button>
                             </Layout.Stack>
-                            <InputChoice
+
+                            <Selector.Checkbox
+                                size="s"
                                 id="silentMode"
                                 label="Silent mode"
-                                bind:value={silentMode} />
+                                description="If selected, comments will not be created when pushing changes to this repository."
+                                bind:checked={silentMode} />
                         </Layout.Stack>
                     </Fieldset>
                 </Layout.Stack>

From 11eb8ed25c1d1809aac4375c2a72abc58d00dd50 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 3 Mar 2025 12:02:08 +0100
Subject: [PATCH 7/9] fix: upload variables modal

---
 .../project-[project]/updateVariables.svelte  | 34 ++++----
 .../uploadVariablesModal.svelte               | 77 ++++++++++++-------
 2 files changed, 67 insertions(+), 44 deletions(-)

diff --git a/src/routes/(console)/project-[project]/updateVariables.svelte b/src/routes/(console)/project-[project]/updateVariables.svelte
index 7bb39273e..06e4793c2 100644
--- a/src/routes/(console)/project-[project]/updateVariables.svelte
+++ b/src/routes/(console)/project-[project]/updateVariables.svelte
@@ -219,11 +219,22 @@
         >.
     {/if}
     <svelte:fragment slot="aside">
-        <Layout.Stack justifyContent="space-between" direction="row" wrap="wrap">
-            <Button secondary on:click={() => (showVariablesModal = true)}>
-                <Icon size="s" icon={IconPlus} />
-                <span class="text">Create variable</span>
-            </Button>
+        <Layout.Stack gap="l">
+            <Layout.Stack direction="row">
+                <Layout.Stack direction="row" gap="s">
+                    <Button secondary on:mousedown={() => (showEditorModal = true)}>
+                        <Icon slot="start" icon={IconCode} /> Editor
+                    </Button>
+                    <Button secondary on:mousedown={() => (showVariablesUpload = true)}>
+                        <Icon slot="start" icon={IconUpload} /> Import .env
+                    </Button>
+                </Layout.Stack>
+                {#if variableList.total}
+                    <Button secondary on:mousedown={() => (showVariablesModal = true)}>
+                        <Icon slot="start" icon={IconPlus} /> Create variable
+                    </Button>
+                {/if}
+            </Layout.Stack>
         </Layout.Stack>
         {@const sum = variableList.total}
         {#if sum}
@@ -307,7 +318,7 @@
                                                     showVariablesModal = true;
                                                     toggle(e);
                                                 }}>
-                                                Edit
+                                                Update
                                             </ActionMenu.Item.Button>
                                             {#if !isGlobal}
                                                 <ActionMenu.Item.Button
@@ -322,6 +333,7 @@
                                                 </ActionMenu.Item.Button>
                                             {/if}
                                             <ActionMenu.Item.Button
+                                                status="danger"
                                                 trailingIcon={IconTrash}
                                                 on:click={async (e) => {
                                                     handleVariableDeleted(variable);
@@ -349,16 +361,6 @@
                 Create a {isGlobal ? 'global variable' : 'variable'} to get started
             </Empty>
         {/if}
-        <Layout.Stack direction="row" gap="s" wrap="wrap">
-            <Button secondary on:click={() => (showEditorModal = true)}>
-                <Icon size="s" icon={IconCode} />
-                <span class="text">Editor</span>
-            </Button>
-            <Button secondary on:click={() => (showVariablesUpload = true)}>
-                <Icon size="s" icon={IconUpload} />
-                <span class="text">Import .env file</span>
-            </Button>
-        </Layout.Stack>
     </svelte:fragment>
 </CardGrid>
 
diff --git a/src/routes/(console)/project-[project]/uploadVariablesModal.svelte b/src/routes/(console)/project-[project]/uploadVariablesModal.svelte
index 0086fca11..127193428 100644
--- a/src/routes/(console)/project-[project]/uploadVariablesModal.svelte
+++ b/src/routes/(console)/project-[project]/uploadVariablesModal.svelte
@@ -4,22 +4,35 @@
     import { Button } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import type { Models } from '@appwrite.io/console';
-    import { Layout, Typography, Upload } from '@appwrite.io/pink-svelte';
+    import { IconInfo } from '@appwrite.io/pink-icons-svelte';
+    import {
+        Icon,
+        InlineCode,
+        Layout,
+        Selector,
+        Tooltip,
+        Typography,
+        Upload
+    } from '@appwrite.io/pink-svelte';
     import { parse } from 'envfile';
 
-    export let isGlobal: boolean;
     export let show = false;
     export let variableList: Models.VariableList;
-    export let sdkCreateVariable: (key: string, value: string) => Promise<unknown>;
+    export let sdkCreateVariable: (
+        key: string,
+        value: string,
+        secret?: boolean
+    ) => Promise<unknown>;
     export let sdkUpdateVariable: (
         variableId: string,
         key: string,
-        value: string
+        value: string,
+        secret?: boolean
     ) => Promise<unknown>;
 
     let files: FileList;
+    let secret = false;
     let error: string;
-    export let product: 'function' | 'site' = 'function';
 
     async function handleSubmit() {
         try {
@@ -49,8 +62,8 @@
                             (variable) => variable.key === key
                         );
                         return found
-                            ? sdkUpdateVariable(found.$id, key, value)
-                            : sdkCreateVariable(key, value);
+                            ? sdkUpdateVariable(found.$id, key, value, secret)
+                            : sdkCreateVariable(key, value, secret);
                     })
             );
 
@@ -64,36 +77,44 @@
             error = e.message;
         }
     }
-
-    const title = `Import new ${isGlobal ? 'global' : 'environment'} variables`;
 </script>
 
-<Modal {title} bind:show bind:error onSubmit={handleSubmit}>
-    <div class="u-flex u-flex-vertical u-gap-24 u-margin-block-start-8">
-        <p>
-            {title} from
-            <span class="inline-code">.env</span>
-            file that will be passed to {!isGlobal
-                ? `your ${product}`
-                : 'all functions and sites within your project'}.
-        </p>
-
-        {#if variableList.total > 0}
-            <Alert type="info">
-                Existing {isGlobal ? 'global' : 'environment'} variables will be updated. They will not
-                be deleted if they are not present in your .env file.
-            </Alert>
-        {/if}
-    </div>
+<Modal title="Import variables" bind:show bind:error onSubmit={handleSubmit}>
+    <span slot="description">
+        Import new environment variables from <InlineCode code=".env" size="s" /> file.
+    </span>
 
     <Upload.Dropzone bind:files>
         <Layout.Stack alignItems="center" gap="s">
-            <Layout.Stack alignItems="center" justifyContent="center" direction="row" gap="s">
-                <Typography.Text variant="l-500">Upload a file</Typography.Text>
+            <Layout.Stack alignItems="center" gap="s">
+                <Layout.Stack alignItems="center" justifyContent="center" direction="row" gap="s">
+                    <Typography.Text variant="l-500">
+                        Drag and drop files here or click to upload
+                    </Typography.Text>
+                    <Tooltip>
+                        <Layout.Stack alignItems="center" justifyContent="center" inline>
+                            <Icon icon={IconInfo} size="s" />
+                        </Layout.Stack>
+                        <svelte:fragment slot="tooltip">Only .env files allowed</svelte:fragment>
+                    </Tooltip>
+                </Layout.Stack>
+                <Typography.Caption variant="400">Up to 100 variables allowed</Typography.Caption>
             </Layout.Stack>
         </Layout.Stack>
     </Upload.Dropzone>
 
+    {#if variableList.total > 0}
+        <Alert type="info">
+            This action can create and update variables but can not delete them.
+        </Alert>
+    {/if}
+
+    <Selector.Checkbox
+        size="s"
+        id="secret"
+        label="Secret"
+        bind:checked={secret}
+        description="If selected, you and your team won't be able to read the values after creation." />
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
         <Button submit disabled={!files?.length}>Import</Button>

From 43a525c96db251c843daa60737b96eacf95bafae Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Mon, 3 Mar 2025 15:08:07 +0400
Subject: [PATCH 8/9] fix: input search

---
 src/lib/components/searchQuery.svelte     | 1 -
 src/lib/elements/forms/inputSearch.svelte | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/lib/components/searchQuery.svelte b/src/lib/components/searchQuery.svelte
index 7add96a1a..82cbfa861 100644
--- a/src/lib/components/searchQuery.svelte
+++ b/src/lib/components/searchQuery.svelte
@@ -63,7 +63,6 @@
         {placeholder}
         {disabled}
         {required}
-        type="search"
         bind:value={search}
         --color-bgcolor-neutral-default="var(--color-bgcolor-neutral-primary)">
         <svelte:fragment slot="start">
diff --git a/src/lib/elements/forms/inputSearch.svelte b/src/lib/elements/forms/inputSearch.svelte
index 45c683b33..636bec750 100644
--- a/src/lib/elements/forms/inputSearch.svelte
+++ b/src/lib/elements/forms/inputSearch.svelte
@@ -48,7 +48,6 @@
     {required}
     {autofocus}
     {label}
-    type="search"
     bind:value
     on:input={valueChange}>
     <svelte:fragment slot="start">

From 759caca518e63bd66dd3f081dafd037f68d77d05 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 3 Mar 2025 14:35:36 +0100
Subject: [PATCH 9/9] fix: upload variables modal

---
 src/routes/(console)/project-[project]/updateVariables.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/routes/(console)/project-[project]/updateVariables.svelte b/src/routes/(console)/project-[project]/updateVariables.svelte
index 06e4793c2..0b517612b 100644
--- a/src/routes/(console)/project-[project]/updateVariables.svelte
+++ b/src/routes/(console)/project-[project]/updateVariables.svelte
@@ -398,8 +398,6 @@
 
 {#if showVariablesUpload}
     <UploadVariables
-        {product}
-        {isGlobal}
         {sdkCreateVariable}
         {sdkUpdateVariable}
         {variableList}