diff --git a/apps/deploy-web/src/components/deployments/DeploymentListRow.tsx b/apps/deploy-web/src/components/deployments/DeploymentListRow.tsx
index 2087d6d9f8..287a5053d2 100644
--- a/apps/deploy-web/src/components/deployments/DeploymentListRow.tsx
+++ b/apps/deploy-web/src/components/deployments/DeploymentListRow.tsx
@@ -88,13 +88,9 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
   const { data: leaseStatus } = useLeaseStatus({ provider, lease, enabled: !!(provider && lease && providerCredentials.details.usable) });
   const isAnonymousFreeTrialEnabled = useFlag("anonymous_free_trial");
 
-  const viewDeployment = useCallback(
-    (event: React.MouseEvent) => {
-      if ((event.target as Element).closest(`a, button, [role="button"]`)) return;
-      router.push(UrlService.deploymentDetails(deployment.dseq));
-    },
-    [router, deployment.dseq]
-  );
+  const viewDeployment = useCallback(() => {
+    router.push(UrlService.deploymentDetails(deployment.dseq));
+  }, [router, deployment.dseq]);
 
   function handleMenuClick() {
     setOpen(true);
@@ -168,7 +164,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
 
   return (
     <>
-      <TableRow className="cursor-pointer hover:bg-muted-foreground/10 [&>td]:p-2" role="link" onClick={viewDeployment}>
+      <TableRow className="hover:bg-muted-foreground/10 [&>td]:p-2">
         <TableCell>
           <div className="flex items-center justify-center">
             <SpecDetailList
@@ -181,7 +177,9 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
           </div>
         </TableCell>
         <TableCell className="max-w-[100px] text-center">
-          <DeploymentName deployment={deployment} deploymentServices={leaseStatus?.services} providerHostUri={provider?.hostUri} />
+          <a href={UrlService.deploymentDetails(deployment.dseq)} className="text-black">
+            <DeploymentName deployment={deployment} deploymentServices={leaseStatus?.services} providerHostUri={provider?.hostUri} />
+          </a>
 
           {!isAnonymousFreeTrialEnabled && isTrialing && (
             <div className="mt-2">
@@ -290,7 +288,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
         </TableCell>
 
         <TableCell>
-          <div className="flex items-center justify-end space-x-2">
+          <div className="flex items-center justify-end">
             {isSelectable && (
               <Checkbox
                 checked={checked}
@@ -343,7 +341,9 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
             </div>
 
             <div className="flex pr-2">
-              <NavArrowRight />
+              <Button onClick={viewDeployment} size="icon" variant="ghost" className="rounded-full">
+                <NavArrowRight />
+              </Button>
             </div>
           </div>
         </TableCell>
diff --git a/apps/deploy-web/src/hooks/useListSelection/useListSelection.ts b/apps/deploy-web/src/hooks/useListSelection/useListSelection.ts
index 51659a993a..adedfa4037 100644
--- a/apps/deploy-web/src/hooks/useListSelection/useListSelection.ts
+++ b/apps/deploy-web/src/hooks/useListSelection/useListSelection.ts
@@ -1,5 +1,6 @@
 import { useCallback, useMemo, useState } from "react";
-import { uniq } from "lodash";
+import intersection from "lodash/intersection";
+import uniq from "lodash/uniq";
 
 export type UseListSelectionProps<T> = {
   ids: T[];
@@ -37,19 +38,16 @@ export const useListSelection = <T>({ ids }: UseListSelectionProps<T>) => {
     [ids, isBetweenIds]
   );
 
-  const toggleSingleSelection = useCallback(
-    (id: T) => {
-      setSelectedItemIds(prev => {
-        const isAdding = !prev.includes(id);
-        if (isAdding) {
-          setIntervalSelectionAnchor(id);
-        }
+  const toggleSingleSelection = useCallback((id: T) => {
+    setSelectedItemIds(prev => {
+      const isAdding = !prev.includes(id);
+      if (isAdding) {
+        setIntervalSelectionAnchor(id);
+      }
 
-        return isAdding ? [...prev, id] : prev.filter(x => x !== id);
-      });
-    },
-    []
-  );
+      return isAdding ? [...prev, id] : prev.filter(x => x !== id);
+    });
+  }, []);
 
   const changeMultipleSelection = useCallback(
     (id: T) => {
@@ -82,13 +80,17 @@ export const useListSelection = <T>({ ids }: UseListSelectionProps<T>) => {
     setSelectedItemIds([]);
   }, []);
 
+  const validSelectedItemIds = useMemo(() => {
+    return intersection(ids, selectedItemIds);
+  }, [ids, selectedItemIds]);
+
   return useMemo(
     () => ({
-      selectedItemIds,
+      selectedItemIds: validSelectedItemIds,
       selectItem,
       clearSelection,
       setSelectedItemIds
     }),
-    [selectedItemIds, selectItem, clearSelection]
+    [validSelectedItemIds, selectItem, clearSelection]
   );
 };
diff --git a/packages/ui/components/checkbox.tsx b/packages/ui/components/checkbox.tsx
index 37ce061cc7..9282f753c0 100644
--- a/packages/ui/components/checkbox.tsx
+++ b/packages/ui/components/checkbox.tsx
@@ -30,7 +30,7 @@ const Checkbox = React.forwardRef<
   return (
     <div
       ref={wrapperRef}
-      className={cn("inline-flex", expandedTouchTarget && "-m-3 cursor-pointer p-3 hover:bg-muted-foreground/10 rounded-full")}
+      className={cn("inline-flex", expandedTouchTarget && "hover:bg-accent cursor-pointer rounded-full p-3")}
       onClick={expandedTouchTarget ? triggerCheckboxClick : undefined}
     >
       <CheckboxPrimitive.Root