diff --git a/src/lib/components/trim.svelte b/src/lib/components/trim.svelte
index a43bbb0aa..2d56222c3 100644
--- a/src/lib/components/trim.svelte
+++ b/src/lib/components/trim.svelte
@@ -3,6 +3,7 @@
     import { throttle } from '$lib/helpers/functions';
     import { onMount } from 'svelte';
 
+    export let alternativeTrim = false;
     let showTooltip = false;
     let container: HTMLSpanElement | null;
 
@@ -15,7 +16,7 @@
 
 <svelte:window on:resize={throttle(onResize, 250)} />
 
-<span class="text u-trim" bind:this={container}>
+<span class={`text ${alternativeTrim ? 'u-trim-1' : 'u-trim'}`} bind:this={container}>
     {#if showTooltip}
         <span
             use:tooltip={{
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 7e5069009..b529e0e08 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
@@ -41,6 +41,7 @@
     import RedeployModal from './redeployModal.svelte';
     import DeploymentSource from './deploymentSource.svelte';
     import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
+    import DeploymentDomains from './deploymentDomains.svelte';
 
     export let data: PageData;
 
@@ -107,19 +108,6 @@
                                 {$func.deployment}
                             </Id>
                         </div>
-
-                        <div class="u-flex u-gap-12 u-cross-center u-margin-block-start-12">
-                            <p><b>Domain</b></p>
-                        </div>
-
-                        <div class="u-flex u-gap-12 u-cross-center">
-                            <a
-                                class="u-underline u-cursor-pointer"
-                                href={`https//${data.domain.rules[0].domain}`}
-                                target="_blank">
-                                {data.domain.rules[0].domain}
-                            </a>
-                        </div>
                     </div>
                 </div>
                 <svelte:fragment slot="aside">
@@ -129,14 +117,20 @@
                         <div>
                             <p><b>Build time:</b> {calculateTime(activeDeployment.buildTime)}</p>
                             <p>
-                                <b>Created:</b>
+                                <b>Updated:</b>
                                 <DeploymentCreatedBy deployment={activeDeployment} />
                             </p>
                             <p><b>Size:</b> {fileSize.value + fileSize.unit}</p>
-                            <p>
+                            <p class="u-flex u-gap-4 u-cross-center">
                                 <b>Source:</b>
                                 <DeploymentSource deployment={activeDeployment} />
                             </p>
+                            {#if data.domain?.rules?.length}
+                                <p class="u-flex u-gap-4 u-cross-center">
+                                    <b>Domains:</b>
+                                    <DeploymentDomains domain={data.domain} />
+                                </p>
+                            {/if}
                         </div>
                         <div class="u-flex u-flex-vertical u-cross-end">
                             <Pill
diff --git a/src/routes/console/project-[project]/functions/function-[function]/deploymentDomains.svelte b/src/routes/console/project-[project]/functions/function-[function]/deploymentDomains.svelte
new file mode 100644
index 000000000..0fc004eb2
--- /dev/null
+++ b/src/routes/console/project-[project]/functions/function-[function]/deploymentDomains.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { DropList, DropListLink, Trim } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import type { Models } from '@appwrite.io/console';
+
+    export let domain: Models.ProxyRuleList;
+    let showDropdown = false;
+</script>
+
+<div class="u-flex u-gap-4 u-cross-center">
+    <Trim alternativeTrim>
+        <a href={`https//${domain.rules[0].domain}`} target="_blank">
+            <span class="link">
+                {domain.rules[0].domain}
+            </span> <span class="icon-external-link" aria-hidden="true" />
+        </a>
+    </Trim>
+    {#if domain.rules.length > 1}
+        <DropList bind:show={showDropdown} scrollable>
+            <Pill button on:click={() => (showDropdown = !showDropdown)}>
+                +{domain.rules.length - 1}
+            </Pill>
+            <svelte:fragment slot="list">
+                {#each domain.rules as rule, i}
+                    {#if i !== 0}
+                        <DropListLink href={`https//${rule.domain}`} external icon="external-link">
+                            {rule.domain}
+                        </DropListLink>
+                    {/if}
+                {/each}
+            </svelte:fragment>
+        </DropList>
+    {/if}
+</div>
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 e4dca51fe..4bfe6bd6d 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte
@@ -1,55 +1,32 @@
 <script lang="ts">
-    import { tooltip } from '$lib/actions/tooltip';
+    import { DropList, DropListLink } from '$lib/components';
     import type { Models } from '@appwrite.io/console';
-    import { tick } from 'svelte';
 
     export let deployment: Models.Deployment;
-    let tooltipContent: HTMLDivElement;
+    let showDropdown = false;
 </script>
 
 {#if deployment.type === 'vcs'}
-    <button
-        class="u-cursor-pointer"
-        use:tooltip={{
-            interactive: true,
-            allowHTML: true,
-            trigger: 'click',
-            disabled: false,
-            onShow(instance) {
-                tick().then(() => {
-                    instance.setContent(tooltipContent);
-                });
-            }
-        }}><span class="icon-github" aria-hidden="true" /> <span class="link">Git</span></button>
+    <DropList bind:show={showDropdown}>
+        <button
+            on:click={() => (showDropdown = !showDropdown)}
+            type="button"
+            class="u-flex u-gap-4 u-cross-center">
+            <span class="icon-github" aria-hidden="true" /> <span class="link">Git</span>
+        </button>
+        <svelte:fragment slot="list">
+            <DropListLink href={deployment.providerRepositoryUrl} external icon="github">
+                {deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
+            </DropListLink>
+            <DropListLink href={deployment.providerBranchUrl} external icon="git-branch">
+                {deployment.providerBranch}
+            </DropListLink>
+            <DropListLink href={deployment.providerCommitUrl} external icon="git-commit">
+                {deployment?.providerCommitHash?.substring(0, 7)}
+                {deployment.providerCommitMessage}
+            </DropListLink>
+        </svelte:fragment>
+    </DropList>
 {:else if deployment.type === 'manual'}
     <span class="icon-code" aria-hidden="true" /> <span>Manual</span>
 {/if}
-
-<div class="u-hide">
-    <div bind:this={tooltipContent} class="u-flex u-flex-vertical u-gap-2">
-        <span
-            ><span class="icon-github" aria-hidden="true" />
-            <a
-                class="u-underline u-cursor-pointer"
-                target="_blank"
-                href={deployment.providerRepositoryUrl}
-                >{deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}</a
-            ></span>
-        <span
-            ><span class="icon-git-branch" aria-hidden="true" />
-            <a
-                class="u-underline u-cursor-pointer"
-                target="_blank"
-                href={deployment.providerBranchUrl}>{deployment.providerBranch}</a
-            ></span>
-        <span
-            ><span class="icon-git-commit" aria-hidden="true" />
-            <a
-                class="u-underline u-cursor-pointer"
-                target="_blank"
-                href={deployment.providerCommitUrl}
-                >{deployment?.providerCommitHash?.substring(0, 7)}
-                {deployment.providerCommitMessage}</a
-            ></span>
-    </div>
-</div>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/execute.svelte b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
index aedd63380..55a101245 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
@@ -126,7 +126,7 @@
                         </Label>
                     </div>
                     <div class="form u-grid u-gap-16">
-                        <ul class="form-list">
+                        <FormList>
                             {#if headers}
                                 {#each headers as [name, value], index}
                                     <FormItem isMultiple>
@@ -162,7 +162,7 @@
                                     </FormItem>
                                 {/each}
                             {/if}
-                        </ul>
+                        </FormList>
                         <Button
                             noMargin
                             text