diff --git a/src/lib/components/avatarGroup.svelte b/src/lib/components/avatarGroup.svelte
index c09a5368f2..c9091ffcf5 100644
--- a/src/lib/components/avatarGroup.svelte
+++ b/src/lib/components/avatarGroup.svelte
@@ -7,6 +7,7 @@
     export let size = 40;
     export let avatarSize: keyof typeof Sizes = 'medium';
     export let bordered = false;
+    export let color = '';
 
     enum Sizes {
         xsmall = 'is-size-x-small',
@@ -28,13 +29,13 @@
 
     {#each icons as icon}
         <li class="avatars-group-item">
-            <span class="avatar {Sizes[avatarSize]}"><span class={`icon-${icon}`} /></span>
+            <span class="avatar {Sizes[avatarSize]} {color}"><span class={`icon-${icon}`} /></span>
         </li>
     {/each}
 
     {#if total > 2}
         <li class="avatars-group-item">
-            <div class="avatar {Sizes[avatarSize]}">+{total - 2}</div>
+            <div class="avatar {Sizes[avatarSize]} {color}">+{total - 2}</div>
         </li>
     {/if}
 </ul>
diff --git a/src/lib/components/emptySearch.svelte b/src/lib/components/emptySearch.svelte
index 43a41d217d..2f5cc759a0 100644
--- a/src/lib/components/emptySearch.svelte
+++ b/src/lib/components/emptySearch.svelte
@@ -20,7 +20,7 @@
 </article>
 
 {#if !hidePagination}
-    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+    <div class="u-flex u-margin-block-start-32 u-main-space-between u-cross-center">
         <p class="text">Total results: 0</p>
         <PaginationInline limit={1} offset={0} sum={0} {hidePages} />
     </div>
diff --git a/src/lib/components/limit.svelte b/src/lib/components/limit.svelte
index 7594ccc94e..bf5ed752ce 100644
--- a/src/lib/components/limit.svelte
+++ b/src/lib/components/limit.svelte
@@ -34,6 +34,7 @@
 
 <div class="u-flex u-gap-12 u-cross-center">
     <InputSelect
+        wrapperTag="div"
         id="rows"
         label="Rows per page"
         showLabel={false}
diff --git a/src/lib/components/status.svelte b/src/lib/components/status.svelte
index 148be03edd..ca140ceb97 100644
--- a/src/lib/components/status.svelte
+++ b/src/lib/components/status.svelte
@@ -6,10 +6,7 @@
         | 'completed'
         | 'processing'
         | 'ready'
-        | 'building'
-        | string = null;
-
-    //TODO: Remove type string once SDK is updated
+        | 'building';
 </script>
 
 <div
diff --git a/src/lib/elements/forms/formItem.svelte b/src/lib/elements/forms/formItem.svelte
index 197e9edbcb..0a0509b0e6 100644
--- a/src/lib/elements/forms/formItem.svelte
+++ b/src/lib/elements/forms/formItem.svelte
@@ -1,8 +1,17 @@
+<script context="module" lang="ts">
+    export type FormItemTag = 'li' | 'div';
+</script>
+
 <script lang="ts">
+    export let tag: FormItemTag = 'li';
     export let fullWidth = false;
     export let isMultiple = false;
 </script>
 
-<li class="form-item" class:is-multiple={isMultiple} class:u-width-full-line={fullWidth}>
+<svelte:element
+    this={tag}
+    class="form-item"
+    class:is-multiple={isMultiple}
+    class:u-width-full-line={fullWidth}>
     <slot />
-</li>
+</svelte:element>
diff --git a/src/lib/elements/forms/inputSearch.svelte b/src/lib/elements/forms/inputSearch.svelte
index d93b782acd..b48debce77 100644
--- a/src/lib/elements/forms/inputSearch.svelte
+++ b/src/lib/elements/forms/inputSearch.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { createEventDispatcher, onMount } from 'svelte';
     import { onDestroy } from 'svelte';
 
     export let value = '';
@@ -10,6 +10,7 @@
     export let autofocus = false;
     export let isWithEndButton = true;
 
+    const dispatch = createEventDispatcher();
     let element: HTMLInputElement;
     let timer: ReturnType<typeof setTimeout>;
 
@@ -26,13 +27,19 @@
         }
     });
 
-    const valueChange = (event: Event) => {
+    function valueChange(event: Event) {
         clearTimeout(timer);
         timer = setTimeout(() => {
             const target = event.target as HTMLInputElement;
             value = target.value;
+            dispatch('change', value);
         }, debounce);
-    };
+    }
+
+    function clearSearch() {
+        value = '';
+        dispatch('clear');
+    }
 
     $: if (!value) {
         if (element) {
@@ -56,7 +63,8 @@
             class="button is-text is-only-icon"
             style="--button-size:1.5rem;"
             aria-label="Clear search"
-            on:click={() => (value = '')}>
+            type="button"
+            on:click={clearSearch}>
             <span class="icon-x" aria-hidden="true" />
         </button>
     {/if}
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index f55fc25cb5..c675626083 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { FormItem, Helper, Label } from '.';
+    import type { FormItemTag } from './formItem.svelte';
 
     export let id: string;
     export let label: string | undefined = undefined;
@@ -10,6 +11,7 @@
     export let required = false;
     export let hideRequired = false;
     export let disabled = false;
+    export let wrapperTag: FormItemTag = 'li';
     export let options: {
         value: string | boolean | number;
         label: string;
@@ -45,7 +47,7 @@
     $: hasNullOption = options.some((option) => option.value === null);
 </script>
 
-<FormItem>
+<FormItem tag={wrapperTag}>
     {#if label}
         <Label {required} {hideRequired} {optionalText} hide={!showLabel} for={id}>
             {label}
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 5a55352964..83edffe7c3 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -30,7 +30,7 @@
      * Cancel navigation when wizard is open and triggered by popstate
      */
     beforeNavigate((n) => {
-        const external = n.to.url.hostname !== globalThis.location.hostname;
+        const external = n?.to?.url?.hostname !== globalThis?.location?.hostname;
         if (external) return;
         if (!($wizard.show || $wizard.cover)) return;
         if (n.type === 'popstate') {
diff --git a/src/lib/pages/domains/index.svelte b/src/lib/pages/domains/index.svelte
index 44a92a549d..eb4445b776 100644
--- a/src/lib/pages/domains/index.svelte
+++ b/src/lib/pages/domains/index.svelte
@@ -87,12 +87,12 @@
                     </TableCellLink>
                     <TableCell title="Verification">
                         {#if domain.status === 'created'}
-                            <div class="u-flex u-gap-8 u-cross-center">
+                            <div class="u-flex u-gap-16 u-cross-center">
                                 <Pill danger>
                                     <span
                                         class="icon-exclamation-circle u-color-text-danger"
                                         aria-hidden="true" />
-                                    <span class="u-text">Failed</span>
+                                    <span class="u-text">failed</span>
                                 </Pill>
                                 <button type="button" on:click={() => openRetry(domain)}>
                                     <span class="link">Retry</span>
@@ -103,30 +103,30 @@
                                 <span
                                     class="icon-check-circle u-color-text-success"
                                     aria-hidden="true" />
-                                <p class="text">Verified</p>
+                                <p class="text">verified</p>
                             </Pill>
                         {/if}
                     </TableCell>
-                    <TableCell title="Cartificate">
+                    <TableCell title="Certificate">
                         {#if domain.status === 'unverified'}
-                            <div class="u-flex u-gap-8 u-cross-center">
+                            <div class="u-flex u-gap-16 u-cross-center">
                                 <Pill danger>
                                     <span
                                         class="icon-exclamation-circle u-color-text-danger"
                                         aria-hidden="true" />
-                                    <span class="u-text">Failed</span>
+                                    <span class="u-text">failed</span>
                                 </Pill>
                                 <button type="button" on:click={() => openRetry(domain)}>
                                     <span class="link">Retry</span>
                                 </button>
                             </div>
                         {:else if domain.status === 'verified'}
-                            <div class="u-flex u-gap-8 u-cross-center">
+                            <div class="u-flex u-gap-16 u-cross-center">
                                 <Pill success>
                                     <span
                                         class="icon-check-circle u-color-text-success"
                                         aria-hidden="true" />
-                                    <span>Generated</span>
+                                    <span>generated</span>
                                 </Pill>
                                 {#if domain.renewAt}
                                     <span class="u-text-color-gray">
@@ -135,12 +135,10 @@
                                 {/if}
                             </div>
                         {:else}
-                            <div class="u-flex u-gap-8 u-cross-center">
-                                <Pill>
-                                    <span class="icon-clock u-text-color-gray" aria-hidden="true" />
-                                    <p class="text">Waiting for verification</p>
-                                </Pill>
-                            </div>
+                            <Pill warning>
+                                <span class="icon-clock u-text-color-gray" aria-hidden="true" />
+                                <p class="text">Blocked by verification</p>
+                            </Pill>
                         {/if}
                     </TableCell>
                     <TableCell>
@@ -192,6 +190,6 @@
     </svelte:fragment>
     <Retry on:error={(e) => (retryError = e.detail)} />
     <svelte:fragment slot="footer">
-        <Button text on:click={() => (showRetry = false)}>Close</Button>
+        <Button secondary on:click={() => (showRetry = false)}>Close</Button>
     </svelte:fragment>
 </Modal>
diff --git a/src/lib/pages/domains/wizard/retry.svelte b/src/lib/pages/domains/wizard/retry.svelte
index 7033e3cb8d..33455ffceb 100644
--- a/src/lib/pages/domains/wizard/retry.svelte
+++ b/src/lib/pages/domains/wizard/retry.svelte
@@ -36,6 +36,7 @@
     }
 </script>
 
+<Trim alternativeTrim><b>{$domain.domain}</b></Trim>
 {#if $domain.status === 'created'}
     <Box radius="small">
         <div class="u-flex u-gap-8 u-cross-center">
@@ -63,7 +64,6 @@
         </div>
     </Box>
 {:else if $domain.status === 'unverified'}
-    <Trim alternativeTrim><b>{$domain.domain}</b></Trim>
     <Box radius="small">
         <div class="u-flex u-gap-8 u-cross-center">
             <span class="icon-exclamation-circle u-color-text-danger" aria-hidden="true" />
diff --git a/src/lib/pages/domains/wizard/step1.svelte b/src/lib/pages/domains/wizard/step1.svelte
index 5b21ca35be..480a585807 100644
--- a/src/lib/pages/domains/wizard/step1.svelte
+++ b/src/lib/pages/domains/wizard/step1.svelte
@@ -45,7 +45,12 @@
 <WizardStep beforeSubmit={createDomain}>
     <svelte:fragment slot="title">Add function domain</svelte:fragment>
     <svelte:fragment slot="subtitle">
-        Use your self-owned domain as the endpoint of your Appwrite API.
+        Use your self-owned domain as the endpoint of your Appwrite API. <a
+            href="https://appwrite.io/docs/custom-domains"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link">Learn more</a
+        >.
     </svelte:fragment>
 
     <FormList>
diff --git a/src/lib/pages/domains/wizard/step2.svelte b/src/lib/pages/domains/wizard/step2.svelte
index 298f4ce9a4..c2806750ea 100644
--- a/src/lib/pages/domains/wizard/step2.svelte
+++ b/src/lib/pages/domains/wizard/step2.svelte
@@ -7,7 +7,6 @@
 
     function onRetryError(event: CustomEvent<string>) {
         addNotification({
-            title: 'Error',
             message: event.detail,
             type: 'error'
         });
diff --git a/src/lib/wizards/functions/components/repositories.svelte b/src/lib/wizards/functions/components/repositories.svelte
index a1fcd6c134..ee2dfdfe0a 100644
--- a/src/lib/wizards/functions/components/repositories.svelte
+++ b/src/lib/wizards/functions/components/repositories.svelte
@@ -117,7 +117,7 @@
             </div>
         </div>
     {/await}
-    <p class="text common-section">
+    <p class="text u-margin-block-start-16">
         Manage organization configuration in your <a
             class="link"
             href={`${base}/console/project-${$page.params.project}/settings`}>project settings</a
@@ -160,7 +160,7 @@
                                                 alt={repo.name} />
                                         {/if}
                                     </div>
-                                    <div class="u-flex u-gap-8">
+                                    <div class="u-flex u-gap-8 u-cross-center">
                                         <span class="text u-trim-1">{repo.name}</span>
                                         {#if repo.private}
                                             <span
@@ -196,28 +196,12 @@
                             <p>There are no repositories that match your search.</p>
                         </div>
                         <div class="u-flex u-gap-16 common-section u-main-center">
-                            <Button external href="https://appwrite.io/docs/client/teams" text
-                                >Documentation</Button>
                             <Button secondary on:click={() => (search = '')}>Clear search</Button>
                         </div>
                     </div>
                 </EmptySearch>
             {:else}
-                <EmptySearch hidePages>
-                    <div class="common-section">
-                        <div class="u-text-center common-section">
-                            <p class="text u-line-height-1-5">You have no repositories.</p>
-                            <p class="text u-line-height-1-5">
-                                Need a hand? Learn more in our <a
-                                    href="https://appwrite.io/docs/client/teams"
-                                    target="_blank"
-                                    rel="noopener noreferrer">
-                                    documentation</a
-                                >.
-                            </p>
-                        </div>
-                    </div>
-                </EmptySearch>
+                <EmptySearch hidePages />
             {/if}
         {/await}
     {/if}
diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
index fdf925f62d..069005605f 100644
--- a/src/lib/wizards/functions/cover.svelte
+++ b/src/lib/wizards/functions/cover.svelte
@@ -42,6 +42,7 @@
     import Repositories from './components/repositories.svelte';
     import CreateManual from './createManual.svelte';
     import CreateGit from './createGit.svelte';
+    import { tooltip } from '$lib/actions/tooltip';
 
     let hasInstallations: boolean;
     let selectedRepository: string;
@@ -84,9 +85,7 @@
             <div class="card u-height-100-percent">
                 <section class="common-section">
                     <h2 class="heading-level-6">Quick start</h2>
-                    <p class="u-margin-block-start-8">
-                        Use a starter templates to begin with the basics.
-                    </p>
+                    <p class="u-margin-block-start-8">Use a starter template.</p>
                     <ul
                         class="grid-box u-margin-block-start-16"
                         style:--grid-item-size="8rem"
@@ -141,7 +140,10 @@
                             {/each}
 
                             {#if quickStart.runtimes.length < 6}
-                                <li>
+                                <li
+                                    use:tooltip={{
+                                        content: 'More runtimes coming soon'
+                                    }}>
                                     <Box
                                         class="u-width-full-line u-flex u-cross-center u-gap-8"
                                         padding={16}
@@ -150,6 +152,7 @@
                                             icons={['dotnet', 'deno']}
                                             total={4}
                                             avatarSize="small"
+                                            color="u-color-text-gray"
                                             bordered />
                                     </Box>
                                 </li>
@@ -180,7 +183,7 @@
                                     <div class="avatar is-size-small" style:--p-text-size="1.25rem">
                                         <span class={template.icon} />
                                     </div>
-                                    <div>
+                                    <div class="u-flex u-flex-vertical u-gap-4">
                                         <div class="body-text-2 u-bold u-trim">{template.name}</div>
                                         <div class="u-trim-1 u-color-text-gray">
                                             {template.tagline}
@@ -193,6 +196,7 @@
                 </section>
                 <Button
                     text
+                    noMargin
                     class="u-margin-inline-start-auto u-margin-block-start-16"
                     href={`${base}/console/project-${$page.params.project}/functions/templates`}>
                     <span> All templates </span>
diff --git a/src/lib/wizards/functions/steps/configuration.svelte b/src/lib/wizards/functions/steps/configuration.svelte
index d8afed74b9..b951796e7b 100644
--- a/src/lib/wizards/functions/steps/configuration.svelte
+++ b/src/lib/wizards/functions/steps/configuration.svelte
@@ -22,8 +22,7 @@
             label="Entrypoint"
             id="entrypoint"
             placeholder="Entrypoint"
-            bind:value={$createFunction.entrypoint}
-            required />
+            bind:value={$createFunction.entrypoint} />
         <Collapsible>
             <CollapsibleItem>
                 <svelte:fragment slot="title">Build commands</svelte:fragment>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte
index 63e48a07fb..d8822331e2 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte
@@ -63,7 +63,7 @@
             target="_blank"
             rel="noopener noreferrer"
             class="link">
-            Permissions fuide
+            Permissions guide
         </a>.
     </p>
     <svelte:fragment slot="aside">
diff --git a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
index a6b8371116..6e686948ff 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
@@ -25,15 +25,13 @@
         TableRow,
         TableScroll
     } from '$lib/elements/table';
-    import { execute, func, proxyRuleList } from './store';
+    import { deploymentList, execute, func, proxyRuleList } from './store';
     import { Container } from '$lib/layout';
     import { app } from '$lib/stores/app';
     import { calculateSize, humanFileSize } from '$lib/helpers/sizeConvertion';
     import { Query, type Models } from '@appwrite.io/console';
-    import type { PageData } from './$types';
     import Delete from './delete.svelte';
     import Create from './create.svelte';
-    import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import Activate from './activate.svelte';
     import { calculateTime } from '$lib/helpers/timeConversion';
@@ -43,23 +41,21 @@
     import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
     import DeploymentDomains from './deploymentDomains.svelte';
 
-    export let data: PageData;
+    export let data;
 
     let showDropdown = [];
     let showDelete = false;
     let showActivate = false;
     let showRedeploy = false;
+    let showAlert = true;
 
     let selectedDeployment: Models.Deployment = null;
     let activeDeployment: Models.Deployment = null;
 
-    onMount(async () => {
-        activeDeployment = await getActiveDeployment();
-    });
-
     async function getActiveDeployment() {
+        if (!$func?.deployment) return null;
         const list = await sdk.forProject.functions.listDeployments($page.params.function, [
-            Query.equal('$id', $func?.deployment)
+            Query.equal('$id', $func.deployment)
         ]);
         return list?.deployments?.[0];
     }
@@ -67,6 +63,21 @@
     function handleActivate() {
         invalidate(Dependencies.DEPLOYMENTS);
     }
+
+    deploymentList.subscribe((list: Models.DeploymentList | null) => {
+        if (list?.deployments) {
+            let activeDep = list.deployments.find(
+                (deployment) => deployment.$id === $func.deployment
+            );
+            if (!activeDep) {
+                getActiveDeployment().then((deployment) => {
+                    activeDeployment = deployment;
+                });
+            } else {
+                activeDeployment = activeDep;
+            }
+        }
+    });
 </script>
 
 <Container>
@@ -74,17 +85,20 @@
         <Heading tag="h2" size="5">Deployments</Heading>
         <Create main />
     </div>
-    {#if data.deployments.total}
+    {#if $deploymentList?.total}
         <div class="common-section">
             <Heading tag="h3" size="7">Active</Heading>
         </div>
-        {#if activeDeployment && !$func.live}
-            <div class="u-margin-block-start-8">
-                <Alert type="warning" isStandalone dismissible>
-                    Some configuration options are not live yet. Redeploy your function to apply
-                    latest changes.
-                </Alert>
-            </div>
+        {#if activeDeployment && !$func.live && showAlert}
+            <Alert
+                type="warning"
+                class="u-margin-block-start-8"
+                isStandalone
+                dismissible
+                on:dismiss={() => (showAlert = false)}>
+                Some configuration options are not live yet. Redeploy your function to apply latest
+                changes.
+            </Alert>
         {/if}
         {#if activeDeployment}
             <CardGrid>
@@ -130,8 +144,12 @@
                             <Pill
                                 danger={status === 'failed'}
                                 warning={status === 'building'}
-                                info={status === 'ready'}>
-                                <span class="text u-trim">{activeDeployment.status}</span>
+                                success={status === 'ready'}>
+                                <span class="text u-trim">
+                                    {activeDeployment.status === 'ready'
+                                        ? 'active'
+                                        : activeDeployment.status}
+                                </span>
                             </Pill>
                         </div>
                     </div>
@@ -183,12 +201,12 @@
         <div class="common-section">
             <Heading tag="h3" size="7">All</Heading>
         </div>
-        {#if data.deployments.total > 0}
+        {#if $deploymentList.total}
             <div class="u-margin-block-start-24">
                 <TableScroll noMargin>
                     <TableHeader>
                         <TableCellHead width={150}>Deployment ID</TableCellHead>
-                        <TableCellHead width={80}>Status</TableCellHead>
+                        <TableCellHead width={100}>Status</TableCellHead>
                         <TableCellHead width={80}>Source</TableCellHead>
                         <TableCellHead width={180}>Updated</TableCellHead>
                         <TableCellHead width={80}>Build Time</TableCellHead>
@@ -196,7 +214,7 @@
                         <TableCellHead width={40} />
                     </TableHeader>
                     <TableBody>
-                        {#each data.deployments.deployments as deployment, index}
+                        {#each $deploymentList.deployments as deployment, index (deployment.$id)}
                             {@const status = deployment.status}
                             <TableRow>
                                 <TableCell width={150} title="Deployment ID">
@@ -333,7 +351,7 @@
         name="Deployments"
         limit={data.limit}
         offset={data.offset}
-        total={data.deployments.total} />
+        total={$deploymentList?.total} />
 </Container>
 
 {#if selectedDeployment}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/+page.ts
index 1da9b2ebc2..d09a6161f5 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/+page.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/+page.ts
@@ -14,7 +14,7 @@ export const load: PageLoad = async ({ params, depends, url, route, parent }) =>
     return {
         offset,
         limit,
-        deployments: await sdk.forProject.functions.listDeployments(params.function, [
+        deploymentList: await sdk.forProject.functions.listDeployments(params.function, [
             Query.limit(limit),
             Query.offset(offset),
             Query.orderDesc('')
diff --git a/src/routes/console/project-[project]/functions/function-[function]/activate.svelte b/src/routes/console/project-[project]/functions/function-[function]/activate.svelte
index 69aefb4462..4da5196f38 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/activate.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/activate.svelte
@@ -35,7 +35,11 @@
     };
 </script>
 
-<Modal title="Activate Deployment" bind:show={showActivate} onSubmit={handleSubmit}>
+<Modal
+    title="Activate Deployment"
+    bind:show={showActivate}
+    onSubmit={handleSubmit}
+    headerDivider={false}>
     <p>Are you sure you want to activate this deployment?</p>
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showActivate = false)}>Cancel</Button>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/createManual.svelte b/src/routes/console/project-[project]/functions/function-[function]/createManual.svelte
index cada9f7e5a..be24aece1e 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/createManual.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/createManual.svelte
@@ -33,8 +33,8 @@
                 functionId,
                 files[0],
                 active,
-                entrypoint,
-                buildCommand
+                entrypoint || undefined,
+                buildCommand || undefined
             );
             await invalidate(Dependencies.DEPLOYMENTS);
             files = undefined;
@@ -76,8 +76,7 @@
             label="Entrypoint"
             id="entrypoint"
             placeholder="Entrypoint"
-            bind:value={entrypoint}
-            required />
+            bind:value={entrypoint} />
         {#if $func.version !== 'v3'}
             <Alert type="info">
                 <svelte:fragment slot="title">
diff --git a/src/routes/console/project-[project]/functions/function-[function]/redeployModal.svelte b/src/routes/console/project-[project]/functions/function-[function]/redeployModal.svelte
index 6d68e2ec35..6f04929c0b 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/redeployModal.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/redeployModal.svelte
@@ -25,8 +25,8 @@
             });
             trackEvent(Submit.FunctionRedeploy);
 
-            invalidate(Dependencies.DEPLOYMENTS);
             invalidate(Dependencies.FUNCTION);
+            invalidate(Dependencies.DEPLOYMENTS);
             show = false;
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
index dabf341fe3..499c2d49f0 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.svelte
@@ -20,6 +20,7 @@
     import { Button } from '$lib/elements/forms';
 
     export let data;
+    let showAlert = true;
 
     const sdkCreateVariable = async (key: string, value: string) => {
         await sdk.forProject.functions.createVariable($func.$id, key, value);
@@ -42,8 +43,12 @@
 
 <Container>
     <Heading tag="h2" size="5">Settings</Heading>
-    {#if $func.version !== 'v3'}
-        <Alert type="warning" dismissible class="u-margin-block-start-24">
+    {#if $func.version !== 'v3' && showAlert}
+        <Alert
+            type="warning"
+            dismissible
+            class="u-margin-block-start-24"
+            on:dismiss={() => (showAlert = false)}>
             <svelte:fragment slot="title">Your function is outdated</svelte:fragment>
             Update your function version to make use of new features including build commands and HTTP
             data in your executions. To update, follow the steps outlined in our
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts
index d5e4fccb9c..cf2a5f98bc 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts
@@ -32,6 +32,7 @@ export const load: PageLoad = async ({ params, depends }) => {
     return {
         variables,
         globalVariables,
+        runtimesList: sdk.forProject.functions.listRuntimes(),
         installations: sdk.forProject.vcs.listInstallations()
     };
 };
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte
index 58dab72f22..df75532d11 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte
@@ -289,7 +289,7 @@
                                     first configure your environment variables.
                                     <svelte:fragment slot="buttons">
                                         <Button
-                                            href="https://appwrite.io/docs/environment-variables#vcs_(version_control_system)"
+                                            href="https://appwrite.io/docs/configuration#git"
                                             external
                                             text>
                                             Learn more
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/updateRuntime.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/updateRuntime.svelte
index b5c401fc4e..fc871f2832 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/updateRuntime.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/updateRuntime.svelte
@@ -10,7 +10,7 @@
     import { onMount } from 'svelte';
     import { func } from '../store';
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
-    import { runtimesList } from '$routes/console/project-[project]/functions/store';
+    import { runtimesList } from '../../store';
 
     const functionId = $page.params.function;
     let runtime: string = null;
diff --git a/src/routes/console/project-[project]/functions/function-[function]/store.ts b/src/routes/console/project-[project]/functions/function-[function]/store.ts
index 21af90eb48..c08ec380a8 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/store.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/store.ts
@@ -3,6 +3,10 @@ import { derived, writable, type Writable } from 'svelte/store';
 import type { Models } from '@appwrite.io/console';
 
 export const func = derived(page, ($page) => $page.data.function as Models.Function);
+export const deploymentList = derived(
+    page,
+    ($page) => $page.data.deploymentList as Models.DeploymentList
+);
 export const proxyRuleList = derived(
     page,
     ($page) => $page.data.proxyRuleList as Models.ProxyRuleList
diff --git a/src/routes/console/project-[project]/functions/templates/+page.svelte b/src/routes/console/project-[project]/functions/templates/+page.svelte
index 776b50b965..3e6c37fb44 100644
--- a/src/routes/console/project-[project]/functions/templates/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/+page.svelte
@@ -8,18 +8,16 @@
         CollapsibleItem,
         EmptySearch,
         Heading,
-        Pagination
+        Pagination,
+        SvgIcon
     } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
-    import { debounce } from '$lib/helpers/debounce';
+    import { Button, InputSearch } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { app } from '$lib/stores/app';
     import { connectTemplate } from '$lib/wizards/functions/cover.svelte';
 
     export let data;
 
-    let searchElement: HTMLInputElement;
-
     function applyFilter(filter: string, value: string, event: Event) {
         const add = (event.target as EventTarget & HTMLInputElement).checked;
         const target = new URL($page.url);
@@ -38,7 +36,6 @@
         const target = new URL($page.url);
         target.searchParams.delete('page');
         target.searchParams.delete('search');
-        searchElement.value = '';
         goto(target.toString());
     }
 
@@ -59,8 +56,8 @@
         }
     }
 
-    const applySearch = debounce((event: Event) => {
-        const value = (event.target as EventTarget & HTMLInputElement).value;
+    function applySearch(event: CustomEvent<string>) {
+        const value = event.detail;
         const target = new URL($page.url);
 
         if (value.length > 0) {
@@ -70,7 +67,7 @@
         }
         target.searchParams.delete('page');
         goto(target.toString(), { keepFocus: true });
-    }, 250);
+    }
 </script>
 
 <Container>
@@ -82,23 +79,10 @@
     </div>
     <div class="grid-300px-1fr u-margin-block-start-24">
         <section>
-            <div
-                class="input-text-wrapper is-with-end-button u-width-full-line u-max-width-500 u-margin-block-start-12"
-                style="--amount-of-buttons:1">
-                <input
-                    bind:this={searchElement}
-                    on:input={applySearch}
-                    type="search"
-                    placeholder="Search templates" />
-                <div class="icon-search" aria-hidden="true" />
-                <button
-                    on:click={clearSearch}
-                    class="button is-text is-only-icon"
-                    aria-label="Clear search"
-                    style="--button-size:1.5rem;">
-                    <span class="icon-x" aria-hidden="true" />
-                </button>
-            </div>
+            <InputSearch
+                placeholder="Search templates"
+                on:clear={clearSearch}
+                on:change={applySearch} />
             <div class="u-margin-block-start-24">
                 <Collapsible>
                     <CollapsibleItem>
@@ -136,11 +120,11 @@
                                             on:change={(e) => applyFilter('runtime', runtime, e)} />
                                         <div class="u-flex u-cross-center u-gap-8">
                                             <div class="avatar is-size-x-small">
-                                                <img
-                                                    src={`${base}/icons/${$app.themeInUse}/color/${icon}.svg`}
-                                                    alt={icon} />
+                                                <SvgIcon name={icon} iconSize="small" />
+                                            </div>
+                                            <div class="u-trim-1 u-capitalize">
+                                                {runtime?.split('-')?.join(' ')}
                                             </div>
-                                            <div class="u-trim-1">{runtime}</div>
                                         </div>
                                     </label>
                                 </li>
@@ -171,10 +155,8 @@
                         {@const hidden = template.runtimes.slice(1, -1)}
                         <li>
                             <article class="card u-min-height-100-percent">
-                                <div class="u-flex u-gap-16 u-cross-center">
-                                    <h2
-                                        class="body-text-1 u-bold u-trim"
-                                        style:break-word="break-word">
+                                <div class="u-flex u-gap-16 u-cross-center u-main-space-between">
+                                    <h2 class="body-text-1 u-bold u-trim-1">
                                         {template.name}
                                     </h2>
                                     <ul class="avatars-group is-with-border">
@@ -242,11 +224,10 @@
                     </div>
                 </EmptySearch>
             {/if}
+            <div class="u-flex u-margin-block-start-32 u-main-space-between u-cross-center">
+                <p class="text">Total templates: {data.sum}</p>
+                <Pagination limit={data.limit} offset={data.offset} sum={data.sum} />
+            </div>
         </section>
     </div>
-    <div class="u-flex u-margin-block-start-32 u-flex-wrap">
-        <div class="u-margin-inline-start-auto">
-            <Pagination limit={data.limit} offset={data.offset} sum={data.sum} />
-        </div>
-    </div>
 </Container>
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 5362ac55cd..7a8809820b 100644
--- a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { Alert, Card, Heading } from '$lib/components';
+    import { Alert, Card, Collapsible, Heading } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
@@ -13,7 +13,7 @@
 <Container>
     <div class="grid-300px-1fr">
         <section>
-            <ul class="collapsible">
+            <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>
@@ -44,7 +44,7 @@
                             alt="" />
                     </section>
                 </li>
-            </ul>
+            </Collapsible>
         </section>
         <section>
             <Card>
@@ -68,16 +68,13 @@
                         In order to clone a template to a locally hosted Appwrite project, you must set
                         up a Git integration and configure your environment variables.
                         <svelte:fragment slot="buttons">
-                            <Button
-                                href="https://appwrite.io/docs/environment-variables"
-                                external
-                                text>
+                            <Button href="https://appwrite.io/docs/configuration#git" external text>
                                 Learn more
                             </Button>
                         </svelte:fragment>
                     </Alert>
                 {/if}
-                <div class="u-flex u-gap-16 u-main-end u-margin-block-start-24">
+                <div class="u-flex u-gap-16 u-main-end u-margin-block-start-24 u-flex-wrap">
                     <Button
                         text
                         href={`https://github.com/${$template.providerOwner}/${$template.providerRepositoryId}`}
@@ -87,13 +84,11 @@
                     </Button>
                     <Button
                         disabled={isSelfHosted && !isVcsEnabled}
-                        secondary
                         on:click={() => connectTemplate($template)}>
                         Create function
                     </Button>
                 </div>
             </Card>
-            <Card>{@html $template.instructions}</Card>
         </section>
     </div>
 </Container>
diff --git a/src/routes/console/project-[project]/settings/updateInstallations.svelte b/src/routes/console/project-[project]/settings/updateInstallations.svelte
index 364ccdb29d..a61bd158b3 100644
--- a/src/routes/console/project-[project]/settings/updateInstallations.svelte
+++ b/src/routes/console/project-[project]/settings/updateInstallations.svelte
@@ -188,10 +188,7 @@
                     When installing Git in a locally hosted Appwrite project, you must first configure
                     your environment variables.
                     <svelte:fragment slot="buttons">
-                        <Button
-                            href="https://appwrite.io/docs/environment-variables#vcs_(version_control_system)"
-                            external
-                            text>
+                        <Button href="https://appwrite.io/docs/configuration#git" external text>
                             Learn more
                         </Button>
                     </svelte:fragment>
diff --git a/src/routes/console/project-[project]/settings/updateServices.svelte b/src/routes/console/project-[project]/settings/updateServices.svelte
index 6efa1d5085..f063c6f9f6 100644
--- a/src/routes/console/project-[project]/settings/updateServices.svelte
+++ b/src/routes/console/project-[project]/settings/updateServices.svelte
@@ -103,23 +103,23 @@
                     <Button text={true} on:click={() => toggleAllServices(true)}>Enable all</Button>
                 </li>
                 <li class="buttons-list-item">
-                    <Button text={true} on:click={() => toggleAllServices(false)}
-                        >Disable all</Button>
+                    <Button text={true} on:click={() => toggleAllServices(false)}>
+                        Disable all
+                    </Button>
                 </li>
             </ul>
-            <form class="form card-separator">
-                <FormList>
-                    <ul class="form-list is-multiple">
-                        {#each $services.list as service}
-                            <InputSwitch
-                                label={service.label}
-                                id={service.method}
-                                bind:value={service.value}
-                                on:change={() => {
-                                    serviceUpdate(service);
-                                }} />
-                        {/each}
-                    </ul>
+            <div class="u-sep-block-start u-padding-block-8 u-margin-block-start-8" />
+            <form class="form">
+                <FormList class="is-multiple">
+                    {#each $services.list as service}
+                        <InputSwitch
+                            label={service.label}
+                            id={service.method}
+                            bind:value={service.value}
+                            on:change={() => {
+                                serviceUpdate(service);
+                            }} />
+                    {/each}
                 </FormList>
             </form>
         </div>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
index 740663410c..a9d40576c0 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/file-[file]/+page.svelte
@@ -26,7 +26,7 @@
     let arePermsDisabled = true;
 
     const getPreview = (fileId: string) =>
-        sdk.forProject.storage.getFilePreview($file.bucketId, fileId, 205, 125).toString() +
+        sdk.forProject.storage.getFilePreview($file.bucketId, fileId, 410, 250).toString() +
         '&mode=admin';
     const getView = (fileId: string) =>
         sdk.forProject.storage.getFileView($file.bucketId, fileId).toString() + '&mode=admin';
@@ -107,7 +107,7 @@
             </svelte:fragment>
 
             <svelte:fragment slot="actions">
-                <Button secondary href={downloadFile()} event="download_file">
+                <Button secondary href={downloadFile()} event="download_file" external>
                     <span class="icon-download" aria-hidden="true" />
                     <span class="text"> Download</span></Button>
             </svelte:fragment>