diff --git a/src/webapp/features/collections/components/collectionActions/CollectionActions.tsx b/src/webapp/features/collections/components/collectionActions/CollectionActions.tsx
--- a/src/webapp/features/collections/components/collectionActions/CollectionActions.tsx
+++ b/src/webapp/features/collections/components/collectionActions/CollectionActions.tsx
@@ -12,8 +12,10 @@
 import { notifications } from '@mantine/notifications';
 import FollowButton from '@/features/follows/components/followButton/FollowButton';
 import { useWebHaptics } from 'web-haptics/react';
-import { LuLibrary } from 'react-icons/lu';
-import { BiCollection } from 'react-icons/bi';
+import useGetCardFromMyLibrary from '@/features/cards/lib/queries/useGetCardFromMyLibrary';
+import useSembleLibraries from '@/features/semble/lib/queries/useSembleLibraries';
+import { IoMdCheckmark } from 'react-icons/io';
+import { FaRegNoteSticky } from 'react-icons/fa6';
 
 interface Props {
   collection: Collection & {
@@ -41,6 +43,16 @@
 
   const collectionPageUrl = `${process.env.NEXT_PUBLIC_APP_URL}/profile/${props.collection.author?.handle}/collections/${props.collection.rkey}`;
 
+  const cardStatus = useGetCardFromMyLibrary({ url: collectionPageUrl });
+  const isInYourLibrary = cardStatus.data.card?.urlInLibrary;
+
+  const { data: librariesData } = useSembleLibraries({
+    url: collectionPageUrl,
+  });
+  const allLibraries =
+    librariesData?.pages.flatMap((page) => page.libraries ?? []) ?? [];
+  const urlLibraryCount = allLibraries.length ?? 0;
+
   return (
     <Fragment>
       <Group gap={'xs'}>
@@ -52,20 +64,20 @@
               </ActionIcon>
             </Menu.Target>
             <Menu.Dropdown>
-              <Menu.Item
-                leftSection={<LuLibrary />}
-                onClick={() => setShowSaveToLibraryModal(true)}
-              >
-                Save to library
-              </Menu.Item>
               {canAddCard && (
                 <Menu.Item
-                  leftSection={<BiCollection />}
+                  leftSection={<FaRegNoteSticky />}
                   onClick={() => setShowAddDrawer(true)}
                 >
                   Add card
                 </Menu.Item>
               )}
+              <Menu.Item
+                leftSection={isInYourLibrary ? <IoMdCheckmark /> : <FiPlus />}
+                onClick={() => setShowSaveToLibraryModal(true)}
+              >
+                {isInYourLibrary ? 'Saved to library' : 'Save to library'}
+              </Menu.Item>
             </Menu.Dropdown>
           </Menu>
         )}
@@ -136,7 +148,10 @@
         isOpen={showSaveToLibraryModal}
         onClose={() => setShowSaveToLibraryModal(false)}
         url={collectionPageUrl}
-        urlLibraryCount={0}
+        cardId={cardStatus.data.card?.id}
+        note={cardStatus.data.card?.note?.text}
+        isInYourLibrary={isInYourLibrary}
+        urlLibraryCount={urlLibraryCount}
       />
 
       <EditCollectionModal
diff --git a/src/webapp/features/collections/components/collectionActions/Skeleton.CollectionActions.tsx b/src/webapp/features/collections/components/collectionActions/Skeleton.CollectionActions.tsx
new file mode 100644
--- /dev/null
+++ b/src/webapp/features/collections/components/collectionActions/Skeleton.CollectionActions.tsx
@@ -0,0 +1,11 @@
+import { Group, Skeleton } from '@mantine/core';
+
+export default function CollectionActionsSkeleton() {
+  return (
+    <Group gap={'xs'}>
+      <Skeleton w={34} h={34} radius={'xl'} />
+      <Skeleton w={34} h={34} radius={'xl'} />
+      <Skeleton w={34} h={34} radius={'xl'} />
+    </Group>
+  );
+}
diff --git a/src/webapp/features/collections/components/collectionHeader/CollectionHeader.tsx b/src/webapp/features/collections/components/collectionHeader/CollectionHeader.tsx
--- a/src/webapp/features/collections/components/collectionHeader/CollectionHeader.tsx
+++ b/src/webapp/features/collections/components/collectionHeader/CollectionHeader.tsx
@@ -25,6 +25,7 @@
 import { LinkAvatar } from '@/components/link/MantineLink';
 import { isBotAccount } from '@/features/platforms/bluesky/lib/utils/account';
 import BotLabel from '@/features/profile/components/botLabel/BotLabel';
+import CollectionActionsSkeleton from '../collectionActions/Skeleton.CollectionActions';
 
 interface Props {
   rkey: string;
@@ -202,12 +203,14 @@
                 </Group>
               </Stack>
 
-              <CollectionActions
-                collection={{
-                  ...collection,
-                  rkey: props.rkey,
-                }}
-              />
+              <Suspense fallback={<CollectionActionsSkeleton />}>
+                <CollectionActions
+                  collection={{
+                    ...collection,
+                    rkey: props.rkey,
+                  }}
+                />
+              </Suspense>
             </Group>
           </Stack>
         </Stack>
diff --git a/src/webapp/features/collections/components/collectionHeader/Skeleton.CollectionHeader.tsx b/src/webapp/features/collections/components/collectionHeader/Skeleton.CollectionHeader.tsx
--- a/src/webapp/features/collections/components/collectionHeader/Skeleton.CollectionHeader.tsx
+++ b/src/webapp/features/collections/components/collectionHeader/Skeleton.CollectionHeader.tsx
@@ -1,4 +1,5 @@
 import { Container, Group, Stack, Skeleton, Box } from '@mantine/core';
+import CollectionActionsSkeleton from '../collectionActions/Skeleton.CollectionActions';
 
 export default function CollectionHeaderSkeleton() {
   return (
@@ -57,12 +58,7 @@
                 <Skeleton w={'100%'} h={20} />
               </Stack>
 
-              {/* Actions */}
-              <Group gap={'xs'}>
-                <Skeleton w={34} h={34} radius={'xl'} />
-                <Skeleton w={34} h={34} radius={'xl'} />
-                <Skeleton w={34} h={34} radius={'xl'} />
-              </Group>
+              <CollectionActionsSkeleton />
             </Group>
           </Stack>
         </Stack>