diff --git a/package.json b/package.json
index ce2d7da70..638bcd604 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,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"
     },
@@ -56,6 +57,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 aa8b54e57..f029caae5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,6 +71,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)
@@ -114,6 +117,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.7.2))(eslint@8.57.1)(typescript@5.7.2)
@@ -1382,6 +1388,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==}
 
@@ -1620,6 +1629,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'}
@@ -3196,6 +3208,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'}
@@ -5357,6 +5374,8 @@ snapshots:
 
   '@types/pug@2.0.10': {}
 
+  '@types/remarkable@2.0.8': {}
+
   '@types/shimmer@1.2.0': {}
 
   '@types/stack-utils@2.0.3': {}
@@ -5653,6 +5672,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
@@ -7459,6 +7482,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 29e5aa86c..6e5dd2b8e 100644
--- a/src/lib/components/collapsibleItem.svelte
+++ b/src/lib/components/collapsibleItem.svelte
@@ -57,9 +57,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/migrationBox.svelte b/src/lib/components/migrationBox.svelte
index 09fd2c86f..9be9e2c48 100644
--- a/src/lib/components/migrationBox.svelte
+++ b/src/lib/components/migrationBox.svelte
@@ -73,7 +73,7 @@
             </button>
         </header>
         <div class="upload-box-content is-open">
-            <section class="progress-bar">
+            <section class="progress-bar u-padding-inline-16 u-padding-block-16">
                 <div class="progress-bar-top-line u-flex u-gap-8 u-main-space-between">
                     <span>{percentage}%</span>
                 </div>
diff --git a/src/lib/components/support.svelte b/src/lib/components/support.svelte
index 2b893fa8d..2fc7a5a7e 100644
--- a/src/lib/components/support.svelte
+++ b/src/lib/components/support.svelte
@@ -5,17 +5,14 @@
     import SupportWizard from '$routes/(console)/supportWizard.svelte';
     import { showSupportModal } from '$routes/(console)/wizard/support/store';
     import { isCloud } from '$lib/system';
-    import { organization } from '$lib/stores/organization';
-    import { BillingPlan } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
     import { localeTimezoneName, utcHourToLocaleHour } from '$lib/helpers/date';
     import { upgradeURL } from '$lib/stores/billing';
+    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')} ${localeTimezoneName()}`;
 </script>
@@ -24,13 +21,13 @@
     <section class="drop-section u-grid u-gap-24 u-padding-24">
         <div>
             <h4 class="eyebrow-heading-3">Premium support</h4>
-            {#if isPaid}
+            {#if hasPremiumSupport}
                 <p class="u-line-height-1-5 u-margin-block-start-8">
                     Get personalized support from the Appwrite team from <b>{supportTimings}</b>
                 </p>
             {/if}
         </div>
-        {#if $organization?.billingPlan === BillingPlan.FREE}
+        {#if !hasPremiumSupport}
             <Button
                 fullWidth
                 href={$upgradeURL}
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index cd5e30526..80e7a7401 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -21,6 +21,18 @@
 
     let error: string;
 
+    onMount(() => {
+        if (autofocus) {
+            addInputFocus();
+        }
+    });
+
+    export function addInputFocus() {
+        if (element) {
+            element.focus();
+        }
+    }
+
     const handleInvalid = (event: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
         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 d48428f03..b0db46129 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 9405454a9..af1a5c4ec 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 8c2c1c91a..8788b50cc 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)/account/payments/billingAddress.svelte b/src/routes/(console)/account/payments/billingAddress.svelte
index b19e78bac..fb58919bc 100644
--- a/src/routes/(console)/account/payments/billingAddress.svelte
+++ b/src/routes/(console)/account/payments/billingAddress.svelte
@@ -91,7 +91,7 @@
                                                 {#each linkedOrgs as org}
                                                     <a
                                                         class="u-underline u-trim"
-                                                        href={`${base}/console/organization-${org.$id}/billing`}>
+                                                        href={`${base}/organization-${org.$id}/billing`}>
                                                         {org.name}
                                                     </a>
                                                 {/each}
diff --git a/src/routes/(console)/account/payments/paymentMethods.svelte b/src/routes/(console)/account/payments/paymentMethods.svelte
index 07189fce8..bf92576cb 100644
--- a/src/routes/(console)/account/payments/paymentMethods.svelte
+++ b/src/routes/(console)/account/payments/paymentMethods.svelte
@@ -87,7 +87,7 @@
                                                         {#each linkedOrgs as org}
                                                             <a
                                                                 class="u-underline u-trim"
-                                                                href={`${base}/console/organization-${org.$id}/billing`}>
+                                                                href={`${base}/organization-${org.$id}/billing`}>
                                                                 {org.name}
                                                             </a>
                                                         {/each}
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)/bottomAlerts.ts b/src/routes/(console)/bottomAlerts.ts
index aa4c0ba22..fa3e2d508 100644
--- a/src/routes/(console)/bottomAlerts.ts
+++ b/src/routes/(console)/bottomAlerts.ts
@@ -3,9 +3,12 @@ import BackupsDark from '$lib/images/backups/promo/backups-dark.png';
 import BackupsLight from '$lib/images/backups/promo/backups-light.png';
 
 import { type BottomModalAlertItem, showBottomModalAlert } from '$lib/stores/bottom-alerts';
+import { isCloud } from '$lib/system';
 
-const listOfPromotions: BottomModalAlertItem[] = [
-    {
+const listOfPromotions: BottomModalAlertItem[] = [];
+
+if (isCloud) {
+    listOfPromotions.push({
         id: 'modal:databaseBackups',
         src: {
             dark: BackupsDark,
@@ -24,8 +27,8 @@ const listOfPromotions: BottomModalAlertItem[] = [
             text: 'Learn more',
             link: () => 'http://appwrite.io/docs/products/databases/backups'
         }
-    }
-];
+    });
+}
 
 export function addBottomModalAlerts() {
     listOfPromotions.forEach((promotion) => showBottomModalAlert(promotion));
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 a0b0d4166..d75261d43 100644
--- a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
@@ -18,15 +18,15 @@
     export let currentPlan: Plan;
     export let creditList: CreditList;
 
-    const currentInvoice: Invoice = invoices[0];
+    const currentInvoice: Invoice | undefined = invoices.length > 0 ? invoices[0] : undefined;
     const extraMembers = members.total > 1 ? members.total - 1 : 0;
     const availableCredit = creditList.available;
     const today = new Date();
     const isTrial =
         new Date($organization?.billingStartDate).getTime() - today.getTime() > 0 &&
         $plansInfo.get($organization.billingPlan)?.trialDays;
-    const extraUsage = currentInvoice.amount - currentPlan?.price;
-    const extraAddons = currentInvoice.usage?.length;
+    const extraUsage = currentInvoice ? currentInvoice.amount - currentPlan?.price : 0;
+    const extraAddons = currentInvoice ? currentInvoice.usage?.length : 0;
 </script>
 
 {#if $organization}
@@ -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]/createMember.svelte b/src/routes/(console)/organization-[organization]/createMember.svelte
index 705926f5d..683501c13 100644
--- a/src/routes/(console)/organization-[organization]/createMember.svelte
+++ b/src/routes/(console)/organization-[organization]/createMember.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Alert, Modal } from '$lib/components';
+    import { Modal } from '$lib/components';
     import { InputText, InputEmail, Button, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { organization } from '$lib/stores/organization';
     import { invalidate } from '$app/navigation';
-    import { BillingPlan, Dependencies } from '$lib/constants';
+    import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { isCloud } from '$lib/system';
+    import { isCloud, isSelfHosted } from '$lib/system';
     import { roles } from '$lib/stores/billing';
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
     import Roles from '$lib/components/roles/roles.svelte';
@@ -22,7 +22,7 @@
     let email: string,
         name: string,
         error: string,
-        role: string = 'developer';
+        role: string = isSelfHosted ? 'owner' : 'developer';
 
     async function create() {
         try {
@@ -60,22 +60,6 @@
 </script>
 
 <Modal title="Invite member" {error} size="big" bind:show={showCreate} onSubmit={create}>
-    {#if isCloud}
-        {#if $organization?.billingPlan === BillingPlan.PRO}
-            <!-- <Alert type="info">
-                You can add unlimited organization members on the {plan.name} plan for
-                <b>{formatCurrency(plan.addons.member.price)} each per billing period</b>.
-            </Alert> -->
-            <Alert type="info">
-                New roles are free until 1st January 2025. <a
-                    class="link"
-                    href="https://appwrite.io/docs/advanced/platform/roles"
-                    target="_blank"
-                    rel="noopener noreferrer">Learn more</a
-                >.
-            </Alert>
-        {/if}
-    {/if}
     <FormList>
         <InputEmail
             required
@@ -89,7 +73,9 @@
             label="Name (optional)"
             placeholder="Enter name"
             bind:value={name} />
-        <InputSelect popover={Roles} id="role" label="Role" options={roles} bind:value={role} />
+        {#if isCloud}
+            <InputSelect popover={Roles} id="role" label="Role" options={roles} bind:value={role} />
+        {/if}
     </FormList>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
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]/usage/[[invoice]]/ProjectBreakdown.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
index 964f50eee..5516b61b7 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
@@ -3,12 +3,12 @@
     import { Collapsible, CollapsibleItem } from '$lib/components';
     import {
         TableBody,
-        TableCellLink,
+        TableCell,
         TableCellHead,
         TableHeader,
         TableRow,
-        TableScroll,
-        TableCellText
+        TableRowLink,
+        TableScroll
     } from '$lib/elements/table';
     import { abbreviateNumber } from '$lib/helpers/numbers';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
@@ -53,31 +53,43 @@
 <Collapsible>
     <CollapsibleItem>
         <svelte:fragment slot="title">Project breakdown</svelte:fragment>
-        <TableScroll noMargin>
+        <TableScroll noMargin style="table-layout: auto">
             <TableHeader>
-                <TableCellHead width={185} style="padding-left: 0;">Project</TableCellHead>
-                <TableCellHead width={100}>Usage</TableCellHead>
+                <TableCellHead>Project</TableCellHead>
+                <TableCellHead>Usage</TableCellHead>
                 {#if $canSeeProjects}
-                    <TableCellHead width={140} />
+                    <TableCellHead />
                 {/if}
             </TableHeader>
             <TableBody>
                 {#each groupByProject(metric).sort((a, b) => b.usage - a.usage) as project}
-                    <TableRow>
-                        <TableCellText title="Project" style="padding-left: 0;">
-                            {data.projectNames[project.projectId]?.name ?? 'Unknown'}
-                        </TableCellText>
-                        <TableCellText title="Usage">{format(project.usage)}</TableCellText>
-                        {#if $canSeeProjects}
-                            <TableCellLink
-                                title="Go to project usage"
-                                href={getProjectUsageLink(project.projectId)}>
-                                View project usage
-                            </TableCellLink>
-                        {/if}
-                    </TableRow>
+                    {#if !$canSeeProjects}
+                        <TableRow>
+                            <TableCell title="Project">
+                                {data.projectNames[project.projectId]?.name ?? 'Unknown'}
+                            </TableCell>
+                            <TableCell title="Usage">{format(project.usage)}</TableCell>
+                        </TableRow>
+                    {:else}
+                        <TableRowLink href={getProjectUsageLink(project.projectId)}>
+                            <TableCell title="Project">
+                                {data.projectNames[project.projectId]?.name ?? 'Unknown'}
+                            </TableCell>
+                            <TableCell title="Usage">{format(project.usage)}</TableCell>
+                            <TableCell right={true}>
+                                <span
+                                    class="icon-cheveron-right u-cross-child-center ignore-icon-rotate" />
+                            </TableCell>
+                        </TableRowLink>
+                    {/if}
                 {/each}
             </TableBody>
         </TableScroll>
     </CollapsibleItem>
 </Collapsible>
+
+<style>
+    .ignore-icon-rotate {
+        rotate: unset !important;
+    }
+</style>
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 e1e067ead..6830c668d 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/+page.svelte b/src/routes/(console)/project-[project]/auth/security/+page.svelte
index 8befe804e..9d4575b66 100644
--- a/src/routes/(console)/project-[project]/auth/security/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/+page.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-    import { organization } from '$lib/stores/organization';
-    import { BillingPlan } from '$lib/constants';
     import { Container } from '$lib/layout';
-    import { isCloud } from '$lib/system';
     import UpdateMockNumbers from './updateMockNumbers.svelte';
     import UpdatePasswordDictionary from './updatePasswordDictionary.svelte';
     import UpdatePasswordHistory from './updatePasswordHistory.svelte';
@@ -23,7 +20,5 @@
     <UpdatePersonalDataCheck />
     <UpdateSessionAlerts />
     <UpdateMockNumbers />
-    {#if isCloud && $organization.billingPlan === BillingPlan.SCALE}
-        <UpdateMembershipPrivacy />
-    {/if}
+    <UpdateMembershipPrivacy />
 </Container>
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]/+page.ts b/src/routes/(console)/project-[project]/databases/database-[database]/+page.ts
index 1b9d53275..03433c2a2 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/+page.ts
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/+page.ts
@@ -10,15 +10,16 @@ export const load: PageLoad = async ({ params, url, route, depends }) => {
     const limit = getLimit(url, route, CARD_LIMIT);
     const view = getView(url, route, View.Grid);
     const offset = pageToOffset(page, limit);
+    const collections = await sdk.forProject.databases.listCollections(params.database, [
+        Query.limit(limit),
+        Query.offset(offset),
+        Query.orderDesc('')
+    ]);
 
     return {
         offset,
         limit,
         view,
-        collections: await sdk.forProject.databases.listCollections(params.database, [
-            Query.limit(limit),
-            Query.offset(offset),
-            Query.orderDesc('')
-        ])
+        collections
     };
 };
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]/attributes/float.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
index 880fc9ab4..1578ef58f 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
@@ -77,20 +77,28 @@
     $: handleDefaultState($required || $array);
 </script>
 
-<InputNumber
-    id="min"
-    label="Min"
-    placeholder="Enter size"
-    bind:value={data.min}
-    step="any"
-    required={editing} />
-<InputNumber
-    id="max"
-    label="Max"
-    placeholder="Enter size"
-    bind:value={data.max}
-    step="any"
-    required={editing} />
+<div>
+    <ul class="u-flex u-gap-16">
+        <li class="u-flex-basis-50-percent">
+            <InputNumber
+                id="min"
+                label="Min"
+                placeholder="Enter size"
+                bind:value={data.min}
+                step="any"
+                required={editing} />
+        </li>
+        <li class="u-flex-basis-50-percent">
+            <InputNumber
+                id="max"
+                label="Max"
+                placeholder="Enter size"
+                bind:value={data.max}
+                step="any"
+                required={editing} />
+        </li>
+    </ul>
+</div>
 <InputNumber
     id="default"
     label="Default value"
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
index 86c676800..e9c81f4c9 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
@@ -77,18 +77,27 @@
     $: handleDefaultState($required || $array);
 </script>
 
-<InputNumber
-    id="min"
-    label="Min"
-    placeholder="Enter size"
-    bind:value={data.min}
-    required={editing} />
-<InputNumber
-    id="max"
-    label="Max"
-    placeholder="Enter size"
-    bind:value={data.max}
-    required={editing} />
+<div>
+    <ul class="u-flex u-gap-16">
+        <li class="u-flex-basis-50-percent">
+            <InputNumber
+                id="min"
+                label="Min"
+                placeholder="Enter size"
+                bind:value={data.min}
+                required={editing} />
+        </li>
+
+        <li class="u-flex-basis-50-percent">
+            <InputNumber
+                id="max"
+                label="Max"
+                placeholder="Enter size"
+                bind:value={data.max}
+                required={editing} />
+        </li>
+    </ul>
+</div>
 <InputNumber
     id="default"
     label="Default value"
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte
index 173c35d5a..1af15500b 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte
@@ -157,30 +157,32 @@
     </ul>
 </li>
 
-<InputSelectSearch
-    id="related"
-    label="Related Collection"
-    name="collections"
-    bind:search
-    bind:value={data.relatedCollection}
-    required
-    interactiveOutput={!editing}
-    placeholder="Select a collection"
-    disabled={editing}
-    options={collections?.map((n) => ({ value: n.$id, label: n.$id, data: [n.name] })) ?? []}
-    on:select={updateKeyName}
-    let:option={o}>
-    <SelectSearchItem data={o.data}>
-        {o.label}
-    </SelectSearchItem>
-    <svelte:fragment slot="output" let:option={o}>
-        <output class="input-text" class:is-read-only={editing}>
-            <SelectSearchItem data={o.data}>
-                {o.label}
-            </SelectSearchItem>
-        </output>
-    </svelte:fragment>
-</InputSelectSearch>
+<div>
+    <InputSelectSearch
+        id="related"
+        label="Related Collection"
+        name="collections"
+        bind:search
+        bind:value={data.relatedCollection}
+        required
+        interactiveOutput={!editing}
+        placeholder="Select a collection"
+        disabled={editing}
+        options={collections?.map((n) => ({ value: n.$id, label: n.$id, data: [n.name] })) ?? []}
+        on:select={updateKeyName}
+        let:option={o}>
+        <SelectSearchItem data={o.data}>
+            {o.label}
+        </SelectSearchItem>
+        <svelte:fragment slot="output" let:option={o}>
+            <output class="input-text" class:is-read-only={editing}>
+                <SelectSearchItem data={o.data}>
+                    {o.label}
+                </SelectSearchItem>
+            </output>
+        </svelte:fragment>
+    </InputSelectSearch>
+</div>
 
 {#if data?.relatedCollection}
     <div>
@@ -192,13 +194,11 @@
             autofocus
             required />
 
-        <div class="u-flex u-gap-4 u-margin-block-start-8 u-small u-cross-center">
+        <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
             <span
                 class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
                 aria-hidden="true" />
-            <span class="text u-line-height-1-5">
-                Allowed characters: alphanumeric, hyphen, non-leading underscore, period
-            </span>
+            <span class="text u-line-height-1-5">Allowed characters: a-z, A-Z, 0-9, -, .</span>
         </div>
     </div>
     {#if way === 'two'}
@@ -211,12 +211,13 @@
                 required
                 readonly={editing} />
 
-            <div class="u-flex u-gap-4 u-margin-block-start-8 u-small u-cross-center">
+            <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
                 <span
                     class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
                     aria-hidden="true" />
                 <span class="text u-line-height-1-5">
-                    Allowed characters: alphanumeric, hyphen, non-leading underscore, period
+                    Allowed characters: a-z, A-Z, 0-9, -, . Once created, attribute key cannot be
+                    adjusted to maintain data integrity.
                 </span>
             </div>
         </div>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
index 84a530fc9..06420a1a1 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
@@ -90,12 +90,12 @@
                     autofocus
                     required />
 
-                <div class="u-flex u-gap-4 u-margin-block-start-8 u-small u-cross-center">
+                <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
                     <span
                         class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
                         aria-hidden="true" />
                     <span class="text u-line-height-1-5">
-                        Allowed characters: alphanumeric, hyphen, non-leading underscore, period
+                        Allowed characters: alphanumeric, hyphen, non-leading underscore, period.
                     </span>
                 </div>
             </div>
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 ab1f0e539..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;
@@ -83,12 +94,9 @@
             });
             trackEvent(Submit.IndexCreate);
             showCreateIndex = false;
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-            trackError(error, Submit.IndexCreate);
+        } catch (err) {
+            error = err.message;
+            trackError(err, Submit.IndexCreate);
         }
     }
 
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
index 54d16cab6..de7c68e6a 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import { Button, InputText, FormList } from '$lib/elements/forms';
+    import { InputText, FormList } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
 
     export let showOverview = false;
@@ -50,11 +50,6 @@
                                 readonly />
                         </div>
                     </div>
-                    <div class="form-item-part u-cross-child-end">
-                        <Button text disabled>
-                            <span class="icon-x" aria-hidden="true" />
-                        </Button>
-                    </div>
                 </li>
             {/each}
         {/if}
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]/collection-[collection]/table.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index ca8ac7160..fbfc7544e 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -23,7 +23,7 @@
     import { preferences } from '$lib/stores/preferences';
     import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
-    import { onMount } from 'svelte';
+    import { afterUpdate, onMount } from 'svelte';
     import type { PageData } from './$types';
     import { isRelationship, isRelationshipToMany } from './document-[document]/attributes/store';
     import RelationshipsModal from './relationshipsModal.svelte';
@@ -44,8 +44,23 @@
 
     onMount(async () => {
         displayNames = preferences.getDisplayNames();
+        updateMaxWidth();
     });
 
+    afterUpdate(() => updateMaxWidth());
+
+    function updateMaxWidth() {
+        const tableCells = Array.from(document.querySelectorAll('.less-width-truncated'));
+
+        const visibleColumnsCount = $columns.filter((col) => col.show).length;
+        const newMaxWidth = Math.max(50 - (visibleColumnsCount - 1) * 5, 25);
+
+        tableCells.forEach((cell) => {
+            const cellItem = cell as HTMLElement;
+            cellItem.style.maxWidth = `${newMaxWidth}vw`;
+        });
+    }
+
     function formatArray(array: unknown[]) {
         if (array.length === 0) return '[ ]';
 
@@ -220,15 +235,19 @@
                             </TableCell>
                         {:else}
                             {@const formatted = formatColumn(document[column.id])}
-                            <TableCell>
+                            <TableCell class="truncated-content-table-cell">
                                 <div
-                                    class="u-width-fit-content"
+                                    class:truncated={formatted.whole.length >
+                                        formatted.value.length}
+                                    class:less-width-truncated={$columns.filter((col) => col.show)
+                                        .length > 1}
                                     use:tooltip={{
                                         content: formatted.whole,
                                         disabled: !formatted.truncated
                                     }}
-                                    data-private>
-                                    {formatted.value}
+                                    data-private
+                                    data-content={formatted.whole}>
+                                    {formatted.whole}
                                 </div>
                             </TableCell>
                         {/if}
@@ -345,4 +364,16 @@
             display: inline-block;
         }
     }
+
+    :global(.truncated-content-table-cell .truncated) {
+        max-width: 50vw;
+        overflow: hidden;
+        white-space: nowrap;
+        display: inline-block;
+        text-overflow: ellipsis;
+    }
+
+    :global(.truncated-content-table-cell:has(.truncated)) {
+        inline-size: 0;
+    }
 </style>
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]/databases/database-[database]/delete.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte
index a84cc3254..4f565c56d 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/delete.svelte
@@ -4,17 +4,76 @@
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
-    import { Button, InputCheckbox } from '$lib/elements/forms';
+    import { Button, FormList, InputCheckbox } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { database } from './store';
-    import { FormList } from '$lib/elements/forms/index.js';
+
+    import {
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableHeader,
+        TableRow,
+        TableScroll
+    } from '$lib/elements/table';
+    import { toLocaleDate } from '$lib/helpers/date';
+    import { type Models, Query } from '@appwrite.io/console';
 
     const databaseId = $page.params.database;
 
     export let showDelete = false;
     let confirmedDeletion = false;
 
+    let error = null;
+    let isLoadingDocumentsCount = false;
+
+    /* enable overflow-x */
+    const columnWidth = 135;
+
+    $: collectionItems = [];
+    let collections: Models.CollectionList = null;
+
+    function buildQueries(): string[] {
+        const queries = [Query.orderDesc('$updatedAt')];
+
+        if (collectionItems.length > 0) {
+            queries.push(Query.limit(25));
+            queries.push(Query.offset(collectionItems.length));
+        } else {
+            queries.push(Query.limit(3));
+        }
+
+        return queries;
+    }
+
+    async function listCollections() {
+        // let's just wait...
+        if (isLoadingDocumentsCount) return;
+
+        isLoadingDocumentsCount = true;
+
+        try {
+            const queries = buildQueries();
+
+            collections = await sdk.forProject.databases.listCollections(databaseId, queries);
+
+            const collectionPromises = collections.collections.map(async (collection) => {
+                return {
+                    id: collection.$id,
+                    name: collection.name,
+                    updatedAt: collection.$updatedAt
+                };
+            });
+
+            collectionItems = [...collectionItems, ...(await Promise.all(collectionPromises))];
+        } catch (err) {
+            error = true;
+        } finally {
+            isLoadingDocumentsCount = false;
+        }
+    }
+
     const handleDelete = async () => {
         try {
             await sdk.forProject.databases.delete(databaseId);
@@ -33,40 +92,115 @@
             trackError(error, Submit.DatabaseDelete);
         }
     };
+
+    /* reset data on modal close */
+    $: if (!showDelete) {
+        collections = null;
+        collectionItems = [];
+    }
 </script>
 
-<Modal
-    title="Delete database"
-    icon="exclamation"
-    state="warning"
-    size="small"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    headerDivider={false}>
-    <FormList>
-        <p class="text" data-private>
-            Are you sure you want to delete <b>{$database.name}</b>?
-        </p>
+<div class="max-height-dialog">
+    <Modal
+        title="Delete database"
+        icon="exclamation"
+        size="big"
+        state="warning"
+        bind:show={showDelete}
+        onSubmit={handleDelete}
+        headerDivider={false}>
+        {#await listCollections()}
+            <div class="u-flex u-main-center">
+                <div class="loader" />
+            </div>
+        {:then}
+            {#if error}
+                <p class="text" data-private>
+                    Are you sure you want to delete <b>{$database.name}</b>?
+                </p>
+            {:else if collectionItems.length > 0}
+                <p class="text" data-private>
+                    The following collections and all data associated with <b>{$database.name}</b>,
+                    will be permanently deleted.
+                </p>
 
-        <p class="text">
-            <b>
-                Once deleted, this database and its backups cannot be restored. This action is
-                irreversible.
-            </b>
-        </p>
+                <div class="u-flex-vertical u-gap-16">
+                    <TableScroll dense noMargin class="table">
+                        <TableHeader>
+                            <TableCellHead width={columnWidth}>Collection</TableCellHead>
+                            <!-- small spacer placeholder -->
+                            <TableCellHead width={columnWidth / 4} />
+                            <TableCellHead width={columnWidth}>Last Updated</TableCellHead>
+                        </TableHeader>
+                        <TableBody>
+                            {#each collectionItems as collection}
+                                <TableRow>
+                                    <TableCell title="Collection">{collection.name}</TableCell>
+                                    <TableCell />
+                                    <TableCell title="Last Updated"
+                                        >{toLocaleDate(collection.updatedAt)}</TableCell>
+                                </TableRow>
+                            {/each}
+                        </TableBody>
+                    </TableScroll>
 
-        <div class="input-check-box-friction">
-            <InputCheckbox
-                required
-                size="small"
-                id="delete_policy"
-                bind:checked={confirmedDeletion}
-                label="I understand and confirm" />
-        </div>
-    </FormList>
+                    {#if collectionItems.length < collections.total}
+                        <div class="u-flex u-gap-16 u-cross-center">
+                            <button class="u-underline" on:click={listCollections} type="button">
+                                Show more
+                            </button>
 
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        <Button secondary submit disabled={!confirmedDeletion}>Delete</Button>
-    </svelte:fragment>
-</Modal>
+                            {#if isLoadingDocumentsCount}
+                                <div class="loader is-small" />
+                            {/if}
+                        </div>
+                    {:else if collectionItems.length > 25}
+                        <button
+                            class="u-underline"
+                            on:click={() => {
+                                collectionItems = collectionItems.slice(0, 3);
+                            }}
+                            type="button">
+                            Show less
+                        </button>
+                    {/if}
+                </div>
+            {:else}
+                <p class="text" data-private>
+                    Are you sure you want to delete <b>{$database.name}</b>?
+                </p>
+            {/if}
+        {/await}
+
+        {#if !isLoadingDocumentsCount}
+            <p class="text" data-private>
+                <b>
+                    Once deleted, this database and its backups cannot be restored. This action is
+                    irreversible.
+                </b>
+            </p>
+
+            <FormList>
+                <div class="input-check-box-friction">
+                    <InputCheckbox
+                        required
+                        size="small"
+                        id="delete_policy"
+                        bind:checked={confirmedDeletion}
+                        label="I understand and confirm" />
+                </div>
+            </FormList>
+        {/if}
+
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit disabled={!confirmedDeletion}>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</div>
+
+<style>
+    :global(.max-height-dialog dialog) {
+        max-height: 650px;
+    }
+</style>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/settings/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/settings/+page.svelte
index 6e0c20fc4..ad8b9f485 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/settings/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/settings/+page.svelte
@@ -12,6 +12,7 @@
     import { onMount } from 'svelte';
     import Delete from '../delete.svelte';
     import { database } from '../store';
+    import { Query } from '@appwrite.io/console';
 
     let showDelete = false;
     let showError: false | 'name' | 'email' | 'password' = false;
@@ -23,6 +24,13 @@
         databaseName ??= $database.name;
     });
 
+    async function loadCollectionCount() {
+        const { total } = await sdk.forProject.databases.listCollections($database.$id, [
+            Query.limit(1)
+        ]);
+        return total;
+    }
+
     function addError(location: typeof showError, message: string, type: typeof errorType) {
         showError = location;
         errorMessage = message;
@@ -82,7 +90,8 @@
 
                 <svelte:fragment slot="actions">
                     <Button disabled={databaseName === $database.name || !databaseName} submit
-                        >Update</Button>
+                        >Update
+                    </Button>
                 </svelte:fragment>
             </CardGrid>
         </Form>
@@ -93,14 +102,22 @@
             </div>
 
             <p>
-                The database will be permanently deleted, including all data associated with this
-                team. This action is irreversible.
+                The database will be permanently deleted, including all collections within it. This
+                action is irreversible.
             </p>
             <svelte:fragment slot="aside">
                 <BoxAvatar>
                     <svelte:fragment slot="title">
                         <h6 class="u-bold u-trim-1">{$database.name}</h6>
-                        <span>Last updated: {toLocaleDateTime($database.$updatedAt)}</span>
+                        <span class="u-flex u-gap-8">
+                            {#await loadCollectionCount()}
+                                <div class="loader is-small" />
+                            {:then count}
+                                {count}
+                            {/await}
+
+                            Collections
+                        </span>
                     </svelte:fragment>
                 </BoxAvatar>
             </svelte:fragment>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/table.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/table.svelte
index 6b95d6e99..a4df2fa98 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/table.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/table.svelte
@@ -74,7 +74,7 @@
         {/each}
     </TableHeader>
     <TableBody>
-        {#each data.collections.collections as collection}
+        {#each data.collections.collections as collection (collection.$id)}
             <TableRowLink
                 href={`${base}/project-${projectId}/databases/database-${databaseId}/collection-${collection.$id}`}>
                 {#if $canWriteCollections}
diff --git a/src/routes/(console)/project-[project]/databases/store.ts b/src/routes/(console)/project-[project]/databases/store.ts
index b07f880c1..a931b52c6 100644
--- a/src/routes/(console)/project-[project]/databases/store.ts
+++ b/src/routes/(console)/project-[project]/databases/store.ts
@@ -2,10 +2,19 @@ import type { Column } from '$lib/helpers/types';
 import { isCloud } from '$lib/system';
 import { writable } from 'svelte/store';
 
-export const columns = writable<Column[]>([
-    { id: '$id', title: 'Database ID', type: 'string', show: true, width: 150 },
-    { id: 'name', title: 'Name', type: 'string', show: true, width: 120 },
-    isCloud && { id: 'backup', title: 'Backups', type: 'string', show: true, width: 120 },
-    { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 120 },
-    { id: '$updatedAt', title: 'Updated', type: 'datetime', show: true, width: 120 }
-]);
+export const columns = writable<Column[]>(
+    isCloud
+        ? [
+              { id: '$id', title: 'Database ID', type: 'string', show: true, width: 150 },
+              { id: 'name', title: 'Name', type: 'string', show: true, width: 120 },
+              { id: 'backup', title: 'Backups', type: 'string', show: true, width: 120 },
+              { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 120 },
+              { id: '$updatedAt', title: 'Updated', type: 'datetime', show: true, width: 120 }
+          ]
+        : [
+              { id: '$id', title: 'Database ID', type: 'string', show: true, width: 150 },
+              { id: 'name', title: 'Name', type: 'string', show: true, width: 120 },
+              { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 120 },
+              { id: '$updatedAt', title: 'Updated', type: 'datetime', show: true, width: 120 }
+          ]
+);
diff --git a/src/routes/(console)/project-[project]/databases/table.svelte b/src/routes/(console)/project-[project]/databases/table.svelte
index 1fc2a95a2..9c128d33c 100644
--- a/src/routes/(console)/project-[project]/databases/table.svelte
+++ b/src/routes/(console)/project-[project]/databases/table.svelte
@@ -1,28 +1,18 @@
 <script lang="ts">
-    import { invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { tooltip } from '$lib/actions/tooltip';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Id, Modal } from '$lib/components';
-    import FloatingActionBar from '$lib/components/floatingActionBar.svelte';
-    import { Dependencies } from '$lib/constants';
-    import { Button, FormList, InputCheckbox } from '$lib/elements/forms';
+    import { Id } from '$lib/components';
     import {
         TableBody,
         TableCell,
-        TableCellCheck,
         TableCellHead,
-        TableCellHeadCheck,
         TableCellText,
         TableHeader,
         TableRowLink,
         TableScroll
     } from '$lib/elements/table';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { addNotification } from '$lib/stores/notifications';
-    import { canWriteDatabases } from '$lib/stores/roles';
-    import { sdk } from '$lib/stores/sdk';
     import type { PageData } from './$types';
     import { columns } from './store';
     import Cell from '$lib/elements/table/cell.svelte';
@@ -30,36 +20,6 @@
     export let data: PageData;
     const projectId = $page.params.project;
 
-    let selected: string[] = [];
-    let showDelete = false;
-    let deleting = false;
-    let confirmedDeletion = false;
-
-    async function handleDelete() {
-        showDelete = false;
-
-        const promises = selected.map((databaseId) => sdk.forProject.databases.delete(databaseId));
-        try {
-            await Promise.all(promises);
-            trackEvent(Submit.DatabaseDelete);
-            addNotification({
-                type: 'success',
-                message: `${selected.length} database${selected.length > 1 ? 's' : ''} deleted`
-            });
-            invalidate(Dependencies.DATABASES);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.DatabaseDelete);
-        } finally {
-            selected = [];
-            showDelete = false;
-            confirmedDeletion = false;
-        }
-    }
-
     function getPolicyDescription(cron: string): string {
         const [minute, hour, dayOfMonth, , dayOfWeek] = cron.split(' ');
 
@@ -72,11 +32,6 @@
 
 <TableScroll>
     <TableHeader>
-        {#if $canWriteDatabases}
-            <TableCellHeadCheck
-                bind:selected
-                pageItemsIds={data.databases.databases.map((c) => c.$id)} />
-        {/if}
         {#each $columns as column}
             {#if column.show}
                 <TableCellHead width={column.width}>{column.title}</TableCellHead>
@@ -84,11 +39,8 @@
         {/each}
     </TableHeader>
     <TableBody>
-        {#each data.databases.databases as database}
+        {#each data.databases.databases as database (database.$id)}
             <TableRowLink href={`${base}/project-${projectId}/databases/database-${database.$id}`}>
-                {#if $canWriteDatabases}
-                    <TableCellCheck bind:selectedIds={selected} id={database.$id} />
-                {/if}
                 {#each $columns as column}
                     {#if column.show}
                         {#if column.id === '$id'}
@@ -137,76 +89,7 @@
     </TableBody>
 </TableScroll>
 
-<FloatingActionBar show={selected.length > 0}>
-    <div class="u-flex u-cross-center u-main-space-between actions">
-        <div class="u-flex u-cross-center u-gap-8">
-            <span class="indicator body-text-2 u-bold">{selected.length}</span>
-            <p>
-                <span class="is-only-desktop">
-                    {selected.length > 1 ? 'databases' : 'database'}
-                </span>
-                selected
-            </p>
-        </div>
-
-        <div class="u-flex u-cross-center u-gap-8">
-            <Button text on:click={() => (selected = [])}>Cancel</Button>
-            <Button secondary on:click={() => (showDelete = true)}>
-                <p>Delete</p>
-            </Button>
-        </div>
-    </div>
-</FloatingActionBar>
-
-<Modal
-    title="Delete Database"
-    icon="exclamation"
-    state="warning"
-    size="small"
-    bind:show={showDelete}
-    onSubmit={handleDelete}
-    headerDivider={false}
-    closable={!deleting}>
-    <FormList>
-        <p class="text" data-private>
-            Are you sure you want to delete <b>{selected.length}</b>
-            {selected.length > 1 ? 'databases' : 'database'}?
-        </p>
-
-        <p class="text">
-            <b>
-                Once deleted, {selected.length > 1 ? 'these databases' : 'this database'} and its backups
-                cannot be restored. This action is irreversible.
-            </b>
-        </p>
-
-        <div class="input-check-box-friction">
-            <InputCheckbox
-                required
-                size="small"
-                id="delete_policy"
-                bind:checked={confirmedDeletion}
-                label="I understand and confirm" />
-        </div>
-    </FormList>
-    <svelte:fragment slot="footer">
-        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
-        <Button secondary submit disabled={deleting || !confirmedDeletion}>Delete</Button>
-    </svelte:fragment>
-</Modal>
-
 <style lang="scss">
-    .actions {
-        .indicator {
-            border-radius: 0.25rem;
-            background: hsl(var(--color-information-100));
-            color: hsl(var(--color-neutral-0));
-
-            padding: 0rem 0.375rem;
-            display: inline-block;
-        }
-    }
-
     .icon-exclamation {
         color: hsl(var(--color-warning-100)) !important;
     }
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/migrations/+page.svelte b/src/routes/(console)/project-[project]/settings/migrations/+page.svelte
index 919c19510..1e7034cf3 100644
--- a/src/routes/(console)/project-[project]/settings/migrations/+page.svelte
+++ b/src/routes/(console)/project-[project]/settings/migrations/+page.svelte
@@ -191,7 +191,7 @@
                                         {capitalize(status)}
                                     </Status>
                                 </TableCell>
-                                <TableCell title="">
+                                <TableCell title="" showOverflow>
                                     <div class="u-flex u-main-end">
                                         <Button secondary on:click={() => showDetails(entry)}
                                             >Details</Button>
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]/settings/usage/[[invoice]]/+page.svelte b/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
index cc2ac064b..d7666f5bc 100644
--- a/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
@@ -4,11 +4,10 @@
     import {
         TableBody,
         TableCell,
-        TableCellLink,
         TableCellHead,
         TableHeader,
-        TableRow,
-        Table
+        Table,
+        TableRowLink
     } from '$lib/elements/table';
     import { showUsageRatesModal, tierToPlan, upgradeURL } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
@@ -225,27 +224,26 @@
                         }
                     ]} />
                 {#if data.usage.executionsBreakdown.length > 0}
-                    <Table noMargin noStyles>
+                    <Table noMargin noStyles style="table-layout: auto">
                         <TableHeader>
-                            <TableCellHead width={285}>Function</TableCellHead>
+                            <TableCellHead>Function</TableCellHead>
                             <TableCellHead>Usage</TableCellHead>
-                            <TableCellHead width={140} />
+                            <TableCellHead />
                         </TableHeader>
                         <TableBody>
                             {#each data.usage.executionsBreakdown as func}
-                                <TableRow>
+                                <TableRowLink
+                                    href={`${baseRoute}/functions/function-${func.resourceId}`}>
                                     <TableCell title="Function">
                                         {func.name ?? func.resourceId}
                                     </TableCell>
                                     <TableCell title="Usage">
                                         {formatNum(func.value)} executions
                                     </TableCell>
-                                    <TableCellLink
-                                        href={`${baseRoute}/functions/function-${func.resourceId}`}
-                                        title="View function">
-                                        View function
-                                    </TableCellLink>
-                                </TableRow>
+                                    <TableCell right={true}>
+                                        <span class="icon-cheveron-right u-cross-child-center" />
+                                    </TableCell>
+                                </TableRowLink>
                             {/each}
                         </TableBody>
                     </Table>
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/+page.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
index df2bb4390..572cd88e6 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
@@ -87,6 +87,9 @@
     import { readOnly } from '$lib/stores/billing';
     import { GRACE_PERIOD_OVERRIDE } from '$lib/system';
     import { isValueOfStringEnum } from '$lib/helpers/types';
+    import type { PageData } from './$types';
+
+    export let data: PageData;
 
     let showDelete = false;
 
@@ -397,7 +400,7 @@
             </CardGrid>
         </Form>
 
-        <UpdateMaxFileSize />
+        <UpdateMaxFileSize currentPlan={data.currentPlan} />
 
         <Form onSubmit={updateAllowedExtensions}>
             <CardGrid hideOverflow>
diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.ts b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.ts
new file mode 100644
index 000000000..546bfa7a8
--- /dev/null
+++ b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/settings/+page.ts
@@ -0,0 +1,10 @@
+import type { PageLoad } from './$types';
+import { sdk } from '$lib/stores/sdk';
+
+export const load: PageLoad = async ({ parent }) => {
+    const { organization } = await parent();
+    const currentPlan = await sdk.forConsole.billing.getPlan(organization.$id);
+    return {
+        currentPlan
+    };
+};
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 133fde689..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
@@ -5,15 +5,22 @@
     import { Button, Form, FormItem, InputNumber, InputSelect } from '$lib/elements/forms';
     import { humanFileSize, sizeToBytes } from '$lib/helpers/sizeConvertion';
     import { createByteUnitPair } from '$lib/helpers/unit';
-    import { getServiceLimit, readOnly, tierToPlan, upgradeURL } from '$lib/stores/billing';
+    import { readOnly, upgradeURL } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
     import { bucket } from '../store';
     import { updateBucket } from './+page.svelte';
+    import type { Plan } from '$lib/sdk/billing';
+    export let currentPlan: Plan;
 
-    const service = getServiceLimit('fileSize');
+    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(
@@ -35,10 +42,9 @@
         <svelte:fragment slot="aside">
             {#if isCloud}
                 {@const size = humanFileSize(sizeToBytes(service, 'MB', 1000))}
-                {@const plan = tierToPlan($organization?.billingPlan)}
                 <Alert type="info">
                     <p class="text">
-                        The {plan.name} plan has a maximum upload file size limit of {Math.floor(
+                        The {currentPlan.name} plan has a maximum upload file size limit of {Math.floor(
                             parseInt(size.value)
                         )}{size.unit}.
                         {#if $organization?.billingPlan === BillingPlan.FREE}
@@ -63,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">
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
index cd3e531d7..9f228e1ec 100644
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -2,6 +2,7 @@ import { redirect } from '@sveltejs/kit';
 import { base } from '$app/paths';
 import type { PageLoad } from './$types';
 import { sdk } from '$lib/stores/sdk';
+import { VARS } from '$lib/system';
 
 const handleGithubEducationMembership = async (name: string, email: string) => {
     const result = await sdk.forConsole.billing.setMembership('github-student-developer');
@@ -46,9 +47,8 @@ export const load: PageLoad = async ({ parent, url }) => {
 };
 
 const setToGhStudentMailingList = async (name: string, email: string) => {
-    const path = `/mailinglists/gh-student`;
     const body = name !== '' ? { name, email } : { email };
-    return fetch('https://growth.appwrite.io/v1' + path, {
+    return fetch(`${VARS.GROWTH_ENDPOINT}/mailinglists/gh-student`, {
         method: 'POST',
         body: JSON.stringify(body),
         headers: {