diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/promotion-dialog.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/promotion-dialog.tsx
deleted file mode 100644
index f2a3820abd..0000000000
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/promotion-dialog.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-"use client";
-
-import { type Deployment, collection, collectionManager } from "@/lib/collections";
-import { shortenId } from "@/lib/shorten-id";
-import { trpc } from "@/lib/trpc/client";
-import { eq, inArray, useLiveQuery } from "@tanstack/react-db";
-import { CircleInfo, CodeBranch, CodeCommit, Link4 } from "@unkey/icons";
-import { Badge, Button, DialogContainer, toast } from "@unkey/ui";
-import { StatusIndicator } from "../../details/active-deployment-card/status-indicator";
-
-type DeploymentSectionProps = {
-  title: string;
-  deployment: Deployment;
-  isLive: boolean;
-  showSignal?: boolean;
-};
-
-const DeploymentSection = ({ title, deployment, isLive, showSignal }: DeploymentSectionProps) => (
-  <div className="space-y-2">
-    <div className="flex items-center gap-2">
-      <h3 className="text-[13px] text-grayA-11">{title}</h3>
-      <CircleInfo size="sm-regular" className="text-gray-9" />
-    </div>
-    <DeploymentCard deployment={deployment} isLive={isLive} showSignal={showSignal} />
-  </div>
-);
-
-type PromotionDialogProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  targetDeployment: Deployment;
-  liveDeployment: Deployment;
-};
-
-export const PromotionDialog = ({
-  isOpen,
-  onClose,
-  targetDeployment,
-  liveDeployment,
-}: PromotionDialogProps) => {
-  const utils = trpc.useUtils();
-  const domainCollection = collectionManager.getProjectCollections(
-    liveDeployment.projectId,
-  ).domains;
-  const domains = useLiveQuery((q) =>
-    q
-      .from({ domain: domainCollection })
-      .where(({ domain }) => inArray(domain.sticky, ["environment", "live"]))
-      .where(({ domain }) => eq(domain.deploymentId, liveDeployment.id)),
-  );
-  const promote = trpc.deploy.deployment.promote.useMutation({
-    onSuccess: () => {
-      utils.invalidate();
-      toast.success("Promotion completed", {
-        description: `Successfully promoted to deployment ${targetDeployment.id}`,
-      });
-      // hack to revalidate
-      try {
-        // @ts-expect-error Their docs say it's here
-        collection.projects.utils.refetch();
-        // @ts-expect-error Their docs say it's here
-        collection.deployments.utils.refetch();
-        // @ts-expect-error Their docs say it's here
-        collection.domains.utils.refetch();
-      } catch (error) {
-        console.error("Refetch error:", error);
-      }
-
-      onClose();
-    },
-    onError: (error) => {
-      toast.error("Promotion failed", {
-        description: error.message,
-      });
-    },
-  });
-
-  const handlePromotion = async () => {
-    await promote
-      .mutateAsync({
-        targetDeploymentId: targetDeployment.id,
-      })
-      .catch((error) => {
-        console.error("Promotion error:", error);
-      });
-  };
-
-  return (
-    <DialogContainer
-      isOpen={isOpen}
-      onOpenChange={onClose}
-      title="Promotion to version"
-      subTitle="Switch the active deployment to a target stable version"
-      footer={
-        <Button
-          variant="primary"
-          size="xlg"
-          onClick={handlePromotion}
-          disabled={promote.isLoading}
-          loading={promote.isLoading}
-          className="w-full rounded-lg"
-        >
-          Promote to
-          {targetDeployment.gitCommitSha
-            ? shortenId(targetDeployment.gitCommitSha)
-            : targetDeployment.id}
-        </Button>
-      }
-    >
-      <div className="space-y-9">
-        <DeploymentSection
-          title="Live Deployment"
-          deployment={liveDeployment}
-          isLive={true}
-          showSignal={true}
-        />
-        <div>
-          {domains.data.map((domain) => (
-            <div className="space-y-2" key={domain.id}>
-              <div className="flex items-center gap-2">
-                <h3 className="text-[13px] text-grayA-11">Domain</h3>
-                <CircleInfo size="sm-regular" className="text-gray-9" />
-              </div>
-              <div className="bg-white dark:bg-black border border-grayA-5 rounded-lg p-4 relative">
-                <div className="flex items-center">
-                  <Link4 className="text-gray-9" size="sm-medium" />
-                  <div className="text-gray-12 font-medium text-xs ml-3 mr-2">{domain.domain}</div>
-                  <div className="ml-3" />
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-        <DeploymentSection title="Target Deployment" deployment={targetDeployment} isLive={false} />
-      </div>
-    </DialogContainer>
-  );
-};
-
-type DeploymentCardProps = {
-  deployment: Deployment;
-  isLive: boolean;
-  showSignal?: boolean;
-};
-
-const DeploymentCard = ({ deployment, isLive, showSignal }: DeploymentCardProps) => (
-  <div className="bg-white dark:bg-black border border-grayA-5 rounded-lg p-4 relative">
-    <div className="flex items-center justify-between">
-      <div className="flex items-center gap-3">
-        <StatusIndicator withSignal={showSignal} />
-        <div>
-          <div className="flex items-center gap-2">
-            <span className="text-xs text-accent-12 font-mono">
-              {`${deployment.id.slice(0, 3)}...${deployment.id.slice(-4)}`}
-            </span>
-            <Badge
-              variant={isLive ? "success" : "primary"}
-              className={`px-1.5 capitalize ${isLive ? "text-successA-11" : "text-grayA-11"}`}
-            >
-              {isLive ? "Live" : deployment.status}
-            </Badge>
-          </div>
-          <div className="text-xs text-grayA-9">
-            {deployment.gitCommitMessage || `${isLive ? "Current active" : "Target"} deployment`}
-          </div>
-        </div>
-      </div>
-      <div className="flex gap-1.5">
-        <div className="flex items-center gap-1.5 px-2 py-1 bg-gray-3 rounded-md text-xs text-grayA-11 max-w-[100px]">
-          <CodeBranch size="sm-regular" className="shrink-0 text-gray-12" />
-          <span className="truncate">{deployment.gitBranch}</span>
-        </div>
-        <div className="flex items-center gap-1.5 px-2 py-1 bg-gray-3 rounded-md text-xs text-grayA-11">
-          <CodeCommit size="sm-regular" className="shrink-0 text-gray-12" />
-          <span>{shortenId(deployment.gitCommitSha ?? "")}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-);
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/rollback-dialog.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/rollback-dialog.tsx
deleted file mode 100644
index 223377e42b..0000000000
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/rollback-dialog.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-"use client";
-
-import { type Deployment, collection } from "@/lib/collections";
-import { shortenId } from "@/lib/shorten-id";
-import { trpc } from "@/lib/trpc/client";
-import { inArray, useLiveQuery } from "@tanstack/react-db";
-import { CircleInfo, CodeBranch, CodeCommit, Link4 } from "@unkey/icons";
-import { Badge, Button, DialogContainer, toast } from "@unkey/ui";
-import { StatusIndicator } from "../../details/active-deployment-card/status-indicator";
-import { useProject } from "../../layout-provider";
-
-type DeploymentSectionProps = {
-  title: string;
-  deployment: Deployment;
-  isLive: boolean;
-  showSignal?: boolean;
-};
-
-const DeploymentSection = ({ title, deployment, isLive, showSignal }: DeploymentSectionProps) => (
-  <div className="space-y-2">
-    <div className="flex items-center gap-2">
-      <h3 className="text-[13px] text-grayA-11">{title}</h3>
-      <CircleInfo size="sm-regular" className="text-gray-9" />
-    </div>
-    <DeploymentCard deployment={deployment} isLive={isLive} showSignal={showSignal} />
-  </div>
-);
-
-type RollbackDialogProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  targetDeployment: Deployment;
-  liveDeployment: Deployment;
-};
-
-export const RollbackDialog = ({
-  isOpen,
-  onClose,
-  targetDeployment,
-  liveDeployment,
-}: RollbackDialogProps) => {
-  const utils = trpc.useUtils();
-
-  const {
-    collections: { domains: domainCollection },
-  } = useProject();
-  const domains = useLiveQuery((q) =>
-    q
-      .from({ domain: domainCollection })
-      .where(({ domain }) => inArray(domain.sticky, ["environment", "live"])),
-  );
-
-  const rollback = trpc.deploy.deployment.rollback.useMutation({
-    onSuccess: () => {
-      utils.invalidate();
-      toast.success("Rollback completed", {
-        description: `Successfully rolled back to deployment ${targetDeployment.id}`,
-      });
-      // hack to revalidate
-      try {
-        // @ts-expect-error Their docs say it's here
-        collection.projects.utils.refetch();
-        // @ts-expect-error Their docs say it's here
-        collection.deployments.utils.refetch();
-        // @ts-expect-error Their docs say it's here
-        collection.domains.utils.refetch();
-      } catch (error) {
-        console.error("Refetch error:", error);
-      }
-
-      onClose();
-    },
-    onError: (error) => {
-      toast.error("Rollback failed", {
-        description: error.message,
-      });
-    },
-  });
-
-  const handleRollback = async () => {
-    await rollback
-      .mutateAsync({
-        targetDeploymentId: targetDeployment.id,
-      })
-      .catch((error) => {
-        console.error("Rollback error:", error);
-      });
-  };
-
-  return (
-    <DialogContainer
-      isOpen={isOpen}
-      onOpenChange={onClose}
-      title="Rollback to version"
-      subTitle="Switch the active deployment to a target stable version"
-      footer={
-        <Button
-          variant="primary"
-          size="xlg"
-          onClick={handleRollback}
-          disabled={rollback.isLoading}
-          loading={rollback.isLoading}
-          className="w-full rounded-lg"
-        >
-          Rollback to target version
-        </Button>
-      }
-    >
-      <div className="space-y-9">
-        <DeploymentSection
-          title="Live Deployment"
-          deployment={liveDeployment}
-          isLive={true}
-          showSignal={true}
-        />
-        <div>
-          {domains.data.map((domain) => (
-            <div className="space-y-2" key={domain.id}>
-              <div className="flex items-center gap-2">
-                <h3 className="text-[13px] text-grayA-11">Domain</h3>
-                <CircleInfo size="sm-regular" className="text-gray-9" />
-              </div>
-              <div className="bg-white dark:bg-black border border-grayA-5 rounded-lg p-4 relative">
-                <div className="flex items-center">
-                  <Link4 className="text-gray-9" size="sm-medium" />
-                  <div className="text-gray-12 font-medium text-xs ml-3 mr-2">{domain.domain}</div>
-                  <div className="ml-3" />
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-        <DeploymentSection title="Target Deployment" deployment={targetDeployment} isLive={false} />
-      </div>
-    </DialogContainer>
-  );
-};
-
-type DeploymentCardProps = {
-  deployment: Deployment;
-  isLive: boolean;
-  showSignal?: boolean;
-};
-
-const DeploymentCard = ({ deployment, isLive, showSignal }: DeploymentCardProps) => (
-  <div className="bg-white dark:bg-black border border-grayA-5 rounded-lg p-4 relative">
-    <div className="flex items-center justify-between">
-      <div className="flex items-center gap-3">
-        <StatusIndicator withSignal={showSignal} />
-        <div>
-          <div className="flex items-center gap-2">
-            <span className="text-xs text-accent-12 font-mono">
-              {`${deployment.id.slice(0, 3)}...${deployment.id.slice(-4)}`}
-            </span>
-            <Badge
-              variant={isLive ? "success" : "primary"}
-              className={`px-1.5 capitalize ${isLive ? "text-successA-11" : "text-grayA-11"}`}
-            >
-              {isLive ? "Live" : deployment.status}
-            </Badge>
-          </div>
-          <div className="text-xs text-grayA-9">
-            {deployment.gitCommitMessage || `${isLive ? "Current active" : "Target"} deployment`}
-          </div>
-        </div>
-      </div>
-      <div className="flex gap-1.5">
-        <div className="flex items-center gap-1.5 px-2 py-1 bg-gray-3 rounded-md text-xs text-grayA-11 max-w-[100px]">
-          <CodeBranch size="sm-regular" className="shrink-0 text-gray-12" />
-          <span className="truncate">{deployment.gitBranch}</span>
-        </div>
-        <div className="flex items-center gap-1.5 px-2 py-1 bg-gray-3 rounded-md text-xs text-grayA-11">
-          <CodeCommit size="sm-regular" className="shrink-0 text-gray-12" />
-          <span>{shortenId(deployment.gitCommitSha ?? "")}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-);
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/components/deployment-card.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/components/deployment-card.tsx
new file mode 100644
index 0000000000..0c972974db
--- /dev/null
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/components/deployment-card.tsx
@@ -0,0 +1,47 @@
+import { StatusIndicator } from "@/app/(app)/[workspaceSlug]/projects/[projectId]/details/active-deployment-card/status-indicator";
+import type { Deployment } from "@/lib/collections";
+import { shortenId } from "@/lib/shorten-id";
+import { CodeBranch, CodeCommit } from "@unkey/icons";
+import { Badge } from "@unkey/ui";
+
+type DeploymentCardProps = {
+  deployment: Deployment;
+  isLive: boolean;
+  showSignal?: boolean;
+};
+
+export const DeploymentCard = ({ deployment, isLive, showSignal }: DeploymentCardProps) => (
+  <div className="bg-white dark:bg-black border border-grayA-5 rounded-lg p-4 relative">
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <StatusIndicator withSignal={showSignal} />
+        <div>
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-accent-12 font-mono">
+              {`${deployment.id.slice(0, 3)}...${deployment.id.slice(-4)}`}
+            </span>
+            <Badge
+              variant={isLive ? "success" : "primary"}
+              className={`px-1.5 capitalize ${isLive ? "text-successA-11" : "text-grayA-11"}`}
+            >
+              {isLive ? "Live" : deployment.status}
+            </Badge>
+          </div>
+          <div className="text-xs text-grayA-9">
+            {deployment.gitCommitMessage || `${isLive ? "Current active" : "Target"} deployment`}
+          </div>
+        </div>
+      </div>
+      <div className="flex gap-1.5">
+        <div className="flex items-center gap-1.5 px-2 py-1 bg-gray-3 rounded-md text-xs text-grayA-11 max-w-[100px]">
+          <CodeBranch size="sm-regular" className="shrink-0 text-gray-12" />
+          <span className="truncate">{deployment.gitBranch}</span>
+        </div>
+        <div className="flex items-center gap-1.5 px-2 py-1 bg-gray-3 rounded-md text-xs text-grayA-11">
+          <CodeCommit size="sm-regular" className="shrink-0 text-gray-12" />
+          <span>{shortenId(deployment.gitCommitSha ?? "")}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+);
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/components/deployment-section.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/components/deployment-section.tsx
new file mode 100644
index 0000000000..d23dd16636
--- /dev/null
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/components/deployment-section.tsx
@@ -0,0 +1,25 @@
+import type { Deployment } from "@/lib/collections";
+import { CircleInfo } from "@unkey/icons";
+import { DeploymentCard } from "./deployment-card";
+
+type DeploymentSectionProps = {
+  title: string;
+  deployment: Deployment;
+  isLive: boolean;
+  showSignal?: boolean;
+};
+
+export const DeploymentSection = ({
+  title,
+  deployment,
+  isLive,
+  showSignal,
+}: DeploymentSectionProps) => (
+  <div className="space-y-2">
+    <div className="flex items-center gap-2">
+      <h3 className="text-[13px] text-grayA-11">{title}</h3>
+      <CircleInfo size="sm-regular" className="text-gray-9" />
+    </div>
+    <DeploymentCard deployment={deployment} isLive={isLive} showSignal={showSignal} />
+  </div>
+);
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/components/domains-section.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/components/domains-section.tsx
new file mode 100644
index 0000000000..220e7a6cfd
--- /dev/null
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/components/domains-section.tsx
@@ -0,0 +1,30 @@
+import { DomainRow } from "@/app/(app)/[workspaceSlug]/projects/[projectId]/details/domain-row";
+import { CircleInfo } from "@unkey/icons";
+
+type DomainsSectionProps = {
+  domains: Array<{ id: string; domain: string }>;
+};
+
+export const DomainsSection = ({ domains }: DomainsSectionProps) => {
+  if (domains.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <h3 className="text-[13px] text-grayA-11">{domains.length === 1 ? "Domain" : "Domains"}</h3>
+        <CircleInfo size="sm-regular" className="text-gray-9" />
+      </div>
+      <div>
+        {domains.map((domain) => (
+          <DomainRow
+            key={domain.id}
+            domain={domain.domain}
+            className="bg-white dark:bg-black border-grayA-5 first:rounded-t-lg last:rounded-b-lg"
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/deployment-list-table-action.popover.constants.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/deployment-list-table-action.popover.constants.tsx
index 6207ead338..9a303b41bb 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/deployment-list-table-action.popover.constants.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/deployment-list-table-action.popover.constants.tsx
@@ -7,8 +7,8 @@ import { eq, useLiveQuery } from "@tanstack/react-db";
 import { ArrowDottedRotateAnticlockwise, ChevronUp, Layers3 } from "@unkey/icons";
 import { useRouter } from "next/navigation";
 import { useMemo } from "react";
-import { PromotionDialog } from "../../../promotion-dialog";
-import { RollbackDialog } from "../../../rollback-dialog";
+import { PromotionDialog } from "./promotion-dialog";
+import { RollbackDialog } from "./rollback-dialog";
 
 type DeploymentListTableActionsProps = {
   liveDeployment?: Deployment;
@@ -80,7 +80,7 @@ export const DeploymentListTableActions = ({
         onClick: () => {
           //INFO: This will produce a long query, but once we start using `contains` instead of `is` this will be a shorter query.
           router.push(
-            `${workspace.slug}/projects/${selectedDeployment.projectId}/gateway-logs?host=${data
+            `/${workspace.slug}/projects/${selectedDeployment.projectId}/gateway-logs?host=${data
               .map((item) => `is:${item.host}`)
               .join(",")}`,
           );
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/promotion-dialog.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/promotion-dialog.tsx
new file mode 100644
index 0000000000..155c152226
--- /dev/null
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/promotion-dialog.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { type Deployment, collection, collectionManager } from "@/lib/collections";
+import { shortenId } from "@/lib/shorten-id";
+import { trpc } from "@/lib/trpc/client";
+import { eq, inArray, useLiveQuery } from "@tanstack/react-db";
+import { Button, DialogContainer, toast } from "@unkey/ui";
+import { DeploymentSection } from "./components/deployment-section";
+import { DomainsSection } from "./components/domains-section";
+
+type PromotionDialogProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  targetDeployment: Deployment;
+  liveDeployment: Deployment;
+};
+
+export const PromotionDialog = ({
+  isOpen,
+  onClose,
+  targetDeployment,
+  liveDeployment,
+}: PromotionDialogProps) => {
+  const utils = trpc.useUtils();
+  const domainCollection = collectionManager.getProjectCollections(
+    liveDeployment.projectId,
+  ).domains;
+  const domains = useLiveQuery((q) =>
+    q
+      .from({ domain: domainCollection })
+      .where(({ domain }) => inArray(domain.sticky, ["environment", "live"]))
+      .where(({ domain }) => eq(domain.deploymentId, liveDeployment.id)),
+  );
+  const promote = trpc.deploy.deployment.promote.useMutation({
+    onSuccess: () => {
+      utils.invalidate();
+      toast.success("Promotion completed", {
+        description: `Successfully promoted to deployment ${targetDeployment.id}`,
+      });
+      // hack to revalidate
+      try {
+        // @ts-expect-error Their docs say it's here
+        collection.projects.utils.refetch();
+        // @ts-expect-error Their docs say it's here
+        collection.deployments.utils.refetch();
+        // @ts-expect-error Their docs say it's here
+        collection.domains.utils.refetch();
+      } catch (error) {
+        console.error("Refetch error:", error);
+      }
+
+      onClose();
+    },
+    onError: (error) => {
+      toast.error("Promotion failed", {
+        description: error.message,
+      });
+    },
+  });
+
+  const handlePromotion = async () => {
+    await promote
+      .mutateAsync({
+        targetDeploymentId: targetDeployment.id,
+      })
+      .catch((error) => {
+        console.error("Promotion error:", error);
+      });
+  };
+
+  return (
+    <DialogContainer
+      isOpen={isOpen}
+      onOpenChange={onClose}
+      title="Promotion to version"
+      subTitle="Switch the active deployment to a target stable version"
+      footer={
+        <Button
+          variant="primary"
+          size="xlg"
+          onClick={handlePromotion}
+          disabled={promote.isLoading}
+          loading={promote.isLoading}
+          className="w-full rounded-lg"
+        >
+          Promote to
+          {targetDeployment.gitCommitSha
+            ? shortenId(targetDeployment.gitCommitSha)
+            : targetDeployment.id}
+        </Button>
+      }
+    >
+      <div className="space-y-9">
+        <DeploymentSection
+          title="Live Deployment"
+          deployment={liveDeployment}
+          isLive={true}
+          showSignal={true}
+        />
+        <DomainsSection domains={domains.data} />
+        <DeploymentSection title="Target Deployment" deployment={targetDeployment} isLive={false} />
+      </div>
+    </DialogContainer>
+  );
+};
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/rollback-dialog.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/rollback-dialog.tsx
new file mode 100644
index 0000000000..afb05b5585
--- /dev/null
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/components/actions/rollback-dialog.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { type Deployment, collection } from "@/lib/collections";
+import { trpc } from "@/lib/trpc/client";
+import { inArray, useLiveQuery } from "@tanstack/react-db";
+import { Button, DialogContainer, toast } from "@unkey/ui";
+import { useProject } from "../../../../../layout-provider";
+import { DeploymentSection } from "./components/deployment-section";
+import { DomainsSection } from "./components/domains-section";
+
+type RollbackDialogProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  targetDeployment: Deployment;
+  liveDeployment: Deployment;
+};
+
+export const RollbackDialog = ({
+  isOpen,
+  onClose,
+  targetDeployment,
+  liveDeployment,
+}: RollbackDialogProps) => {
+  const utils = trpc.useUtils();
+
+  const {
+    collections: { domains: domainCollection },
+  } = useProject();
+  const domains = useLiveQuery((q) =>
+    q
+      .from({ domain: domainCollection })
+      .where(({ domain }) => inArray(domain.sticky, ["environment", "live"])),
+  );
+
+  const rollback = trpc.deploy.deployment.rollback.useMutation({
+    onSuccess: () => {
+      utils.invalidate();
+      toast.success("Rollback completed", {
+        description: `Successfully rolled back to deployment ${targetDeployment.id}`,
+      });
+      // hack to revalidate
+      try {
+        // @ts-expect-error Their docs say it's here
+        collection.projects.utils.refetch();
+        // @ts-expect-error Their docs say it's here
+        collection.deployments.utils.refetch();
+        // @ts-expect-error Their docs say it's here
+        collection.domains.utils.refetch();
+      } catch (error) {
+        console.error("Refetch error:", error);
+      }
+
+      onClose();
+    },
+    onError: (error) => {
+      toast.error("Rollback failed", {
+        description: error.message,
+      });
+    },
+  });
+
+  const handleRollback = async () => {
+    await rollback
+      .mutateAsync({
+        targetDeploymentId: targetDeployment.id,
+      })
+      .catch((error) => {
+        console.error("Rollback error:", error);
+      });
+  };
+
+  return (
+    <DialogContainer
+      isOpen={isOpen}
+      onOpenChange={onClose}
+      title="Rollback to version"
+      subTitle="Switch the active deployment to a target stable version"
+      footer={
+        <Button
+          variant="primary"
+          size="xlg"
+          onClick={handleRollback}
+          disabled={rollback.isLoading}
+          loading={rollback.isLoading}
+          className="w-full rounded-lg"
+        >
+          Rollback to target version
+        </Button>
+      }
+    >
+      <div className="space-y-9">
+        <DeploymentSection
+          title="Live Deployment"
+          deployment={liveDeployment}
+          isLive={true}
+          showSignal={true}
+        />
+        <DomainsSection domains={domains.data} />
+        <DeploymentSection title="Target Deployment" deployment={targetDeployment} isLive={false} />
+      </div>
+    </DialogContainer>
+  );
+};
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/deployments-list.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/deployments-list.tsx
index a0217b114c..70b667c491 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/deployments-list.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/deployments/components/table/deployments-list.tsx
@@ -116,7 +116,7 @@ export const DeploymentsList = () => {
         render: ({ deployment }) => (
           <div className="flex items-center min-h-[52px]">
             <DomainList
-              key={`${deployment.id}-${liveDeployment}-${project?.isRolledBack}`}
+              key={`${deployment.id}-${liveDeployment}-${project?.isRolledBack}-${project?.latestDeploymentId}`}
               deploymentId={deployment.id}
             />
           </div>
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/active-deployment-card/filter-button.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/active-deployment-card/filter-button.tsx
index 451265b42e..41f27202cb 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/active-deployment-card/filter-button.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/active-deployment-card/filter-button.tsx
@@ -25,7 +25,7 @@ export const FilterButton = ({
     )}
     onClick={onClick}
   >
-    <Icon size="sm-regular" className={isActive ? "" : "text-grayA-9"} />
+    <Icon size="sm-regular" className={isActive ? "" : "text-grayA-9 !size-3"} />
     <span className={isActive ? "" : "text-grayA-9"}>{label}</span>
     <div className="rounded w-[22px] h-[18px] flex items-center justify-center text-[10px] leading-4 bg-gray-6 text-black dark:text-white">
       {count}
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/active-deployment-card/index.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/active-deployment-card/index.tsx
index b35a541d68..d6103c21a2 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/active-deployment-card/index.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/active-deployment-card/index.tsx
@@ -167,7 +167,11 @@ export const ActiveDeploymentCard = ({ deploymentId }: Props) => {
               </InfoChip>
             </div>
           </div>
-          <div className="flex items-center gap-1.5">
+          <button
+            className="flex items-center gap-1.5"
+            onClick={() => setExpanded(!isExpanded)}
+            type="button"
+          >
             <div className="text-grayA-9 text-xs">
               {showBuildSteps ? "Build logs" : "Gateway logs"}
             </div>
@@ -179,7 +183,7 @@ export const ActiveDeploymentCard = ({ deploymentId }: Props) => {
                 )}
               />
             </Button>
-          </div>
+          </button>
         </div>
 
         {/* Expandable Logs Section */}
@@ -204,14 +208,14 @@ export const ActiveDeploymentCard = ({ deploymentId }: Props) => {
               count={formatNumber(logCounts.errors)}
               onClick={() => handleFilterChange("errors")}
               icon={CircleXMark}
-              label="Errors"
+              label="5XX"
             />
             <FilterButton
               isActive={logFilter === "warnings"}
               count={formatNumber(logCounts.warnings)}
               onClick={() => handleFilterChange("warnings")}
               icon={TriangleWarning2}
-              label="Warnings"
+              label="4XX"
             />
 
             <Input
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/domain-row.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/domain-row.tsx
index b51404bb6d..5ffc8208ac 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/domain-row.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/domain-row.tsx
@@ -1,15 +1,22 @@
 import { CircleCheck, Link4, ShareUpRight } from "@unkey/icons";
 import { Badge } from "@unkey/ui";
+import { cn } from "@unkey/ui/src/lib/utils";
 import Link from "next/link";
 import { Card } from "./card";
 
 type DomainRowProps = {
   domain: string;
+  className?: string;
 };
 
-export function DomainRow({ domain }: DomainRowProps) {
+export function DomainRow({ domain, className }: DomainRowProps) {
   return (
-    <div className="border border-gray-4 border-t-0 first:border-t first:rounded-t-[14px] last:rounded-b-[14px] last:border-b w-full px-4 py-3 flex justify-between items-center">
+    <div
+      className={cn(
+        "border border-gray-4 border-t-0 first:border-t first:rounded-t-[14px] last:rounded-b-[14px] last:border-b w-full px-4 py-3 flex justify-between items-center",
+        className,
+      )}
+    >
       <div className="flex items-center">
         <Link4 className="text-gray-9" size="sm-medium" />
         <Link
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/project-details-expandables/sections/open-api-diff.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/project-details-expandables/sections/open-api-diff.tsx
index 83cd523325..829c5577e2 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/project-details-expandables/sections/open-api-diff.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/details/project-details-expandables/sections/open-api-diff.tsx
@@ -41,17 +41,17 @@ export const OpenApiDiff = () => {
     [liveDeploymentId],
   );
 
-  const [newDeployment, oldDeployment] = query.data ?? [];
+  const newDeployment = query.data?.find((d) => d.id !== liveDeploymentId);
 
   const diff = trpc.deploy.deployment.getOpenApiDiff.useQuery({
     newDeploymentId: newDeployment?.id ?? "",
-    oldDeploymentId: oldDeployment?.id ?? "",
+    oldDeploymentId: liveDeploymentId ?? "",
   });
 
   // @ts-expect-error I have no idea why this whines about type diff
   const status = getDiffStatus(diff.data);
 
-  if (newDeployment && !oldDeployment) {
+  if (newDeployment && !liveDeploymentId) {
     return (
       <div className="rounded-[10px] flex items-center border border-gray-5 h-[52px] w-full max-w-md">
         <div className="bg-grayA-2 rounded-l-[10px] border-r border-grayA-3 h-full w-[52px] flex items-center justify-center shrink-0">
@@ -71,23 +71,25 @@ export const OpenApiDiff = () => {
     return null;
   }
 
-  const diffUrl = `/${params?.workspaceSlug}/projects/${params?.projectId}/openapi-diff?from=${oldDeployment.id}&to=${newDeployment.id}`;
+  const diffUrl = `/${params?.workspaceSlug}/projects/${params?.projectId}/openapi-diff?from=${liveDeploymentId}&to=${newDeployment.id}`;
   return (
     <Link href={diffUrl} className="hover:opacity-80 transition-opacity block">
       <div className="gap-4 items-center flex w-full">
         <div className="rounded-[10px] flex items-center border border-gray-5 h-[52px] w-full">
           <div className="bg-grayA-2 rounded-l-[10px] border-r border-grayA-3 h-full w-1/3 flex items-center justify-center">
-            <StatusIndicator className="bg-transparent" />
+            <StatusIndicator className="bg-transparent" status={status} withSignal />
           </div>
           <div className="flex flex-col flex-1 px-3">
             <div className="text-grayA-9 text-xs">from</div>
-            <div className="text-accent-12 font-medium text-xs">{shortenId(oldDeployment.id)}</div>
+            <div className="text-accent-12 font-medium text-xs">
+              {shortenId(liveDeploymentId ?? "")}
+            </div>
           </div>
         </div>
         <ArrowRight className="shrink-0 text-gray-9 size-[14px]" size="sm-regular" />
         <div className="rounded-[10px] flex items-center border border-gray-5 h-[52px] w-full">
           <div className="bg-grayA-2 border-r border-grayA-3 h-full w-1/3 flex items-center justify-center">
-            <StatusIndicator status={status} withSignal className="bg-transparent" />
+            <StatusIndicator className="bg-transparent" />
           </div>
           <div className="flex flex-col flex-1 px-3">
             <div className="text-grayA-9 text-xs">to</div>
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/layout.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/layout.tsx
index 17cc6f6a73..9a1402381d 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/layout.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/layout.tsx
@@ -35,14 +35,17 @@ const ProjectLayout = ({ projectId, children }: ProjectLayoutProps) => {
   );
 
   const liveDeploymentId = projects.data.at(0)?.liveDeploymentId;
+  const lastestDeploymentId = projects.data.at(0)?.latestDeploymentId;
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: We just wanna refetch domains as soon as liveDeploymentId changes.
+  // We just wanna refetch domains as soon as lastestCommitTimestamp changes.
+  // We could use the liveDeploymentId for that but when user make `env=preview` this doesn't refetch properly.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Read above.
   useEffect(() => {
     //@ts-expect-error Without this we can't refetch domains on-demand. It's either this or we do `refetchInternal` on domains collection level.
     // Second approach causing too any re-renders. This is fine because data is partitioned and centralized in this context.
     // Until they introduce a way to invalidate collections properly we stick to this.
     collections.domains.utils.refetch();
-  }, [liveDeploymentId]);
+  }, [lastestDeploymentId]);
 
   const getTooltipContent = () => {
     if (!liveDeploymentId) {
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/openapi-diff/components/client.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/openapi-diff/components/client.tsx
index 2da39a49fb..b28cd84eb5 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/openapi-diff/components/client.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/openapi-diff/components/client.tsx
@@ -112,14 +112,27 @@ export const DiffViewerContent: React.FC<DiffViewerContentProps> = ({
 
   if (!changelog || changelog.length === 0) {
     return (
-      <div className="text-center py-12 mx-3 mb-3">
-        <p className="text-xs text-grayA-9">
-          No differences between {fromDeployment} and {toDeployment}
-        </p>
+      <div className="flex flex-col items-center gap-4 px-8 py-12 text-center">
+        <div className="relative">
+          <div className="absolute inset-0 bg-gradient-to-r from-accent-4 to-accent-3 rounded-full blur-xl opacity-20 transition-opacity duration-300 animate-pulse" />
+          <div className="relative bg-gray-3 rounded-full p-3 transition-all duration-200">
+            <CircleInfo
+              className="text-grayA-9 size-6 transition-all duration-200 animate-pulse"
+              style={{ animationDuration: "2s" }}
+            />
+          </div>
+        </div>
+        <div className="space-y-1">
+          <h3 className="text-grayA-12 font-medium text-sm">No noteworthy changes</h3>
+          <p className="text-grayA-9 text-xs max-w-[280px] leading-relaxed">
+            The specifications for <span className="text-grayA-11">{fromDeployment} </span>
+            and <span className="text-grayA-11">{toDeployment} </span>
+            are functionally identical.
+          </p>
+        </div>
       </div>
     );
   }
-
   return (
     <>
       {/* Stats header */}
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/openapi-diff/components/deployment-select.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/openapi-diff/components/deployment-select.tsx
index 86b5e5fe77..6e51f84e29 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/openapi-diff/components/deployment-select.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/openapi-diff/components/deployment-select.tsx
@@ -37,6 +37,40 @@ export function DeploymentSelect({
   disabledDeploymentId,
 }: DeploymentSelectProps) {
   const { liveDeploymentId } = useProject();
+  const latestDeploymentId = deployments.find(
+    ({ deployment }) => deployment.id !== liveDeploymentId,
+  )?.deployment.id;
+
+  const getTooltipContent = (
+    deploymentId: string,
+    isDisabled: boolean,
+    isLive: boolean,
+    isLatest: boolean,
+  ): string | undefined => {
+    if (isDisabled) {
+      return deploymentId === disabledDeploymentId
+        ? "Already selected for comparison"
+        : "No OpenAPI spec available";
+    }
+    if (isLive) {
+      return "Live deployment";
+    }
+    if (isLatest) {
+      return "Latest preview deployment";
+    }
+    return undefined;
+  };
+
+  const getTriggerTitle = (): string => {
+    if (value === liveDeploymentId) {
+      return "Live deployment";
+    }
+    if (value === latestDeploymentId) {
+      return "Latest preview deployment";
+    }
+    return "";
+  };
+
   const renderOptions = () => {
     if (isLoading) {
       return (
@@ -52,24 +86,18 @@ export function DeploymentSelect({
         </SelectItem>
       );
     }
-
     return deployments.map(({ deployment }) => {
       const isDisabled = deployment.id === disabledDeploymentId || !deployment.hasOpenApiSpec;
       const deployedAt = format(deployment.createdAt, "MMM d, h:mm a");
+      const isLatest = deployment.id === latestDeploymentId;
+      const isLive = deployment.id === liveDeploymentId;
+      const tooltipContent = getTooltipContent(deployment.id, isDisabled, isLive, isLatest);
 
       return (
         <SelectItem key={deployment.id} value={deployment.id} disabled={isDisabled}>
           <InfoTooltip
-            disabled={!isDisabled && deployment.id !== liveDeploymentId}
-            content={
-              isDisabled
-                ? deployment.id === disabledDeploymentId
-                  ? "Already selected for comparison"
-                  : "No OpenAPI spec available"
-                : deployment.id === liveDeploymentId
-                  ? "Live deployment"
-                  : undefined
-            }
+            disabled={!tooltipContent}
+            content={tooltipContent}
             position={{
               side: "right",
               align: "end",
@@ -80,7 +108,13 @@ export function DeploymentSelect({
               <span className="text-grayA-12 font-medium truncate">{shortenId(deployment.id)}</span>
               <span className="text-grayA-9">•</span>
               <span className="text-grayA-9">{deployedAt}</span>
-              {deployment.id === liveDeploymentId && <PulseIndicator />}
+              {isLive && <PulseIndicator />}
+              {isLatest && !isLive && (
+                <PulseIndicator
+                  colors={["bg-gray-9", "bg-gray-7", "bg-gray-8", "bg-gray-9"]}
+                  coreColor="bg-gray-9"
+                />
+              )}
             </div>
           </InfoTooltip>
         </SelectItem>
@@ -94,11 +128,7 @@ export function DeploymentSelect({
       onValueChange={onValueChange}
       disabled={disabled || isLoading || deployments.length === 0}
     >
-      <SelectTrigger
-        id={id}
-        className="rounded-md"
-        title={value === liveDeploymentId ? "Live deployment" : ""}
-      >
+      <SelectTrigger id={id} className="rounded-md" title={getTriggerTitle()}>
         <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       <SelectContent>{renderOptions()}</SelectContent>
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/openapi-diff/page.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/openapi-diff/page.tsx
index d8a169b980..e7e1e61e3e 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/openapi-diff/page.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/openapi-diff/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { shortenId } from "@/lib/shorten-id";
 import { trpc } from "@/lib/trpc/client";
 import { eq, useLiveQuery } from "@tanstack/react-db";
 import { ArrowRight, Magnifier } from "@unkey/icons";
@@ -58,7 +59,7 @@ export default function DiffPage() {
     if (liveDeploymentId) {
       const exists = sortedDeployments.some((d) => d.deployment.id === liveDeploymentId);
       if (exists) {
-        setSelectedToDeployment(liveDeploymentId);
+        setSelectedFromDeployment(liveDeploymentId);
       }
     }
   }, [liveDeploymentId, sortedDeployments, deployments.isLoading, searchParams]);
@@ -84,12 +85,7 @@ export default function DiffPage() {
         return deploymentId;
       }
 
-      const commitSha =
-        deployment.deployment.gitCommitSha?.substring(0, 7) ||
-        deployment.deployment.id.substring(0, 7);
-      const branch = deployment.deployment.gitBranch || "unknown";
-
-      return `${branch}:${commitSha}`;
+      return shortenId(deploymentId);
     },
     [sortedDeployments],
   );
@@ -175,7 +171,7 @@ export default function DiffPage() {
           {showContent && (
             <>
               {diffLoading && (
-                <div className="text-center py-12 mx-3 mb-3">
+                <div className="text-center py-12 px-8">
                   <Loader className="w-6 h-6 mx-auto mb-3 animate-spin text-grayA-9" />
                   <p className="text-[13px] text-grayA-11 font-medium">Analyzing changes...</p>
                   <p className="text-xs text-grayA-9 mt-1">Comparing API specifications</p>
@@ -183,11 +179,26 @@ export default function DiffPage() {
               )}
 
               {diffError && (
-                <div className="mx-3 mb-3 border border-error-6 rounded-md p-4 bg-error-2">
-                  <div className="text-[13px] text-error-11 font-medium mb-1.5">
-                    Failed to generate diff
+                <div className="p-3 pt-0">
+                  <div className="flex flex-col items-center gap-4 px-8 py-12 text-center border border-error-6 rounded-lg bg-error-2">
+                    <div className="relative">
+                      <div className="absolute inset-0 bg-gradient-to-r from-error-4 to-error-3 rounded-full blur-xl opacity-20 transition-opacity duration-300 animate-pulse" />
+                      <div className="relative bg-error-3 rounded-full p-3 transition-all duration-200">
+                        <Magnifier
+                          className="text-error-9 size-6 transition-all duration-200 animate-pulse"
+                          style={{ animationDuration: "2s" }}
+                        />
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <h3 className="text-error-11 font-medium text-sm">
+                        Unable to compare deployments
+                      </h3>
+                      <p className="text-error-11 text-xs max-w-[280px] leading-relaxed opacity-90">
+                        {diffError.message}
+                      </p>
+                    </div>
                   </div>
-                  <p className="text-xs text-error-11 leading-relaxed">{diffError.message}</p>
                 </div>
               )}
 
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/create-project/create-project-dialog.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/create-project/create-project-dialog.tsx
index 949976e6cc..74b0e2c423 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/create-project/create-project-dialog.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/create-project/create-project-dialog.tsx
@@ -41,8 +41,8 @@ export const CreateProjectDialog = () => {
         gitRepositoryUrl: values.gitRepositoryUrl || null,
         liveDeploymentId: null,
         isRolledBack: false,
-        updatedAt: null,
         id: "will-be-replace-by-server",
+        latestDeploymentId: null,
         author: "will-be-replace-by-server",
         authorAvatar: "will-be-replace-by-server",
         branch: "will-be-replace-by-server",
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/index.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/index.tsx
index 5d72463ba3..eef3e237cd 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/index.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/index.tsx
@@ -1,4 +1,5 @@
-import { collection } from "@/lib/collections";
+import { ProximityPrefetch } from "@/components/proximity-prefetch";
+import { collection, collectionManager } from "@/lib/collections";
 import { ilike, useLiveQuery } from "@tanstack/react-db";
 import { BookBookmark, Dots } from "@unkey/icons";
 import { Button, Empty } from "@unkey/ui";
@@ -76,31 +77,39 @@ export const ProjectsList = () => {
         }}
       >
         {projects.data.map((project) => (
-          <ProjectCard
-            projectId={project.id}
+          <ProximityPrefetch
+            distance={300}
+            debounceDelay={150}
             key={project.id}
-            name={project.name}
-            domain={project.domain}
-            commitTitle={project.commitTitle}
-            commitTimestamp={project.commitTimestamp}
-            branch={project.branch}
-            author={project.author}
-            authorAvatar={project.authorAvatar}
-            regions={project.regions}
-            repository={project.gitRepositoryUrl || undefined}
-            actions={
-              <ProjectActions projectId={project.id}>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="mb-auto shrink-0"
-                  title="Project actions"
-                >
-                  <Dots size="sm-regular" />
-                </Button>
-              </ProjectActions>
-            }
-          />
+            onEnterProximity={() => {
+              collectionManager.preloadProject(project.id);
+            }}
+          >
+            <ProjectCard
+              projectId={project.id}
+              name={project.name}
+              domain={project.domain}
+              commitTitle={project.commitTitle}
+              commitTimestamp={project.commitTimestamp}
+              branch={project.branch}
+              author={project.author}
+              authorAvatar={project.authorAvatar}
+              regions={project.regions}
+              repository={project.gitRepositoryUrl || undefined}
+              actions={
+                <ProjectActions projectId={project.id}>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="mb-auto shrink-0"
+                    title="Project actions"
+                  >
+                    <Dots size="sm-regular" />
+                  </Button>
+                </ProjectActions>
+              }
+            />
+          </ProximityPrefetch>
         ))}
       </div>
     </div>
diff --git a/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/project-actions.tsx b/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/project-actions.tsx
index d9f02d5559..40d2a0be61 100644
--- a/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/project-actions.tsx
+++ b/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/project-actions.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { type MenuItem, TableActionPopover } from "@/components/logs/table-action.popover";
+import { useWorkspace } from "@/providers/workspace-provider";
 import { Clone, Gear, Layers3, Trash } from "@unkey/icons";
 
 import { toast } from "@unkey/ui";
@@ -14,12 +15,18 @@ type ProjectActionsProps = {
 
 export const ProjectActions = ({ projectId, children }: PropsWithChildren<ProjectActionsProps>) => {
   const router = useRouter();
-  const menuItems = getProjectActionItems(projectId, router);
+  const { workspace } = useWorkspace();
+  // biome-ignore lint/style/noNonNullAssertion: This cannot be null
+  const menuItems = getProjectActionItems(projectId, workspace?.slug!, router);
 
   return <TableActionPopover items={menuItems}>{children}</TableActionPopover>;
 };
 
-const getProjectActionItems = (projectId: string, router: AppRouterInstance): MenuItem[] => {
+const getProjectActionItems = (
+  projectId: string,
+  workspaceSlug: string,
+  router: AppRouterInstance,
+): MenuItem[] => {
   return [
     {
       id: "favorite-project",
@@ -48,12 +55,10 @@ const getProjectActionItems = (projectId: string, router: AppRouterInstance): Me
     },
     {
       id: "view-log",
-      label: "View logs",
+      label: "View gateway logs",
       icon: <Layers3 size="md-regular" />,
       onClick: () => {
-        //INFO: This will change soon
-        const fakeDeploymentId = "idk";
-        router.push(`/projects/${projectId}/deployments/${fakeDeploymentId}/logs`);
+        router.push(`/${workspaceSlug}/projects/${projectId}/gateway-logs`);
       },
     },
     {
diff --git a/apps/dashboard/components/logs/live-switch-button/index.tsx b/apps/dashboard/components/logs/live-switch-button/index.tsx
index fa67e40254..c834c9a2df 100644
--- a/apps/dashboard/components/logs/live-switch-button/index.tsx
+++ b/apps/dashboard/components/logs/live-switch-button/index.tsx
@@ -9,16 +9,15 @@ type LiveSwitchProps = {
 };
 
 export const LiveSwitchButton = ({ isLive, onToggle }: LiveSwitchProps) => {
-  useKeyboardShortcut("option+shift+l", onToggle);
-
+  useKeyboardShortcut("option+shift+q", onToggle);
   return (
     <Button
       onClick={onToggle}
       variant="ghost"
       size="md"
-      title="Toggle live updates (Shortcut: ⌥+⇧+L)"
+      title="Toggle live updates (Shortcut: ⌥+⇧+Q)"
       className={cn(
-        "px-2 relative rounded-lg",
+        "px-2 relative rounded-lg group overflow-hidden",
         isLive
           ? "bg-info-3 text-info-11 hover:bg-info-3 hover:text-info-11 border border-solid border-info-7"
           : "text-accent-12 [&_svg]:text-accent-9",
@@ -31,7 +30,9 @@ export const LiveSwitchButton = ({ isLive, onToggle }: LiveSwitchProps) => {
       )}
       <CircleCaretRight className="size-4 relative z-10" />
       <span className="font-medium text-[13px]">Live</span>
-      <KeyboardButton shortcut="⌥+⇧+L" />
+      <div className="max-w-0 opacity-0 group-hover:max-w-[100px] group-hover:opacity-100 transition-all duration-300 ease-in-out overflow-hidden">
+        <KeyboardButton shortcut="⌥+⇧+Q" className="ml-1" />
+      </div>
     </Button>
   );
 };
diff --git a/apps/dashboard/components/proximity-prefetch.tsx b/apps/dashboard/components/proximity-prefetch.tsx
new file mode 100644
index 0000000000..4419db468e
--- /dev/null
+++ b/apps/dashboard/components/proximity-prefetch.tsx
@@ -0,0 +1,123 @@
+"use client";
+import { useRouter } from "next/navigation";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+type ProximityPrefetchProps = {
+  /** The content to wrap and monitor for proximity */
+  children: ReactNode;
+  /** The route path to prefetch when mouse enters proximity. Optional if only using onEnterProximity */
+  route?: string;
+  /** Distance in pixels from element center to trigger prefetch. Default: 500px */
+  distance?: number;
+  /** Debounce delay in milliseconds for proximity checks. Default: 100ms */
+  debounceDelay?: number;
+  /** Callback fired once when mouse enters proximity threshold */
+  onEnterProximity?: () => void | Promise<void>;
+};
+
+/**
+ * Wraps children and prefetches a Next.js route when the user's mouse enters a defined proximity.
+ *
+ * Triggers once per route/element and resets when the route changes.
+ * Useful for preloading data or routes before user interaction.
+ *
+ * @example
+ * // Basic route prefetch
+ * <ProximityPrefetch route="/projects/123">
+ *   <ProjectCard />
+ * </ProximityPrefetch>
+ *
+ * @example
+ * // Custom callback for data preloading
+ * <ProximityPrefetch
+ *   route="/projects/123"
+ *   onEnterProximity={async () => {
+ *     await fetch('/api/projects/123/metrics');
+ *   }}
+ * >
+ *   <ProjectCard />
+ * </ProximityPrefetch>
+ *
+ * @example
+ * // Adjust sensitivity
+ * <ProximityPrefetch
+ *   route="/projects/123"
+ *   distance={300}
+ *   debounceDelay={150}
+ * >
+ *   <ProjectCard />
+ * </ProximityPrefetch>
+ */
+export function ProximityPrefetch({
+  children,
+  route,
+  distance = 500,
+  debounceDelay = 100,
+  onEnterProximity,
+}: ProximityPrefetchProps) {
+  const router = useRouter();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const hasTriggered = useRef(false);
+  const debounceTimeout = useRef<NodeJS.Timeout>();
+
+  const checkProximity = useCallback(() => {
+    // Skip if element doesn't exist or already triggered
+    if (!containerRef.current || hasTriggered.current) {
+      return;
+    }
+
+    // Calculate distance from mouse to element center
+    const rect = containerRef.current.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const distanceFromCenter = Math.sqrt(
+      (mousePosition.x - centerX) ** 2 + (mousePosition.y - centerY) ** 2,
+    );
+
+    // Trigger prefetch and callback when mouse enters proximity threshold
+    if (distanceFromCenter < distance) {
+      hasTriggered.current = true;
+
+      if (route) {
+        router.prefetch(route);
+      }
+
+      if (onEnterProximity) {
+        Promise.resolve(onEnterProximity()).catch((error) => {
+          console.error("ProximityPrefetch callback error:", error);
+        });
+      }
+    }
+  }, [mousePosition, distance, route, router, onEnterProximity]);
+
+  // Tracks the mouse position
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      setMousePosition({ x: e.clientX, y: e.clientY });
+    };
+
+    window.addEventListener("mousemove", handleMouseMove, { passive: true });
+    return () => window.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+
+  useEffect(() => {
+    // Skip checking proximity until mouse has moved from initial (0,0) position
+    if (mousePosition.x === 0 && mousePosition.y === 0) {
+      return;
+    }
+
+    // Debounce proximity checks to avoid excessive calculations on every mouse move
+    clearTimeout(debounceTimeout.current);
+    debounceTimeout.current = setTimeout(checkProximity, debounceDelay);
+
+    return () => clearTimeout(debounceTimeout.current);
+  }, [mousePosition, checkProximity, debounceDelay]);
+
+  useEffect(() => {
+    hasTriggered.current = false;
+  }, []);
+
+  return <div ref={containerRef}>{children}</div>;
+}
diff --git a/apps/dashboard/components/virtual-table/index.tsx b/apps/dashboard/components/virtual-table/index.tsx
index 9ad586b6ea..2695927400 100644
--- a/apps/dashboard/components/virtual-table/index.tsx
+++ b/apps/dashboard/components/virtual-table/index.tsx
@@ -390,13 +390,16 @@ export const VirtualTable = forwardRef<VirtualTableRef, VirtualTableProps<any>>(
               />
             </tbody>
           </table>
-          <LoadMoreFooter
-            {...loadMoreFooterProps}
-            onLoadMore={onLoadMore}
-            isFetchingNextPage={isFetchingNextPage}
-            totalVisible={virtualizer.getVirtualItems().length}
-            totalCount={tableData.getTotalLength()}
-          />
+          {/* Without this check bottom status section blinks in the UI and disappears */}
+          {loadMoreFooterProps && (
+            <LoadMoreFooter
+              {...loadMoreFooterProps}
+              onLoadMore={onLoadMore}
+              isFetchingNextPage={isFetchingNextPage}
+              totalVisible={virtualizer.getVirtualItems().length}
+              totalCount={tableData.getTotalLength()}
+            />
+          )}
         </div>
       </div>
     );
diff --git a/apps/dashboard/lib/collections/deploy/projects.ts b/apps/dashboard/lib/collections/deploy/projects.ts
index fb34785e5f..875fd8bd1d 100644
--- a/apps/dashboard/lib/collections/deploy/projects.ts
+++ b/apps/dashboard/lib/collections/deploy/projects.ts
@@ -9,7 +9,7 @@ const schema = z.object({
   name: z.string(),
   slug: z.string(),
   gitRepositoryUrl: z.string().nullable(),
-  updatedAt: z.number().int().nullable(),
+  latestDeploymentId: z.string().nullable(),
   liveDeploymentId: z.string().nullable(),
   isRolledBack: z.boolean(),
   // Flattened deployment fields for UI
diff --git a/apps/dashboard/lib/collections/index.ts b/apps/dashboard/lib/collections/index.ts
index 52b53d2e00..fee52f0525 100644
--- a/apps/dashboard/lib/collections/index.ts
+++ b/apps/dashboard/lib/collections/index.ts
@@ -38,15 +38,17 @@ class CollectionManager {
     return this.projectCollections.get(projectId)!;
   }
 
+  async preloadProject(projectId: string): Promise<void> {
+    const collections = this.getProjectCollections(projectId);
+    // Preload all collections in the object
+    await Promise.all(Object.values(collections).map((collection) => collection.preload()));
+  }
+
   async cleanup(projectId: string) {
     const collections = this.projectCollections.get(projectId);
     if (collections) {
-      await Promise.all([
-        collections.environments.cleanup(),
-        collections.domains.cleanup(),
-        collections.deployments.cleanup(),
-        // Note: projects is shared, don't clean it up per project
-      ]);
+      // Cleanup all collections in the object
+      await Promise.all(Object.values(collections).map((collection) => collection.cleanup()));
       this.projectCollections.delete(projectId);
     }
   }
@@ -56,10 +58,8 @@ class CollectionManager {
     const projectCleanupPromises = Array.from(this.projectCollections.keys()).map((projectId) =>
       this.cleanup(projectId),
     );
-
     // Clean up global collections
     const globalCleanupPromises = Object.values(collection).map((c) => c.cleanup());
-
     await Promise.all([...projectCleanupPromises, ...globalCleanupPromises]);
   }
 }
diff --git a/apps/dashboard/lib/trpc/routers/deploy/project/list.ts b/apps/dashboard/lib/trpc/routers/deploy/project/list.ts
index 59ea4c6f7c..1dfa42d8d0 100644
--- a/apps/dashboard/lib/trpc/routers/deploy/project/list.ts
+++ b/apps/dashboard/lib/trpc/routers/deploy/project/list.ts
@@ -8,7 +8,6 @@ type ProjectRow = {
   id: string;
   name: string;
   slug: string;
-  updated_at: number | null;
   git_repository_url: string | null;
   live_deployment_id: string | null;
   is_rolled_back: boolean;
@@ -19,6 +18,7 @@ type ProjectRow = {
   git_commit_timestamp: number | null;
   runtime_config: Deployment["runtimeConfig"] | null;
   domain: string | null;
+  latest_deployment_id: string | null;
 };
 
 export const listProjects = t.procedure
@@ -41,7 +41,15 @@ export const listProjects = t.procedure
         ${deployments.gitCommitAuthorAvatarUrl},
         ${deployments.gitCommitTimestamp},
         ${deployments.runtimeConfig},
-        ${domains.domain}
+        ${domains.domain},
+        (
+          SELECT id
+          FROM ${deployments} d
+          WHERE d.project_id = ${projects.id}
+            AND d.workspace_id = ${ctx.workspace.id}
+          ORDER BY d.created_at DESC
+          LIMIT 1
+        ) as latest_deployment_id
       FROM ${projects}
       LEFT JOIN ${deployments}
         ON ${projects.liveDeploymentId} = ${deployments.id}
@@ -58,7 +66,6 @@ export const listProjects = t.procedure
         id: row.id,
         name: row.name,
         slug: row.slug,
-        updatedAt: row.updated_at,
         gitRepositoryUrl: row.git_repository_url,
         liveDeploymentId: row.live_deployment_id,
         isRolledBack: row.is_rolled_back,
@@ -69,6 +76,7 @@ export const listProjects = t.procedure
         authorAvatar: row.git_commit_author_avatar_url,
         regions: row.runtime_config?.regions?.map((r) => r.region) ?? ["us-east-1"],
         domain: row.domain,
+        latestDeploymentId: row.latest_deployment_id,
       }),
     );
   });
diff --git a/go/cmd/deploy/control_plane.go b/go/cmd/deploy/control_plane.go
index 3dead4a8bc..e1403dade6 100644
--- a/go/cmd/deploy/control_plane.go
+++ b/go/cmd/deploy/control_plane.go
@@ -113,7 +113,6 @@ func (c *ControlPlaneClient) PollDeploymentStatus(
 	logger logging.Logger,
 	deploymentID string,
 	onStatusChange func(DeploymentStatusEvent) error,
-	onStepUpdate func(DeploymentStepEvent) error,
 ) error {
 	ticker := time.NewTicker(2 * time.Second)
 	defer ticker.Stop()
@@ -121,7 +120,6 @@ func (c *ControlPlaneClient) PollDeploymentStatus(
 	defer timeout.Stop()
 
 	// Track processed steps by creation time to avoid duplicates
-	processedSteps := make(map[int64]bool)
 	lastStatus := ctrlv1.DeploymentStatus_DEPLOYMENT_STATUS_UNSPECIFIED
 
 	for {
@@ -154,11 +152,6 @@ func (c *ControlPlaneClient) PollDeploymentStatus(
 				lastStatus = currentStatus
 			}
 
-			// Process new step updates
-			if err := c.processNewSteps(deploymentID, deployment.GetSteps(), processedSteps, currentStatus, onStepUpdate); err != nil {
-				return err
-			}
-
 			// Check for completion
 			if currentStatus == ctrlv1.DeploymentStatus_DEPLOYMENT_STATUS_READY {
 				return nil
@@ -167,51 +160,6 @@ func (c *ControlPlaneClient) PollDeploymentStatus(
 	}
 }
 
-// processNewSteps processes new deployment steps and calls the event handler
-func (c *ControlPlaneClient) processNewSteps(
-	deploymentID string,
-	steps []*ctrlv1.DeploymentStep,
-	processedSteps map[int64]bool,
-	currentStatus ctrlv1.DeploymentStatus,
-	onStepUpdate func(DeploymentStepEvent) error,
-) error {
-	for _, step := range steps {
-		// Creation timestamp as unique identifier
-		stepTimestamp := step.GetCreatedAt()
-
-		if processedSteps[stepTimestamp] {
-			continue // Already processed this step
-		}
-
-		// Handle step errors first
-		if step.GetErrorMessage() != "" {
-			return fmt.Errorf("deployment failed: %s", step.GetErrorMessage())
-		}
-
-		// Call step update handler
-		if step.GetMessage() != "" {
-			event := DeploymentStepEvent{
-				DeploymentID: deploymentID,
-				Step:         step,
-				Status:       currentStatus,
-			}
-			if err := onStepUpdate(event); err != nil {
-				return err
-			}
-
-			// INFO: This is for demo purposes only.
-			// Adding a small delay between deployment steps to make the progression
-			// visually observable during demos. This allows viewers to see each
-			// individual step (VM boot, rootfs loading, etc.) rather than having
-			// everything complete too quickly to follow.
-			time.Sleep(800 * time.Millisecond)
-		}
-		// Mark this step as processed
-		processedSteps[stepTimestamp] = true
-	}
-	return nil
-}
-
 // getFailureMessage extracts failure message from version
 func (c *ControlPlaneClient) getFailureMessage(deployment *ctrlv1.Deployment) string {
 	if deployment.GetErrorMessage() != "" {
diff --git a/go/cmd/deploy/main.go b/go/cmd/deploy/main.go
index 2fc1bfa05f..cd919be2b8 100644
--- a/go/cmd/deploy/main.go
+++ b/go/cmd/deploy/main.go
@@ -9,6 +9,8 @@ import (
 	"github.com/unkeyed/unkey/go/pkg/cli"
 	"github.com/unkeyed/unkey/go/pkg/git"
 	"github.com/unkeyed/unkey/go/pkg/otel/logging"
+	"golang.org/x/text/cases"
+	"golang.org/x/text/language"
 )
 
 const (
@@ -274,13 +276,13 @@ func executeDeploy(ctx context.Context, opts DeployOptions) error {
 	// Create deployment
 	ui.Print(MsgCreatingDeployment)
 	controlPlane := NewControlPlaneClient(opts)
-	deploymentId, err := controlPlane.CreateDeployment(ctx, dockerImage)
+	deploymentID, err := controlPlane.CreateDeployment(ctx, dockerImage)
 	if err != nil {
 		ui.PrintError(MsgFailedToCreateDeployment)
 		ui.PrintErrorDetails(err.Error())
 		return err
 	}
-	ui.PrintSuccess(fmt.Sprintf("Deployment created: %s", deploymentId))
+	ui.PrintSuccess(fmt.Sprintf("Deployment created: %s", deploymentID))
 
 	// Track final deployment for completion info
 	var finalDeployment *ctrlv1.Deployment
@@ -297,13 +299,8 @@ func executeDeploy(ctx context.Context, opts DeployOptions) error {
 		return nil
 	}
 
-	// Handle deployment step updates
-	onStepUpdate := func(event DeploymentStepEvent) error {
-		return handleStepUpdate(event, ui)
-	}
-
 	// Poll for deployment completion
-	err = controlPlane.PollDeploymentStatus(ctx, logger, deploymentId, onStatusChange, onStepUpdate)
+	err = controlPlane.PollDeploymentStatus(ctx, logger, deploymentID, onStatusChange)
 	if err != nil {
 		ui.CompleteCurrentStep(MsgDeploymentFailed, false)
 		return err
@@ -314,7 +311,7 @@ func executeDeploy(ctx context.Context, opts DeployOptions) error {
 		ui.CompleteCurrentStep(MsgDeploymentStepCompleted, true)
 		ui.PrintSuccess(MsgDeploymentCompleted)
 		fmt.Printf("\n")
-		printCompletionInfo(finalDeployment)
+		printCompletionInfo(finalDeployment, opts.Environment)
 		fmt.Printf("\n")
 	}
 
@@ -331,32 +328,6 @@ func getNextStepMessage(currentMessage string) string {
 	return ""
 }
 
-func handleStepUpdate(event DeploymentStepEvent, ui *UI) error {
-	step := event.Step
-
-	if step.GetErrorMessage() != "" {
-		ui.CompleteCurrentStep(step.GetMessage(), false)
-		ui.PrintErrorDetails(step.GetErrorMessage())
-		return fmt.Errorf("deployment failed: %s", step.GetErrorMessage())
-	}
-
-	if step.GetMessage() != "" {
-		message := step.GetMessage()
-		nextStep := getNextStepMessage(message)
-
-		if !ui.stepSpinning {
-			// First step - start spinner, then complete and start next
-			ui.StartStepSpinner(message)
-			ui.CompleteStepAndStartNext(message, nextStep)
-		} else {
-			// Complete current step and start next
-			ui.CompleteStepAndStartNext(message, nextStep)
-		}
-	}
-
-	return nil
-}
-
 func handleDeploymentFailure(controlPlane *ControlPlaneClient, deployment *ctrlv1.Deployment, ui *UI) error {
 	errorMsg := controlPlane.getFailureMessage(deployment)
 	ui.CompleteCurrentStep(MsgDeploymentFailed, false)
@@ -386,17 +357,19 @@ func printSourceInfo(opts DeployOptions, gitInfo git.Info) {
 	fmt.Printf("\n")
 }
 
-func printCompletionInfo(deployment *ctrlv1.Deployment) {
+func printCompletionInfo(deployment *ctrlv1.Deployment, env string) {
 	if deployment == nil || deployment.GetId() == "" {
 		fmt.Printf("✓ Deployment completed\n")
 		return
 	}
 
+	caser := cases.Title(language.English)
+
 	fmt.Println()
 	fmt.Println(CompletionTitle)
 	fmt.Printf("  %s: %s\n", CompletionDeploymentID, deployment.GetId())
 	fmt.Printf("  %s: %s\n", CompletionStatus, CompletionReady)
-	fmt.Printf("  %s: %s\n", CompletionEnvironment, DefaultEnvironment)
+	fmt.Printf("  %s: %s\n", CompletionEnvironment, caser.String(env))
 
 	fmt.Println()
 	fmt.Println(CompletionDomains)
diff --git a/internal/ui/src/components/buttons/keyboard-button.tsx b/internal/ui/src/components/buttons/keyboard-button.tsx
index 96c9860577..ee8970d3e4 100644
--- a/internal/ui/src/components/buttons/keyboard-button.tsx
+++ b/internal/ui/src/components/buttons/keyboard-button.tsx
@@ -26,7 +26,7 @@ const KeyboardButton = ({
         "focus:border-grayA-12 focus:ring-4 focus:ring-gray-6 focus-visible:outline-none focus:ring-offset-0 drop-shadow-button",
         "disabled:border disabled:border-grayA-4 disabled:text-grayA-7",
         "active:bg-grayA-5 max-md:hidden",
-        { className },
+        className,
       )}
       aria-label={`Keyboard shortcut ${modifierKey || ""} ${shortcut}`}
       role="presentation"
diff --git a/internal/ui/src/components/buttons/refresh-button.tsx b/internal/ui/src/components/buttons/refresh-button.tsx
index b8261d1b8c..57a1b00cc6 100644
--- a/internal/ui/src/components/buttons/refresh-button.tsx
+++ b/internal/ui/src/components/buttons/refresh-button.tsx
@@ -44,7 +44,7 @@ const RefreshButton = ({ onRefresh, isEnabled, isLive, toggleLive }: RefreshButt
     setRefreshTimeout(timeout);
   };
 
-  useKeyboardShortcut("option+shift+r", handleRefresh, {
+  useKeyboardShortcut("option+shift+w", handleRefresh, {
     preventDefault: true,
     disabled: !isEnabled,
   });
@@ -62,14 +62,16 @@ const RefreshButton = ({ onRefresh, isEnabled, isLive, toggleLive }: RefreshButt
           onClick={handleRefresh}
           variant="ghost"
           size="md"
-          title={isEnabled ? "Refresh data (Shortcut: ⌥+⇧+R)" : ""}
+          title={isEnabled ? "Refresh data (Shortcut: ⌥+⇧+W)" : ""}
           disabled={!isEnabled || isLoading}
           loading={isLoading}
-          className="flex w-full items-center justify-center rounded-lg border border-gray-4"
+          className="flex w-full items-center justify-center rounded-lg border border-gray-4 group overflow-hidden"
         >
           <Refresh3 className="size-4" />
           <span className="font-medium text-[13px] relative z-10">Refresh</span>
-          <KeyboardButton shortcut="⌥+⇧+R" />
+          <div className="max-w-0 opacity-0 group-hover:max-w-[100px] group-hover:opacity-100 transition-all duration-300 ease-in-out overflow-hidden">
+            <KeyboardButton shortcut="⌥+⇧+W" className="ml-1" />
+          </div>
         </Button>
       </div>
     </InfoTooltip>
@@ -77,4 +79,5 @@ const RefreshButton = ({ onRefresh, isEnabled, isLive, toggleLive }: RefreshButt
 };
 
 RefreshButton.displayName = "RefreshButton";
+
 export { RefreshButton, type RefreshButtonProps };
diff --git a/internal/ui/src/components/logs/control-cloud/index.tsx b/internal/ui/src/components/logs/control-cloud/index.tsx
index fb3803b95a..b55fc25000 100644
--- a/internal/ui/src/components/logs/control-cloud/index.tsx
+++ b/internal/ui/src/components/logs/control-cloud/index.tsx
@@ -27,7 +27,7 @@ export const ControlCloud = <TFilter extends FilterValue>({
 }: ControlCloudProps<TFilter>) => {
   const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
 
-  useKeyboardShortcut("option+shift+d", () => {
+  useKeyboardShortcut("option+shift+a", () => {
     const timestamp = Date.now();
     updateFilters([
       {
@@ -45,7 +45,7 @@ export const ControlCloud = <TFilter extends FilterValue>({
     ] as TFilter[]);
   });
 
-  useKeyboardShortcut("option+shift+c", () => {
+  useKeyboardShortcut("option+shift+s", () => {
     setFocusedIndex(0);
   });
 
@@ -130,7 +130,7 @@ export const ControlCloud = <TFilter extends FilterValue>({
 
   return (
     <div
-      className="px-3 py-2 w-full flex items-center min-h-10 border-b border-gray-4 gap-2 text-xs flex-wrap"
+      className="px-3 py-2 w-full flex items-center min-h-10 border-b border-gray-4 gap-2 text-xs flex-wrap group"
       onKeyDown={handleKeyDown}
     >
       {filters.map((filter, index) => (
@@ -146,11 +146,19 @@ export const ControlCloud = <TFilter extends FilterValue>({
         />
       ))}
       <div className="flex items-center px-2 py-1 gap-2 ml-auto max-md:hidden">
-        <span className="text-gray-9 text-[13px]">Clear filters</span>
-        <KeyboardButton shortcut="⌥+⇧+D" />
-        <div className="w-px h-4 bg-gray-4" />
-        <span className="text-gray-9 text-[13px]">Focus filters</span>
-        <KeyboardButton shortcut="⌥+⇧+C" />
+        <div className="flex items-center gap-2">
+          <span className="text-gray-9 text-[13px]">Clear filters</span>
+          <div className="max-w-0 opacity-0 group-hover:max-w-[100px] group-hover:opacity-100 transition-all duration-300 ease-in-out overflow-hidden">
+            <KeyboardButton shortcut="⌥+⇧+A" />
+          </div>
+        </div>
+        <div className="w-px h-4 bg-gray-4 mr-2" />
+        <div className="flex items-center gap-2">
+          <span className="text-gray-9 text-[13px]">Focus filters</span>
+          <div className="max-w-0 opacity-0 group-hover:max-w-[100px] group-hover:opacity-100 transition-all duration-300 ease-in-out overflow-hidden">
+            <KeyboardButton shortcut="⌥+⇧+S" />
+          </div>
+        </div>
       </div>
     </div>
   );