diff --git a/src/components/common/wrap-card.tsx b/src/components/common/wrap-card.tsx
index 3d43bc0d6..3eeecc11b 100644
--- a/src/components/common/wrap-card.tsx
+++ b/src/components/common/wrap-card.tsx
@@ -46,7 +46,7 @@ export const WrapCard: React.FC<WrapCardProps> = ({
   variant = "normal",
   radioValue = "",
   isSelected = false,
-  onSelect = () => {},
+  onSelect,
   ...cardProps
 }) => {
   const { config } = useLauncherConfig();
@@ -95,20 +95,18 @@ export const WrapCard: React.FC<WrapCardProps> = ({
   return (
     <Card
       className={themedStyles.card["card-front"]}
-      borderColor={`${primaryColor}.500`}
+      borderColor={isSelected ? `${primaryColor}.500` : "transparent"}
       variant={isSelected ? "outline" : "elevated"}
       position="relative"
-      borderWidth={isSelected ? borderWidth : 0}
+      borderWidth={borderWidth}
       p={isSelected ? selectedPadding : basePadding}
       {...cardProps}
+      onClick={onSelect}
+      _hover={!!onSelect ? { boxShadow: "md", cursor: "pointer" } : undefined}
     >
       {variant === "radio" && (
         <Box position="absolute" top={2} left={2}>
-          <Radio
-            value={radioValue}
-            onClick={onSelect}
-            colorScheme={primaryColor}
-          />
+          <Radio value={radioValue} colorScheme={primaryColor} />
         </Box>
       )}
       {renderContent()}
@@ -165,7 +163,7 @@ export const WrapCardGroup: React.FC<WrapCardGroupProps> = ({
         initialIsOpen={props.initialIsOpen}
       >
         {items.length > 0 && (
-          <Wrap spacing={spacing} mb={0.5}>
+          <Wrap spacing={spacing} mb={1}>
             {/* add mb to show last row cards' bottom shadow */}
             {items.map((item, index) => {
               const validColSpan = Math.max(1, Math.floor(item.colSpan || 1));
diff --git a/src/components/instance-menu.tsx b/src/components/instance-menu.tsx
index 0c9a023cc..529fceab9 100644
--- a/src/components/instance-menu.tsx
+++ b/src/components/instance-menu.tsx
@@ -70,6 +70,7 @@ export const InstanceMenu: React.FC<InstanceMenuProps> = ({
             variant="ghost"
             aria-label="operations"
             icon={<LuEllipsis />}
+            onClick={(e) => e.stopPropagation()}
           />
           <Portal>
             <MenuList>
@@ -78,7 +79,10 @@ export const InstanceMenu: React.FC<InstanceMenuProps> = ({
                   key={item.label}
                   fontSize="xs"
                   color={item.danger ? "red.500" : "inherit"}
-                  onClick={item.onClick}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    item.onClick();
+                  }}
                 >
                   <HStack>
                     <item.icon />
@@ -97,7 +101,10 @@ export const InstanceMenu: React.FC<InstanceMenuProps> = ({
               icon={item.icon}
               label={item.label}
               colorScheme={item.danger ? "red" : "gray"}
-              onClick={item.onClick}
+              onClick={(e) => {
+                e.stopPropagation();
+                item.onClick();
+              }}
             />
           ))}
         </HStack>
diff --git a/src/components/instances-view.tsx b/src/components/instances-view.tsx
index 88ef62bfb..53729dd15 100644
--- a/src/components/instances-view.tsx
+++ b/src/components/instances-view.tsx
@@ -69,17 +69,14 @@ const InstancesView: React.FC<InstancesViewProps> = ({
         />
       </HStack>
     ),
-    ...(withMenu
-      ? {}
-      : {
-          isFullClickZone: true,
-          onClick: () => handleUpdateSelectedInstance(instance),
-        }),
+    isFullClickZone: true,
+    onClick: () => handleUpdateSelectedInstance(instance),
     children: withMenu ? (
       <InstanceMenu instance={instance} variant="buttonGroup" />
     ) : (
       <></>
     ),
+    isChildrenIndependent: withMenu,
   }));
 
   const gridItems = instances.map((instance) => ({
diff --git a/src/components/player-menu.tsx b/src/components/player-menu.tsx
index 0c3681d8d..24b3929a2 100644
--- a/src/components/player-menu.tsx
+++ b/src/components/player-menu.tsx
@@ -164,6 +164,7 @@ export const PlayerMenu: React.FC<PlayerMenuProps> = ({
             variant="ghost"
             aria-label="operations"
             icon={<LuEllipsis />}
+            onClick={(e) => e.stopPropagation()}
           />
           <Portal>
             <MenuList>
@@ -172,7 +173,10 @@ export const PlayerMenu: React.FC<PlayerMenuProps> = ({
                   key={item.label}
                   fontSize="xs"
                   color={item.danger ? "red.500" : "inherit"}
-                  onClick={item.onClick}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    item.onClick();
+                  }}
                 >
                   <HStack>
                     <item.icon />
@@ -191,7 +195,10 @@ export const PlayerMenu: React.FC<PlayerMenuProps> = ({
               icon={item.icon}
               label={item.label}
               colorScheme={item.danger ? "red" : "gray"}
-              onClick={item.onClick}
+              onClick={(e) => {
+                e.stopPropagation();
+                item.onClick();
+              }}
               isLoading={item.isLoading}
             />
           ))}
diff --git a/src/components/players-view.tsx b/src/components/players-view.tsx
index 87ecdcb71..9e6b8a4b4 100644
--- a/src/components/players-view.tsx
+++ b/src/components/players-view.tsx
@@ -59,17 +59,14 @@ const PlayersView: React.FC<PlayersViewProps> = ({
         />
       </HStack>
     ),
-    ...(withMenu
-      ? {}
-      : {
-          isFullClickZone: true,
-          onClick: () => handleUpdateSelectedPlayer(player.id),
-        }),
+    isFullClickZone: true,
+    onClick: () => handleUpdateSelectedPlayer(player.id),
     children: withMenu ? (
       <PlayerMenu player={player} variant="buttonGroup" />
     ) : (
       <></>
     ),
+    isChildrenIndependent: withMenu,
   }));
 
   const gridItems = players.map((player) => ({