diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
index d04bcc083..259d6592c 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
@@ -6,6 +6,22 @@ import { Box, SpanBox } from '../../elements/LayoutPrimitives'
 
 dayjs.extend(relativeTime)
 
+export const MenuStyle = {
+  display: 'flex',
+  marginLeft: 'auto',
+  height: '30px',
+  width: '30px',
+  mt: '-5px',
+  mr: '-5px',
+  pt: '2px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '1000px',
+  '&:hover': {
+    bg: '$thBackground4',
+  },
+}
+
 export const MetaStyle = {
   width: '100%',
   color: '$thTextSubtle3',
diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index faafe6cf7..263461044 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -14,6 +14,7 @@ import {
   MetaStyle,
   siteName,
   TitleStyle,
+  MenuStyle,
 } from './LibraryCardStyles'
 import { sortedLabels } from '../../../lib/labelsSort'
 import { LibraryHoverActions } from './LibraryHoverActions'
@@ -25,6 +26,8 @@ import {
   offset,
   autoUpdate,
 } from '@floating-ui/react'
+import { CardMenu } from '../CardMenu'
+import { DotsThree } from 'phosphor-react'
 
 dayjs.extend(relativeTime)
 
@@ -145,6 +148,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
 
 const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
   const { isChecked, setIsChecked, item } = props
+  const [menuOpen, setMenuOpen] = useState(false)
   const originText = siteName(props.item.originalArticleUrl, props.item.url)
 
   const handleCheckChanged = useCallback(() => {
@@ -161,13 +165,33 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
         distribution="start"
       >
         <LibraryItemMetadata item={props.item} />
-        {props.inMultiSelect && (
+        {props.inMultiSelect ? (
           <SpanBox css={{ marginLeft: 'auto' }}>
             <CardCheckbox
               isChecked={props.isChecked}
               handleChanged={handleCheckChanged}
             />
           </SpanBox>
+        ) : (
+          <Box
+            css={{
+              ...MenuStyle,
+              visibility: menuOpen ? 'visible' : 'hidden',
+              '@media (hover: none)': {
+                visibility: 'unset',
+              },
+            }}
+          >
+            <CardMenu
+              item={props.item}
+              viewer={props.viewer}
+              onOpenChange={(open) => setMenuOpen(open)}
+              actionHandler={props.handleAction}
+              triggerElement={
+                <DotsThree size={25} weight="bold" color="#ADADAD" />
+              }
+            />
+          </Box>
         )}
       </HStack>
 
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index 3fa3968e4..99470edea 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -10,6 +10,7 @@ import {
   MetaStyle,
   siteName,
   TitleStyle,
+  MenuStyle,
 } from './LibraryCardStyles'
 import { sortedLabels } from '../../../lib/labelsSort'
 import { LIBRARY_LEFT_MENU_WIDTH } from '../../templates/homeFeed/LibraryFilterMenu'
@@ -22,6 +23,8 @@ import {
   offset,
   autoUpdate,
 } from '@floating-ui/react'
+import { CardMenu } from '../CardMenu'
+import { DotsThree } from 'phosphor-react'
 
 export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
   const [isHovered, setIsHovered] = useState(false)
@@ -34,7 +37,6 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
     middleware: [
       offset({
         mainAxis: -25,
-        // crossAxis: -10,
       }),
       size(),
     ],
@@ -126,6 +128,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
 export function LibraryListCardContent(
   props: LinkedItemCardProps
 ): JSX.Element {
+  const [menuOpen, setMenuOpen] = useState(false)
   const { isChecked, setIsChecked, item } = props
   const originText = siteName(props.item.originalArticleUrl, props.item.url)
 
@@ -137,13 +140,33 @@ export function LibraryListCardContent(
     <>
       <HStack css={MetaStyle} distribution="start">
         <LibraryItemMetadata item={props.item} showProgress={true} />
-        {props.inMultiSelect && (
+        {props.inMultiSelect ? (
           <SpanBox css={{ marginLeft: 'auto' }}>
             <CardCheckbox
               isChecked={props.isChecked}
               handleChanged={handleCheckChanged}
             />
           </SpanBox>
+        ) : (
+          <Box
+            css={{
+              ...MenuStyle,
+              visibility: menuOpen ? 'visible' : 'hidden',
+              '@media (hover: none)': {
+                visibility: 'unset',
+              },
+            }}
+          >
+            <CardMenu
+              item={props.item}
+              viewer={props.viewer}
+              onOpenChange={(open) => setMenuOpen(open)}
+              actionHandler={props.handleAction}
+              triggerElement={
+                <DotsThree size={25} weight="bold" color="#ADADAD" />
+              }
+            />
+          </Box>
         )}
       </HStack>
       <VStack