diff --git a/apps/web/src/components/pure/workspace-card/index.tsx b/apps/web/src/components/pure/workspace-card/index.tsx
index d11f8eb32d..f08c3d8381 100644
--- a/apps/web/src/components/pure/workspace-card/index.tsx
+++ b/apps/web/src/components/pure/workspace-card/index.tsx
@@ -98,6 +98,7 @@ export const WorkspaceCard: React.FC<WorkspaceCardProps> = ({
           )}
       </StyleWorkspaceInfo>
       <StyledSettingLink
+        className="setting-entry"
         hoverBackground="#fff"
         onClick={e => {
           e.stopPropagation();
diff --git a/apps/web/src/components/pure/workspace-card/styles.ts b/apps/web/src/components/pure/workspace-card/styles.ts
index 861ba4dc54..51fddfe584 100644
--- a/apps/web/src/components/pure/workspace-card/styles.ts
+++ b/apps/web/src/components/pure/workspace-card/styles.ts
@@ -56,6 +56,10 @@ export const StyledCard = styled('div')<{
         borderColor: theme.colors.primaryColor,
         color: theme.colors.primaryColor,
       },
+      '.setting-entry': {
+        opacity: 1,
+        pointerEvents: 'auto',
+      },
     },
   };
 });
@@ -78,6 +82,9 @@ export const StyledSettingLink = styled(IconButton)(({ theme }) => {
     position: 'absolute',
     right: '6px',
     bottom: '6px',
+    opacity: 0,
+    pointerEvents: 'none',
+    transition: 'all .15s',
     ':hover': {
       background: theme.colors.pageBackground,
     },