diff --git a/src/routes/(console)/project-[project]/sites/(components)/deploymentCreatedBy.svelte b/src/lib/components/git/deploymentCreatedBy.svelte
similarity index 100%
rename from src/routes/(console)/project-[project]/sites/(components)/deploymentCreatedBy.svelte
rename to src/lib/components/git/deploymentCreatedBy.svelte
diff --git a/src/routes/(console)/project-[project]/sites/(components)/deploymentSource.svelte b/src/lib/components/git/deploymentSource.svelte
similarity index 100%
rename from src/routes/(console)/project-[project]/sites/(components)/deploymentSource.svelte
rename to src/lib/components/git/deploymentSource.svelte
diff --git a/src/lib/components/git/index.ts b/src/lib/components/git/index.ts
index bdf0c7563..c0979a9da 100644
--- a/src/lib/components/git/index.ts
+++ b/src/lib/components/git/index.ts
@@ -2,3 +2,5 @@ export { default as Repositories } from './repositories.svelte';
 export { default as ConnectGit } from './connectGit.svelte';
 export { default as NewRepository } from './newRepository.svelte';
 export { default as RepositoryBehaviour } from './repositoryBehaviour.svelte';
+export { default as DeploymentCreatedBy } from './deploymentCreatedBy.svelte';
+export { default as DeploymentSource } from './deploymentSource.svelte';
diff --git a/src/routes/(console)/project-[project]/functions/create-function/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/functions/create-function/template-[template]/+page.svelte
index b462c1cb0..9676d5706 100644
--- a/src/routes/(console)/project-[project]/functions/create-function/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/create-function/template-[template]/+page.svelte
@@ -16,7 +16,7 @@
     import ConnectBehaviour from './connectBehaviour.svelte';
     import ProductionBranch from '$lib/components/git/productionBranchFieldset.svelte';
     import Configuration from './configuration.svelte';
-    import { ID, Runtime, Type, type Models } from '@appwrite.io/console';
+    import { ID, Runtime, type Models } from '@appwrite.io/console';
     import { NewRepository, Repositories, RepositoryBehaviour } from '$lib/components/git';
     import { consoleVariables } from '$routes/(console)/store';
     import Details from '../(components)/details.svelte';
@@ -105,6 +105,8 @@
             return;
         } else {
             try {
+                const rt = data.template.runtimes.find((r) => r.name === runtime);
+
                 const func = await sdk.forProject.functions.create(
                     id,
                     name,
@@ -115,11 +117,11 @@
                     data.template.timeout ? data.template.timeout : undefined,
                     undefined,
                     undefined,
-                    entrypoint,
+                    entrypoint || rt.entrypoint,
                     undefined,
                     selectedScopes?.length ? selectedScopes : undefined,
-                    $installation.$id,
-                    $repository.id,
+                    connectBehaviour === 'later' ? undefined : $installation?.$id || undefined,
+                    connectBehaviour === 'later' ? undefined : $repository?.id || undefined,
                     branch,
                     silentMode,
                     rootDir,
@@ -145,10 +147,12 @@
                 );
                 await Promise.all(promises);
 
-                await sdk.forProject.functions.createVcsDeployment(
+                await sdk.forProject.functions.createTemplateDeployment(
                     func.$id,
-                    Type.Branch,
-                    branch,
+                    data.template.providerRepositoryId || undefined,
+                    data.template.providerOwner || undefined,
+                    rt?.providerRootDirectory || undefined,
+                    data.template.providerVersion || undefined,
                     true
                 );
 
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/cancel.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/cancel.svelte
similarity index 100%
rename from src/routes/(console)/project-[project]/functions/function-[function]/cancel.svelte
rename to src/routes/(console)/project-[project]/functions/function-[function]/(modals)/cancel.svelte
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/createCli.svelte
similarity index 99%
rename from src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte
rename to src/routes/(console)/project-[project]/functions/function-[function]/(modals)/createCli.svelte
index d745ccc0e..7ba79ec20 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/createCli.svelte
@@ -3,7 +3,7 @@
     import { Modal, Code, Alert } from '$lib/components';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
-    import { func } from './store';
+    import { func } from '../store';
     import SecondaryTabs from '$lib/components/secondaryTabs.svelte';
     import SecondaryTabsItem from '$lib/components/secondaryTabsItem.svelte';
 
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/createGit.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/createGit.svelte
similarity index 99%
rename from src/routes/(console)/project-[project]/functions/function-[function]/createGit.svelte
rename to src/routes/(console)/project-[project]/functions/function-[function]/(modals)/createGit.svelte
index 9e6f79549..9e67b10bd 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/createGit.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/createGit.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
     import { Box, Code, Modal, NumericList, NumericListItem } from '$lib/components';
-    import { func } from './store';
+    import { func } from '../store';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
 
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/createManual.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/createManual.svelte
similarity index 99%
rename from src/routes/(console)/project-[project]/functions/function-[function]/createManual.svelte
rename to src/routes/(console)/project-[project]/functions/function-[function]/(modals)/createManual.svelte
index ea553d71f..55f41ca91 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/createManual.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/createManual.svelte
@@ -14,7 +14,7 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { func } from './store';
+    import { func } from '../store';
 
     export let show = false;
 
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/delete.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/(modals)/delete.svelte
similarity index 100%
rename from src/routes/(console)/project-[project]/functions/function-[function]/delete.svelte
rename to src/routes/(console)/project-[project]/functions/function-[function]/(modals)/delete.svelte
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/+layout.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/+layout.svelte
index 922bb922c..8dca78429 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/+layout.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/+layout.svelte
@@ -10,6 +10,14 @@
     import type { Models } from '@appwrite.io/console';
     import { base } from '$app/paths';
     import { canWriteFunctions } from '$lib/stores/roles';
+    import {
+        IconCalendar,
+        IconClock,
+        IconList,
+        IconPlus,
+        IconSearch,
+        IconXCircle
+    } from '@appwrite.io/pink-icons-svelte';
 
     onMount(() => {
         let previousStatus = null;
@@ -48,7 +56,7 @@
             },
             keys: $page.url.pathname.endsWith($func.$id) ? ['c'] : ['c', 'd'],
             group: 'functions',
-            icon: 'plus',
+            icon: IconPlus,
             disabled: !$canWriteFunctions
         },
         {
@@ -59,7 +67,7 @@
                 );
                 scrollBy({ top: -100 });
             },
-            icon: 'search',
+            icon: IconSearch,
             group: 'functions',
             disabled: !$canWriteFunctions
         },
@@ -71,7 +79,7 @@
                 );
                 scrollBy({ top: -100 });
             },
-            icon: 'calendar',
+            icon: IconCalendar,
             group: 'functions',
             disabled: !$canWriteFunctions
         },
@@ -82,7 +90,7 @@
                     `${base}/project-${$project.$id}/functions/function-${$func.$id}/settings#variables`
                 );
             },
-            icon: 'list',
+            icon: IconList,
             group: 'functions',
             disabled: !$canWriteFunctions
         },
@@ -93,7 +101,7 @@
                     `${base}/project-${$project.$id}/functions/function-${$func.$id}/settings#timeout`
                 );
             },
-            icon: 'x-circle',
+            icon: IconXCircle,
             group: 'functions',
             disabled: !$canWriteFunctions
         },
@@ -105,7 +113,7 @@
                 );
                 scrollBy({ top: -100 });
             },
-            icon: 'clock',
+            icon: IconClock,
             group: 'functions',
             disabled: !$canWriteFunctions
         },
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 37c94a7fe..82bb29875 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/+page.svelte
@@ -3,14 +3,12 @@
     import { page } from '$app/stores';
     import { Empty, PaginationWithLimit, Alert, ViewSelector, EmptySearch } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { deploymentList, func } from './store';
+    import { columns, deploymentList, func } from './store';
     import { Container, ContainerHeader } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
     import Create from './create.svelte';
     import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
     import { readOnly } from '$lib/stores/billing';
-    import { writable } from 'svelte/store';
-    import type { Column } from '$lib/helpers/types';
     import Table from './table.svelte';
     import { Filters } from '$lib/components/filters';
     import { queries, tags } from '$lib/components/filters/store';
@@ -21,8 +19,9 @@
     import { Pill } from '$lib/elements';
     import { onMount } from 'svelte';
     import { canWriteFunctions } from '$lib/stores/roles';
-    import { Typography } from '@appwrite.io/pink-svelte';
+    import { Icon, Typography } from '@appwrite.io/pink-svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
+    import { IconFilterLine } from '@appwrite.io/pink-icons-svelte';
 
     export let data;
 
@@ -31,94 +30,6 @@
 
     let selectedDeployment: Models.Deployment = null;
 
-    const columns = writable<Column[]>([
-        { id: '$id', title: 'Deployment ID', type: 'string', show: true, width: 150 },
-        {
-            id: 'status',
-            title: 'Status',
-            type: 'enum',
-            show: true,
-            width: 110,
-            array: true,
-            format: 'enum',
-            elements: ['ready', 'processing', 'building', 'waiting', 'cancelled', 'failed'],
-            filter: false
-        },
-        {
-            id: 'type',
-            title: 'Source',
-            type: 'string',
-            show: true,
-            width: 90,
-            array: true,
-            format: 'enum',
-            elements: [
-                { value: 'manual', label: 'Manual' },
-                { value: 'cli', label: 'CLI' },
-                { value: 'vcs', label: 'Git' }
-            ]
-        },
-        {
-            id: '$updatedAt',
-            title: 'Updated',
-            type: 'datetime',
-            show: true,
-            width: 150,
-            format: 'datetime'
-        },
-        {
-            id: 'buildTime',
-            title: 'Build time',
-            type: 'integer',
-            show: true,
-            width: 90,
-            elements: [
-                {
-                    value: 15,
-                    label: 'more than 15 seconds'
-                },
-                {
-                    value: 60,
-                    label: 'more than 1 minute'
-                },
-                {
-                    value: 5 * 60,
-                    label: 'more than 5 minutes'
-                }
-            ],
-            filter: false
-        },
-        {
-            id: 'size',
-            title: 'Source size',
-            type: 'integer',
-            show: true,
-            width: 140,
-            elements: [
-                {
-                    value: 2 * 1000 * 1000,
-                    label: 'more than 2MB'
-                },
-                {
-                    value: 10 * 1000 * 1000,
-                    label: 'more than 10MB'
-                },
-                {
-                    value: 50 * 1000 * 1000,
-                    label: 'more than 50MB'
-                }
-            ]
-        },
-        {
-            id: 'buildSize',
-            title: 'Build size',
-            type: 'integer',
-            show: false,
-            filter: false,
-            width: 80
-        }
-    ]);
-
     let showMobileFilters = false;
 
     onMount(() => {
@@ -138,8 +49,9 @@
     {#if !data?.deploymentList?.total && !data?.query}
         <Empty single target="deployment">
             <div class="u-text-center">
-                <Typography.Title size="s"
-                    >Create your first deployment to get started.</Typography.Title>
+                <Typography.Title size="s">
+                    Create your first deployment to get started.
+                </Typography.Title>
                 <p class="body-text-2 u-bold u-margin-block-start-4">
                     Learn more about deployments in our Documentation.
                 </p>
@@ -157,9 +69,7 @@
     {:else}
         {@const activeDeployment = data.activeDeployment}
 
-        <div class="common-section">
-            <Typography.Title size="s">Active</Typography.Title>
-        </div>
+        <Typography.Title size="s">Active</Typography.Title>
         {#if data?.activeDeployment && !$func.live && showAlert}
             <Alert
                 type="warning"
@@ -221,7 +131,7 @@
                 </div>
             </Empty>
         {:else}
-            <Empty noMedia single>
+            <Empty single>
                 <Create secondary round>
                     <i class="icon-plus" />
                 </Create>
@@ -240,79 +150,78 @@
                 </div>
             </Empty>
         {/if}
-        <div class="u-margin-block-start-48">
-            <Typography.Title size="s">All deployments</Typography.Title>
-            <div class="u-flex u-main-space-between is-not-mobile u-margin-block-start-16">
-                <div class="u-flex u-gap-8 u-cross-center u-flex-wrap">
-                    <QuickFilters {columns} />
-                    <Filters
-                        query={data.query}
-                        {columns}
-                        let:disabled
-                        let:toggle
-                        singleCondition
-                        analyticsSource="function_filters">
-                        <div class="u-flex u-gap-4">
-                            <Button
-                                text
-                                on:click={toggle}
-                                {disabled}
-                                ariaLabel="open filter"
-                                noMargin={!$tags?.length}>
-                                <span class="icon-filter-line" />
-                                <span class="text">More filters</span>
-                            </Button>
-                            {#if $tags?.length}
-                                <div
-                                    style="flex-basis:1px; background-color:hsl(var(--border)); width: 1px">
-                                </div>
-                                <Button text on:click={clearAll}>Clear all</Button>
-                            {/if}
-                        </div>
-                    </Filters>
-                </div>
-                <div class="u-flex u-gap-16">
-                    <ViewSelector view={View.Table} {columns} hideView allowNoColumns hideText />
-                </div>
+        <Typography.Title size="s">All deployments</Typography.Title>
+        <div class="u-flex u-main-space-between is-not-mobile u-margin-block-start-16">
+            <div class="u-flex u-gap-8 u-cross-center u-flex-wrap">
+                <QuickFilters {columns} />
+                <Filters
+                    query={data.query}
+                    {columns}
+                    let:disabled
+                    let:toggle
+                    singleCondition
+                    analyticsSource="function_filters">
+                    <div class="u-flex u-gap-4">
+                        <Button
+                            text
+                            on:click={toggle}
+                            {disabled}
+                            ariaLabel="open filter"
+                            compact={!$tags?.length}>
+                            <Icon icon={IconFilterLine} size="s" slot="start" />
+                            <span class="text">More filters</span>
+                        </Button>
+                        {#if $tags?.length}
+                            <div
+                                style="flex-basis:1px; background-color:hsl(var(--border)); width: 1px">
+                            </div>
+                            <Button text on:click={clearAll}>Clear all</Button>
+                        {/if}
+                    </div>
+                </Filters>
             </div>
-            <div class="is-only-mobile">
-                <div class="u-flex u-main-space-between u-margin-block-start-16">
-                    <Button
-                        text
-                        on:click={() => (showMobileFilters = !showMobileFilters)}
-                        ariaLabel="toggle filters"
-                        noMargin>
-                        <span class="icon-filter-line" />
-                        <span class="text">Filters</span>
-                    </Button>
+            <div class="u-flex u-gap-16">
+                <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
+            </div>
+        </div>
+        <div class="is-only-mobile">
+            <div class="u-flex u-main-space-between u-margin-block-start-16">
+                <Button
+                    text
+                    on:click={() => (showMobileFilters = !showMobileFilters)}
+                    ariaLabel="toggle filters"
+                    compact>
+                    <Icon icon={IconFilterLine} size="s" slot="start" />
 
-                    <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
-                </div>
-                <div
-                    class:u-hide={!showMobileFilters}
-                    class:u-flex={showMobileFilters}
-                    class=" u-gap-8 u-flex-wrap u-margin-block-start-16">
-                    <QuickFilters {columns} />
+                    <span class="text">Filters</span>
+                </Button>
 
-                    <Filters
-                        query={data.query}
-                        {columns}
-                        clearOnClick
-                        analyticsSource="function_filters">
-                        <svelte:fragment slot="mobile" let:disabled let:toggle>
-                            <Pill
-                                button
-                                on:click={toggle}
-                                {disabled}
-                                class="u-flex u-gap-4 u-cross-center"
-                                style="--p-tag-content-height: auto">
-                                <!-- <span class="icon-filter-line" /> -->
-                                <span class="text">More filters</span>
-                                <span class="icon-cheveron-down" />
-                            </Pill>
-                        </svelte:fragment>
-                    </Filters>
-                </div>
+                <ViewSelector view={View.Table} {columns} hideView allowNoColumns />
+            </div>
+            <div
+                class:u-hide={!showMobileFilters}
+                class:u-flex={showMobileFilters}
+                class=" u-gap-8 u-flex-wrap u-margin-block-start-16">
+                <QuickFilters {columns} />
+
+                <Filters
+                    query={data.query}
+                    {columns}
+                    clearOnClick
+                    analyticsSource="function_filters">
+                    <svelte:fragment slot="mobile" let:disabled let:toggle>
+                        <Pill
+                            button
+                            on:click={toggle}
+                            {disabled}
+                            class="u-flex u-gap-4 u-cross-center"
+                            style="--p-tag-content-height: auto">
+                            <!-- <span class="icon-filter-line" /> -->
+                            <span class="text">More filters</span>
+                            <span class="icon-cheveron-down" />
+                        </Pill>
+                    </svelte:fragment>
+                </Filters>
             </div>
         </div>
         {#if $deploymentList.total}
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/create.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/create.svelte
index 1f736b149..57f146e29 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/create.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/create.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
     import { beforeNavigate } from '$app/navigation';
-    import { DropList, DropListItem } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { canWriteFunctions } from '$lib/stores/roles';
+    import { ActionMenu, Icon, Popover } from '@appwrite.io/pink-svelte';
     import CreateCli from './createCli.svelte';
     import CreateGit from './createGit.svelte';
     import CreateManual from './createManual.svelte';
     import { showCreateDeployment } from './store';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let secondary = false;
     export let round = false;
@@ -24,35 +25,43 @@
     }
 </script>
 
-<DropList bind:show placement="bottom-end">
+<Popover let:toggle placement="bottom-end" padding="none">
     {#if $canWriteFunctions}
-        <Button {secondary} icon={round} on:click={() => (show = !show)} event="create_deployment">
+        <Button {secondary} icon={round} on:click={toggle} event="create_deployment">
             <slot>
                 {#if !secondary}
-                    <span class="icon-plus" aria-hidden="true" />
+                    <Icon icon={IconPlus} size="s" />
                 {/if}
-                <span class="text">Create deployment</span>
+                Create deployment
             </slot>
         </Button>
     {/if}
-    <svelte:fragment slot="list">
-        <DropListItem
-            on:click={() => {
-                showCreateGit = true;
-                show = false;
-            }}>Git</DropListItem>
-        <DropListItem
-            on:click={() => {
-                showCreateCli = true;
-                show = false;
-            }}>CLI</DropListItem>
-        <DropListItem
-            on:click={() => {
-                showCreateManual = true;
-                show = false;
-            }}>Manual</DropListItem>
+    <svelte:fragment slot="tooltip" let:toggle>
+        <ActionMenu.Root>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showCreateGit = true;
+                    toggle(e);
+                }}>
+                Git
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showCreateCli = true;
+                    toggle(e);
+                }}>
+                CLI
+            </ActionMenu.Item.Button>
+            <ActionMenu.Item.Button
+                on:click={(e) => {
+                    showCreateManual = true;
+                    toggle(e);
+                }}>
+                Manual
+            </ActionMenu.Item.Button>
+        </ActionMenu.Root>
     </svelte:fragment>
-</DropList>
+</Popover>
 <CreateCli bind:show={showCreateCli} />
 <CreateGit bind:show={showCreateGit} />
 <CreateManual bind:show={showCreateManual} />
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 4815cd33e..2ee177d31 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
@@ -12,10 +12,10 @@
     import { deployment } from './store';
     import BoxAvatar from '$lib/components/boxAvatar.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import Delete from '../delete.svelte';
     import Activate from '../activate.svelte';
-    import Cancel from '../cancel.svelte';
+    import Cancel from '../(modals)/cancel.svelte';
     import DeploymentCard from '../deploymentCard.svelte';
+    import Delete from '../(modals)/delete.svelte';
 
     export let data;
 
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCard.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCard.svelte
index a87c83a90..b26e1becf 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCard.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCard.svelte
@@ -5,11 +5,10 @@
     import { Pill } from '$lib/elements';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { calculateTime } from '$lib/helpers/timeConversion';
-    import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
-    import DeploymentSource from './deploymentSource.svelte';
 
     import DeploymentDomains from './deploymentDomains.svelte';
     import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { DeploymentCreatedBy, DeploymentSource } from '$lib/components/git';
 
     export let deployment: Models.Deployment;
 </script>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCreatedBy.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCreatedBy.svelte
deleted file mode 100644
index 15e429722..000000000
--- a/src/routes/(console)/project-[project]/functions/function-[function]/deploymentCreatedBy.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-    import { timeFromNow } from '$lib/helpers/date';
-    import type { Models } from '@appwrite.io/console';
-
-    export let deployment: Models.Deployment;
-</script>
-
-{timeFromNow(deployment.$updatedAt)}
-{#if deployment.providerCommitAuthor}
-    by <a
-        class="u-underline u-cursor-pointer"
-        target="_blank"
-        href={deployment.providerCommitAuthorUrl}>{deployment.providerCommitAuthor}</a>
-{/if}
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/deploymentSource.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/deploymentSource.svelte
deleted file mode 100644
index c81332f21..000000000
--- a/src/routes/(console)/project-[project]/functions/function-[function]/deploymentSource.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-    import { DropList, DropListLink, Trim } from '$lib/components';
-    import type { Models } from '@appwrite.io/console';
-
-    export let deployment: Models.Deployment;
-    let showDropdown = false;
-</script>
-
-{#if deployment.type === 'vcs'}
-    <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">GitHub</span>
-        </button>
-        <svelte:fragment slot="list">
-            <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"
-                iconStyle="font-size:20px">
-                {deployment.providerBranch}
-            </DropListLink>
-            {#if deployment?.providerCommitMessage && deployment?.providerCommitHash && deployment?.providerCommitUrl}
-                <DropListLink
-                    href={deployment.providerCommitUrl}
-                    external
-                    icon="git-commit"
-                    iconStyle="font-size:20px">
-                    <Trim alternativeTrim>
-                        <span style="white-space: pre-wrap">
-                            {deployment?.providerCommitHash?.substring(0, 7)}
-                            {deployment.providerCommitMessage}
-                        </span>
-                    </Trim>
-                </DropListLink>
-            {/if}
-        </svelte:fragment>
-    </DropList>
-{:else if deployment.type === 'manual'}
-    <span class="icon-code" aria-hidden="true" /> <span>Manual</span>
-{:else if deployment.type === 'cli'}
-    <span class="icon-terminal" aria-hidden="true" /> <span>CLI</span>
-{/if}
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 b38f241a9..ef87f8297 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/store.ts
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/store.ts
@@ -1,6 +1,7 @@
 import { page } from '$app/stores';
 import { derived, writable, type Writable } from 'svelte/store';
 import type { Models } from '@appwrite.io/console';
+import type { Column } from '$lib/helpers/types';
 
 export const func = derived(page, ($page) => $page.data.function as Models.Function);
 export const deploymentList = derived(
@@ -23,3 +24,91 @@ export const repositories: Writable<{
 });
 
 export const showCreateDeployment: Writable<boolean> = writable(false);
+
+export const columns = writable<Column[]>([
+    { id: '$id', title: 'Deployment ID', type: 'string', show: true, width: 150 },
+    {
+        id: 'status',
+        title: 'Status',
+        type: 'enum',
+        show: true,
+        width: 110,
+        array: true,
+        format: 'enum',
+        elements: ['ready', 'processing', 'building', 'waiting', 'cancelled', 'failed'],
+        filter: false
+    },
+    {
+        id: 'type',
+        title: 'Source',
+        type: 'string',
+        show: true,
+        width: 90,
+        array: true,
+        format: 'enum',
+        elements: [
+            { value: 'manual', label: 'Manual' },
+            { value: 'cli', label: 'CLI' },
+            { value: 'vcs', label: 'Git' }
+        ]
+    },
+    {
+        id: '$updatedAt',
+        title: 'Updated',
+        type: 'datetime',
+        show: true,
+        width: 150,
+        format: 'datetime'
+    },
+    {
+        id: 'buildTime',
+        title: 'Build time',
+        type: 'integer',
+        show: true,
+        width: 90,
+        elements: [
+            {
+                value: 15,
+                label: 'more than 15 seconds'
+            },
+            {
+                value: 60,
+                label: 'more than 1 minute'
+            },
+            {
+                value: 5 * 60,
+                label: 'more than 5 minutes'
+            }
+        ],
+        filter: false
+    },
+    {
+        id: 'size',
+        title: 'Source size',
+        type: 'integer',
+        show: true,
+        width: 140,
+        elements: [
+            {
+                value: 2 * 1000 * 1000,
+                label: 'more than 2MB'
+            },
+            {
+                value: 10 * 1000 * 1000,
+                label: 'more than 10MB'
+            },
+            {
+                value: 50 * 1000 * 1000,
+                label: 'more than 50MB'
+            }
+        ]
+    },
+    {
+        id: 'buildSize',
+        title: 'Build size',
+        type: 'integer',
+        show: false,
+        filter: false,
+        width: 80
+    }
+]);
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/table.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/table.svelte
index 16a08f212..168219e30 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/table.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/table.svelte
@@ -1,26 +1,27 @@
 <script lang="ts">
-    import { DropList, DropListItem, DropListLink, Id } from '$lib/components';
+    import { DropListItem, DropListLink, Id } from '$lib/components';
     import type { PageData } from './$types';
     import { type Models } from '@appwrite.io/console';
     import type { Column } from '$lib/helpers/types';
     import { Pill } from '$lib/elements';
     import { calculateTime } from '$lib/helpers/timeConversion';
-    import DeploymentSource from './deploymentSource.svelte';
-    import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
     import { timer } from '$lib/actions/timer';
     import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { func } from './store';
     import { page } from '$app/stores';
-    import Delete from './delete.svelte';
     import Activate from './activate.svelte';
     import RedeployModal from './redeployModal.svelte';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import Cancel from './cancel.svelte';
+    import Cancel from './(modals)/cancel.svelte';
     import { sdk } from '$lib/stores/sdk';
     import { base } from '$app/paths';
-    import { Table } from '@appwrite.io/pink-svelte';
+    import { ActionMenu, Icon, Popover, Table } from '@appwrite.io/pink-svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
+    import { IconDotsHorizontal } from '@appwrite.io/pink-icons-svelte';
+    import { Button } from '$lib/elements/forms';
+    import { DeploymentCreatedBy, DeploymentSource } from '$lib/components/git';
+    import Delete from './(modals)/delete.svelte';
 
     export let columns: Column[];
     export let data: PageData;
@@ -111,74 +112,71 @@
                 {/if}
             {/each}
             <Table.Cell>
-                <DropList bind:show={showDropdown[index]} placement="bottom-start" noArrow>
-                    <button
-                        class="button is-only-icon is-text"
-                        aria-label="More options"
-                        on:click|preventDefault={() => {
-                            showDropdown[index] = !showDropdown[index];
-                        }}>
-                        <span class="icon-dots-horizontal" aria-hidden="true" />
-                    </button>
-                    <svelte:fragment slot="list">
-                        <DropListItem
-                            icon="refresh"
-                            on:click={() => {
-                                selectedDeployment = deployment;
-                                showRedeploy = true;
-                                showDropdown = [];
-                                trackEvent(Click.FunctionsRedeployClick);
-                            }}>
-                            Redeploy
-                        </DropListItem>
-                        {#if deployment.status === 'ready' && deployment.$id !== $func.deployment}
+                <Popover let:toggle placement="bottom-start">
+                    <Button icon text on:click={toggle}>
+                        <Icon icon={IconDotsHorizontal} size="s" />
+                    </Button>
+                    <svelte:fragment slot="tooltip">
+                        <ActionMenu.Root>
                             <DropListItem
-                                icon="lightning-bolt"
+                                icon="refresh"
                                 on:click={() => {
                                     selectedDeployment = deployment;
-                                    showActivate = true;
+                                    showRedeploy = true;
                                     showDropdown = [];
+                                    trackEvent(Click.FunctionsRedeployClick);
                                 }}>
-                                Activate
+                                Redeploy
                             </DropListItem>
-                        {/if}
-                        <DropListLink
-                            icon="terminal"
-                            href={`${base}/project-${$page.params.project}/functions/function-${$page.params.function}/deployment-${deployment.$id}`}>
-                            Logs
-                        </DropListLink>
-                        <DropListLink
-                            icon="download"
-                            href={getDownload(deployment.$id)}
-                            on:click={() => (showDropdown[index] = false)}>
-                            Download
-                        </DropListLink>
-                        {#if deployment.status === 'processing' || deployment.status === 'building' || deployment.status === 'waiting'}
-                            <DropListItem
-                                icon="x-circle"
-                                event="deployment_cancel"
-                                on:click={() => {
-                                    selectedDeployment = deployment;
-                                    showDropdown = [];
-                                    showCancel = true;
-                                }}>
-                                Cancel
-                            </DropListItem>
-                        {/if}
-                        {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment.status !== 'waiting'}
-                            <DropListItem
-                                icon="trash"
-                                on:click={() => {
-                                    selectedDeployment = deployment;
-                                    showDropdown = [];
-                                    showDelete = true;
-                                    trackEvent(Click.FunctionsDeploymentDeleteClick);
-                                }}>
-                                Delete
-                            </DropListItem>
-                        {/if}
+                            {#if deployment.status === 'ready' && deployment.$id !== $func.deployment}
+                                <DropListItem
+                                    icon="lightning-bolt"
+                                    on:click={() => {
+                                        selectedDeployment = deployment;
+                                        showActivate = true;
+                                        showDropdown = [];
+                                    }}>
+                                    Activate
+                                </DropListItem>
+                            {/if}
+                            <DropListLink
+                                icon="terminal"
+                                href={`${base}/project-${$page.params.project}/functions/function-${$page.params.function}/deployment-${deployment.$id}`}>
+                                Logs
+                            </DropListLink>
+                            <DropListLink
+                                icon="download"
+                                href={getDownload(deployment.$id)}
+                                on:click={() => (showDropdown[index] = false)}>
+                                Download
+                            </DropListLink>
+                            {#if deployment.status === 'processing' || deployment.status === 'building' || deployment.status === 'waiting'}
+                                <DropListItem
+                                    icon="x-circle"
+                                    event="deployment_cancel"
+                                    on:click={() => {
+                                        selectedDeployment = deployment;
+                                        showDropdown = [];
+                                        showCancel = true;
+                                    }}>
+                                    Cancel
+                                </DropListItem>
+                            {/if}
+                            {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment.status !== 'waiting'}
+                                <DropListItem
+                                    icon="trash"
+                                    on:click={() => {
+                                        selectedDeployment = deployment;
+                                        showDropdown = [];
+                                        showDelete = true;
+                                        trackEvent(Click.FunctionsDeploymentDeleteClick);
+                                    }}>
+                                    Delete
+                                </DropListItem>
+                            {/if}
+                        </ActionMenu.Root>
                     </svelte:fragment>
-                </DropList>
+                </Popover>
             </Table.Cell>
         </Table.Row>
     {/each}
diff --git a/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte b/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
index 6cd457643..b6a59c19d 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/siteCard.svelte
@@ -13,8 +13,8 @@
         Tooltip,
         Typography
     } from '@appwrite.io/pink-svelte';
-    import DeploymentSource from './deploymentSource.svelte';
-    import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
+    import { DeploymentSource, DeploymentCreatedBy } from '$lib/components/git';
+
     import { Button } from '$lib/elements/forms';
     import { IconInfo, IconQrcode } from '@appwrite.io/pink-icons-svelte';
     import OpenOnMobileModal from './openOnMobileModal.svelte';
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte
index 066062e47..8af161028 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte
@@ -3,8 +3,7 @@
     import type { PageData } from './$types';
     import { type Models } from '@appwrite.io/console';
     import { formatTimeDetailed } from '$lib/helpers/timeConversion';
-    import DeploymentSource from '../../(components)/deploymentSource.svelte';
-    import DeploymentCreatedBy from '../../(components)/deploymentCreatedBy.svelte';
+    import { DeploymentSource, DeploymentCreatedBy } from '$lib/components/git';
     import { timer } from '$lib/actions/timer';
     import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { page } from '$app/stores';
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte
index 38451a9f6..a706629e0 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte
@@ -4,10 +4,8 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { type Models } from '@appwrite.io/console';
-    import DeploymentCreatedBy from '../(components)/deploymentCreatedBy.svelte';
-    import DeploymentSource from '../(components)/deploymentSource.svelte';
+    import { DeploymentSource, DeploymentCreatedBy } from '$lib/components/git';
     import Id from '$lib/components/id.svelte';
-
     import RedeployModal from '../redeployModal.svelte';
     import { Card } from '$lib/components';
     import ActivateDeploymentModal from '../activateDeploymentModal.svelte';