diff --git a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
index 7986864cdc..d5546b8d72 100644
--- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx
@@ -12,6 +12,7 @@ import Button from "components/common/Button";
 import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo";
 import WeightCoverImage from "components/common/WeightCoverImage";
 interface AudioCardProps {
+  bookmarks: any,
   data: any;
   type: "media" | "weights";
   showCreator?: boolean;
@@ -19,11 +20,13 @@ interface AudioCardProps {
 }
 
 export default function AudioCard({
+  bookmarks,
   data,
   type,
   showCreator,
   showCover,
 }: AudioCardProps) {
+  console.log("😎",);
   const linkUrl =
     type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token}`;
 
@@ -148,10 +151,12 @@ export default function AudioCard({
               <div>
                 <LikeButton onToggle={handleLike} likeCount={data.likes} />
               </div>
-              <BookmarkButton
-                onToggle={handleLike}
-                favoriteCount={data.likes}
-              />
+              <BookmarkButton {...{
+                entityToken: data.weight_token,
+                entityType: "model_weight",
+                onToggle: bookmarks.toggle,
+                large: true,
+              }} />
             </div>
           </>
         )}
diff --git a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx
index 75c027282d..e2684d7a09 100644
--- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx
+++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx
@@ -21,6 +21,8 @@ export default function ImageCard({ data, type, showCreator }: ImageCardProps) {
   const linkUrl =
     type === "media" ? `/media/${data.token}` : `/weight/${data.weight_token}`;
 
+    console.log("🎲",data);
+
   const handleInnerClick = (event: any) => {
     event.stopPropagation();
   };
diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx
index 104bc6bc84..54fd01106e 100644
--- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx
@@ -6,11 +6,12 @@ import { Link } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
-import { useLazyLists } from "hooks";
+import { useBookmarks, useLazyLists } from "hooks";
 import { ListFeaturedMediaFiles } from "@storyteller/components/src/api/media_files/ListFeaturedMediaFiles";
 import SkeletonCard from "components/common/Card/SkeletonCard";
 
 export default function FeaturedTab() {
+  const bookmarks = useBookmarks();
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [list, listSet] = useState<MediaFile[]>([]);
 
@@ -52,13 +53,13 @@ export default function FeaturedTab() {
               >
                 {media.list.map((data, index) => {
                   let card = (
-                    <AudioCard
-                      key={index}
-                      data={data}
-                      type="media"
-                      showCreator={true}
-                      showCover={true}
-                    />
+                    <AudioCard {...{
+                      bookmarks,
+                      data,
+                      type: "media",
+                      showCreator: true,
+                      showCover: true
+                    }} />
                   );
                   return (
                     <div
diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx
index 37a922f609..d5b77ccba0 100644
--- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/MediaTab.tsx
@@ -12,10 +12,11 @@ import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContex
 import SkeletonCard from "components/common/Card/SkeletonCard";
 import { ListMediaFiles } from "@storyteller/components/src/api/media_files/ListMediaFiles";
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
-import { useLazyLists } from "hooks";
+import { useBookmarks, useLazyLists } from "hooks";
 import InfiniteScroll from "react-infinite-scroll-component";
 
 export default function MediaTab() {
+  const bookmarks = useBookmarks();
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
 
@@ -119,32 +120,32 @@ export default function MediaTab() {
                       switch (data.media_type) {
                         case "audio":
                           card = (
-                            <AudioCard
-                              key={index}
-                              data={data}
-                              type="media"
-                              showCreator={true}
-                            />
+                            <AudioCard {...{
+                              bookmarks,
+                              data,
+                              type: "media",
+                              showCreator: true
+                            }} />
                           );
                           break;
                         case "image":
                           card = (
-                            <ImageCard
-                              key={index}
-                              data={data}
-                              type="media"
-                              showCreator={true}
-                            />
+                            <ImageCard {...{
+                              bookmarks,
+                              data,
+                              type: "media",
+                              showCreator: true
+                            }} />
                           );
                           break;
                         case "video":
                           card = (
-                            <VideoCard
-                              key={index}
-                              data={data}
-                              type="media"
-                              showCreator={true}
-                            />
+                            <VideoCard {...{
+                              bookmarks,
+                              data,
+                              type: "media",
+                              showCreator: true
+                            }}/>
                           );
                           break;
                         default:
diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx
index 2697227ca7..08094f7fbe 100644
--- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx
@@ -14,9 +14,10 @@ import { ListWeights } from "@storyteller/components/src/api/weights/ListWeights
 import { Weight } from "@storyteller/components/src/api/weights/GetWeight";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory";
-import { useLazyLists } from "hooks";
+import { useBookmarks, useLazyLists } from "hooks";
 
 export default function WeightsTab() {
+  const bookmarks = useBookmarks();
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
   const [list, listSet] = useState<Weight[]>([]);
@@ -158,45 +159,45 @@ export default function WeightsTab() {
                       switch (data.weights_category) {
                         case WeightCategory.TTS:
                           card = (
-                            <AudioCard
-                              key={index}
-                              data={data}
-                              type="weights"
-                              showCreator={true}
-                              showCover={true}
-                            />
+                            <AudioCard {...{
+                              bookmarks,
+                              data,
+                              type: "weights",
+                              showCreator: true,
+                              showCover: true
+                            }} />
                           );
                           break;
                         case WeightCategory.VC:
                           card = (
-                            <AudioCard
-                              key={index}
-                              data={data}
-                              type="weights"
-                              showCreator={true}
-                              showCover={true}
-                            />
+                            <AudioCard {...{
+                              bookmarks,
+                              data,
+                              type: "weights",
+                              showCreator: true,
+                              showCover: true
+                            }} />
                           );
                           break;
                         case WeightCategory.ZS:
                           card = (
-                            <AudioCard
-                              key={index}
-                              data={data}
-                              type="weights"
-                              showCreator={true}
-                              showCover={true}
-                            />
+                            <AudioCard {...{
+                              bookmarks,
+                              data,
+                              type: "weights",
+                              showCreator: true,
+                              showCover: true
+                            }} />
                           );
                           break;
                         case WeightCategory.SD:
                           card = (
-                            <ImageCard
-                              key={index}
-                              data={data}
-                              type="weights"
-                              showCreator={true}
-                            />
+                            <ImageCard {...{
+                              bookmarks,
+                              data,
+                              type: "weights",
+                              showCreator: true
+                            }} />
                           );
                           break;
                         case WeightCategory.VOCODER:
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
index bacdf67db9..a4b934bd86 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/BookmarksTab.tsx
@@ -11,14 +11,15 @@ import {
 } from "@fortawesome/pro-solid-svg-icons";
 import Pagination from "components/common/Pagination";
 
-import { useListContent } from "hooks";
+import { useBookmarks, useListContent } from "hooks";
 import { GetBookmarksByUser } from "@storyteller/components/src/api/bookmarks/GetBookmarksByUser";
 
 export default function BookmarksTab({ username }: { username: string }) {
+  const bookmarks = useBookmarks();
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [selectedFilter, setSelectedFilter] = useState("all");
   const [list, listSet] = useState<any[]>([]);
-  const bookmarks = useListContent({
+  const { isLoading, list: dataList, page, pageChange, pageCount, status } = useListContent({
     debug: "bookmarks tab",
     fetcher: GetBookmarksByUser,
     list,
@@ -29,13 +30,13 @@ export default function BookmarksTab({ username }: { username: string }) {
   });
 
   const handlePageClick = (selectedItem: { selected: number }) => {
-    bookmarks.pageChange(selectedItem.selected);
+    pageChange(selectedItem.selected);
   };
 
   const paginationProps = {
     onPageChange: handlePageClick,
-    pageCount: bookmarks.pageCount,
-    currentPage: bookmarks.page,
+    pageCount,
+    currentPage: page,
   };
 
   const filterOptions = [
@@ -117,7 +118,7 @@ export default function BookmarksTab({ username }: { username: string }) {
         </div>
         <Pagination {...paginationProps} />
       </div>
-      { bookmarks.isLoading ? (
+      { isLoading ? (
         <div className="row gx-3 gy-3">
           {Array.from({ length: 12 }).map((_, index) => (
             <SkeletonCard key={index} />
@@ -125,7 +126,7 @@ export default function BookmarksTab({ username }: { username: string }) {
         </div>
       ) : (
         <>
-          {bookmarks.list.length === 0 && bookmarks.status === 3 ? (
+          { dataList.length === 0 && status === 3 ? (
             <div className="text-center mt-4 opacity-75">
               No bookmarked weights yet.
             </div>
@@ -134,21 +135,32 @@ export default function BookmarksTab({ username }: { username: string }) {
               gridRef={gridContainerRef}
               onLayoutComplete={() => console.log("Layout complete!")}
             >
-              {bookmarks.list.map((data: any, index: number) => {
-                console.log("🧣", data);
+              { dataList.map((data: any, index: number) => {
                 let card;
                 switch (data.media_type) {
                   case "audio":
-                    card = <AudioCard key={index} data={data} type="weights" />;
+                    card = <AudioCard {...{
+                            bookmarks,
+                            data,
+                            type: "weights"
+                          }} />;
                     break;
                   case "image":
-                    card = <ImageCard key={index} data={data} type="weights" />;
+                    card = <ImageCard {...{
+                              bookmarks,
+                              data,
+                              type: "weights"
+                            }} />;
                     break;
                   case "video":
-                    card = <VideoCard key={index} data={data} type="weights" />;
+                    card = <VideoCard {...{
+                              bookmarks,
+                              data,
+                              type: "weights"
+                            }} />;
                     break;
                   default:
-                    card = <div key={index}>Unsupported media type</div>;
+                    card = <div>Unsupported media type</div>;
                 }
                 return (
                   <div
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
index d996c76c1f..478c377ebb 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/MediaTab.tsx
@@ -14,9 +14,10 @@ import Pagination from "components/common/Pagination";
 
 import { GetMediaByUser } from "@storyteller/components/src/api/media_files/GetMediaByUser";
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
-import { useListContent } from "hooks";
+import { useBookmarks, useListContent } from "hooks";
 
 export default function MediaTab({ username }: { username: string }) {
+  const bookmarks = useBookmarks();
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
 
@@ -117,13 +118,25 @@ export default function MediaTab({ username }: { username: string }) {
                       let card;
                       switch (data.media_type) {
                         case "audio":
-                          card = <AudioCard data={data} type="media" />;
+                          card = <AudioCard {...{
+                            bookmarks,
+                            data,
+                            type: "media"
+                          }} />;
                           break;
                         case "image":
-                          card = <ImageCard data={data} type="media" />;
+                          card = <ImageCard {...{
+                            bookmarks,
+                            data,
+                            type: "media"
+                          }} />;
                           break;
                         case "video":
-                          card = <VideoCard data={data} type="media" />;
+                          card = <VideoCard {...{
+                            bookmarks,
+                            data,
+                            type: "media"
+                          }} />;
                           break;
                         default:
                           card = <div>Unsupported media type</div>;
diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx
index 6b6608dc7e..e9b53ec588 100644
--- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx
@@ -7,7 +7,7 @@ import {
   faFilter,
 } from "@fortawesome/pro-solid-svg-icons";
 import Pagination from "components/common/Pagination";
-import { useListContent } from "hooks";
+import { useBookmarks, useListContent } from "hooks";
 import { GetWeightsByUser } from "@storyteller/components/src/api/weights/GetWeightsByUser";
 import { TempSelect } from "components/common";
 import { WeightCategory } from "@storyteller/components/src/api/_common/enums/WeightCategory";
@@ -29,6 +29,7 @@ export default function WeightsTab({ username }: { username: string }) {
   const [vc, vcSet] = useState("all");
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
   const addSetters = { sdSet, ttsSet, vcSet };
+  const bookmarks = useBookmarks();
 
   const [list, listSet] = useState<any[]>([]);
   const weights = useListContent({
@@ -177,45 +178,45 @@ export default function WeightsTab({ username }: { username: string }) {
                     switch (data.weights_category) {
                       case WeightCategory.TTS:
                         card = (
-                          <AudioCard
-                            key={index}
-                            data={data}
-                            type="weights"
-                            showCreator={true}
-                            showCover={true}
-                          />
+                          <AudioCard {...{
+                            bookmarks,
+                            data,
+                            type: "weights",
+                            showCreator: true,
+                            showCover: true
+                          }} />
                         );
                         break;
                       case WeightCategory.VC:
                         card = (
-                          <AudioCard
-                            key={index}
-                            data={data}
-                            type="weights"
-                            showCreator={true}
-                            showCover={true}
-                          />
+                          <AudioCard {...{
+                            bookmarks,
+                            data,
+                            type: "weights",
+                            showCreator: true,
+                            showCover: true
+                          }} />
                         );
                         break;
                       case WeightCategory.ZS:
                         card = (
-                          <AudioCard
-                            key={index}
-                            data={data}
-                            type="weights"
-                            showCreator={true}
-                            showCover={true}
-                          />
+                          <AudioCard {...{
+                            bookmarks,
+                            data,
+                            type: "weights",
+                            showCreator: true,
+                            showCover: true
+                          }} />
                         );
                         break;
                       case WeightCategory.SD:
                         card = (
-                          <ImageCard
-                            key={index}
-                            data={data}
-                            type="weights"
-                            showCreator={true}
-                          />
+                          <ImageCard {...{
+                            bookmarks,
+                            data,
+                            type: "weights",
+                            showCreator: true
+                          }} />
                         );
                         break;
                       case WeightCategory.VOCODER: