diff --git a/package.json b/package.json
index 6a9fd180b..3ee5d8b99 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@35f29290",
         "@appwrite.io/pink-legacy": "^1.0.1",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f24ff0b",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@134aa5d",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5a1de694f..fa1738cb1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ importers:
         specifier: ^1.0.1
         version: 1.0.1
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f24ff0b
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f24ff0b(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@134aa5d
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@134aa5d(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -215,14 +215,14 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ae1eb53}
     version: 1.2.1
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@35f29290':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@35f29290}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@134aa5d0d1920f2524d866d213e1134cb62f8962':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@134aa5d0d1920f2524d866d213e1134cb62f8962}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f24ff0b9bcff5210777bdc95ae98de430c2056cd':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f24ff0b9bcff5210777bdc95ae98de430c2056cd}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@35f29290':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@35f29290}
     version: 1.0.0-next.7
     peerDependencies:
       svelte: ^4.0.0
@@ -236,8 +236,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.1':
     resolution: {integrity: sha512-e5IZx2drqSxgl2WXvmr0eLfg/WiOCzuqQE8oksD+9GoFBkcL9HWvXul5GjFni3RBAN9XFRL3nUExGk4T0H8sFw==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f24ff0b':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f24ff0b}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@134aa5d':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@134aa5d}
     version: 1.0.0-next.85
     peerDependencies:
       react-dom: ^18.0.0
@@ -4099,11 +4099,11 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ae1eb53': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@35f29290(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@134aa5d0d1920f2524d866d213e1134cb62f8962(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f24ff0b9bcff5210777bdc95ae98de430c2056cd(svelte@4.2.19)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@35f29290(svelte@4.2.19)':
     dependencies:
       svelte: 4.2.19
 
@@ -4116,9 +4116,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f24ff0b(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@134aa5d(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f24ff0b9bcff5210777bdc95ae98de430c2056cd(svelte@4.2.19)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@134aa5d0d1920f2524d866d213e1134cb62f8962(svelte@4.2.19)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19)
       '@melt-ui/svelte': 0.86.3(svelte@4.2.19)
diff --git a/src/lib/components/usageCard.svelte b/src/lib/components/usageCard.svelte
index befb5c1f6..2d4d4a0b7 100644
--- a/src/lib/components/usageCard.svelte
+++ b/src/lib/components/usageCard.svelte
@@ -7,15 +7,16 @@
 </script>
 
 <Card radius="s" padding="xs" isTile>
-    <Layout.Stack gap="xxs">
-        <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
+    <Layout.Stack gap="xxxs">
+        <Typography.Caption variant="400" color="--color-fgcolor-neutral-tertiary">
             {description}
-        </Typography.Text>
+        </Typography.Caption>
         <slot>
             {#if value !== null && value !== undefined}
-                <Typography.Title size="s" truncate>{value}</Typography.Title>
+                <Typography.Text size="s" truncate color="--color-fgcolor-neutral-primary"
+                    >{value}</Typography.Text>
             {:else}
-                <Skeleton variant="line" width={100} height={26} />
+                <Skeleton variant="line" width={100} height={20} />
             {/if}
         </slot>
     </Layout.Stack>
diff --git a/src/lib/elements/selectSearchCheckbox.svelte b/src/lib/elements/selectSearchCheckbox.svelte
index aa3354096..f397f86ec 100644
--- a/src/lib/elements/selectSearchCheckbox.svelte
+++ b/src/lib/elements/selectSearchCheckbox.svelte
@@ -1,16 +1,21 @@
 <script lang="ts">
+    import { ActionMenu, Layout } from '@appwrite.io/pink-svelte';
+    import InputCheckbox from './forms/inputCheckbox.svelte';
+
     export let value = false;
     export let padding: number | null = null;
 </script>
 
-<li class="drop-list-item">
-    <button
-        class="drop-button u-flex u-cross-center u-gap-12"
-        style:--button-padding-horizontal={padding ? `${padding / 16}rem` : ''}
-        style:--button-padding-vertical={padding ? `${padding / 16}rem` : ''}
-        on:click|preventDefault
-        type="button">
-        <input type="checkbox" class="is-small" bind:checked={value} />
+<ActionMenu.Item.Button on:click>
+    <Layout.Stack direction="row" gap="xs" alignItems="center">
+        <InputCheckbox bind:checked={value} id="filter" size="s" />
+        <!-- <button
+            class="drop-button u-flex u-cross-center u-gap-12"
+            style:--button-padding-horizontal={padding ? `${padding / 16}rem` : ''}
+            style:--button-padding-vertical={padding ? `${padding / 16}rem` : ''}
+            on:click|preventDefault
+            type="button">
+        </button> -->
         <slot />
-    </button>
-</li>
+    </Layout.Stack>
+</ActionMenu.Item.Button>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte
index 2e42dfdb6..582454b82 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte
@@ -52,6 +52,7 @@
                         alignItems="center"
                         justifyContent="center"
                         slot="actions">
+                        <!-- TODO: enable it after we have copy again-->
                         <!-- <Button
                             text
                             href={`${base}/console/project-${$page.params.project}/sites/site-${data.site.$id}/deployments/deployment-${data.deployment.$id}`}>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
index a61eaa197..097c73a92 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte
@@ -16,7 +16,7 @@
     import { columns } from './store';
     import CreateManualDeploymentModal from './createManualDeploymentModal.svelte';
     import DeploymentMetrics from './deploymentMetrics.svelte';
-    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { IconFilterLine, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
@@ -49,13 +49,13 @@
 </script>
 
 <Container>
-    <Layout.Stack gap="xxl">
+    <Layout.Stack gap="xxxl">
         {#if data.deploymentList.total}
             <DeploymentMetrics deploymentList={data.deploymentList} />
         {/if}
         <Layout.Stack gap="l">
             <Layout.Stack justifyContent="space-between" direction="row">
-                <Layout.Stack alignItems="center" direction="row" gap="s">
+                <Layout.Stack alignItems="center" direction="row">
                     {#if data.deploymentList.total}
                         <QuickFilters {columns} />
                         <Filters
@@ -66,13 +66,13 @@
                             singleCondition>
                             <Layout.Stack alignItems="center" direction="row" gap="xs">
                                 <Button
-                                    text
+                                    compact
                                     on:click={toggle}
                                     {disabled}
                                     size="s"
                                     ariaLabel="open filter">
-                                    <span class="icon-filter-line" />
-                                    <span class="text">More filters</span>
+                                    <Icon icon={IconFilterLine} size="s" slot="start" />
+                                    More filters
                                 </Button>
                                 {#if $tags?.length}
                                     <!-- TODO: add vertical divider to pink 2 -->
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
index 12a17f960..1d6ff03bd 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/deploymentMetrics.svelte
@@ -35,17 +35,17 @@
         {
             id: 'avgTime',
             value: null,
-            description: 'Average builds time'
+            description: 'Avg. builds time'
         },
         {
             id: 'success',
             value: null,
-            description: 'Successful deployments'
+            description: 'Successful'
         },
         {
             id: 'failed',
             value: null,
-            description: 'Failed deployments'
+            description: 'Failed '
         }
     ];
     onMount(async () => {
@@ -62,7 +62,7 @@
         try {
             const usage = await sdk.forProject.sites.getUsage($page.params.site, range);
             metrics = metrics.map((metric) => {
-                metric.value = usage[metric.id] ?? 'n/a';
+                metric.value = usage[metric.id] ?? '-';
                 return metric;
             });
             metrics = metrics;
@@ -76,7 +76,7 @@
 </script>
 
 <Layout.Stack gap="xl">
-    <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+    <Layout.Stack direction="row" justifyContent="space-between" alignItems="flex-end" wrap="wrap">
         <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
             Metrics for {range !== SiteUsageRange.TwentyFourHours
                 ? `${toLocaleDate(
@@ -95,9 +95,9 @@
                 on:change={fetchUsage} />
         </div>
     </Layout.Stack>
-    <Layout.Stack direction="row">
+    <Layout.GridBox gap="m" itemSize="154px">
         {#each metrics as metric}
             <UsageCard description={metric.description} bind:value={metric.value} />
         {/each}
-    </Layout.Stack>
+    </Layout.GridBox>
 </Layout.Stack>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/quickFilters.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/quickFilters.svelte
index efbbe4f06..f9efb05bd 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/quickFilters.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/quickFilters.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
     import { Submit, trackEvent } from '$lib/actions/analytics';
-    import { DropList, DropListItem } from '$lib/components';
     import {
         addFilter,
         queries,
@@ -11,8 +10,9 @@
         ValidOperators,
         type TagValue
     } from '$lib/components/filters/store';
-    import { Pill, SelectSearchCheckbox } from '$lib/elements';
+    import { SelectSearchCheckbox } from '$lib/elements';
     import type { Column } from '$lib/helpers/types';
+    import { ActionMenu, Popover, Tag } from '@appwrite.io/pink-svelte';
     import { type Writable } from 'svelte/store';
 
     export let columns: Writable<Column[]>;
@@ -182,100 +182,94 @@
 </script>
 
 {#each [typeFilter] as filter}
-    <DropList bind:show={filter.show} noArrow class="u-margin-block-start-16">
-        <Pill
-            button
-            on:click={() => (filter.show = !filter.show)}
-            event="apply_quick_filter"
-            eventData={{ source: 'function_deployments', column: filter.title }}>
+    <Popover let:toggle let:showing>
+        <!--TODO: add tracking back event="apply_quick_filter" -->
+        <Tag size="s" on:click={toggle}>
             {#key filter.tag}
                 <span use:tagFormat>
                     {filter?.tag ?? filter.title}
                 </span>
             {/key}
-            <span class:icon-cheveron-down={!filter.show} class:icon-cheveron-up={filter.show}>
-            </span>
-        </Pill>
-        <svelte:fragment slot="list">
-            {#each filter.options as option (option.value + option.checked)}
-                <SelectSearchCheckbox
-                    padding={8}
-                    bind:value={option.checked}
-                    on:click={() => {
-                        option.checked = !option.checked;
-                        addFilterAndApply(
-                            filter.id,
-                            filter.title,
-                            filter.operator,
-                            filter?.array ? null : option.checked ? option.value : null,
-                            filter?.array
-                                ? (filter.options
-                                      .filter((opt) => opt.checked)
-                                      .map((opt) => opt.value) ?? [])
-                                : []
-                        );
-                    }}>
-                    {option.label}
-                </SelectSearchCheckbox>
-            {/each}
-            {#if filter.options.some((option) => option.checked)}
-                <DropListItem
-                    padding={8}
-                    on:click={() => {
-                        filter.show = false;
-                        filter.tag = null;
-                        addFilterAndApply(filter.id, filter.title, filter.operator, null, []);
-                    }}>
-                    Clear selection
-                </DropListItem>
-            {/if}
+            <span class:icon-cheveron-down={!showing} class:icon-cheveron-up={showing}> </span>
+        </Tag>
+        <svelte:fragment slot="tooltip" let:toggle>
+            <ActionMenu.Root>
+                {#each filter.options as option (option.value + option.checked)}
+                    <SelectSearchCheckbox
+                        padding={8}
+                        bind:value={option.checked}
+                        on:click={() => {
+                            option.checked = !option.checked;
+                            addFilterAndApply(
+                                filter.id,
+                                filter.title,
+                                filter.operator,
+                                filter?.array ? null : option.checked ? option.value : null,
+                                filter?.array
+                                    ? (filter.options
+                                          .filter((opt) => opt.checked)
+                                          .map((opt) => opt.value) ?? [])
+                                    : []
+                            );
+                        }}>
+                        {option.label}
+                    </SelectSearchCheckbox>
+                {/each}
+                {#if filter.options.some((option) => option.checked)}
+                    <ActionMenu.Item.Button
+                        on:click={(e) => {
+                            filter.tag = null;
+                            addFilterAndApply(filter.id, filter.title, filter.operator, null, []);
+                            toggle(e);
+                        }}>
+                        Clear selection
+                    </ActionMenu.Item.Button>
+                {/if}
+            </ActionMenu.Root>
         </svelte:fragment>
-    </DropList>
+    </Popover>
 {/each}
 {#each [sizeFilter] as filter}
-    <DropList bind:show={filter.show} noArrow class="u-margin-block-start-16">
-        <Pill
-            button
-            on:click={() => (filter.show = !filter.show)}
-            event="apply_quick_filter"
-            eventData={{ source: 'function_deployments', column: filter.title }}>
+    <Popover let:toggle let:showing>
+        <!--TODO: add tracking back event="apply_quick_filter" -->
+
+        <Tag size="s" on:click={toggle}>
             {#key filter.tag}
                 <span use:tagFormat>
                     {filter?.tag ?? filter.title}
                 </span>
             {/key}
-            <span class:icon-cheveron-down={!filter.show} class:icon-cheveron-up={filter.show}>
-            </span>
-        </Pill>
-        <svelte:fragment slot="list">
-            {#each filter.options as option (option.value + option.checked)}
-                <DropListItem
-                    padding={8}
-                    on:click={() => {
-                        filter.show = false;
 
-                        addFilterAndApply(
-                            filter.id,
-                            filter.title,
-                            filter.operator,
-                            filter?.array ? null : option.value,
-                            []
-                        );
-                    }}>
-                    {option.label}
-                </DropListItem>
-            {/each}
-            {#if filter?.tag}
-                <DropListItem
-                    padding={8}
-                    on:click={() => {
-                        filter.show = false;
-                        filter.tag = null;
-                        addFilterAndApply(filter.id, filter.title, filter.operator, null, []);
-                    }}>
-                    Clear selection
-                </DropListItem>
-            {/if}
+            <span class:icon-cheveron-down={!showing} class:icon-cheveron-up={showing}> </span>
+        </Tag>
+        <svelte:fragment slot="tooltip" let:toggle>
+            <ActionMenu.Root noPadding>
+                {#each filter.options as option (option.value + option.checked)}
+                    <ActionMenu.Item.Button
+                        on:click={(e) => {
+                            addFilterAndApply(
+                                filter.id,
+                                filter.title,
+                                filter.operator,
+                                filter?.array ? null : option.value,
+                                []
+                            );
+                            toggle(e);
+                        }}>
+                        {option.label}
+                    </ActionMenu.Item.Button>
+                {/each}
+                {#if filter?.tag}
+                    <ActionMenu.Item.Button
+                        on:click={() => {
+                            filter.show = false;
+                            filter.tag = null;
+                            addFilterAndApply(filter.id, filter.title, filter.operator, null, []);
+                        }}>
+                        Clear selection
+                    </ActionMenu.Item.Button>
+                {/if}
+            </ActionMenu.Root>
         </svelte:fragment>
-    </DropList>
+    </Popover>
 {/each}
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/store.ts b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/store.ts
index 01ce17465..a7915b8c5 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/store.ts
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/store.ts
@@ -21,7 +21,7 @@ export const columns = writable<Column[]>([
         title: 'Domains',
         type: 'string',
         show: true,
-        width: 15,
+        width: 150,
         array: true,
         format: 'string',
         filter: false
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 8dc45f6df..fad7728e1 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
@@ -12,8 +12,9 @@
     import RedeployModal from '../../redeployModal.svelte';
     import Cancel from './cancelDeploymentModal.svelte';
     import { base } from '$app/paths';
-    import { ActionMenu, Popover, Status, Table } from '@appwrite.io/pink-svelte';
+    import { ActionMenu, Icon, Layout, Popover, Status, Table } from '@appwrite.io/pink-svelte';
     import {
+        IconDotsHorizontal,
         IconLightningBolt,
         IconRefresh,
         IconTerminal,
@@ -24,6 +25,7 @@
     import ActivateDeploymentModal from '../../activateDeploymentModal.svelte';
     import { deploymentStatusConverter } from '../store';
     import { capitalize } from '$lib/helpers/string';
+    import { Button } from '$lib/elements/forms';
 
     export let data: PageData;
 
@@ -61,7 +63,7 @@
                         <Table.Cell width={column?.width?.toString() ?? ''}>
                             {@const status = deployment.status}
                             {#if data?.activeDeployment?.$id === deployment?.$id}
-                                <Status status="complete" label="active" />
+                                <Status status="complete" label="Active" />
                             {:else}
                                 <Status
                                     status={deploymentStatusConverter(status)}
@@ -70,7 +72,7 @@
                         </Table.Cell>
                     {:else if column.id === 'domains'}
                         <Table.Cell width={column?.width?.toString() ?? ''}>
-                            <div style="max-width: 50px">
+                            <div style="max-width: 150px">
                                 <Trim>
                                     {deployment.domain}
                                 </Trim>
@@ -104,76 +106,82 @@
                 {/if}
             {/each}
             <Table.Cell>
-                <Popover let:toggle placement="bottom-start" padding="none">
-                    <button
-                        class="button is-only-icon is-text"
-                        aria-label="More options"
-                        on:click|preventDefault={toggle}>
-                        <span class="icon-dots-horizontal" aria-hidden="true" />
-                    </button>
-                    <svelte:fragment slot="tooltip" let:toggle>
-                        <ActionMenu.Root>
-                            <ActionMenu.Item.Button
-                                leadingIcon={IconRefresh}
-                                on:click={(e) => {
-                                    e.preventDefault();
-                                    selectedDeployment = deployment;
-                                    showRedeploy = true;
-                                    toggle(e);
-                                }}>
-                                Redeploy
-                            </ActionMenu.Item.Button>
-                            <ActionMenu.Item.Anchor
-                                leadingIcon={IconTerminal}
-                                href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/deployments/deployment-${deployment.$id}`}
-                                on:click={(e) => {
-                                    e.preventDefault();
-                                    toggle(e);
-                                }}>
-                                View details
-                            </ActionMenu.Item.Anchor>
-                            {#if deployment?.status === 'ready' && deployment?.$id !== data.site.deploymentId}
+                <Layout.Stack alignItems="flex-end">
+                    <Popover placement="bottom-end" let:toggle>
+                        <Button
+                            text
+                            icon
+                            size="s"
+                            on:click={(e) => {
+                                e.preventDefault();
+                                toggle(e);
+                            }}>
+                            <Icon size="s" icon={IconDotsHorizontal} />
+                        </Button>
+                        <svelte:fragment slot="tooltip" let:toggle>
+                            <ActionMenu.Root>
                                 <ActionMenu.Item.Button
-                                    leadingIcon={IconLightningBolt}
+                                    leadingIcon={IconRefresh}
                                     on:click={(e) => {
                                         e.preventDefault();
                                         selectedDeployment = deployment;
-                                        showActivate = true;
+                                        showRedeploy = true;
                                         toggle(e);
                                     }}>
-                                    Activate
+                                    Redeploy
                                 </ActionMenu.Item.Button>
-                            {/if}
+                                <ActionMenu.Item.Anchor
+                                    leadingIcon={IconTerminal}
+                                    href={`${base}/project-${$page.params.project}/sites/site-${$page.params.site}/deployments/deployment-${deployment.$id}`}
+                                    on:click={(e) => {
+                                        e.preventDefault();
+                                        toggle(e);
+                                    }}>
+                                    View details
+                                </ActionMenu.Item.Anchor>
+                                {#if deployment?.status === 'ready' && deployment?.$id !== data.site.deploymentId}
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconLightningBolt}
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            selectedDeployment = deployment;
+                                            showActivate = true;
+                                            toggle(e);
+                                        }}>
+                                        Activate
+                                    </ActionMenu.Item.Button>
+                                {/if}
 
-                            {#if deployment?.status === 'processing' || deployment?.status === 'building' || deployment.status === 'waiting'}
-                                <ActionMenu.Item.Button
-                                    leadingIcon={IconXCircle}
-                                    status="danger"
-                                    on:click={(e) => {
-                                        e.preventDefault();
-                                        selectedDeployment = deployment;
-                                        showCancel = true;
-                                        toggle(e);
-                                    }}>
-                                    Cancel
-                                </ActionMenu.Item.Button>
-                            {/if}
-                            {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment?.status !== 'waiting'}
-                                <ActionMenu.Item.Button
-                                    status="danger"
-                                    leadingIcon={IconTrash}
-                                    on:click={(e) => {
-                                        e.preventDefault();
-                                        selectedDeployment = deployment;
-                                        showDelete = true;
-                                        toggle(e);
-                                    }}>
-                                    Delete
-                                </ActionMenu.Item.Button>
-                            {/if}
-                        </ActionMenu.Root>
-                    </svelte:fragment>
-                </Popover>
+                                {#if deployment?.status === 'processing' || deployment?.status === 'building' || deployment.status === 'waiting'}
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconXCircle}
+                                        status="danger"
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            selectedDeployment = deployment;
+                                            showCancel = true;
+                                            toggle(e);
+                                        }}>
+                                        Cancel
+                                    </ActionMenu.Item.Button>
+                                {/if}
+                                {#if deployment.status !== 'building' && deployment.status !== 'processing' && deployment?.status !== 'waiting'}
+                                    <ActionMenu.Item.Button
+                                        status="danger"
+                                        leadingIcon={IconTrash}
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            selectedDeployment = deployment;
+                                            showDelete = true;
+                                            toggle(e);
+                                        }}>
+                                        Delete
+                                    </ActionMenu.Item.Button>
+                                {/if}
+                            </ActionMenu.Root>
+                        </svelte:fragment>
+                    </Popover>
+                </Layout.Stack>
             </Table.Cell>
         </Table.Link>
     {/each}
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 e09119271..fdba19de6 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte
@@ -28,6 +28,7 @@
     import ActivateDeploymentModal from '../activateDeploymentModal.svelte';
     import CancelDeploymentModal from './deployments/cancelDeploymentModal.svelte';
     import { capitalize } from '$lib/helpers/string';
+    import { deploymentStatusConverter } from './store';
 
     export let site: Models.Site;
     export let activeDeployment: Models.Deployment;
@@ -76,11 +77,7 @@
                             <Status status="complete" label="Active" />
                         {:else}
                             <Status
-                                status={status === 'failed'
-                                    ? status
-                                    : status === 'building'
-                                      ? 'pending'
-                                      : 'ready'}
+                                status={deploymentStatusConverter(status)}
                                 label={capitalize(status)} />
                         {/if}
                     </Table.Cell>
@@ -102,7 +99,8 @@
                                         e.preventDefault();
                                         toggle(e);
                                     }}>
-                                    <Icon size="s" icon={IconDotsHorizontal} /></Button>
+                                    <Icon size="s" icon={IconDotsHorizontal} />
+                                </Button>
                                 <svelte:fragment slot="tooltip" let:toggle>
                                     <ActionMenu.Root>
                                         <ActionMenu.Item.Button
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/empty-deployment-dark.svg b/src/routes/(console)/project-[project]/sites/site-[site]/empty-deployment-dark.svg
index 813d9fdae..414175d0a 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/empty-deployment-dark.svg
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/empty-deployment-dark.svg
@@ -1,93 +1,93 @@
-<svg width="1080" height="182" viewBox="0 0 1080 182" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_4839_14083)">
-<rect width="1080" height="182" fill="#1D1D21"/>
-<g filter="url(#filter0_f_4839_14083)">
-<path d="M492.122 159.584C443.098 159.463 403.356 147.669 403.356 133.241C403.356 118.812 443.098 107.214 492.122 107.335C541.147 107.456 580.889 119.25 580.889 133.678C580.889 148.107 541.147 159.705 492.122 159.584Z" fill="url(#paint0_radial_4839_14083)" fill-opacity="0.16"/>
+<svg width="1080" height="235" viewBox="0 0 1080 235" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4900_53924)">
+<rect width="1080" height="235" fill="#1D1D21"/>
+<g filter="url(#filter0_f_4900_53924)">
+<path d="M491.839 226.056C442.814 225.9 403.072 210.671 403.072 192.041C403.072 173.412 442.814 158.436 491.839 158.592C540.863 158.748 580.605 173.977 580.605 192.607C580.605 211.237 540.863 226.213 491.839 226.056Z" fill="url(#paint0_radial_4900_53924)" fill-opacity="0.16"/>
 </g>
-<g filter="url(#filter1_f_4839_14083)">
-<path d="M541.493 183.63C454.185 183.415 383.409 153.041 383.409 115.787C383.409 78.533 454.185 48.5074 541.493 48.7227C628.8 48.938 699.577 79.3127 699.577 116.566C699.577 153.82 628.8 183.846 541.493 183.63Z" fill="url(#paint1_radial_4839_14083)" fill-opacity="0.1"/>
+<g filter="url(#filter1_f_4900_53924)">
+<path d="M541.209 257.105C453.901 256.827 383.125 217.607 383.125 169.505C383.125 121.403 453.901 82.6332 541.209 82.9112C628.516 83.1892 699.293 122.409 699.293 170.512C699.293 218.614 628.516 257.383 541.209 257.105Z" fill="url(#paint1_radial_4900_53924)" fill-opacity="0.1"/>
 </g>
-<g filter="url(#filter2_f_4839_14083)">
-<path d="M395.871 108.137C396.719 124.28 460.926 134.349 456.644 139.497C452.362 144.645 392.121 157.097 383.069 144.827C374.016 132.556 380.358 70.1886 384.64 65.0409C388.922 59.8932 386.819 95.8665 395.871 108.137Z" fill="url(#paint2_radial_4839_14083)" fill-opacity="0.2"/>
+<g filter="url(#filter2_f_4900_53924)">
+<path d="M395.587 159.628C396.436 180.472 460.643 193.473 456.361 200.12C452.079 206.766 391.837 222.845 382.785 207.001C373.733 191.157 380.074 110.628 384.356 103.981C388.638 97.3344 386.535 143.784 395.587 159.628Z" fill="url(#paint2_radial_4900_53924)" fill-opacity="0.2"/>
 </g>
-<g filter="url(#filter3_f_4839_14083)">
-<path d="M394.423 161.88C371.15 150.336 369.731 119.771 391.253 93.613C412.775 67.4546 449.088 55.6077 472.361 67.1521C495.633 78.6965 497.053 109.261 475.531 135.419C454.009 161.578 417.695 173.424 394.423 161.88Z" fill="url(#paint3_radial_4839_14083)" fill-opacity="0.08"/>
+<g filter="url(#filter3_f_4900_53924)">
+<path d="M394.139 229.021C370.866 214.115 369.447 174.65 390.969 140.874C412.491 107.098 448.804 91.8011 472.077 106.707C495.35 121.614 496.769 161.078 475.247 194.854C453.725 228.63 417.412 243.927 394.139 229.021Z" fill="url(#paint3_radial_4900_53924)" fill-opacity="0.08"/>
 </g>
-<foreignObject x="412" y="10" width="255" height="162"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_4839_14083_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
-<rect x="416" y="14" width="247" height="154" rx="12" fill="#2D2D31" fill-opacity="0.24"/>
-<rect x="416.5" y="14.5" width="246" height="153" rx="11.5" stroke="white" stroke-opacity="0.08"/>
+<foreignObject x="411.716" y="30" width="255" height="162"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_4900_53924_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
+<rect x="415.716" y="34" width="247" height="154" rx="12" fill="#2D2D31" fill-opacity="0.24"/>
+<rect x="416.216" y="34.5" width="246" height="153" rx="11.5" stroke="white" stroke-opacity="0.08"/>
 </g>
-<g filter="url(#filter5_d_4839_14083)">
-<mask id="path-7-inside-1_4839_14083" fill="white">
-<path d="M423 29C423 24.5817 426.582 21 431 21H648C652.418 21 656 24.5817 656 29V153C656 157.418 652.418 161 648 161H431C426.582 161 423 157.418 423 153V29Z"/>
+<g filter="url(#filter5_d_4900_53924)">
+<mask id="path-7-inside-1_4900_53924" fill="white">
+<path d="M422.716 49C422.716 44.5817 426.298 41 430.716 41H647.716C652.135 41 655.716 44.5817 655.716 49V173C655.716 177.418 652.135 181 647.716 181H430.716C426.298 181 422.716 177.418 422.716 173V49Z"/>
 </mask>
-<path d="M423 29C423 24.5817 426.582 21 431 21H648C652.418 21 656 24.5817 656 29V153C656 157.418 652.418 161 648 161H431C426.582 161 423 157.418 423 153V29Z" fill="#1D1D21"/>
-<path d="M431 21.8H648V20.2H431V21.8ZM655.2 29V153H656.8V29H655.2ZM648 160.2H431V161.8H648V160.2ZM423.8 153V29H422.2V153H423.8ZM431 160.2C427.024 160.2 423.8 156.976 423.8 153H422.2C422.2 157.86 426.14 161.8 431 161.8V160.2ZM655.2 153C655.2 156.976 651.976 160.2 648 160.2V161.8C652.86 161.8 656.8 157.86 656.8 153H655.2ZM648 21.8C651.976 21.8 655.2 25.0236 655.2 29H656.8C656.8 24.1399 652.86 20.2 648 20.2V21.8ZM431 20.2C426.14 20.2 422.2 24.1399 422.2 29H423.8C423.8 25.0235 427.024 21.8 431 21.8V20.2Z" fill="#2D2D31" mask="url(#path-7-inside-1_4839_14083)"/>
-<path d="M431 21.8H648V20.2H431V21.8ZM655.2 29V153H656.8V29H655.2ZM648 160.2H431V161.8H648V160.2ZM423.8 153V29H422.2V153H423.8ZM431 160.2C427.024 160.2 423.8 156.976 423.8 153H422.2C422.2 157.86 426.14 161.8 431 161.8V160.2ZM655.2 153C655.2 156.976 651.976 160.2 648 160.2V161.8C652.86 161.8 656.8 157.86 656.8 153H655.2ZM648 21.8C651.976 21.8 655.2 25.0236 655.2 29H656.8C656.8 24.1399 652.86 20.2 648 20.2V21.8ZM431 20.2C426.14 20.2 422.2 24.1399 422.2 29H423.8C423.8 25.0235 427.024 21.8 431 21.8V20.2Z" fill="url(#paint4_linear_4839_14083)" fill-opacity="0.4" mask="url(#path-7-inside-1_4839_14083)"/>
+<path d="M422.716 49C422.716 44.5817 426.298 41 430.716 41H647.716C652.135 41 655.716 44.5817 655.716 49V173C655.716 177.418 652.135 181 647.716 181H430.716C426.298 181 422.716 177.418 422.716 173V49Z" fill="#1D1D21"/>
+<path d="M430.716 41.8H647.716V40.2H430.716V41.8ZM654.916 49V173H656.516V49H654.916ZM647.716 180.2H430.716V181.8H647.716V180.2ZM423.516 173V49H421.916V173H423.516ZM430.716 180.2C426.74 180.2 423.516 176.976 423.516 173H421.916C421.916 177.86 425.856 181.8 430.716 181.8V180.2ZM654.916 173C654.916 176.976 651.693 180.2 647.716 180.2V181.8C652.576 181.8 656.516 177.86 656.516 173H654.916ZM647.716 41.8C651.693 41.8 654.916 45.0236 654.916 49H656.516C656.516 44.1399 652.576 40.2 647.716 40.2V41.8ZM430.716 40.2C425.856 40.2 421.916 44.1399 421.916 49H423.516C423.516 45.0235 426.74 41.8 430.716 41.8V40.2Z" fill="#2D2D31" mask="url(#path-7-inside-1_4900_53924)"/>
+<path d="M430.716 41.8H647.716V40.2H430.716V41.8ZM654.916 49V173H656.516V49H654.916ZM647.716 180.2H430.716V181.8H647.716V180.2ZM423.516 173V49H421.916V173H423.516ZM430.716 180.2C426.74 180.2 423.516 176.976 423.516 173H421.916C421.916 177.86 425.856 181.8 430.716 181.8V180.2ZM654.916 173C654.916 176.976 651.693 180.2 647.716 180.2V181.8C652.576 181.8 656.516 177.86 656.516 173H654.916ZM647.716 41.8C651.693 41.8 654.916 45.0236 654.916 49H656.516C656.516 44.1399 652.576 40.2 647.716 40.2V41.8ZM430.716 40.2C425.856 40.2 421.916 44.1399 421.916 49H423.516C423.516 45.0235 426.74 41.8 430.716 41.8V40.2Z" fill="url(#paint4_linear_4900_53924)" fill-opacity="0.4" mask="url(#path-7-inside-1_4900_53924)"/>
 </g>
-<circle cx="433.5" cy="31.5" r="2.5" fill="#2D2D31"/>
-<circle cx="441.5" cy="31.5" r="2.5" fill="#2D2D31"/>
-<circle cx="449.5" cy="31.5" r="2.5" fill="#2D2D31"/>
-<rect opacity="0.5" x="458" y="29" width="190" height="5" rx="2.5" fill="#2D2D31"/>
-<rect opacity="0.5" x="499" y="58" width="81" height="9" rx="4" fill="#2D2D31"/>
-<rect opacity="0.5" x="466" y="75" width="146" height="9" rx="4" fill="#2D2D31"/>
-<rect x="523" y="97" width="32" height="10" rx="5" fill="#2D2D31"/>
+<circle cx="433.216" cy="51.5" r="2.5" fill="#2D2D31"/>
+<circle cx="441.216" cy="51.5" r="2.5" fill="#2D2D31"/>
+<circle cx="449.216" cy="51.5" r="2.5" fill="#2D2D31"/>
+<rect opacity="0.5" x="457.716" y="49" width="190" height="5" rx="2.5" fill="#2D2D31"/>
+<rect opacity="0.5" x="498.716" y="78" width="81" height="9" rx="4" fill="#2D2D31"/>
+<rect opacity="0.5" x="465.716" y="95" width="146" height="9" rx="4" fill="#2D2D31"/>
+<rect x="522.716" y="117" width="32" height="10" rx="5" fill="#2D2D31"/>
 </g>
 <defs>
-<filter id="filter0_f_4839_14083" x="395.856" y="99.8339" width="192.533" height="67.2513" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_f_4900_53924" x="395.572" y="151.09" width="192.533" height="82.4673" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_4839_14083"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_4900_53924"/>
 </filter>
-<filter id="filter1_f_4839_14083" x="375.908" y="41.2216" width="331.168" height="149.91" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter1_f_4900_53924" x="375.625" y="75.4097" width="331.168" height="189.197" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_4839_14083"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_4900_53924"/>
 </filter>
-<filter id="filter2_f_4839_14083" x="363.458" y="49.5403" width="108.391" height="115.524" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter2_f_4900_53924" x="363.175" y="88.335" width="108.391" height="140.43" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_4839_14083"/>
+<feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_4900_53924"/>
 </filter>
-<filter id="filter3_f_4839_14083" x="335.996" y="22.7316" width="194.792" height="183.569" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter3_f_4900_53924" x="335.712" y="60.9995" width="194.792" height="213.729" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_4839_14083"/>
+<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_4900_53924"/>
 </filter>
-<clipPath id="bgblur_1_4839_14083_clip_path"><rect transform="translate(-412 -10)" x="416" y="14" width="247" height="154" rx="12"/>
-</clipPath><filter id="filter5_d_4839_14083" x="418" y="21" width="243" height="150" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<clipPath id="bgblur_1_4900_53924_clip_path"><rect transform="translate(-411.716 -30)" x="415.716" y="34" width="247" height="154" rx="12"/>
+</clipPath><filter id="filter5_d_4900_53924" x="418.716" y="41" width="241" height="148" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="5"/>
-<feGaussianBlur stdDeviation="2.5"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4839_14083"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4839_14083" result="shape"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4900_53924"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4900_53924" result="shape"/>
 </filter>
-<radialGradient id="paint0_radial_4839_14083" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(446.741 133.383) rotate(8.92235) scale(82.7867 24.1685)">
+<radialGradient id="paint0_radial_4900_53924" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(446.458 192.225) rotate(11.4594) scale(83.4484 30.9592)">
 <stop stop-color="#F02E65"/>
 <stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
 </radialGradient>
-<radialGradient id="paint1_radial_4839_14083" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(541.493 116.177) rotate(-179.859) scale(158.085 67.4537)">
+<radialGradient id="paint1_radial_4900_53924" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(541.209 170.008) rotate(-179.818) scale(158.085 87.0966)">
 <stop stop-color="#F02E65"/>
 <stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
 </radialGradient>
-<radialGradient id="paint2_radial_4839_14083" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(404.781 137.663) rotate(-135.059) scale(30.2949 13.738)">
+<radialGradient id="paint2_radial_4900_53924" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(404.497 197.751) rotate(-127.813) scale(34.9762 15.3644)">
 <stop stop-color="#FE9567"/>
 <stop offset="1" stop-color="#F97066" stop-opacity="0"/>
 </radialGradient>
-<radialGradient id="paint3_radial_4839_14083" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(411.796 103.893) rotate(64.6573) scale(46.6627 51.9657)">
+<radialGradient id="paint3_radial_4900_53924" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(411.513 154.148) rotate(69.8572) scale(58.0004 53.9824)">
 <stop stop-color="#F02E65"/>
 <stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
 </radialGradient>
-<linearGradient id="paint4_linear_4839_14083" x1="440.496" y1="177.42" x2="523.242" y2="124.063" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint4_linear_4900_53924" x1="440.213" y1="197.42" x2="522.959" y2="144.063" gradientUnits="userSpaceOnUse">
 <stop stop-color="#FE6054"/>
 <stop offset="0.342973" stop-color="#FD366E"/>
 <stop offset="1" stop-color="#2D2D31"/>
 </linearGradient>
-<clipPath id="clip0_4839_14083">
-<rect width="1080" height="182" fill="white"/>
+<clipPath id="clip0_4900_53924">
+<rect width="1080" height="235" fill="white"/>
 </clipPath>
 </defs>
 </svg>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/empty-deployment-light.svg b/src/routes/(console)/project-[project]/sites/site-[site]/empty-deployment-light.svg
index 997bad861..60330bcaf 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/empty-deployment-light.svg
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/empty-deployment-light.svg
@@ -1,93 +1,93 @@
-<svg width="1080" height="182" viewBox="0 0 1080 182" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_4502_62521)">
-<rect width="1080" height="182" fill="white"/>
-<g filter="url(#filter0_f_4502_62521)">
-<path d="M492.122 159.584C443.098 159.463 403.356 147.669 403.356 133.241C403.356 118.812 443.098 107.214 492.122 107.335C541.147 107.456 580.889 119.25 580.889 133.678C580.889 148.107 541.147 159.705 492.122 159.584Z" fill="url(#paint0_radial_4502_62521)" fill-opacity="0.16"/>
+<svg width="1080" height="235" viewBox="0 0 1080 235" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4900_53415)">
+<rect width="1080" height="235" fill="white"/>
+<g filter="url(#filter0_f_4900_53415)">
+<path d="M491.839 226.056C442.814 225.9 403.072 210.671 403.072 192.041C403.072 173.412 442.814 158.436 491.839 158.592C540.863 158.748 580.605 173.977 580.605 192.607C580.605 211.237 540.863 226.213 491.839 226.056Z" fill="url(#paint0_radial_4900_53415)" fill-opacity="0.16"/>
 </g>
-<g filter="url(#filter1_f_4502_62521)">
-<path d="M541.493 183.63C454.185 183.415 383.409 153.041 383.409 115.787C383.409 78.533 454.185 48.5074 541.493 48.7227C628.8 48.938 699.577 79.3127 699.577 116.566C699.577 153.82 628.8 183.846 541.493 183.63Z" fill="url(#paint1_radial_4502_62521)" fill-opacity="0.1"/>
+<g filter="url(#filter1_f_4900_53415)">
+<path d="M541.209 257.105C453.901 256.827 383.125 217.607 383.125 169.505C383.125 121.403 453.901 82.6332 541.209 82.9112C628.516 83.1892 699.293 122.409 699.293 170.512C699.293 218.614 628.516 257.383 541.209 257.105Z" fill="url(#paint1_radial_4900_53415)" fill-opacity="0.1"/>
 </g>
-<g filter="url(#filter2_f_4502_62521)">
-<path d="M395.871 108.137C396.719 124.28 460.926 134.349 456.644 139.497C452.362 144.645 392.121 157.097 383.069 144.827C374.016 132.556 380.358 70.1886 384.64 65.0409C388.922 59.8932 386.819 95.8665 395.871 108.137Z" fill="url(#paint2_radial_4502_62521)" fill-opacity="0.2"/>
+<g filter="url(#filter2_f_4900_53415)">
+<path d="M395.587 159.628C396.436 180.472 460.643 193.473 456.36 200.12C452.078 206.766 391.837 222.845 382.785 207.001C373.733 191.157 380.074 110.628 384.356 103.981C388.638 97.3344 386.535 143.784 395.587 159.628Z" fill="url(#paint2_radial_4900_53415)" fill-opacity="0.2"/>
 </g>
-<g filter="url(#filter3_f_4502_62521)">
-<path d="M394.423 161.88C371.15 150.336 369.731 119.771 391.253 93.613C412.775 67.4546 449.088 55.6077 472.361 67.1521C495.633 78.6965 497.053 109.261 475.531 135.419C454.009 161.578 417.695 173.424 394.423 161.88Z" fill="url(#paint3_radial_4502_62521)" fill-opacity="0.08"/>
+<g filter="url(#filter3_f_4900_53415)">
+<path d="M394.139 229.021C370.866 214.115 369.447 174.65 390.969 140.874C412.491 107.098 448.804 91.8011 472.077 106.707C495.35 121.614 496.769 161.078 475.247 194.854C453.725 228.63 417.412 243.927 394.139 229.021Z" fill="url(#paint3_radial_4900_53415)" fill-opacity="0.08"/>
 </g>
-<foreignObject x="412" y="10" width="255" height="162"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_4502_62521_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
-<rect x="416" y="14" width="247" height="154" rx="12" fill="white" fill-opacity="0.32"/>
-<rect x="416.5" y="14.5" width="246" height="153" rx="11.5" stroke="#19191C" stroke-opacity="0.04"/>
+<foreignObject x="411.716" y="30" width="255" height="162"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_4900_53415_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
+<rect x="415.716" y="34" width="247" height="154" rx="12" fill="white" fill-opacity="0.32"/>
+<rect x="416.216" y="34.5" width="246" height="153" rx="11.5" stroke="#19191C" stroke-opacity="0.04"/>
 </g>
-<g filter="url(#filter5_d_4502_62521)">
-<mask id="path-7-inside-1_4502_62521" fill="white">
-<path d="M423 29C423 24.5817 426.582 21 431 21H648C652.418 21 656 24.5817 656 29V153C656 157.418 652.418 161 648 161H431C426.582 161 423 157.418 423 153V29Z"/>
+<g filter="url(#filter5_d_4900_53415)">
+<mask id="path-7-inside-1_4900_53415" fill="white">
+<path d="M422.716 49C422.716 44.5817 426.298 41 430.716 41H647.716C652.135 41 655.716 44.5817 655.716 49V173C655.716 177.418 652.135 181 647.716 181H430.716C426.298 181 422.716 177.418 422.716 173V49Z"/>
 </mask>
-<path d="M423 29C423 24.5817 426.582 21 431 21H648C652.418 21 656 24.5817 656 29V153C656 157.418 652.418 161 648 161H431C426.582 161 423 157.418 423 153V29Z" fill="white"/>
-<path d="M431 21.8H648V20.2H431V21.8ZM655.2 29V153H656.8V29H655.2ZM648 160.2H431V161.8H648V160.2ZM423.8 153V29H422.2V153H423.8ZM431 160.2C427.024 160.2 423.8 156.976 423.8 153H422.2C422.2 157.86 426.14 161.8 431 161.8V160.2ZM655.2 153C655.2 156.976 651.976 160.2 648 160.2V161.8C652.86 161.8 656.8 157.86 656.8 153H655.2ZM648 21.8C651.976 21.8 655.2 25.0236 655.2 29H656.8C656.8 24.1399 652.86 20.2 648 20.2V21.8ZM431 20.2C426.14 20.2 422.2 24.1399 422.2 29H423.8C423.8 25.0235 427.024 21.8 431 21.8V20.2Z" fill="#EDEDF0" mask="url(#path-7-inside-1_4502_62521)"/>
-<path d="M431 21.8H648V20.2H431V21.8ZM655.2 29V153H656.8V29H655.2ZM648 160.2H431V161.8H648V160.2ZM423.8 153V29H422.2V153H423.8ZM431 160.2C427.024 160.2 423.8 156.976 423.8 153H422.2C422.2 157.86 426.14 161.8 431 161.8V160.2ZM655.2 153C655.2 156.976 651.976 160.2 648 160.2V161.8C652.86 161.8 656.8 157.86 656.8 153H655.2ZM648 21.8C651.976 21.8 655.2 25.0236 655.2 29H656.8C656.8 24.1399 652.86 20.2 648 20.2V21.8ZM431 20.2C426.14 20.2 422.2 24.1399 422.2 29H423.8C423.8 25.0235 427.024 21.8 431 21.8V20.2Z" fill="url(#paint4_linear_4502_62521)" fill-opacity="0.4" mask="url(#path-7-inside-1_4502_62521)"/>
+<path d="M422.716 49C422.716 44.5817 426.298 41 430.716 41H647.716C652.135 41 655.716 44.5817 655.716 49V173C655.716 177.418 652.135 181 647.716 181H430.716C426.298 181 422.716 177.418 422.716 173V49Z" fill="white"/>
+<path d="M430.716 41.8H647.716V40.2H430.716V41.8ZM654.916 49V173H656.516V49H654.916ZM647.716 180.2H430.716V181.8H647.716V180.2ZM423.516 173V49H421.916V173H423.516ZM430.716 180.2C426.74 180.2 423.516 176.976 423.516 173H421.916C421.916 177.86 425.856 181.8 430.716 181.8V180.2ZM654.916 173C654.916 176.976 651.693 180.2 647.716 180.2V181.8C652.576 181.8 656.516 177.86 656.516 173H654.916ZM647.716 41.8C651.693 41.8 654.916 45.0236 654.916 49H656.516C656.516 44.1399 652.576 40.2 647.716 40.2V41.8ZM430.716 40.2C425.856 40.2 421.916 44.1399 421.916 49H423.516C423.516 45.0235 426.74 41.8 430.716 41.8V40.2Z" fill="#EDEDF0" mask="url(#path-7-inside-1_4900_53415)"/>
+<path d="M430.716 41.8H647.716V40.2H430.716V41.8ZM654.916 49V173H656.516V49H654.916ZM647.716 180.2H430.716V181.8H647.716V180.2ZM423.516 173V49H421.916V173H423.516ZM430.716 180.2C426.74 180.2 423.516 176.976 423.516 173H421.916C421.916 177.86 425.856 181.8 430.716 181.8V180.2ZM654.916 173C654.916 176.976 651.693 180.2 647.716 180.2V181.8C652.576 181.8 656.516 177.86 656.516 173H654.916ZM647.716 41.8C651.693 41.8 654.916 45.0236 654.916 49H656.516C656.516 44.1399 652.576 40.2 647.716 40.2V41.8ZM430.716 40.2C425.856 40.2 421.916 44.1399 421.916 49H423.516C423.516 45.0235 426.74 41.8 430.716 41.8V40.2Z" fill="url(#paint4_linear_4900_53415)" fill-opacity="0.4" mask="url(#path-7-inside-1_4900_53415)"/>
 </g>
-<circle cx="433.5" cy="31.5" r="2.5" fill="#E4E4E7"/>
-<circle cx="441.5" cy="31.5" r="2.5" fill="#E4E4E7"/>
-<circle cx="449.5" cy="31.5" r="2.5" fill="#E4E4E7"/>
-<rect opacity="0.5" x="458" y="29" width="190" height="5" rx="2.5" fill="#EDEDF0"/>
-<rect opacity="0.5" x="499" y="58" width="81" height="9" rx="4" fill="#EDEDF0"/>
-<rect opacity="0.5" x="466" y="75" width="146" height="9" rx="4" fill="#EDEDF0"/>
-<rect x="523" y="97" width="32" height="10" rx="5" fill="#E4E4E7"/>
+<circle cx="433.216" cy="51.5" r="2.5" fill="#EDEDF0"/>
+<circle cx="441.216" cy="51.5" r="2.5" fill="#EDEDF0"/>
+<circle cx="449.216" cy="51.5" r="2.5" fill="#EDEDF0"/>
+<rect opacity="0.5" x="457.716" y="49" width="190" height="5" rx="2.5" fill="#EDEDF0"/>
+<rect opacity="0.5" x="498.716" y="78" width="81" height="9" rx="4" fill="#EDEDF0"/>
+<rect opacity="0.5" x="465.716" y="95" width="146" height="9" rx="4" fill="#EDEDF0"/>
+<rect x="522.716" y="117" width="32" height="10" rx="5" fill="#EDEDF0"/>
 </g>
 <defs>
-<filter id="filter0_f_4502_62521" x="395.856" y="99.8339" width="192.533" height="67.2513" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_f_4900_53415" x="395.572" y="151.09" width="192.533" height="82.4673" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_4502_62521"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_4900_53415"/>
 </filter>
-<filter id="filter1_f_4502_62521" x="375.908" y="41.2216" width="331.168" height="149.91" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter1_f_4900_53415" x="375.625" y="75.4097" width="331.168" height="189.197" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_4502_62521"/>
+<feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_4900_53415"/>
 </filter>
-<filter id="filter2_f_4502_62521" x="363.458" y="49.5403" width="108.391" height="115.524" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter2_f_4900_53415" x="363.175" y="88.335" width="108.391" height="140.43" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_4502_62521"/>
+<feGaussianBlur stdDeviation="7.5" result="effect1_foregroundBlur_4900_53415"/>
 </filter>
-<filter id="filter3_f_4502_62521" x="335.996" y="22.7316" width="194.792" height="183.569" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter3_f_4900_53415" x="335.712" y="60.9995" width="194.792" height="213.729" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_4502_62521"/>
+<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_4900_53415"/>
 </filter>
-<clipPath id="bgblur_1_4502_62521_clip_path"><rect transform="translate(-412 -10)" x="416" y="14" width="247" height="154" rx="12"/>
-</clipPath><filter id="filter5_d_4502_62521" x="418" y="21" width="243" height="150" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<clipPath id="bgblur_1_4900_53415_clip_path"><rect transform="translate(-411.716 -30)" x="415.716" y="34" width="247" height="154" rx="12"/>
+</clipPath><filter id="filter5_d_4900_53415" x="417.716" y="41" width="243" height="150" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 <feOffset dy="5"/>
 <feGaussianBlur stdDeviation="2.5"/>
 <feComposite in2="hardAlpha" operator="out"/>
 <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4502_62521"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4502_62521" result="shape"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4900_53415"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4900_53415" result="shape"/>
 </filter>
-<radialGradient id="paint0_radial_4502_62521" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(446.741 133.383) rotate(8.92235) scale(82.7867 24.1685)">
+<radialGradient id="paint0_radial_4900_53415" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(446.458 192.225) rotate(11.4594) scale(83.4484 30.9592)">
 <stop stop-color="#F02E65"/>
 <stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
 </radialGradient>
-<radialGradient id="paint1_radial_4502_62521" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(541.493 116.177) rotate(-179.859) scale(158.085 67.4537)">
+<radialGradient id="paint1_radial_4900_53415" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(541.209 170.008) rotate(-179.818) scale(158.085 87.0966)">
 <stop stop-color="#F02E65"/>
 <stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
 </radialGradient>
-<radialGradient id="paint2_radial_4502_62521" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(404.781 137.663) rotate(-135.059) scale(30.2949 13.738)">
+<radialGradient id="paint2_radial_4900_53415" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(404.497 197.751) rotate(-127.813) scale(34.9762 15.3644)">
 <stop stop-color="#FE9567"/>
 <stop offset="1" stop-color="#F97066" stop-opacity="0"/>
 </radialGradient>
-<radialGradient id="paint3_radial_4502_62521" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(411.796 103.893) rotate(64.6573) scale(46.6627 51.9657)">
+<radialGradient id="paint3_radial_4900_53415" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(411.513 154.148) rotate(69.8572) scale(58.0004 53.9824)">
 <stop stop-color="#F02E65"/>
 <stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
 </radialGradient>
-<linearGradient id="paint4_linear_4502_62521" x1="440.496" y1="177.42" x2="523.242" y2="124.063" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint4_linear_4900_53415" x1="440.213" y1="197.42" x2="522.959" y2="144.063" gradientUnits="userSpaceOnUse">
 <stop stop-color="#FE6054"/>
 <stop offset="0.342973" stop-color="#FD366E"/>
 <stop offset="1" stop-color="#EDEDF0"/>
 </linearGradient>
-<clipPath id="clip0_4502_62521">
-<rect width="1080" height="182" fill="white"/>
+<clipPath id="clip0_4900_53415">
+<rect width="1080" height="235" fill="white"/>
 </clipPath>
 </defs>
 </svg>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/header.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/header.svelte
index 9d7bcf309..664ad1314 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/header.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/header.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Tab, Tabs } from '$lib/components';
+    import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover, CoverTitle } from '$lib/layout';
     import { site } from './store';
@@ -45,6 +45,7 @@
 <Cover>
     <svelte:fragment slot="header">
         <CoverTitle href={`${base}/project-${projectId}/sites`}>{$site.name}</CoverTitle>
+        <Id value={$site?.$id} event="team">{$site?.$id}</Id>
     </svelte:fragment>
 
     <Tabs let:root>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/store.ts b/src/routes/(console)/project-[project]/sites/site-[site]/store.ts
index 7af4a9f12..25680aede 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/store.ts
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/store.ts
@@ -12,7 +12,7 @@ export function deploymentStatusConverter(status: string) {
         case 'processing':
             return 'processing';
         case 'building':
-            return 'waiting';
+            return 'pending';
         case 'failed':
             return 'failed';
     }