diff --git a/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx b/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx
index a3007b61b1..3785ded797 100644
--- a/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx
+++ b/packages/frontend/core/src/components/workspace-selector/workspace-card/index.tsx
@@ -26,6 +26,7 @@ import clsx from 'clsx';
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 
+import { useCatchEventCallback } from '../../hooks/use-catch-event-hook';
 import * as styles from './styles.css';
 
 const CloudWorkspaceStatus = () => {
@@ -262,6 +263,14 @@ export const WorkspaceCard = forwardRef<
 
     const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
 
+    const onEnableCloud = useCatchEventCallback(() => {
+      onClickEnableCloud?.(workspaceMetadata);
+    }, [onClickEnableCloud, workspaceMetadata]);
+
+    const onOpenSettings = useCatchEventCallback(() => {
+      onClickOpenSettings?.(workspaceMetadata);
+    }, [onClickOpenSettings, workspaceMetadata]);
+
     return (
       <div
         className={clsx(
@@ -301,32 +310,26 @@ export const WorkspaceCard = forwardRef<
             <Skeleton width={100} />
           )}
         </div>
-        {onClickEnableCloud &&
-        workspaceMetadata.flavour === WorkspaceFlavour.LOCAL ? (
-          <Button
-            className={styles.showOnCardHover}
-            onClick={e => {
-              e.stopPropagation();
-              onClickEnableCloud(workspaceMetadata);
-            }}
-          >
-            Enable Cloud
-          </Button>
-        ) : null}
-        {hideCollaborationIcon || information?.isOwner ? null : (
-          <CollaborationIcon />
-        )}
-        {onClickOpenSettings && (
-          <div
-            className={styles.settingButton}
-            onClick={e => {
-              e.stopPropagation();
-              onClickOpenSettings(workspaceMetadata);
-            }}
-          >
-            <SettingsIcon width={16} height={16} />
-          </div>
-        )}
+        <div className={styles.showOnCardHover}>
+          {onClickEnableCloud &&
+          workspaceMetadata.flavour === WorkspaceFlavour.LOCAL ? (
+            <Button
+              className={styles.enableCloudButton}
+              onClick={onEnableCloud}
+            >
+              Enable Cloud
+            </Button>
+          ) : null}
+          {hideCollaborationIcon || information?.isOwner ? null : (
+            <CollaborationIcon />
+          )}
+          {onClickOpenSettings && (
+            <div className={styles.settingButton} onClick={onOpenSettings}>
+              <SettingsIcon width={16} height={16} />
+            </div>
+          )}
+        </div>
+
         {showArrowDownIcon && <ArrowDownSmallIcon />}
       </div>
     );
diff --git a/packages/frontend/core/src/components/workspace-selector/workspace-card/styles.css.ts b/packages/frontend/core/src/components/workspace-selector/workspace-card/styles.css.ts
index e10927868a..d29f153ac8 100644
--- a/packages/frontend/core/src/components/workspace-selector/workspace-card/styles.css.ts
+++ b/packages/frontend/core/src/components/workspace-selector/workspace-card/styles.css.ts
@@ -125,6 +125,15 @@ export const workspaceTitleContainer = style({
   overflow: 'hidden',
 });
 
+export const enableCloudButton = style({
+  opacity: 0,
+  selectors: {
+    [`.${container}:hover &`]: {
+      opacity: 1,
+    },
+  },
+});
+
 export const settingButton = style({
   transition: 'all 0.13s ease',
   width: 0,
@@ -152,12 +161,14 @@ export const settingButton = style({
 });
 
 export const showOnCardHover = style({
-  visibility: 'hidden',
-  opacity: 0,
+  position: 'absolute',
+  right: 0,
+  display: 'flex',
+  gap: 8,
+  alignItems: 'center',
   selectors: {
     [`.${container}:hover &`]: {
-      visibility: 'visible',
-      opacity: 1,
+      position: 'relative',
     },
   },
 });