diff --git a/web/src/components/AddToCollectionModal.jsx b/web/src/components/AddToCollectionModal.jsx
index 48b7785..3e0ed83 100644
--- a/web/src/components/AddToCollectionModal.jsx
+++ b/web/src/components/AddToCollectionModal.jsx
@@ -21,17 +21,6 @@ export default function AddToCollectionModal({
   const [createModalOpen, setCreateModalOpen] = useState(false);
   const [error, setError] = useState(null);
 
-  useEffect(() => {
-    if (isOpen && user) {
-      if (!annotationUri) {
-        setLoading(false);
-        return;
-      }
-      loadCollections();
-      setError(null);
-    }
-  }, [isOpen, user, annotationUri, loadCollections]);
-
   const loadCollections = useCallback(async () => {
     try {
       setLoading(true);
@@ -51,6 +40,17 @@ export default function AddToCollectionModal({
     }
   }, [user?.did, annotationUri]);
 
+  useEffect(() => {
+    if (isOpen && user) {
+      if (!annotationUri) {
+        setLoading(false);
+        return;
+      }
+      loadCollections();
+      setError(null);
+    }
+  }, [isOpen, user, annotationUri, loadCollections]);
+
   const handleAdd = async (collectionUri) => {
     if (addedTo.has(collectionUri)) return;
 
diff --git a/web/src/pages/Bookmarks.jsx b/web/src/pages/Bookmarks.jsx
index 2785c8a..e61d950 100644
--- a/web/src/pages/Bookmarks.jsx
+++ b/web/src/pages/Bookmarks.jsx
@@ -10,6 +10,7 @@ import {
 } from "../api/client";
 import { BookmarkIcon } from "../components/Icons";
 import BookmarkCard from "../components/BookmarkCard";
+import AddToCollectionModal from "../components/AddToCollectionModal";
 
 export default function Bookmarks() {
   const { user, isAuthenticated, loading } = useAuth();
@@ -21,6 +22,10 @@ export default function Bookmarks() {
   const [newTitle, setNewTitle] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [fetchingTitle, setFetchingTitle] = useState(false);
+  const [collectionModalState, setCollectionModalState] = useState({
+    isOpen: false,
+    uri: null,
+  });
 
   const loadBookmarks = useCallback(async () => {
     if (!user?.did) return;
@@ -285,10 +290,23 @@ export default function Bookmarks() {
               key={bookmark.id}
               bookmark={bookmark}
               onDelete={handleDelete}
+              onAddToCollection={() =>
+                setCollectionModalState({
+                  isOpen: true,
+                  uri: bookmark.uri || bookmark.id,
+                })
+              }
             />
           ))}
         </div>
       )}
+      {collectionModalState.isOpen && (
+        <AddToCollectionModal
+          isOpen={collectionModalState.isOpen}
+          onClose={() => setCollectionModalState({ isOpen: false, uri: null })}
+          annotationUri={collectionModalState.uri}
+        />
+      )}
     </div>
   );
 }