diff --git a/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte b/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
index 95562c0add..0b3128638b 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/(components)/siteCard.svelte
@@ -23,15 +23,32 @@
     import { isCloud } from '$lib/system';
     import { sdk } from '$lib/stores/sdk';
     import { capitalize } from '$lib/helpers/string';
+    import { regionalProtocol } from '$routes/(console)/project-[region]-[project]/store';
 
-    export let deployment: Models.Deployment;
-    export let proxyRuleList: Models.ProxyRuleList;
-    export let hideQRCode = false;
-    export let variant: 'primary' | 'secondary' = 'primary';
+    let {
+        deployment,
+        proxyRuleList,
+        hideQRCode = false,
+        variant = 'primary'
+    }: {
+        deployment: Models.Deployment;
+        proxyRuleList: Models.ProxyRuleList;
+        hideQRCode?: boolean;
+        variant?: 'primary' | 'secondary';
+    } = $props();
 
-    let show = false;
+    let show = $state(false);
 
-    $: totalSize = humanFileSize(deployment?.totalSize ?? 0);
+    const totalSize = $derived(humanFileSize(deployment?.totalSize ?? 0));
+
+    const sortedDomains = $derived(
+        proxyRuleList?.rules?.slice()?.sort((a, b) => {
+            if (a?.trigger === 'manual' && b?.trigger !== 'manual') return -1;
+            if (a?.trigger !== 'manual' && b?.trigger === 'manual') return 1;
+            return 0;
+        })
+    );
+    const primaryDomain = $derived(sortedDomains?.[0]?.domain);
 
     function getScreenshot(theme: string, deployment: Models.Deployment) {
         if (theme === 'dark') {
@@ -59,13 +76,25 @@
 <Card padding="s" radius="m" {variant}>
     <Layout.Stack gap="l">
         <div class="card-grid">
-            <Image
-                border
-                radius="s"
-                ratio="16/9"
-                style="width: 100%; align-self: start"
-                src={getScreenshot($app.themeInUse, deployment)}
-                alt="Screenshot" />
+            {#if primaryDomain}
+                <Card href={`${$regionalProtocol}${primaryDomain}`} padding="none" radius="s">
+                    <Image
+                        border
+                        radius="s"
+                        ratio="16/9"
+                        style="width: 100%; align-self: start"
+                        src={getScreenshot($app.themeInUse, deployment)}
+                        alt="Screenshot" />
+                </Card>
+            {:else}
+                <Image
+                    border
+                    radius="s"
+                    ratio="16/9"
+                    style="width: 100%; align-self: start"
+                    src={getScreenshot($app.themeInUse, deployment)}
+                    alt="Screenshot" />
+            {/if}
 
             <Layout.Stack gap="xl">
                 <Layout.Stack direction="row" alignItems="flex-start">