diff --git a/package.json b/package.json
index ca116f366..f189113b9 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
         "plausible-tracker": "^0.3.9",
         "pretty-bytes": "^6.1.1",
         "prismjs": "^1.29.0",
+        "remarkable": "^2.0.1",
         "svelte-confetti": "^1.4.0",
         "tippy.js": "^6.3.7"
     },
@@ -52,6 +53,7 @@
         "@testing-library/user-event": "^14.5.2",
         "@types/deep-equal": "^1.0.4",
         "@types/prismjs": "^1.26.5",
+        "@types/remarkable": "^2.0.8",
         "@typescript-eslint/eslint-plugin": "^7.18.0",
         "@typescript-eslint/parser": "^7.18.0",
         "@vitest/ui": "^1.6.0",
diff --git a/playwright.config.ts b/playwright.config.ts
index 2b7c941e4..3f39d8761 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -12,7 +12,7 @@ const config: PlaywrightTestConfig = {
     webServer: {
         timeout: 120000,
         env: {
-            PUBLIC_APPWRITE_ENDPOINT: 'https://console-testing.appwrite.org/v1',
+            PUBLIC_APPWRITE_ENDPOINT: 'https://console-testing-2.appwrite.org/v1',
             PUBLIC_CONSOLE_MODE: 'cloud',
             PUBLIC_STRIPE_KEY:
                 'pk_test_51LT5nsGYD1ySxNCyd7b304wPD8Y1XKKWR6hqo6cu3GIRwgvcVNzoZv4vKt5DfYXL1gRGw4JOqE19afwkJYJq1g3K004eVfpdWn'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e107684f4..627a97cc9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ importers:
       prismjs:
         specifier: ^1.29.0
         version: 1.29.0
+      remarkable:
+        specifier: ^2.0.1
+        version: 2.0.1
       svelte-confetti:
         specifier: ^1.4.0
         version: 1.4.0(svelte@4.2.19)
@@ -102,6 +105,9 @@ importers:
       '@types/prismjs':
         specifier: ^1.26.5
         version: 1.26.5
+      '@types/remarkable':
+        specifier: ^2.0.8
+        version: 2.0.8
       '@typescript-eslint/eslint-plugin':
         specifier: ^7.18.0
         version: 7.18.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)
@@ -1327,6 +1333,9 @@ packages:
   '@types/pug@2.0.10':
     resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
 
+  '@types/remarkable@2.0.8':
+    resolution: {integrity: sha512-eKXqPZfpQl1kOADjdKchHrp2gwn9qMnGXhH/AtZe0UrklzhGJkawJo/Y/D0AlWcdWoWamFNIum8+/nkAISQVGg==}
+
   '@types/shimmer@1.2.0':
     resolution: {integrity: sha512-UE7oxhQLLd9gub6JKIAhDq06T0F6FnztwMNRvYgjeQSBeMc1ZG/tA47EwfduvkuQS8apbkM/lpLpWsaCeYsXVg==}
 
@@ -1559,6 +1568,9 @@ packages:
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
+  autolinker@3.16.2:
+    resolution: {integrity: sha512-JiYl7j2Z19F9NdTmirENSUUIIL/9MytEWtmzhfmsKPCp9E+G35Y0UNCMoM9tFigxT59qSc8Ml2dlZXOCVTYwuA==}
+
   available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
@@ -3062,6 +3074,11 @@ packages:
     resolution: {integrity: sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==}
     engines: {node: '>= 0.4'}
 
+  remarkable@2.0.1:
+    resolution: {integrity: sha512-YJyMcOH5lrR+kZdmB0aJJ4+93bEojRZ1HGDn9Eagu6ibg7aVZhc3OWbbShRid+Q5eAfsEqWxpe+g5W5nYNfNiA==}
+    engines: {node: '>= 6.0.0'}
+    hasBin: true
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -5143,6 +5160,8 @@ snapshots:
 
   '@types/pug@2.0.10': {}
 
+  '@types/remarkable@2.0.8': {}
+
   '@types/shimmer@1.2.0': {}
 
   '@types/stack-utils@2.0.3': {}
@@ -5435,6 +5454,10 @@ snapshots:
 
   asynckit@0.4.0: {}
 
+  autolinker@3.16.2:
+    dependencies:
+      tslib: 2.8.1
+
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.0.0
@@ -7144,6 +7167,11 @@ snapshots:
       es-errors: 1.3.0
       set-function-name: 2.0.2
 
+  remarkable@2.0.1:
+    dependencies:
+      argparse: 1.0.10
+      autolinker: 3.16.2
+
   require-directory@2.1.1: {}
 
   require-in-the-middle@7.4.0:
diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index d64c93e51..da09311f7 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
+    import { Remarkable } from 'remarkable';
     import Template from './template.svelte';
 
+    const markdownInstance = new Remarkable();
+
     import { Alert, AvatarInitials, Code, LoadingDots, SvgIcon } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { useCompletion } from 'ai/svelte';
@@ -19,8 +22,6 @@
         credentials: 'include'
     });
 
-    let question = $input;
-
     const examples = [
         'How to add platform in the console?',
         'How can I manage users, permissions, and access control in Appwrite?',
@@ -87,10 +88,47 @@
 
     $: answer = parseCompletion($completion);
 
+    function renderMarkdown(answer: string): string {
+        const trimmedAnswer = answer
+            .trim()
+            .replace(/[ \t]+/g, ' ')
+            .replace(/\n[ \t]+/g, '\n')
+            .replace(/\n+/g, '\n');
+
+        // targeting links in plain text.
+        const processedAnswer = trimmedAnswer
+            .replace(/(\[(.*?)]\((.*?)\))|https?:\/\/\S+/g, (match, fullMarkdownLink, _, __) =>
+                fullMarkdownLink ? match : `[${match}](${match})`
+            )
+            .replace(/https?:\/\/\S+##/g, (url) => url.replace(/##/, '#'));
+
+        const formattedAnswer = processedAnswer.replace(
+            /(^|\n)Sources:/g,
+            (_, prefix) => `${prefix}\nSources:`
+        );
+
+        let renderedHTML = markdownInstance.render(formattedAnswer);
+
+        // add target blank to open links in a new tab.
+        renderedHTML = renderedHTML.replace(/<a\s+href="([^"]+)"/g, '<a href="$1" target="_blank"');
+
+        return renderedHTML;
+    }
+
     function getInitials(name: string) {
         const [first, last] = name.split(' ');
         return `${first?.[0] ?? ''}${last?.[0] ?? ''}`;
     }
+
+    let previousQuestion = '';
+    $: if ($input) {
+        previousQuestion = $input;
+    }
+
+    $: if (!$isLoading && answer) {
+        // reset input if answer received.
+        $input = '';
+    }
 </script>
 
 <Template
@@ -142,7 +180,7 @@
         <div class="content">
             <div class="u-flex u-gap-8 u-cross-center">
                 <div class="avatar is-size-x-small">{getInitials($user.name)}</div>
-                <p class="u-opacity-75">{question}</p>
+                <p class="u-opacity-75">{previousQuestion}</p>
             </div>
             <div class="u-flex u-gap-8 u-margin-block-start-24">
                 <div class="logo">
@@ -154,7 +192,7 @@
                     {:else}
                         {#each answer as part}
                             {#if part.type === 'text'}
-                                <p>{part.value.trimStart()}</p>
+                                <p>{@html renderMarkdown(part.value.trim())}</p>
                             {:else if part.type === 'code'}
                                 {#key part.value}
                                     <div
@@ -196,7 +234,6 @@
                 class="input-text-wrapper u-width-full-line"
                 style="--amount-of-buttons: 1;"
                 on:submit|preventDefault={(e) => {
-                    question = $input;
                     handleSubmit(e);
                 }}>
                 <!--  svelte-ignore a11y-autofocus -->
@@ -269,10 +306,20 @@
         .answer {
             overflow: hidden;
 
-            p {
+            p:first-of-type {
                 white-space: pre-wrap;
             }
         }
+
+        :global(.answer ul),
+        :global(.answer ol) {
+            gap: 1rem;
+            display: grid;
+        }
+
+        :global(.answer a) {
+            text-decoration: underline;
+        }
     }
 
     .footer {
diff --git a/src/lib/components/avatarGroup.svelte b/src/lib/components/avatarGroup.svelte
index c9091ffcf..c874eb46c 100644
--- a/src/lib/components/avatarGroup.svelte
+++ b/src/lib/components/avatarGroup.svelte
@@ -9,6 +9,9 @@
     export let bordered = false;
     export let color = '';
 
+    let classes = '';
+    export { classes as class };
+
     enum Sizes {
         xsmall = 'is-size-x-small',
         small = 'is-size-small',
@@ -18,7 +21,7 @@
     }
 </script>
 
-<ul class="avatars-group" class:is-with-border={bordered}>
+<ul class="avatars-group {classes}" class:is-with-border={bordered}>
     {#each avatars as name, index}
         {#if index < 2}
             <li class="avatars-group-item">
diff --git a/src/lib/components/billing/estimatedTotalBox.svelte b/src/lib/components/billing/estimatedTotalBox.svelte
index b7ab73af7..a6c8db6a7 100644
--- a/src/lib/components/billing/estimatedTotalBox.svelte
+++ b/src/lib/components/billing/estimatedTotalBox.svelte
@@ -64,7 +64,7 @@
     </span>
 
     <p class="text u-margin-block-start-16">
-        You'll pay <span class="u-bold">{formatCurrency(estimatedTotal)}</span> now, with our first
+        You'll pay <span class="u-bold">{formatCurrency(estimatedTotal)}</span> now, with your first
         billing cycle starting on
         <span class="u-bold"
             >{!currentPlan.trialDays
diff --git a/src/lib/components/billing/selectPaymentMethod.svelte b/src/lib/components/billing/selectPaymentMethod.svelte
index 937d6bc67..8e82a806e 100644
--- a/src/lib/components/billing/selectPaymentMethod.svelte
+++ b/src/lib/components/billing/selectPaymentMethod.svelte
@@ -140,6 +140,7 @@
                         <InputText
                             id="taxId"
                             label="Tax ID"
+                            autofocus
                             placeholder="Tax ID"
                             bind:value={taxId} />
                     </div>
diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 5a358d548..5b818a7b8 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -32,6 +32,9 @@
     export let noBoxPadding = false;
     export let allowScroll = false;
 
+    let classes = '';
+    export { classes as class };
+
     Prism.plugins.customClass.prefix('prism-');
 
     afterUpdate(async () => {
@@ -39,7 +42,10 @@
     });
 </script>
 
-<section class="box u-overflow-hidden" class:common-section={!noMargin} class:noBoxPadding>
+<section
+    class="box u-overflow-hidden {classes}"
+    class:common-section={!noMargin}
+    class:noBoxPadding>
     <div
         class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}
diff --git a/src/lib/components/collapsibleItem.svelte b/src/lib/components/collapsibleItem.svelte
index a16b63460..92dd4e13d 100644
--- a/src/lib/components/collapsibleItem.svelte
+++ b/src/lib/components/collapsibleItem.svelte
@@ -56,9 +56,9 @@
 
 <style lang="scss">
     // TODO: remove once pink is updated
-    .collapsible-item {
+    .collapsible-item:not(.is-info) {
         .collapsible-wrapper {
-            padding-left: 0;
+            padding-left: 0.5rem;
         }
         .collapsible-wrapper.is-disabled {
             cursor: not-allowed;
diff --git a/src/lib/components/dropListLink.svelte b/src/lib/components/dropListLink.svelte
index 0267a21d0..a2ef47b99 100644
--- a/src/lib/components/dropListLink.svelte
+++ b/src/lib/components/dropListLink.svelte
@@ -6,6 +6,7 @@
     export let disabled = false;
     export let external = false;
     export let event: string = null;
+    export let iconStyle: string = '';
 
     function track() {
         if (!event) {
@@ -29,7 +30,7 @@
         rel={external ? 'noopener noreferrer' : ''}>
         <span class="text"><slot /></span>
         {#if icon}
-            <span class={`icon-${icon}`} aria-hidden="true" />
+            <span class={`icon-${icon}`} style={iconStyle} aria-hidden="true" />
         {/if}
     </a>
 </li>
diff --git a/src/lib/components/support.svelte b/src/lib/components/support.svelte
index 08e96dbbb..d1b48681e 100644
--- a/src/lib/components/support.svelte
+++ b/src/lib/components/support.svelte
@@ -3,19 +3,16 @@
     import { wizard } from '$lib/stores/wizard';
     import SupportWizard from '$routes/(console)/supportWizard.svelte';
     import { isSupportOnline, showSupportModal } from '$routes/(console)/wizard/support/store';
-    import { organization } from '$lib/stores/organization';
-    import { BillingPlan } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
     import { localeShortTimezoneName, utcHourToLocaleHour } from '$lib/helpers/date';
     import { upgradeURL } from '$lib/stores/billing';
     import { Card } from '$lib/components/index';
     import { app } from '$lib/stores/app';
+    import { currentPlan } from '$lib/stores/organization';
 
     export let show = false;
 
-    $: isPaid =
-        $organization?.billingPlan === BillingPlan.PRO ||
-        $organization?.billingPlan === BillingPlan.SCALE;
+    $: hasPremiumSupport = $currentPlan?.premiumSupport ?? false;
 
     $: supportTimings = `${utcHourToLocaleHour('16:00')} - ${utcHourToLocaleHour('00:00')} ${localeShortTimezoneName()}`;
 
@@ -73,7 +70,7 @@
 
             {#if option.showSupport}
                 <div class="u-flex u-gap-12 u-cross-center">
-                    {#if !isPaid}
+                    {#if !hasPremiumSupport}
                         <Button
                             href={$upgradeURL}
                             on:click={() => {
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index 97835384e..dc3613644 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -24,11 +24,17 @@
     let error: string;
 
     onMount(() => {
-        if (element && autofocus) {
-            element.focus();
+        if (autofocus) {
+            addInputFocus();
         }
     });
 
+    export function addInputFocus() {
+        if (element) {
+            element.focus();
+        }
+    }
+
     const handleInvalid = (event: Event) => {
         event.preventDefault();
 
diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
index 3cecdd277..074e8260a 100644
--- a/src/lib/layout/logs.svelte
+++ b/src/lib/layout/logs.svelte
@@ -156,8 +156,9 @@
 
             <div class="u-stretch u-margin-block-start-32 u-overflow-hidden">
                 <section class="code-panel">
-                    <header class="code-panel-header u-flex u-main-space-between u-width-full-line">
-                        <div class="u-flex u-gap-24">
+                    <header
+                        class="code-panel-header code-panel-compact-header u-main-space-between u-width-full-line">
+                        <div class="u-flex">
                             <div class="u-flex u-gap-16">
                                 <h4 class="text u-bold">Method:</h4>
                                 <span class="u-text-color-gray">{execution.requestMethod}</span>
@@ -197,8 +198,9 @@
                             </div>
                         </div>
                     </header>
-                    <div class="code-panel-content grid-1-2" style="u-grid">
-                        <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
+                    <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>
                             <div class="u-sep-block-end">
                                 <Tabs>
@@ -281,7 +283,7 @@
                                     </div>
                                 {/if}
 
-                                <p class="text u-text-center u-padding-24">
+                                <p class="text u-text-center u-padding-16">
                                     {execution.requestHeaders?.length
                                         ? 'Not all header data is'
                                         : 'Header data is not'}
@@ -296,7 +298,7 @@
                                     >.
                                 </p>
                             {:else if selectedRequest === 'body'}
-                                <p class="text u-text-center u-padding-24">
+                                <p class="text u-text-center u-padding-16">
                                     Body data is not captured by Appwrite for your user's security
                                     and privacy. To display body data in the Logs tab, use
                                     <b>context.log()</b>.
@@ -309,7 +311,9 @@
                                 </p>
                             {/if}
                         </div>
-                        <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0">
+                        <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>
                             <div class="u-sep-block-end">
                                 <Tabs>
@@ -348,10 +352,12 @@
                                         </Alert>
                                     {/if}
                                     <Code
+                                        allowScroll
                                         withCopy
                                         noMargin
                                         code={unescapeNewLines(execution.logs)}
-                                        language="sh" />
+                                        language="sh"
+                                        class="limited-code-height" />
                                 {:else}
                                     <Card isDashed isTile>
                                         <p class="text u-text-center">No response was recorded.</p>
@@ -360,10 +366,12 @@
                             {:else if selectedResponse === 'errors'}
                                 {#if execution?.errors}
                                     <Code
+                                        allowScroll
                                         withCopy
                                         noMargin
                                         code={unescapeNewLines(execution.errors)}
-                                        language="sh" />
+                                        language="sh"
+                                        class="limited-code-height" />
                                 {:else}
                                     <Card isDashed isTile>
                                         <p class="text u-text-center">No response was recorded.</p>
@@ -389,7 +397,7 @@
                                         </TableBody>
                                     </TableScroll>
                                 {/if}
-                                <p class="text u-text-center u-padding-24">
+                                <p class="text u-text-center u-padding-16">
                                     {execution.responseHeaders?.length
                                         ? 'Not all header data is'
                                         : 'Header data is not'}
@@ -404,7 +412,7 @@
                                     >.
                                 </p>
                             {:else if selectedResponse === 'body'}
-                                <p class="text u-text-center u-padding-24">
+                                <p class="text u-text-center u-padding-16">
                                     Body data is not captured by Appwrite for your user's security
                                     and privacy. To display body data in the Logs tab, use
                                     <b>context.log()</b>.
@@ -423,3 +431,39 @@
         </div>
     </section>
 {/if}
+
+<style>
+    :global(.limited-code-height) {
+        overflow: auto;
+        max-height: 50vh;
+    }
+
+    .code-panel-compact-header .u-flex {
+        gap: 1.5rem;
+    }
+
+    @media (max-width: 768px) {
+        .code-panel-compact-header {
+            row-gap: 1rem;
+            flex-direction: column;
+        }
+
+        .code-panel-content {
+            padding: unset;
+            padding-block: 1.5rem;
+        }
+
+        .mobile-only-inline-20-padding {
+            padding-inline: 1.5rem;
+        }
+
+        .mobile-only-block-start-20-padding {
+            padding-block-start: 1.5rem;
+        }
+
+        .code-panel-content.grid-1-2 {
+            display: unset;
+            row-gap: unset;
+        }
+    }
+</style>
diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index cda4c67a9..c81e06572 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -15,8 +15,7 @@
     import { showSupportModal } from '$routes/(console)/wizard/support/store';
     import { getContext } from 'svelte';
     import type { Writable } from 'svelte/store';
-
-    export let isOpen = false;
+    import { showSubNavigation } from '$lib/stores/layout';
 
     $: project = $page.params.project;
     $: projectPath = `${base}/project-${project}`;
@@ -44,12 +43,12 @@
     }
 
     function openFeedback() {
-        isOpen = false;
+        $showSubNavigation = false;
         wizard.start(Create);
     }
 
     function openSupport() {
-        isOpen = false;
+        $showSubNavigation = false;
         $showSupportModal = true;
     }
 </script>
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 2ea2eeb79..2db0781b9 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -7,21 +7,21 @@
     import { activeHeaderAlert } from '$routes/(console)/store';
     import { setContext } from 'svelte';
     import { writable } from 'svelte/store';
+    import { showSubNavigation } from '$lib/stores/layout';
 
-    export let isOpen = false;
     export let showSideNavigation = false;
 
     let y: number;
 
     page.subscribe(({ url }) => {
-        isOpen = url.searchParams.get('openNavbar') === 'true';
+        $showSubNavigation = url.searchParams.get('openNavbar') === 'true';
     });
 
     const toggleMenu = () => {
         y = 0;
-        isOpen = !isOpen;
+        $showSubNavigation = !$showSubNavigation;
         if (browser) {
-            if (isOpen) {
+            if ($showSubNavigation) {
                 document.body.classList.add('u-overflow-hidden');
             } else {
                 document.body.classList.remove('u-overflow-hidden');
@@ -52,7 +52,7 @@
 
 <main
     class:grid-with-side={showSideNavigation}
-    class:is-open={isOpen}
+    class:is-open={$showSubNavigation}
     class:u-hide={$wizard.show || $log.show || $wizard.cover}
     class:is-fixed-layout={$activeHeaderAlert?.show}
     style:--p-side-size={sideSize}>
@@ -65,7 +65,10 @@
             class="icon-button is-not-desktop"
             aria-label="Open Menu"
             on:click={toggleMenu}>
-            <span class:icon-x={isOpen} class:icon-menu={!isOpen} aria-hidden="true" />
+            <span
+                class:icon-x={$showSubNavigation}
+                class:icon-menu={!$showSubNavigation}
+                aria-hidden="true" />
         </button>
         <slot name="header" />
     </header>
diff --git a/src/lib/pages/domains/index.svelte b/src/lib/pages/domains/index.svelte
index f7db358b4..1c57ad634 100644
--- a/src/lib/pages/domains/index.svelte
+++ b/src/lib/pages/domains/index.svelte
@@ -75,7 +75,11 @@
         <TableBody>
             {#each rules.rules as domain, i}
                 <TableRow>
-                    <TableCellLink title="Domain" href={`http://${domain.domain}`} external noStyle>
+                    <TableCellLink
+                        title="Domain"
+                        href={`https://${domain.domain}`}
+                        external
+                        noStyle>
                         <span class="u-flex u-gap-4 u-cross-center">
                             <Trim>
                                 <span class="link">{domain.domain}</span>
@@ -135,7 +139,7 @@
                         {:else}
                             <Pill warning>
                                 <span class="icon-clock u-text-color-gray" aria-hidden="true" />
-                                <p class="text">Blocked by verification</p>
+                                <p class="text">blocked by verification</p>
                             </Pill>
                         {/if}
                     </TableCell>
diff --git a/src/lib/pages/domains/wizard/retry.svelte b/src/lib/pages/domains/wizard/retry.svelte
index 66ebfb30c..40223cd11 100644
--- a/src/lib/pages/domains/wizard/retry.svelte
+++ b/src/lib/pages/domains/wizard/retry.svelte
@@ -11,6 +11,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
 
     let retrying = false;
+    export let showTitle = true;
 
     const dispatch = createEventDispatcher();
 
@@ -36,7 +37,10 @@
     }
 </script>
 
-<Trim alternativeTrim><b>{$domain.domain}</b></Trim>
+{#if showTitle}
+    <Trim alternativeTrim><b>{$domain.domain}</b></Trim>
+{/if}
+
 {#if $domain.status === 'created'}
     <Box radius="small">
         <div class="u-flex u-gap-8 u-cross-center">
diff --git a/src/lib/pages/domains/wizard/step2.svelte b/src/lib/pages/domains/wizard/step2.svelte
index c2806750e..b6b66d208 100644
--- a/src/lib/pages/domains/wizard/step2.svelte
+++ b/src/lib/pages/domains/wizard/step2.svelte
@@ -18,7 +18,7 @@
 
     <div class="boxes-wrapper u-margin-block-start-24">
         {#if $domain.status === 'created'}
-            <Retry on:error={onRetryError} />
+            <Retry on:error={onRetryError} showTitle={false} />
         {:else}
             <div class="u-flex u-gap-8 u-cross-center">
                 <span class="icon-check u-color-text-success" aria-hidden="true" />
diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index d93535f02..8cb3b58a9 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -281,6 +281,12 @@ export type Plan = {
     trialDays: number;
     isAvailable: boolean;
     selfService: boolean;
+    premiumSupport: boolean;
+    budgeting: boolean;
+    supportsMockNumbers: boolean;
+    backupsEnabled: boolean;
+    backupPolicies: number;
+    emailBranding: boolean;
 };
 
 export type PlansInfo = {
diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
index de3c04aef..7a9a3ef13 100644
--- a/src/lib/stores/layout.ts
+++ b/src/lib/stores/layout.ts
@@ -25,3 +25,5 @@ export function updateLayout(args: updateLayoutArguments) {
     header.set(args.header ?? null);
     breadcrumb.set(args.breadcrumb ?? null);
 }
+
+export const showSubNavigation = writable(false);
diff --git a/src/lib/stores/organization.ts b/src/lib/stores/organization.ts
index d400742e3..128962b73 100644
--- a/src/lib/stores/organization.ts
+++ b/src/lib/stores/organization.ts
@@ -2,6 +2,7 @@ import { page } from '$app/stores';
 import { derived, writable } from 'svelte/store';
 import type { Models } from '@appwrite.io/console';
 import type { Tier } from './billing';
+import type { Plan } from '$lib/sdk/billing';
 
 export type Organization = Models.Team<Record<string, unknown>> & {
     billingBudget: number;
@@ -43,4 +44,5 @@ export const organizationList = derived(
 );
 
 export const organization = derived(page, ($page) => $page.data?.organization as Organization);
+export const currentPlan = derived(page, ($page) => $page.data?.currentPlan as Plan);
 export const members = derived(page, ($page) => $page.data.members as Models.MembershipList);
diff --git a/src/lib/wizards/functions/components/repositories.svelte b/src/lib/wizards/functions/components/repositories.svelte
index e067296f9..da3524ee2 100644
--- a/src/lib/wizards/functions/components/repositories.svelte
+++ b/src/lib/wizards/functions/components/repositories.svelte
@@ -125,7 +125,7 @@
     </p>
     {#if selectedInstallation}
         {#await loadRepositories(selectedInstallation, search)}
-            <div class="u-flex u-gap-8 u-cross-center u-main-center">
+            <div class="u-flex u-gap-8 u-cross-center u-main-center" style:height="50vh">
                 <div class="loader u-margin-32" />
             </div>
         {:then response}
@@ -225,3 +225,9 @@
         </Button>
     </div>
 {/if}
+
+<style>
+    .icon-lock-closed {
+        color: hsl(var(--color-neutral-50));
+    }
+</style>
diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
index 84f47a74c..f73877fb3 100644
--- a/src/lib/wizards/functions/cover.svelte
+++ b/src/lib/wizards/functions/cover.svelte
@@ -225,7 +225,7 @@
                                 {/each}
                             {:then templatesListWithoutStarter}
                                 {#each templatesListWithoutStarter.templates as template}
-                                    <li class="clickable-list-item">
+                                    <li class="clickable-list-item u-padding-block-8">
                                         <button
                                             type="button"
                                             on:click={() => {
@@ -295,6 +295,22 @@
         );
     }
 
+    .u-sep-block-start {
+        border-block-start: solid 0.0625rem hsl(var(--color-neutral)) !important;
+    }
+
+    .clickable-list-item:not(:last-child) {
+        border-block-end: solid 0.0625rem hsl(var(--color-neutral)) !important;
+    }
+
+    :global(.theme-light) {
+        --color-neutral: var(--color-neutral-10);
+    }
+
+    :global(.theme-dark) {
+        --color-neutral: var(--color-neutral-85);
+    }
+
     .inline-tag {
         line-height: 140%;
         font-weight: 500;
diff --git a/src/lib/wizards/functions/steps/functionConfiguration.svelte b/src/lib/wizards/functions/steps/functionConfiguration.svelte
index 02ae93868..cafa196af 100644
--- a/src/lib/wizards/functions/steps/functionConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/functionConfiguration.svelte
@@ -71,6 +71,7 @@
             </div>
         {:else}
             <CustomId
+                autofocus
                 bind:show={showCustomId}
                 name="Function"
                 bind:id={$createFunction.$id}
diff --git a/src/lib/wizards/functions/steps/gitConfiguration.svelte b/src/lib/wizards/functions/steps/gitConfiguration.svelte
index 1552b668b..334d19ddb 100644
--- a/src/lib/wizards/functions/steps/gitConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/gitConfiguration.svelte
@@ -67,7 +67,7 @@
                             $choices.branch = event.detail.value;
                         }}
                         interactiveOutput
-                        name="branch"
+                        name="branches"
                         {options} />
                     <InputText
                         id="root"
diff --git a/src/lib/wizards/functions/steps/manualDetails.svelte b/src/lib/wizards/functions/steps/manualDetails.svelte
index e28665915..55fe5655c 100644
--- a/src/lib/wizards/functions/steps/manualDetails.svelte
+++ b/src/lib/wizards/functions/steps/manualDetails.svelte
@@ -48,6 +48,7 @@
             </div>
         {:else}
             <CustomId
+                autofocus
                 bind:show={showCustomId}
                 name="Function"
                 bind:id={$createFunction.$id}
diff --git a/src/lib/wizards/functions/steps/templateConfiguration.svelte b/src/lib/wizards/functions/steps/templateConfiguration.svelte
index 02028bab4..481cd5026 100644
--- a/src/lib/wizards/functions/steps/templateConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/templateConfiguration.svelte
@@ -73,6 +73,7 @@
             </div>
         {:else}
             <CustomId
+                autofocus
                 bind:show={showCustomId}
                 name="Function"
                 bind:id={$templateConfig.$id}
diff --git a/src/routes/(authenticated)/git/authorize-contributor/+page.svelte b/src/routes/(authenticated)/git/authorize-contributor/+page.svelte
index 1f6a9f1b9..9e2c270ee 100644
--- a/src/routes/(authenticated)/git/authorize-contributor/+page.svelte
+++ b/src/routes/(authenticated)/git/authorize-contributor/+page.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
     import { page } from '$app/stores';
+    import { app } from '$lib/stores/app';
+    import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
+    import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
     import { Vcs, Client } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import { getApiEndpoint } from '$lib/stores/sdk';
@@ -78,25 +81,19 @@
                 href="https://appwrite.io/"
                 target="_blank"
                 style="display: grid;place-items: center;">
-                <svg
-                    width="132"
-                    height="34"
-                    viewBox="0 0 132 34"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M30.3916 17.6788C30.3916 22.216 26.7133 25.8941 22.1756 25.8941C20.0679 25.8941 18.1458 25.1004 16.6913 23.796C19.0212 22.7471 20.6433 20.4053 20.6433 17.6847C20.6433 14.9606 19.0172 12.6164 16.6824 11.5695C18.1381 10.2604 20.0636 9.46356 22.1756 9.46356C26.7133 9.46356 30.3916 13.1416 30.3916 17.6788Z"
-                        fill="#A3A8BD" />
-                    <path
-                        d="M18.8914 11.1213C13.8456 7.30847 6.5638 10.387 5.78442 16.6629C5.42225 19.5797 6.64589 22.4677 8.99326 24.2365C14.0419 28.0459 21.3216 24.9621 22.0967 18.6856C22.4563 15.7725 21.2344 12.8892 18.8914 11.1213V11.1213ZM17.9776 12.3319C22.0943 15.438 21.3042 21.835 16.5556 23.8467C14.352 24.7803 11.8175 24.4674 9.90703 23.0258C5.79061 19.9196 6.58046 13.5226 11.329 11.511C13.5327 10.5776 16.0672 10.8904 17.9776 12.3319Z"
-                        fill="#A3A8BD" />
-                    <path
-                        d="M39.8456 11.6498C40.9732 11.6498 41.9342 11.9416 42.7289 12.5255C43.5236 13.1095 44.07 13.8834 44.3683 14.8473V11.7912H45.7751V22.9159H44.3683V19.8599C44.07 20.8247 43.5236 21.599 42.7289 22.1829C41.9342 22.7668 40.9732 23.0588 39.8456 23.0588C38.8404 23.0588 37.9405 22.8278 37.1457 22.3661C36.3511 21.9045 35.7331 21.2422 35.2915 20.3793C34.8501 19.5166 34.6292 18.5079 34.6292 17.3535C34.6292 16.1858 34.8501 15.1705 35.2915 14.3077C35.7331 13.4457 36.3477 12.7873 37.1357 12.3321C37.9235 11.8771 38.8268 11.6498 39.8456 11.6498ZM40.2123 12.9123C38.9625 12.9123 37.9607 13.3095 37.2064 14.1042C36.4531 14.8989 36.0764 15.982 36.0764 17.3535C36.0764 18.7253 36.4531 19.8085 37.2064 20.6031C37.9607 21.3976 38.9625 21.7948 40.2123 21.7948C41 21.7948 41.7098 21.6117 42.3409 21.245C42.9728 20.8787 43.4687 20.359 43.8286 19.6867C44.1884 19.0143 44.3683 18.2367 44.3683 17.3535C44.3683 16.4705 44.1884 15.6934 43.8286 15.0216C43.4687 14.3495 42.9728 13.8294 42.3409 13.4623C41.7098 13.0956 41 12.9123 40.2123 12.9123ZM54.8213 11.6498C55.8401 11.6498 56.7401 11.8771 57.5211 12.3321C58.3023 12.7873 58.9137 13.4457 59.3552 14.3077C59.7967 15.1705 60.0174 16.1858 60.0174 17.3535C60.0174 18.5079 59.7967 19.5166 59.3552 20.3793C58.9137 21.2422 58.2986 21.9045 57.5111 22.3661C56.7232 22.8278 55.8265 23.0588 54.8213 23.0588C53.6801 23.0588 52.7158 22.7668 51.9279 22.1829C51.14 21.599 50.5969 20.8247 50.2985 19.8599V28.1725H48.8715V11.7912H50.2985V14.8473C50.5969 13.8834 51.14 13.1095 51.9279 12.5255C52.7158 11.9416 53.6801 11.6498 54.8213 11.6498ZM54.4343 12.9123C53.6465 12.9123 52.9366 13.0956 52.3045 13.4623C51.6734 13.8294 51.1812 14.3495 50.8282 15.0216C50.4752 15.6934 50.2985 16.4705 50.2985 17.3535C50.2985 18.2367 50.4752 19.0143 50.8282 19.6867C51.1812 20.359 51.6734 20.8787 52.3045 21.245C52.9366 21.6117 53.6465 21.7948 54.4343 21.7948C55.6975 21.7948 56.7028 21.3976 57.4503 20.6031C58.197 19.8085 58.5702 18.7253 58.5702 17.3535C58.5702 15.982 58.197 14.8989 57.4503 14.1042C56.7028 13.3095 55.6975 12.9123 54.4343 12.9123ZM68.5338 11.6498C69.5527 11.6498 70.4527 11.8771 71.2337 12.3321C72.0149 12.7873 72.6264 13.4457 73.068 14.3077C73.5093 15.1705 73.7302 16.1858 73.7302 17.3535C73.7302 18.5079 73.5093 19.5166 73.068 20.3793C72.6264 21.2422 72.0115 21.9045 71.2237 22.3661C70.4359 22.8278 69.5393 23.0588 68.5338 23.0588C67.3928 23.0588 66.4285 22.7668 65.6407 22.1829C64.8527 21.599 64.3097 20.8247 64.0114 19.8599V28.1725H62.5843V11.7912H64.0114V14.8473C64.3097 13.8834 64.8527 13.1095 65.6407 12.5255C66.4285 11.9416 67.3928 11.6498 68.5338 11.6498ZM68.1472 12.9123C67.3594 12.9123 66.6492 13.0956 66.0173 13.4623C65.3862 13.8294 64.8941 14.3495 64.5409 15.0216C64.1879 15.6934 64.0114 16.4705 64.0114 17.3535C64.0114 18.2367 64.1879 19.0143 64.5409 19.6867C64.8941 20.359 65.3862 20.8787 66.0173 21.245C66.6492 21.6117 67.3594 21.7948 68.1472 21.7948C69.4103 21.7948 70.4156 21.3976 71.1629 20.6031C71.9097 19.8085 72.283 18.7253 72.283 17.3535C72.283 15.982 71.9097 14.8989 71.1629 14.1042C70.4156 13.3095 69.4103 12.9123 68.1472 12.9123ZM89.5209 11.6295H92.2108L89.1746 22.9159H85.9957L83.5714 14.7058L81.0851 22.9159H77.9074L74.8915 11.6295H77.7646L79.5987 20.3491L82.1038 11.6295H85.1399L87.6667 20.3491L89.5209 11.6295ZM96.5102 13.7882C96.9307 13.0687 97.4874 12.5017 98.18 12.0871C98.8735 11.6734 99.6478 11.4666 100.503 11.4666V14.5427H99.6678C97.5627 14.5427 96.5102 15.5205 96.5102 17.476V22.9159H93.6373V11.6295H96.5102V13.7882ZM101.767 8.38884C101.767 7.92721 101.93 7.55055 102.256 7.25894C102.582 6.96675 103.01 6.8205 103.539 6.8205C104.069 6.8205 104.497 6.96675 104.823 7.25894C105.149 7.55055 105.312 7.92721 105.312 8.38884C105.312 8.83718 105.149 9.20749 104.823 9.49993C104.497 9.7922 104.069 9.93846 103.539 9.93846C103.01 9.93846 102.582 9.7922 102.256 9.49993C101.93 9.20749 101.767 8.83718 101.767 8.38884ZM102.093 11.6295H104.966V22.9159H102.093V11.6295ZM112.485 20.4502H113.605V22.9159H112.097C110.833 22.9159 109.866 22.6106 109.193 21.9997C108.521 21.3879 108.185 20.3694 108.185 18.9436V14.0536H106.616V11.6295H108.185V8.8376H111.058V11.6295H113.584V14.0536H111.058V18.984C111.058 19.5274 111.166 19.908 111.384 20.1253C111.601 20.3419 111.968 20.4502 112.485 20.4502ZM126.278 16.8443C126.278 17.1298 126.245 17.456 126.177 17.8224H117.904C117.945 18.8276 118.216 19.5679 118.72 20.0432C119.222 20.5184 119.847 20.7561 120.594 20.7561C121.26 20.7561 121.813 20.5931 122.254 20.2669C122.695 19.9416 122.977 19.5006 123.099 18.9436H126.135C125.986 19.7314 125.667 20.4374 125.179 21.062C124.689 21.6872 124.061 22.1763 123.294 22.5293C122.526 22.8822 121.674 23.0588 120.737 23.0588C119.636 23.0588 118.658 22.8246 117.802 22.3561C116.947 21.8875 116.281 21.2185 115.806 20.3491C115.33 19.4796 115.092 18.454 115.092 17.2727C115.092 16.0906 115.33 15.0618 115.806 14.1864C116.281 13.31 116.947 12.6408 117.802 12.1794C118.658 11.7176 119.636 11.4868 120.737 11.4868C121.85 11.4868 122.825 11.7176 123.66 12.1794C124.495 12.6408 125.141 13.2759 125.596 14.084C126.051 14.892 126.278 15.8121 126.278 16.8443ZM123.385 16.56C123.426 15.6356 123.185 14.9357 122.662 14.4607C122.139 13.9853 121.497 13.7478 120.737 13.7478C119.962 13.7478 119.31 13.9853 118.78 14.4607C118.25 14.9357 117.958 15.6356 117.904 16.56H123.385Z"
-                        fill="#A3A8BD" />
-                    <path
-                        d="M14.1624 14.8366C14.1527 14.8608 14.0268 15.3542 13.8918 15.9395C13.7513 16.5247 13.5288 17.4485 13.4032 17.9949C13.1613 18.9961 13.0161 19.6539 13.0161 19.7409C13.0161 19.7649 13.1662 19.7845 13.3498 19.7845H13.6837L13.8335 19.1169C13.9207 18.7543 14.1143 17.9223 14.2689 17.2694C14.4237 16.6165 14.6122 15.8233 14.6849 15.5039C14.7574 15.1847 14.83 14.8948 14.8445 14.8608C14.859 14.8173 14.7767 14.803 14.5251 14.803C14.3365 14.803 14.172 14.8173 14.1624 14.8366ZM11.565 16.9307L11.1201 17.4145L11.2509 17.5693C11.3232 17.6562 11.5218 17.874 11.6909 18.0531L12.0006 18.3817H12.8809L12.4648 17.932C12.2373 17.6904 12.0487 17.458 12.0487 17.4291C12.0487 17.3952 12.2229 17.1777 12.4359 16.9454C12.6486 16.7086 12.8228 16.5052 12.8228 16.4811C12.8228 16.4616 12.639 16.4472 12.4166 16.4472H12.0151L11.565 16.9307ZM14.9507 16.4762C14.9507 16.4908 15.033 16.5825 15.1345 16.6841C15.512 17.0614 15.7779 17.3808 15.7633 17.4434C15.7538 17.4775 15.5698 17.7047 15.3474 17.9416L14.9461 18.3817H15.3958L15.8456 18.377L16.2565 17.9271C16.4841 17.6758 16.6678 17.453 16.6678 17.4242C16.6678 17.4001 16.4744 17.1727 16.2324 16.9165L15.7975 16.4472H15.3764C15.1394 16.4472 14.9507 16.4616 14.9507 16.4762Z"
-                        fill="#A3A8BD" />
-                </svg>
+                {#if $app.themeInUse === 'dark'}
+                    <img
+                        src={AppwriteLogoDark}
+                        width="120"
+                        class="u-block u-only-dark"
+                        alt="Appwrite Logo" />
+                {:else}
+                    <img
+                        src={AppwriteLogoLight}
+                        width="120"
+                        class="u-block u-only-light"
+                        alt="Appwrite Logo" />
+                {/if}
             </a>
         </div>
     </div>
diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index 74df68b7b..dee3bc09b 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -238,7 +238,6 @@
             rank: -1
         }
     ]);
-    let isOpen = false;
     onMount(async () => {
         loading.set(false);
         if (!localStorage.getItem('feedbackElapsed')) {
@@ -319,14 +318,13 @@
 <CommandCenter />
 
 <Shell
-    bind:isOpen
     showSideNavigation={$page.url.pathname !== '/console' &&
         !$page?.params.organization &&
         !$page.url.pathname.includes('/console/account') &&
         !$page.url.pathname.includes('/console/card') &&
         !$page.url.pathname.includes('/console/onboarding')}>
     <Header slot="header" />
-    <SideNavigation slot="side" bind:isOpen />
+    <SideNavigation slot="side" />
     <slot />
     <Footer slot="footer" />
 </Shell>
diff --git a/src/routes/(console)/apply-credit/+page.svelte b/src/routes/(console)/apply-credit/+page.svelte
index 884fd1763..95af6175f 100644
--- a/src/routes/(console)/apply-credit/+page.svelte
+++ b/src/routes/(console)/apply-credit/+page.svelte
@@ -189,6 +189,11 @@
     $: selectedOrg = $organizationList?.teams?.find(
         (team) => team.$id === selectedOrgId
     ) as Organization;
+
+    $: billingPlan =
+        selectedOrg?.billingPlan === BillingPlan.SCALE
+            ? BillingPlan.SCALE
+            : (campaign?.plan ?? BillingPlan.PRO);
 </script>
 
 <svelte:head>
@@ -268,7 +273,7 @@
                     </div>
                 </div>
             {/if}
-            {#if selectedOrg?.$id && selectedOrg?.billingPlan !== BillingPlan.FREE}
+            {#if selectedOrg?.$id && selectedOrg?.billingPlan !== BillingPlan.FREE && selectedOrg?.billingPlan !== BillingPlan.GITHUB_EDUCATION}
                 <section
                     class="card u-margin-block-start-24"
                     style:--p-card-padding="1.5rem"
diff --git a/src/routes/(console)/createOrganization.svelte b/src/routes/(console)/createOrganization.svelte
index b9d1bb477..3c4d7b219 100644
--- a/src/routes/(console)/createOrganization.svelte
+++ b/src/routes/(console)/createOrganization.svelte
@@ -75,7 +75,7 @@
                 </Pill>
             </div>
         {:else}
-            <CustomId bind:show={showCustomId} name="Organization" bind:id />
+            <CustomId autofocus bind:show={showCustomId} name="Organization" bind:id />
         {/if}
     </FormList>
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/onboarding/+page.svelte b/src/routes/(console)/onboarding/+page.svelte
index e714c1a5a..3f112011c 100644
--- a/src/routes/(console)/onboarding/+page.svelte
+++ b/src/routes/(console)/onboarding/+page.svelte
@@ -27,11 +27,11 @@
         ? [
               {
                   value: BillingPlan.FREE,
-                  label: `${tierToPlan(BillingPlan.FREE).name} - ${formatCurrency($plansInfo.get(BillingPlan.FREE).price)}/month`
+                  label: `${tierToPlan(BillingPlan.FREE).name} - ${formatCurrency($plansInfo.get(BillingPlan.FREE).price)} / month`
               },
               {
                   value: BillingPlan.PRO,
-                  label: `${tierToPlan(BillingPlan.PRO).name} - ${formatCurrency($plansInfo.get(BillingPlan.PRO).price)}/month + add-ons`
+                  label: `${tierToPlan(BillingPlan.PRO).name} - ${formatCurrency($plansInfo.get(BillingPlan.PRO).price)} / month + add-ons`
               }
               // {
               //     value: BillingPlan.SCALE,
@@ -125,7 +125,12 @@
                         </Pill>
                     </div>
                 {:else}
-                    <CustomId bind:show={showCustomId} name="Organization" isProject bind:id />
+                    <CustomId
+                        autofocus
+                        bind:show={showCustomId}
+                        name="Organization"
+                        isProject
+                        bind:id />
                 {/if}
                 {#if isCloud}
                     <div class="u-margin-block-start-8">
diff --git a/src/routes/(console)/organization-[organization]/+layout.ts b/src/routes/(console)/organization-[organization]/+layout.ts
index ccc1c0a93..650990e86 100644
--- a/src/routes/(console)/organization-[organization]/+layout.ts
+++ b/src/routes/(console)/organization-[organization]/+layout.ts
@@ -12,6 +12,7 @@ import { get } from 'svelte/store';
 import { preferences } from '$lib/stores/preferences';
 import type { Organization } from '$lib/stores/organization';
 import { defaultRoles, defaultScopes } from '$lib/constants';
+import type { Plan } from '$lib/sdk/billing';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.ORGANIZATION);
@@ -19,12 +20,14 @@ export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.PAYMENT_METHODS);
     let roles = isCloud ? [] : defaultRoles;
     let scopes = isCloud ? [] : defaultScopes;
+    let currentPlan: Plan = null;
 
     try {
         if (isCloud) {
             const res = await sdk.forConsole.billing.getRoles(params.organization);
             roles = res.roles;
             scopes = res.scopes;
+            currentPlan = await sdk.forConsole.billing.getPlan(params.organization);
             if (scopes.includes('billing.read')) {
                 await failedInvoice.load(params.organization);
                 if (get(failedInvoice)) {
@@ -53,6 +56,7 @@ export const load: LayoutLoad = async ({ params, depends }) => {
             header: Header,
             breadcrumbs: Breadcrumbs,
             organization,
+            currentPlan,
             members,
             roles,
             scopes
diff --git a/src/routes/(console)/organization-[organization]/billing/+page.svelte b/src/routes/(console)/organization-[organization]/billing/+page.svelte
index d3d6b7fd1..c31d1e8d0 100644
--- a/src/routes/(console)/organization-[organization]/billing/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { organization } from '$lib/stores/organization';
+    import { currentPlan, organization } from '$lib/stores/organization';
     import BudgetAlert from './budgetAlert.svelte';
     import BudgetCap from './budgetCap.svelte';
     import PlanSummary from './planSummary.svelte';
@@ -123,7 +123,7 @@
     <PlanSummary
         creditList={data?.creditList}
         members={data?.members}
-        currentPlan={data?.currentPlan}
+        currentPlan={$currentPlan}
         invoices={data?.invoices.invoices} />
     <PaymentHistory />
     <PaymentMethods />
diff --git a/src/routes/(console)/organization-[organization]/billing/+page.ts b/src/routes/(console)/organization-[organization]/billing/+page.ts
index 0e945f906..36247292e 100644
--- a/src/routes/(console)/organization-[organization]/billing/+page.ts
+++ b/src/routes/(console)/organization-[organization]/billing/+page.ts
@@ -25,33 +25,24 @@ export const load: PageLoad = async ({ parent, depends }) => {
               .catch(() => null)
         : null;
 
-    const [
-        paymentMethods,
-        addressList,
-        aggregationList,
-        billingAddress,
-        currentPlan,
-        creditList,
-        invoices
-    ] = await Promise.all([
-        sdk.forConsole.billing.listPaymentMethods(),
-        sdk.forConsole.billing.listAddresses(),
-        sdk.forConsole.billing.listAggregation(organization.$id),
-        billingAddressPromise,
-        sdk.forConsole.billing.getPlan(organization.$id),
-        sdk.forConsole.billing.listCredits(organization.$id),
-        sdk.forConsole.billing.listInvoices(organization.$id, [
-            Query.limit(1),
-            Query.equal('from', organization.billingCurrentInvoiceDate)
-        ])
-    ]);
+    const [paymentMethods, addressList, aggregationList, billingAddress, creditList, invoices] =
+        await Promise.all([
+            sdk.forConsole.billing.listPaymentMethods(),
+            sdk.forConsole.billing.listAddresses(),
+            sdk.forConsole.billing.listAggregation(organization.$id),
+            billingAddressPromise,
+            sdk.forConsole.billing.listCredits(organization.$id),
+            sdk.forConsole.billing.listInvoices(organization.$id, [
+                Query.limit(1),
+                Query.equal('from', organization.billingCurrentInvoiceDate)
+            ])
+        ]);
 
     return {
         paymentMethods,
         addressList,
         aggregationList,
         billingAddress,
-        currentPlan,
         creditList,
         invoices
     };
diff --git a/src/routes/(console)/organization-[organization]/billing/addCreditModal.svelte b/src/routes/(console)/organization-[organization]/billing/addCreditModal.svelte
index f0bb10ba9..4a66d6797 100644
--- a/src/routes/(console)/organization-[organization]/billing/addCreditModal.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/addCreditModal.svelte
@@ -40,7 +40,12 @@
     Apply Appwrite credits to your organization.
 
     <FormList>
-        <InputText placeholder="Promo code" id="code" label="Add promo code" bind:value={coupon} />
+        <InputText
+            placeholder="Promo code"
+            id="code"
+            autofocus
+            label="Add promo code"
+            bind:value={coupon} />
     </FormList>
 
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
index e76bcd2ed..e313d59a5 100644
--- a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
@@ -6,7 +6,7 @@
     import { Button, Form, FormList, InputNumber, InputSwitch } from '$lib/elements/forms';
     import { showUsageRatesModal, upgradeURL } from '$lib/stores/billing';
     import { addNotification } from '$lib/stores/notifications';
-    import { organization } from '$lib/stores/organization';
+    import { organization, currentPlan } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
 
@@ -37,7 +37,7 @@
         } catch (error) {
             addNotification({
                 type: 'error',
-                message: `There was an error enabling your budget cap`
+                message: error.message
             });
             trackError(error, Submit.BudgetCapUpdate);
         }
@@ -59,7 +59,7 @@
                 class="link">Learn more about usage rates.</button>
         </p>
         <svelte:fragment slot="aside">
-            {#if $organization?.billingPlan === BillingPlan.FREE}
+            {#if !$currentPlan.budgeting}
                 <Alert type="info">
                     <svelte:fragment slot="title">
                         Budget caps are a Pro plan feature
@@ -84,6 +84,7 @@
                         <InputNumber
                             placeholder="Add budget cap"
                             id="cap"
+                            autofocus
                             label="Budget cap (USD)"
                             bind:value={budget} />
                     {/if}
diff --git a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
index c84356b75..d75261d43 100644
--- a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
@@ -186,7 +186,7 @@
             </Collapsible>
         </svelte:fragment>
         <svelte:fragment slot="actions">
-            {#if $organization?.billingPlan === BillingPlan.FREE}
+            {#if $organization?.billingPlan === BillingPlan.FREE || $organization?.billingPlan === BillingPlan.GITHUB_EDUCATION}
                 <div class="u-flex u-gap-16 u-flex-wrap">
                     <Button text href={`${base}/organization-${$organization?.$id}/usage`}>
                         View estimated usage
@@ -202,7 +202,7 @@
                         Upgrade
                     </Button>
                 </div>
-            {:else if $organization?.billingPlan !== BillingPlan.GITHUB_EDUCATION}
+            {:else}
                 <div class="u-flex u-gap-16 u-flex-wrap">
                     <Button
                         text
diff --git a/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte b/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
index 0eb06bbef..a57cecf48 100644
--- a/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { Modal, RadioBoxes } from '$lib/components';
+    import { Alert, Modal, RadioBoxes } from '$lib/components';
     import { Button, FormItem, FormList, InputSelect, InputText } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { organization } from '$lib/stores/organization';
@@ -10,6 +10,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Pill } from '$lib/elements';
+    import { base } from '$app/paths';
 
     export let show = false;
     let addresses: AddressesList;
@@ -185,10 +186,21 @@
                 </FormList>
             </RadioBoxes>
         </FormList>
+    {:else}
+        <Alert
+            buttons={[
+                {
+                    slot: 'Add address',
+                    href: `${base}/account/payments`
+                }
+            ]}>There are no billing addresses linked to your account.</Alert>
     {/if}
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
-        <Button secondary submit disabled={selectedAddress === $organization.billingAddressId}>
+        <Button
+            secondary
+            submit
+            disabled={selectedAddress === $organization.billingAddressId || !addresses?.total}>
             Save
         </Button>
     </svelte:fragment>
diff --git a/src/routes/(console)/organization-[organization]/change-plan/+page.svelte b/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
index 11afa878a..7f4dadac2 100644
--- a/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
@@ -32,7 +32,12 @@
     import { type Coupon, type PaymentList } from '$lib/sdk/billing';
     import { plansInfo, tierToPlan, type Tier } from '$lib/stores/billing';
     import { addNotification } from '$lib/stores/notifications';
-    import { organization, organizationList, type Organization } from '$lib/stores/organization';
+    import {
+        currentPlan,
+        organization,
+        organizationList,
+        type Organization
+    } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
     import { VARS } from '$lib/system';
@@ -101,8 +106,7 @@
             billingPlan = BillingPlan.PRO;
         }
 
-        const currentPlan = await sdk.forConsole.billing.getPlan($organization?.$id);
-        selfService = currentPlan.selfService;
+        selfService = $currentPlan?.selfService ?? true;
     });
 
     async function loadPaymentMethods() {
diff --git a/src/routes/(console)/organization-[organization]/createProject.svelte b/src/routes/(console)/organization-[organization]/createProject.svelte
index 85bccc0f0..8638642ac 100644
--- a/src/routes/(console)/organization-[organization]/createProject.svelte
+++ b/src/routes/(console)/organization-[organization]/createProject.svelte
@@ -61,7 +61,7 @@
                 </Pill>
             </div>
         {:else}
-            <CustomId bind:show={showCustomId} name="Project" isProject bind:id />
+            <CustomId autofocus bind:show={showCustomId} name="Project" isProject bind:id />
         {/if}
     </FormList>
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
index 82c211c19..636f88fdd 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
@@ -143,7 +143,6 @@
         <Heading tag="h6" size="7">Users</Heading>
 
         <p class="text">The total number of users across all projects in your organization.</p>
-
         <svelte:fragment slot="aside">
             {#if data.organizationUsage.users}
                 {@const current = data.organizationUsage.usersTotal}
@@ -169,7 +168,7 @@
                             {
                                 name: 'Users',
                                 data: accumulateFromEndingTotal(
-                                    data.organizationUsage.users,
+                                    data.usersUsageToDate,
                                     data.organizationUsage.usersTotal
                                 )
                             }
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
index 9ffafbac2..74dffcda2 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
@@ -72,12 +72,15 @@ export const load: PageLoad = async ({ params, parent }) => {
         }
     }
 
+    const usersUsageToDate = usage.users.filter((user) => new Date(user.date) < new Date());
+
     return {
         organizationUsage: usage,
         projectNames,
         invoices,
         currentInvoice,
         organizationMembers,
-        plan
+        plan,
+        usersUsageToDate
     };
 };
diff --git a/src/routes/(console)/organization-[organization]/wizard/step1.svelte b/src/routes/(console)/organization-[organization]/wizard/step1.svelte
index acbf98651..331a27fc3 100644
--- a/src/routes/(console)/organization-[organization]/wizard/step1.svelte
+++ b/src/routes/(console)/organization-[organization]/wizard/step1.svelte
@@ -31,6 +31,7 @@
             </div>
         {:else}
             <CustomId
+                autofocus
                 bind:show={showCustomId}
                 name="Project"
                 isProject={true}
diff --git a/src/routes/(console)/project-[project]/+layout.ts b/src/routes/(console)/project-[project]/+layout.ts
index 57df9d528..018462d75 100644
--- a/src/routes/(console)/project-[project]/+layout.ts
+++ b/src/routes/(console)/project-[project]/+layout.ts
@@ -7,9 +7,11 @@ import { failedInvoice } from '$lib/stores/billing';
 import { isCloud } from '$lib/system';
 import type { Organization } from '$lib/stores/organization';
 import { defaultRoles, defaultScopes } from '$lib/constants';
+import type { Plan } from '$lib/sdk/billing';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.PROJECT);
+    let currentPlan: Plan = null;
 
     try {
         const project = await sdk.forConsole.projects.get(params.project);
@@ -27,6 +29,7 @@ export const load: LayoutLoad = async ({ params, depends }) => {
         let roles = isCloud ? [] : defaultRoles;
         let scopes = isCloud ? [] : defaultScopes;
         if (isCloud) {
+            currentPlan = await sdk.forConsole.billing.getPlan(project.teamId);
             const res = await sdk.forConsole.billing.getRoles(project.teamId);
             roles = res.roles;
             scopes = res.scopes;
@@ -39,7 +42,8 @@ export const load: LayoutLoad = async ({ params, depends }) => {
             project,
             organization,
             roles,
-            scopes
+            scopes,
+            currentPlan
         };
     } catch (e) {
         error(e.code, e.message);
diff --git a/src/routes/(console)/project-[project]/auth/createTeam.svelte b/src/routes/(console)/project-[project]/auth/createTeam.svelte
index 65528f2c0..6cf75eb24 100644
--- a/src/routes/(console)/project-[project]/auth/createTeam.svelte
+++ b/src/routes/(console)/project-[project]/auth/createTeam.svelte
@@ -58,7 +58,7 @@
                 </Pill>
             </div>
         {:else}
-            <CustomId bind:show={showCustomId} name="Team" bind:id />
+            <CustomId autofocus bind:show={showCustomId} name="Team" bind:id />
         {/if}
     </FormList>
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/project-[project]/auth/createUser.svelte b/src/routes/(console)/project-[project]/auth/createUser.svelte
index cd8e57a7f..e123e3f03 100644
--- a/src/routes/(console)/project-[project]/auth/createUser.svelte
+++ b/src/routes/(console)/project-[project]/auth/createUser.svelte
@@ -84,7 +84,7 @@
                 </Pill>
             </div>
         {:else}
-            <CustomId bind:show={showDropdown} name="User" bind:id />
+            <CustomId autofocus bind:show={showDropdown} name="User" bind:id />
         {/if}
     </FormList>
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte b/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
index 10e230e57..cd1830a26 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
@@ -9,8 +9,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { organization } from '$lib/stores/organization';
-    import { BillingPlan } from '$lib/constants';
+    import { currentPlan } from '$lib/stores/organization';
     import { isCloud, isSelfHosted } from '$lib/system';
     import MockNumbersLight from './mock-numbers-light.png';
     import MockNumbersDark from './mock-numbers-dark.png';
@@ -27,7 +26,7 @@
     $: isSubmitDisabled = JSON.stringify(numbers) === JSON.stringify(initialNumbers);
 
     let isComponentDisabled: boolean =
-        isSelfHosted || (isCloud && $organization?.billingPlan === BillingPlan.FREE);
+        isSelfHosted || (isCloud && !$currentPlan.supportsMockNumbers);
     let emptyStateTitle: string = isSelfHosted
         ? 'Available on Appwrite Cloud'
         : 'Upgrade to add mock phone numbers';
diff --git a/src/routes/(console)/project-[project]/auth/security/updatePasswordHistory.svelte b/src/routes/(console)/project-[project]/auth/security/updatePasswordHistory.svelte
index a308e9962..82209e2bb 100644
--- a/src/routes/(console)/project-[project]/auth/security/updatePasswordHistory.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updatePasswordHistory.svelte
@@ -8,6 +8,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
+    import { tick } from 'svelte';
 
     let passwordHistory = $project?.authPasswordHistory < 1 ? 5 : $project?.authPasswordHistory;
     let passwordHistoryEnabled = ($project?.authPasswordHistory ?? 0) !== 0;
@@ -34,6 +35,14 @@
             trackError(error, Submit.AuthPasswordHistoryUpdate);
         }
     }
+
+    let maxSessionInputField: InputNumber | null = null;
+
+    $: if (passwordHistoryEnabled && maxSessionInputField) {
+        tick().then(() => {
+            maxSessionInputField.addInputFocus();
+        });
+    }
 </script>
 
 <Form onSubmit={updatePasswordHistoryLimit}>
@@ -59,6 +68,7 @@
                     min={1}
                     id="max-session"
                     label="Limit"
+                    bind:this={maxSessionInputField}
                     disabled={!passwordHistoryEnabled}
                     bind:value={passwordHistory} />
             </FormList>
diff --git a/src/routes/(console)/project-[project]/auth/security/updateUsersLimit.svelte b/src/routes/(console)/project-[project]/auth/security/updateUsersLimit.svelte
index 6f67ceae0..367216783 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateUsersLimit.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateUsersLimit.svelte
@@ -9,6 +9,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
+    import { tick } from 'svelte';
 
     let isLimited = $project?.authLimit !== 0;
     let newLimit = isLimited ? $project?.authLimit : 100;
@@ -41,6 +42,14 @@
             trackError(error, Submit.AuthLimitUpdate);
         }
     }
+
+    let maxUsersInputField: HTMLInputElement | null = null;
+
+    $: if (isLimited && maxUsersInputField) {
+        tick().then(() => {
+            maxUsersInputField.focus();
+        });
+    }
 </script>
 
 <CardGrid>
@@ -96,7 +105,8 @@
                         class="input-text"
                         max="10000"
                         disabled={!isLimited}
-                        bind:value={newLimit} />
+                        bind:value={newLimit}
+                        bind:this={maxUsersInputField} />
                 </div>
             </li>
         </ul>
diff --git a/src/routes/(console)/project-[project]/auth/templates/+page.svelte b/src/routes/(console)/project-[project]/auth/templates/+page.svelte
index 369080543..e030a535d 100644
--- a/src/routes/(console)/project-[project]/auth/templates/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/templates/+page.svelte
@@ -50,8 +50,7 @@
     // import { baseEmailTemplate, baseSmsTemplate, emailTemplate, smsTemplate } from './store';
     import { baseEmailTemplate, emailTemplate } from './store';
     import { Button } from '$lib/elements/forms';
-    import { organization } from '$lib/stores/organization';
-    import { BillingPlan } from '$lib/constants';
+    import { currentPlan } from '$lib/stores/organization';
     import EmailSignature from './emailSignature.svelte';
     import { isCloud } from '$lib/system';
     import type {
@@ -268,7 +267,7 @@
             </Collapsible>
         </svelte:fragment>
     </CardGrid>-->
-    {#if isCloud && $organization?.billingPlan === BillingPlan.FREE}
+    {#if isCloud && $currentPlan.emailBranding}
         <EmailSignature />
     {/if}
 </Container>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
index a8837be15..e4359ad0f 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
@@ -11,9 +11,9 @@
     import { addNotification, dismissAllNotifications } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
-    import { BillingPlan, Dependencies } from '$lib/constants';
+    import { Dependencies } from '$lib/constants';
     import { isCloud, isSelfHosted } from '$lib/system';
-    import { organization } from '$lib/stores/organization';
+    import { currentPlan } from '$lib/stores/organization';
     import { onMount } from 'svelte';
     import { feedback } from '$lib/stores/feedback';
     import { cronExpression, type UserBackupPolicy } from '$lib/helpers/backups';
@@ -24,19 +24,10 @@
 
     let policyCreateError: string;
     let totalPolicies: UserBackupPolicy[] = [];
-    let isDisabled = isSelfHosted || (isCloud && $organization?.billingPlan === BillingPlan.FREE);
+    let isDisabled = isSelfHosted || (isCloud && !$currentPlan.backupsEnabled);
 
     export let data: PageData;
 
-    $: hasPolicyCreationLimitations = () => {
-        // allow when on Pro and no policy exists
-        if ($organization?.billingPlan === BillingPlan.PRO) {
-            return data.policies.total > 0;
-        } else if ($organization?.billingPlan === BillingPlan.SCALE) {
-            return false;
-        }
-    };
-
     const showFeedbackNotification = () => {
         let counter = localStorage.getItem('createBackupsCounter');
         const parsedCounter = counter ? parseInt(counter, 10) : 0;
@@ -184,7 +175,8 @@
                     buttonEvent="create_backup"
                     buttonType="secondary"
                     buttonDisabled={isDisabled}
-                    hasLimitations={hasPolicyCreationLimitations()}
+                    maxPolicies={$currentPlan.backupPolicies}
+                    policiesCreated={data.policies.total}
                     buttonMethod={() => {
                         $showCreatePolicy = true;
                         trackEvent('click_policy_create');
@@ -202,7 +194,6 @@
                     buttonText="Manual backup"
                     buttonEvent="create_backup"
                     buttonType="secondary"
-                    hasLimitations={false}
                     buttonDisabled={isDisabled}
                     buttonMethod={() => {
                         $showCreateBackup = true;
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte
index a01b1c581..d289bab62 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte
@@ -4,14 +4,13 @@
     import { Pill } from '$lib/elements';
     import { wizard } from '$lib/stores/wizard';
     import SupportWizard from '$routes/(console)/supportWizard.svelte';
-    import { BillingPlan } from '$lib/constants';
-    import { organization } from '$lib/stores/organization';
 
     export let isFlex = true;
     export let title: string;
 
     export let buttonText: string = null;
-    export let hasLimitations: boolean = true;
+    export let policiesCreated: number = 0;
+    export let maxPolicies: number = 0;
     export let buttonMethod: () => void = null;
     export let buttonEvent: string = buttonText?.toLocaleLowerCase();
     export let buttonDisabled = false;
@@ -27,16 +26,16 @@
     <div class="u-flex u-cross-child-center u-cross-center u-gap-12">
         <div class="body-text-1 u-bold backups-title">{title}</div>
 
-        {#if hasLimitations && $organization.billingPlan === BillingPlan.PRO}
+        {#if title === 'Policies' && policiesCreated >= maxPolicies}
             <div style="height: 40px; padding-block-start: 4px">
                 <DropList bind:show={showDropdown} width="16">
                     <Pill button on:click={() => (showDropdown = true)}>
-                        <span class="icon-info" />1/1 created
+                        <span class="icon-info" />{policiesCreated}/{maxPolicies} created
                     </Pill>
                     <svelte:fragment slot="list">
                         <slot name="tooltip">
                             <span>
-                                You are limited to one policy on Pro plan.
+                                You are limited to {maxPolicies} policy on your plan.
                                 <button
                                     class="u-underline"
                                     on:click={() => {
@@ -52,14 +51,10 @@
         {/if}
     </div>
 
-    {#if !hasLimitations}
+    {#if title === 'Backups' || policiesCreated < maxPolicies}
         <Button
             event={buttonEvent}
-            on:click={hasLimitations
-                ? () => {
-                      showDropdown = true;
-                  }
-                : buttonMethod}
+            on:click={buttonMethod}
             disabled={buttonDisabled}
             text={buttonType === 'text'}
             secondary={buttonType === 'secondary'}>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeForm.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeForm.svelte
index 53b239306..d8b6f4354 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeForm.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeForm.svelte
@@ -29,7 +29,7 @@
                     </Pill>
                 </div>
             {:else}
-                <CustomId bind:show={showCustomId} name="Document" bind:id={customId} />
+                <CustomId autofocus bind:show={showCustomId} name="Document" bind:id={customId} />
             {/if}
         {/if}
     </ul>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
index 5c0bba01f..634de7ffa 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
@@ -2,7 +2,7 @@
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, FormList, InputSelect, InputText } from '$lib/elements/forms';
@@ -11,8 +11,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { IndexType } from '@appwrite.io/console';
     import { isRelationship } from '../document-[document]/attributes/store';
-    import { indexes, type Attributes } from '../store';
-    import { collection } from '../store';
+    import { type Attributes, collection, indexes } from '../store';
     import Select from './select.svelte';
 
     export let showCreateIndex = false;
@@ -20,8 +19,8 @@
 
     const databaseId = $page.params.database;
 
+    let key = '';
     let error: string;
-    let key = `index_${$indexes.length + 1}`;
     let types = [
         { value: IndexType.Key, label: 'Key' },
         { value: IndexType.Unique, label: 'Unique' },
@@ -38,6 +37,17 @@
 
     let attributeList = [{ value: '', order: '' }];
 
+    function generateIndexKey() {
+        let indexKeys = $indexes.map((index) => index.key);
+
+        let highestIndex = indexKeys.reduce((max, key) => {
+            const match = key.match(/^index_(\d+)$/);
+            return match ? Math.max(max, parseInt(match[1], 10)) : max;
+        }, indexKeys.length);
+
+        return `index_${highestIndex + 1}`;
+    }
+
     function initialize() {
         attributeList = externalAttribute
             ? [{ value: externalAttribute.key, order: 'ASC' }]
@@ -49,6 +59,7 @@
     $: if (showCreateIndex) {
         error = null;
         initialize();
+        key = generateIndexKey();
     }
 
     $: addAttributeDisabled = !attributeList.at(-1)?.value || !attributeList.at(-1)?.order;
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
index 26d60dc96..a6b0f3f1d 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
@@ -3,6 +3,7 @@
     import { page } from '$app/stores';
     import { showCreate } from '../store';
     import type { PageData } from './$types';
+    import { showSubNavigation } from '$lib/stores/layout';
 
     $: data = $page.data as PageData;
     $: project = $page.params.project;
@@ -24,7 +25,10 @@
     <h5 class="eyebrow-heading-3 u-padding-block-12 is-not-mobile">Collections</h5>
     <button
         class="button is-text is-full-width u-main-start u-padding-inline-0"
-        on:click={() => ($showCreate = true)}>
+        on:click={() => {
+            $showCreate = true;
+            $showSubNavigation = false;
+        }}>
         <span class="icon-plus" aria-hidden="true" />
         <span class="text">Create collection</span>
     </button>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/createCollection.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/createCollection.svelte
index 88d7e040d..26e5991d8 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/createCollection.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/createCollection.svelte
@@ -71,10 +71,10 @@
             </div>
         {:else}
             <CustomId
+                autofocus
                 bind:show={showCustomId}
                 name="Collection"
                 bind:id
-                autofocus={false}
                 fullWidth={true} />
         {/if}
     </FormList>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/cancel.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/cancel.svelte
index 77f91bca2..500e63c28 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/cancel.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/cancel.svelte
@@ -21,7 +21,7 @@
             showCancel = false;
             addNotification({
                 type: 'success',
-                message: `Deployment has been deleted`
+                message: `Deployment has been cancelled`
             });
             trackEvent(Submit.DeploymentCancel);
         } catch (error) {
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte
index efc7a48c7..4ab648d8e 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte
@@ -98,7 +98,7 @@
         >.
     </Alert>
 
-    <div class="editor-border">
+    <div class="editor-border box">
         <SecondaryTabs large class="u-sep-block-end u-padding-8">
             {#each ['Unix', 'CMD', 'PowerShell'] as cat}
                 <SecondaryTabsItem
@@ -118,6 +118,7 @@
                     withLineNumbers
                     withCopy
                     language="sh"
+                    class="cli-commands-code-box-no-outline"
                     label={codeSnippets[cat].language}
                     code={codeSnippets[cat].code} />
             {/if}
@@ -127,3 +128,22 @@
         <Button secondary on:click={() => (show = false)}>Close</Button>
     </svelte:fragment>
 </Modal>
+
+<style>
+    .box {
+        padding: unset;
+        background-color: unset;
+    }
+
+    .editor-border :global(.cli-commands-code-box-no-outline) {
+        margin: 1rem 0;
+        border: unset;
+        border-radius: unset;
+        background-color: unset;
+        padding: 0 var(--box-padding, 1.5rem) 0 var(--box-padding, 1.5rem);
+    }
+
+    :global(.editor-border .cli-commands-code-box-no-outline pre) {
+        background-color: unset;
+    }
+</style>
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 73a3e73df..734e4f306 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
@@ -25,6 +25,9 @@
     let showCancel = false;
     let showActivate = false;
 
+    let enableScrollButton = false;
+    let codePanelContent: HTMLElement;
+
     function handleActivate() {
         invalidate(Dependencies.DEPLOYMENTS);
     }
@@ -36,23 +39,41 @@
         );
     }
 
+    function handleScroll() {
+        const threshold = codePanelContent.clientHeight * 0.25;
+        enableScrollButton = codePanelContent.scrollTop > threshold;
+    }
+
     onMount(() => {
         logs = $deployment.buildLogs;
+
+        codePanelContent = document.querySelector('.code-panel-content');
+        codePanelContent.addEventListener('scroll', handleScroll);
+
         if ($deployment.status === 'ready') {
             return;
         }
-        return sdk.forConsole.client.subscribe<Models.Deployment>('console', (message) => {
-            if (
-                message.events.includes(
-                    `functions.${$page.params.function}.deployments.${$page.params.deployment}.update`
-                )
-            ) {
-                logs = message.payload['logs'];
-                if (message.payload.status === 'ready') {
-                    invalidate(Dependencies.DEPLOYMENT);
+
+        const unsubscribe = sdk.forConsole.client.subscribe<Models.Deployment>(
+            'console',
+            (message) => {
+                if (
+                    message.events.includes(
+                        `functions.${$page.params.function}.deployments.${$page.params.deployment}.update`
+                    )
+                ) {
+                    logs = message.payload['logs'];
+                    if (message.payload.status === 'ready') {
+                        invalidate(Dependencies.DEPLOYMENT);
+                    }
                 }
             }
-        });
+        );
+
+        return () => {
+            unsubscribe();
+            codePanelContent.removeEventListener('scroll', handleScroll);
+        };
     });
 </script>
 
@@ -103,7 +124,8 @@
                             <span class="icon-external-link" aria-hidden="true" /> Raw data</Button> -->
                     <Button
                         secondary
-                        on:click={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
+                        disabled={!enableScrollButton}
+                        on:click={() => codePanelContent?.scrollTo({ top: 0, behavior: 'smooth' })}>
                         <span class="icon-arrow-sm-up" aria-hidden="true" /> Scroll to top</Button>
                 </div>
             </header>
@@ -135,3 +157,15 @@
 <Delete selectedDeployment={$deployment} bind:showDelete />
 <Cancel selectedDeployment={$deployment} bind:showCancel />
 <Activate selectedDeployment={$deployment} bind:showActivate on:activated={handleActivate} />
+
+<style>
+    @media (max-width: 768px) {
+        .code-panel-header {
+            flex-direction: column;
+        }
+    }
+
+    .code-panel-content {
+        max-height: 50vh;
+    }
+</style>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/deploymentSource.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/deploymentSource.svelte
index 0c5b765de..c81332f21 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/deploymentSource.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/deploymentSource.svelte
@@ -15,17 +15,35 @@
             <span class="icon-github" aria-hidden="true" /> <span class="link">GitHub</span>
         </button>
         <svelte:fragment slot="list">
-            <DropListLink href={deployment.providerRepositoryUrl} external icon="github">
-                {deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
+            <DropListLink
+                href={deployment.providerRepositoryUrl}
+                external
+                icon="github"
+                iconStyle="font-size:20px">
+                <Trim alternativeTrim>
+                    <span style:white-space="pre-wrap">
+                        {deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
+                    </span>
+                </Trim>
             </DropListLink>
-            <DropListLink href={deployment.providerBranchUrl} external icon="git-branch">
+            <DropListLink
+                href={deployment.providerBranchUrl}
+                external
+                icon="git-branch"
+                iconStyle="font-size:20px">
                 {deployment.providerBranch}
             </DropListLink>
             {#if deployment?.providerCommitMessage && deployment?.providerCommitHash && deployment?.providerCommitUrl}
-                <DropListLink href={deployment.providerCommitUrl} external icon="git-commit">
+                <DropListLink
+                    href={deployment.providerCommitUrl}
+                    external
+                    icon="git-commit"
+                    iconStyle="font-size:20px">
                     <Trim alternativeTrim>
-                        {deployment?.providerCommitHash?.substring(0, 7)}
-                        {deployment.providerCommitMessage}
+                        <span style="white-space: pre-wrap">
+                            {deployment?.providerCommitHash?.substring(0, 7)}
+                            {deployment.providerCommitMessage}
+                        </span>
                     </Trim>
                 </DropListLink>
             {/if}
diff --git a/src/routes/(console)/project-[project]/functions/templates/+page.svelte b/src/routes/(console)/project-[project]/functions/templates/+page.svelte
index 3ba5404c2..5d5af964e 100644
--- a/src/routes/(console)/project-[project]/functions/templates/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/templates/+page.svelte
@@ -21,6 +21,7 @@
     import type { Models } from '@appwrite.io/console';
     import { functionsList } from '../store';
     import { debounce } from '$lib/helpers/debounce';
+    import { capitalize } from '$lib/helpers/string';
 
     export let data;
 
@@ -148,7 +149,7 @@
                                             class="is-small"
                                             checked={isChecked(useCase)}
                                             on:change={(e) => applyFilter('useCase', useCase, e)} />
-                                        <span class="u-trim-1">{useCase}</span>
+                                        <span class="u-trim-1">{capitalize(useCase)}</span>
                                     </label>
                                 </li>
                             {/each}
@@ -168,7 +169,8 @@
                                                 .getAll('runtime')
                                                 .includes(runtime)}
                                             on:change={(e) => applyFilter('runtime', runtime, e)} />
-                                        <div class="u-flex u-cross-center u-gap-8">
+                                        <div
+                                            class="u-flex u-cross-center u-gap-8 functions-avatar-holder">
                                             <div class="avatar is-size-x-small">
                                                 <SvgIcon name={icon} iconSize="small" />
                                             </div>
@@ -207,14 +209,16 @@
                         <li>
                             <article class="card u-min-height-100-percent">
                                 <div class="u-flex u-gap-16 u-cross-center u-main-space-between">
-                                    <h2 class="body-text-1 u-bold u-trim-1">
+                                    <h2
+                                        class="body-text-1 u-bold u-trim-1 functions-template-title">
                                         {template.name}
                                     </h2>
                                     <ul class="avatars-group is-with-border">
                                         {#each displayed as runtime}
                                             {@const icon = getIconFromRuntime(runtime.name)}
                                             {#if icon}
-                                                <li class="avatars-group-item">
+                                                <li
+                                                    class="avatars-group-item functions-avatar-holder">
                                                     <div class="avatar is-size-small">
                                                         <img
                                                             style:--p-text-size="20px"
@@ -227,7 +231,7 @@
                                             {/if}
                                         {/each}
                                         {#if hidden.length}
-                                            <li class="avatars-group-item">
+                                            <li class="avatars-group-item functions-avatar-holder">
                                                 <div
                                                     class="avatar is-size-small"
                                                     use:tooltip={{
@@ -287,3 +291,18 @@
         </section>
     </div>
 </Container>
+
+<style>
+    :global(.theme-light .functions-avatar-holder .avatar) {
+        background-color: var(--p-avatar-bg-color-default);
+        --p-avatar-bg-color-default: hsl(var(--color-neutral-0));
+    }
+
+    :global(.theme-light .functions-template-title) {
+        color: hsl(var(--color-neutral-70));
+    }
+
+    :global(.theme-dark .functions-template-title) {
+        color: hsl(var(--color-neutral-15));
+    }
+</style>
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 1137cf318..e07244345 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
@@ -22,9 +22,10 @@
     <div class="grid-300px-1fr">
         <section>
             <Collapsible>
-                <li class="collapsible-item">
-                    <h3 class="body-text-2 u-bold u-padding-block-12">
-                        Use cases <span class="inline-tag">{$template.useCases.length}</span>
+                <li class="collapsible-item-divider collapsible-item">
+                    <h3 class="u-flex u-gap-16 body-text-2 u-bold u-padding-block-12">
+                        Use cases
+                        <span class="inline-tag">{$template.useCases.length}</span>
                     </h3>
                     <div class="collapsible-content u-flex u-flex-wrap u-gap-8">
                         {#each $template.useCases as useCase}
@@ -32,9 +33,10 @@
                         {/each}
                     </div>
                 </li>
-                <li class="collapsible-item">
-                    <h3 class="body-text-2 u-bold u-padding-block-12">
-                        Runtimes <span class="inline-tag">{$template.runtimes.length}</span>
+                <li class="collapsible-item-divider collapsible-item">
+                    <h3 class="u-flex u-gap-16 body-text-2 u-bold u-padding-block-12">
+                        Runtimes
+                        <span class="inline-tag">{$template.runtimes.length}</span>
                     </h3>
                     <div class="collapsible-content u-flex u-flex-wrap u-gap-8">
                         {#each $template.runtimes as runtime}
@@ -42,12 +44,12 @@
                         {/each}
                     </div>
                 </li>
-                <li class="collapsible-item">
+                <li class="collapsible-item-divider collapsible-item">
                     <section class="card u-margin-block-start-24">
                         <h4 class="body-text-1 u-bold">Published by</h4>
                         <img
                             class="u-margin-block-start-8"
-                            src={$app.themeInUse == 'dark' ? AppwriteLogoDark : AppwriteLogoLight}
+                            src={$app.themeInUse === 'dark' ? AppwriteLogoDark : AppwriteLogoLight}
                             width="120"
                             height="22"
                             alt="Appwrite" />
@@ -58,7 +60,7 @@
         <section>
             <Card>
                 <Heading size="7" tag="h3">
-                    <span class="u-flex u-cross-center u-gap-8">
+                    <span class="u-flex u-cross-center u-gap-16 functions-avatar-holder">
                         <div class="avatar is-size-small">
                             <span
                                 style:--p-text-size="20px"
@@ -92,3 +94,13 @@
         </section>
     </div>
 </Container>
+
+<style>
+    :global(.theme-dark .collapsible-item-divider:where(:not(:last-child))) {
+        border-block-end: solid 0.0625rem hsl(var(--color-neutral-85));
+    }
+
+    :global(.theme-light .collapsible-item-divider:where(:not(:last-child))) {
+        border-block-end: solid 0.0625rem hsl(var(--color-neutral-10));
+    }
+</style>
diff --git a/src/routes/(console)/project-[project]/functions/wizard/step1.svelte b/src/routes/(console)/project-[project]/functions/wizard/step1.svelte
index 26b97c118..d8c08dd1e 100644
--- a/src/routes/(console)/project-[project]/functions/wizard/step1.svelte
+++ b/src/routes/(console)/project-[project]/functions/wizard/step1.svelte
@@ -52,6 +52,7 @@
             </div>
         {:else}
             <CustomId
+                autofocus
                 bind:show={showCustomId}
                 name="Function"
                 bind:id={$createFunction.id}
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 6fcaad6d4..fc897c398 100644
--- a/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte
+++ b/src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte
@@ -63,7 +63,7 @@
 </script>
 
 <Form onSubmit={update}>
-    <CardGrid hideFooter={message.status != 'draft'}>
+    <CardGrid hideFooter={message.status !== 'draft'}>
         <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
             <Heading tag="h6" size="7">Message</Heading>
         </div>
@@ -72,12 +72,12 @@
                 <InputText
                     id="subject"
                     label="Subject"
-                    disabled={message.status != 'draft'}
+                    disabled={message.status !== 'draft'}
                     bind:value={subject}></InputText>
                 <InputTextarea
                     id="message"
                     label="Message"
-                    disabled={message.status != 'draft'}
+                    disabled={message.status !== 'draft'}
                     bind:value={content}></InputTextarea>
                 <InputSwitch label="HTML mode" id="html" bind:value={html}>
                     <svelte:fragment slot="description">
diff --git a/src/routes/(console)/project-[project]/messaging/topics/create.svelte b/src/routes/(console)/project-[project]/messaging/topics/create.svelte
index 6ec708a0b..944d51447 100644
--- a/src/routes/(console)/project-[project]/messaging/topics/create.svelte
+++ b/src/routes/(console)/project-[project]/messaging/topics/create.svelte
@@ -58,7 +58,7 @@
                 </Pill>
             </div>
         {:else}
-            <CustomId bind:show={showCustomId} name="Topic" bind:id />
+            <CustomId autofocus bind:show={showCustomId} name="Topic" bind:id />
         {/if}
     </FormList>
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/project-[project]/messaging/topicsModal.svelte b/src/routes/(console)/project-[project]/messaging/topicsModal.svelte
index a2aad2b57..9c1e7e218 100644
--- a/src/routes/(console)/project-[project]/messaging/topicsModal.svelte
+++ b/src/routes/(console)/project-[project]/messaging/topicsModal.svelte
@@ -3,7 +3,7 @@
     import { Button, FormList, InputCheckbox, InputSearch } from '$lib/elements/forms';
     import { Table, TableBody, TableCell, TableRow } from '$lib/elements/table';
     import { sdk } from '$lib/stores/sdk';
-    import { Query, type Models, MessagingProviderType } from '@appwrite.io/console';
+    import { MessagingProviderType, type Models, Query } from '@appwrite.io/console';
     import { createEventDispatcher } from 'svelte';
     import { getTotal } from './wizard/store';
     import ProviderType from './providerType.svelte';
@@ -22,6 +22,8 @@
     let selected: Record<string, Models.Topic> = {};
     let hasSelection = false;
 
+    let emptyTopicsExists = false;
+
     function reset() {
         offset = 0;
         search = '';
@@ -36,16 +38,22 @@
         if (!show) return;
         const queries = [Query.limit(5), Query.offset(offset)];
 
-        if (providerType === MessagingProviderType.Email) {
-            queries.push(Query.greaterThan('emailTotal', 0));
-        } else if (providerType === MessagingProviderType.Sms) {
-            queries.push(Query.greaterThan('smsTotal', 0));
-        } else if (providerType === MessagingProviderType.Push) {
-            queries.push(Query.greaterThan('pushTotal', 0));
-        }
-
         const response = await sdk.forProject.messaging.listTopics(queries, search || undefined);
 
+        if (response.total !== 0) {
+            switch (providerType) {
+                case MessagingProviderType.Email:
+                    emptyTopicsExists = response.topics.every((topic) => topic.emailTotal === 0);
+                    break;
+                case MessagingProviderType.Sms:
+                    emptyTopicsExists = response.topics.every((topic) => topic.smsTotal === 0);
+                    break;
+                case MessagingProviderType.Push:
+                    emptyTopicsExists = response.topics.every((topic) => topic.pushTotal === 0);
+                    break;
+            }
+        }
+
         totalResults = response.total;
         topicResultsById = {};
         response.topics.forEach((topic) => {
@@ -94,7 +102,9 @@
     <div class="u-flex u-flex-vertical u-gap-32">
         <p class="text">
             Select existing topics you want to send this message to its targets. The message will be
-            sent only to <ProviderType type={providerType} noIcon /> targets.
+            sent only to
+            <ProviderType type={providerType} noIcon />
+            targets.
         </p>
         <div class="u-flex u-flex-vertical u-gap-16">
             <InputSearch
@@ -103,7 +113,7 @@
                 placeholder="Search for topics"
                 bind:value={search} />
             <div>
-                {#if Object.keys(topicResultsById).length > 0}
+                {#if Object.keys(topicResultsById).length > 0 && !emptyTopicsExists}
                     <div class="u-flex-vertical u-gap-8">
                         <FormList>
                             <Table noMargin noStyles>
@@ -155,9 +165,12 @@
                                 <Button
                                     external
                                     href="https://appwrite.io/docs/products/messaging/topics"
-                                    text>Documentation</Button>
+                                    text
+                                    >Documentation
+                                </Button>
                                 <Button secondary on:click={() => (search = '')}
-                                    >Clear search</Button>
+                                    >Clear search
+                                </Button>
                             </div>
                         </div>
                     </EmptySearch>
@@ -166,15 +179,19 @@
                         <div class="common-section">
                             <div class="u-text-center common-section">
                                 <p class="text u-line-height-1-5">
-                                    You have no topics. Create a topic to see them here.
+                                    You have no topics{emptyTopicsExists
+                                        ? ` with ${providerType.toUpperCase()} targets`
+                                        : ''}. Create a topic to see them here.
                                 </p>
                                 <p class="text u-line-height-1-5">
-                                    Need a hand? Learn more in our <Button
+                                    Need a hand? Learn more in our
+                                    <Button
                                         link
                                         external
                                         href="https://appwrite.io/docs/products/messaging/topics"
-                                        >documentation</Button
-                                    >.
+                                        >documentation
+                                    </Button>
+                                    .
                                 </p>
                             </div>
                         </div>
diff --git a/src/routes/(console)/project-[project]/messaging/wizard/emailFormList.svelte b/src/routes/(console)/project-[project]/messaging/wizard/emailFormList.svelte
index 693d209fb..b4568b02d 100644
--- a/src/routes/(console)/project-[project]/messaging/wizard/emailFormList.svelte
+++ b/src/routes/(console)/project-[project]/messaging/wizard/emailFormList.svelte
@@ -10,7 +10,7 @@
         InputTextarea
     } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
-    import { Modal } from '$lib/components';
+    import { CustomId, Modal } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { ID, MessagingProviderType } from '@appwrite.io/console';
@@ -113,5 +113,12 @@
                     Message ID
                 </span></Pill>
         </div>
+    {:else}
+        <CustomId
+            autofocus
+            bind:show={showCustomId}
+            name="Message"
+            bind:id={$messageParams[$providerType].messageId}
+            fullWidth />
     {/if}
 </FormList>
diff --git a/src/routes/(console)/project-[project]/messaging/wizard/pushFormList.svelte b/src/routes/(console)/project-[project]/messaging/wizard/pushFormList.svelte
index dc8a5b02a..3316183d1 100644
--- a/src/routes/(console)/project-[project]/messaging/wizard/pushFormList.svelte
+++ b/src/routes/(console)/project-[project]/messaging/wizard/pushFormList.svelte
@@ -38,7 +38,7 @@
         Label
     } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
-    import { Modal } from '$lib/components';
+    import { CustomId, Modal } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { ID, MessagingProviderType } from '@appwrite.io/console';
@@ -232,6 +232,13 @@
                         Message ID
                     </span></Pill>
             </div>
+        {:else}
+            <CustomId
+                autofocus
+                bind:show={showCustomId}
+                name="Message"
+                bind:id={$messageParams[$providerType].messageId}
+                fullWidth />
         {/if}
     </FormList>
     <PushPhone
diff --git a/src/routes/(console)/project-[project]/messaging/wizard/smsFormList.svelte b/src/routes/(console)/project-[project]/messaging/wizard/smsFormList.svelte
index 9b315caa1..091b8f3fb 100644
--- a/src/routes/(console)/project-[project]/messaging/wizard/smsFormList.svelte
+++ b/src/routes/(console)/project-[project]/messaging/wizard/smsFormList.svelte
@@ -2,7 +2,7 @@
     import { messageParams, providerType } from './store';
     import { Button, FormList, InputEmail, InputRadio, InputTextarea } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
-    import { Modal } from '$lib/components';
+    import { CustomId, Modal } from '$lib/components';
     import { user } from '$lib/stores/user';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { ID, MessagingProviderType } from '@appwrite.io/console';
@@ -91,6 +91,13 @@
                         Message ID
                     </span></Pill>
             </div>
+        {:else}
+            <CustomId
+                autofocus
+                bind:show={showCustomId}
+                name="Message"
+                bind:id={$messageParams[$providerType].messageId}
+                fullWidth />
         {/if}
     </FormList>
     <SMSPhone content={$messageParams[$providerType]['content']} classes="is-only-desktop" />
diff --git a/src/routes/(console)/project-[project]/settings/GitDisconnectModal.svelte b/src/routes/(console)/project-[project]/settings/GitDisconnectModal.svelte
index b414f37bd..fa12b9e3b 100644
--- a/src/routes/(console)/project-[project]/settings/GitDisconnectModal.svelte
+++ b/src/routes/(console)/project-[project]/settings/GitDisconnectModal.svelte
@@ -51,11 +51,6 @@
     bind:show={showGitDisconnect}
     onSubmit={handleSubmit}
     size="big">
-    <p>
-        Are you sure you want to disconnect this git installation? This will affect future
-        deployments to the following functions:
-    </p>
-
     {#await loadFunctions()}
         <div class="u-flex u-main-center">
             <div class="avatar is-size-x-small">
@@ -64,6 +59,10 @@
         </div>
     {:then functions}
         {#if functions.total}
+            <p>
+                Are you sure you want to disconnect this git installation? This will affect future
+                deployments to the following functions:
+            </p>
             <div class="u-flex u-flex-vertical u-gap-12">
                 {#each functions.functions as func}
                     <div class="u-flex u-main-start u-gap-8">
@@ -73,7 +72,9 @@
                         <div
                             class="u-cross-child-center u-flex u-main-space-between u-flex-wrap u-gap-8 u-width-full-line">
                             <h6>{func.name}</h6>
-                            <p class="u-x-small" style="color: hsl(var(--color-neutral-70));">
+                            <p
+                                class="u-x-small u-cross-child-center"
+                                style="color: hsl(var(--color-neutral-70));">
                                 Last deployed: {toLocaleDateTime(func.$updatedAt)}
                             </p>
                         </div>
diff --git a/src/routes/(console)/project-[project]/settings/GitInstallationModal.svelte b/src/routes/(console)/project-[project]/settings/GitInstallationModal.svelte
index 06e4fcae6..c846ff6a7 100644
--- a/src/routes/(console)/project-[project]/settings/GitInstallationModal.svelte
+++ b/src/routes/(console)/project-[project]/settings/GitInstallationModal.svelte
@@ -19,7 +19,7 @@
 </script>
 
 <Modal title="Install" headerDivider={false} bind:show={showGitInstall} size="big">
-    <p>Select a provider to import an existing git repositories.</p>
+    <p>Select a provider to import an existing git repository.</p>
 
     <div class="u-flex u-cross-center u-flex-vertical u-gap-16">
         <Button href={connectGitHub().toString()} fullWidth secondary>
diff --git a/src/routes/(console)/project-[project]/settings/updateInstallations.svelte b/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
index aaabb6fba..690a1da2b 100644
--- a/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
+++ b/src/routes/(console)/project-[project]/settings/updateInstallations.svelte
@@ -3,6 +3,7 @@
     import { page } from '$app/stores';
     import {
         Alert,
+        Arrow,
         AvatarGroup,
         CardGrid,
         DropList,
@@ -89,7 +90,7 @@
     <svelte:fragment slot="aside">
         {#if total > 0}
             <div>
-                <div class="u-flex u-flex-vertical-mobile u-main-end">
+                <div class="u-flex u-flex-vertical-mobile u-main-end u-padding-block-end-16">
                     <ul class="buttons-list">
                         <li class="buttons-list-item">
                             <Button secondary on:click={() => (showGitIstall = true)}>
@@ -100,77 +101,81 @@
                     </ul>
                 </div>
 
-                <Table noMargin noStyles>
-                    <TableHeader>
-                        <TableCellHead width={150}>Installation ID</TableCellHead>
-                        <TableCellHead>Repository</TableCellHead>
-                        <TableCellHead>Updated</TableCellHead>
-                        <TableCellHead width={40} />
-                    </TableHeader>
-                    <TableBody>
-                        {#each installations as installation, i}
-                            <TableRow>
-                                <TableCell title="installations">
-                                    <Id value={installation.$id}>{installation.$id}</Id>
-                                </TableCell>
-                                <TableCell title="repository">
-                                    <div class="u-flex u-gap-8 u-cross-center">
-                                        <div class="avatar is-size-small">
-                                            <span
-                                                class={getProviderIcon(installation.provider)}
-                                                style="font-size: var(--icon-size-medium)!important" />
+                <div style="overflow: auto">
+                    <Table noMargin noStyles isAutoLayout>
+                        <TableHeader>
+                            <TableCellHead width={150}>Installation ID</TableCellHead>
+                            <TableCellHead>Repository</TableCellHead>
+                            <TableCellHead>Updated</TableCellHead>
+                            <TableCellHead width={40} />
+                        </TableHeader>
+                        <TableBody>
+                            {#each installations as installation, i}
+                                <TableRow>
+                                    <TableCell title="installations">
+                                        <Id value={installation.$id}>{installation.$id}</Id>
+                                    </TableCell>
+                                    <TableCell title="repository">
+                                        <div class="u-flex u-gap-8 u-cross-center">
+                                            <div class="avatar is-size-small">
+                                                <span
+                                                    class={getProviderIcon(installation.provider)}
+                                                    style="font-size: var(--icon-size-medium)!important" />
+                                            </div>
+                                            <a
+                                                href={getInstallationLink(installation)}
+                                                target="_blank"
+                                                class="u-flex u-gap-4 u-cross-center">
+                                                <span>{installation.organization}</span><span
+                                                    style="font-size: 1rem; color: hsl(var(--color-neutral-70));"
+                                                    class="icon-external-link" /></a>
                                         </div>
-                                        <a
-                                            href={getInstallationLink(installation)}
-                                            target="_blank"
-                                            class="u-flex u-gap-4 u-cross-center">
-                                            <span>{installation.organization}</span><span
-                                                style="font-size: 1rem; color: hsl(var(--color-neutral-70));"
-                                                class="icon-external-link" /></a>
-                                    </div>
-                                </TableCell>
-                                <TableCellText title="updated">
-                                    {dayjs().to(installation.$updatedAt)}
-                                </TableCellText>
+                                    </TableCell>
+                                    <TableCellText title="updated">
+                                        {dayjs().to(installation.$updatedAt)}
+                                    </TableCellText>
 
-                                <TableCell>
-                                    <DropList
-                                        bind:show={showInstallationDropdown[i]}
-                                        placement="bottom-start"
-                                        noArrow>
-                                        <button
-                                            class="button is-text is-only-icon"
-                                            aria-label="more options"
-                                            on:click|preventDefault={() =>
-                                                (showInstallationDropdown[i] =
-                                                    !showInstallationDropdown[i])}>
-                                            <span class="icon-dots-horizontal" aria-hidden="true" />
-                                        </button>
-                                        <svelte:fragment slot="list">
-                                            <DropListLink
-                                                href={configureGitHub()}
-                                                icon="external-link"
-                                                on:click={() => {
-                                                    showInstallationDropdown[i] = false;
-                                                }}>
-                                                Configure
-                                            </DropListLink>
-                                            <DropListItem
-                                                icon="x-circle"
-                                                on:click={async () => {
-                                                    showInstallationDropdown[i] = false;
-                                                    showGitDisconnect = true;
-                                                    selectedInstallation = installation;
-                                                }}>
-                                                Disconnect
-                                            </DropListItem>
-                                        </svelte:fragment>
-                                    </DropList>
-                                </TableCell>
-                            </TableRow>
-                        {/each}
-                    </TableBody>
-                </Table>
+                                    <TableCell>
+                                        <DropList
+                                            bind:show={showInstallationDropdown[i]}
+                                            placement="bottom-start"
+                                            noArrow>
+                                            <button
+                                                class="button is-text is-only-icon"
+                                                aria-label="more options"
+                                                on:click|preventDefault={() =>
+                                                    (showInstallationDropdown[i] =
+                                                        !showInstallationDropdown[i])}>
+                                                <span
+                                                    class="icon-dots-horizontal"
+                                                    aria-hidden="true" />
+                                            </button>
+                                            <svelte:fragment slot="list">
+                                                <DropListLink
+                                                    href={configureGitHub()}
+                                                    icon="external-link"
+                                                    on:click={() => {
+                                                        showInstallationDropdown[i] = false;
+                                                    }}>
+                                                    Configure
+                                                </DropListLink>
+                                                <DropListItem
+                                                    icon="x-circle"
+                                                    on:click={async () => {
+                                                        showInstallationDropdown[i] = false;
+                                                        showGitDisconnect = true;
+                                                        selectedInstallation = installation;
+                                                    }}>
+                                                    Disconnect
+                                                </DropListItem>
+                                            </svelte:fragment>
+                                        </DropList>
+                                    </TableCell>
+                                </TableRow>
+                            {/each}
+                        </TableBody>
+                    </Table>
+                </div>
             </div>
             <div class="u-flex u-main-space-between">
                 <p class="text">Total installations: {total}</p>
@@ -201,8 +206,12 @@
             <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 bordered icons={['github', 'gitlab', 'bitBucket', 'azure']} />
-                        <span class="icon-arrow-narrow-down" />
+                        <AvatarGroup
+                            class="git-installation-avatar-group"
+                            bordered
+                            icons={['github', 'gitlab', 'bitBucket', 'azure']} />
+
+                        <Arrow direction="down" />
 
                         <div class="avatar"><SvgIcon name="appwrite" type="color" size={80} /></div>
                     </div>
@@ -225,3 +234,9 @@
 {#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>
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
index ff4c02639..8c848afd7 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
@@ -62,7 +62,7 @@
             </div>
         {:else}
             <div class="custom-id-wrapper">
-                <CustomId bind:show={showCustomId} name="File" bind:id={$createFile.id} />
+                <CustomId autofocus bind:show={showCustomId} name="File" bind:id={$createFile.id} />
             </div>
         {/if}
     </FormList>
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
index a345f525d..9509002bd 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte
@@ -16,6 +16,11 @@
     const service = currentPlan['fileSize'];
     const { value, unit, baseValue, units } = createByteUnitPair($bucket.maximumFileSize, 1000);
     const options = units.map((v) => ({ label: v.name, value: v.name }));
+    $: selectedUnit = $unit;
+
+    $: maxValue = function formMaxFileSize() {
+        return (service * 1000 * 1000) / units.find((unit) => unit.name === selectedUnit).value;
+    };
 
     function updateMaxSize() {
         updateBucket(
@@ -64,7 +69,7 @@
                     disabled={$readOnly && !GRACE_PERIOD_OVERRIDE}
                     placeholder={$bucket.maximumFileSize.toString()}
                     min={0}
-                    max={isCloud ? service : Infinity}
+                    max={isCloud ? maxValue() : Infinity}
                     bind:value={$value} />
                 <InputSelect
                     id="bytes"
diff --git a/src/routes/(console)/project-[project]/storage/create.svelte b/src/routes/(console)/project-[project]/storage/create.svelte
index a8b4643d4..c2b128226 100644
--- a/src/routes/(console)/project-[project]/storage/create.svelte
+++ b/src/routes/(console)/project-[project]/storage/create.svelte
@@ -63,7 +63,7 @@
                 </Pill>
             </div>
         {:else}
-            <CustomId bind:show={showCustomId} name="Bucket" bind:id />
+            <CustomId autofocus bind:show={showCustomId} name="Bucket" bind:id />
         {/if}
     </FormList>
     <svelte:fragment slot="footer">