diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66022c59..ca19a8a7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,10 +2,9 @@
 
 ## [0.18.0](https://github.com/frontapp/front-ui-kit/compare/v0.17.1...v0.18.0) (2025-10-22)
 
-
 ### Features
 
-* added card component ([#287](https://github.com/frontapp/front-ui-kit/issues/287)) ([f73865c](https://github.com/frontapp/front-ui-kit/commit/f73865c2063990d782587999757670878d0fe19c))
+- added card component ([#287](https://github.com/frontapp/front-ui-kit/issues/287)) ([f73865c](https://github.com/frontapp/front-ui-kit/commit/f73865c2063990d782587999757670878d0fe19c))
 
 ## [0.17.1](https://github.com/frontapp/front-ui-kit/compare/v0.17.0...v0.17.1) (2025-10-22)
 
diff --git a/src/components/card/__docs__/index.stories.tsx b/src/components/card/__docs__/index.stories.tsx
index c7650182..2c567d09 100644
--- a/src/components/card/__docs__/index.stories.tsx
+++ b/src/components/card/__docs__/index.stories.tsx
@@ -251,6 +251,37 @@ export const CardWithActions: Story = {
           </Card.Body>
           <Card.Footer>Card footer content</Card.Footer>
         </Card>
+        <Card
+          {...args}
+          groupActions
+          showActionsOnHover
+          actions={[
+            {
+              label: 'Edit',
+              icon: 'Edit',
+              tooltip: 'Edit this card',
+              onClick: () => console.log('Edit clicked!')
+            },
+            {
+              label: 'Copy',
+              icon: 'Copy',
+              tooltip: 'Copy this card',
+              onClick: () => console.log('Copy clicked!')
+            },
+            {
+              label: 'Share',
+              icon: 'ExternalLink',
+              tooltip: 'Share this card',
+              onClick: () => console.log('Share clicked!')
+            }
+          ]}>
+          <Card.Header>Grouped Actions with hover (showActionsOnHover=true)</Card.Header>
+          <Card.Body>
+            When groupActions=true, all actions are grouped into a single dropdown menu. This keeps the
+            interface clean and compact, especially useful when you have many actions or limited space.
+          </Card.Body>
+          <Card.Footer>Card footer content</Card.Footer>
+        </Card>
       </div>
     </DefaultStyleProvider>
   ),
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index d86f8cec..97cce0c5 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -91,6 +91,14 @@ const ActionButtonContainer = styled.div<{zIndex?: number; $showOnHover?: boolea
     `${RelativeContainer}:hover & {
     opacity: 1;
   }`}
+
+  /* Keep visible when the action container or any of its children have focus or are being interacted with */
+  ${(p) =>
+    p.$showOnHover &&
+    `&:focus-within,
+     & button:active {
+    opacity: 1;
+  }`}
 `;
 
 /*