diff --git a/web/src/api/buster_rest/users/queryRequests.ts b/web/src/api/buster_rest/users/queryRequests.ts
index c3910ce5d..5f63b68f4 100644
--- a/web/src/api/buster_rest/users/queryRequests.ts
+++ b/web/src/api/buster_rest/users/queryRequests.ts
@@ -103,7 +103,7 @@ export const useAddUserFavorite = () => {
     mutationFn: createUserFavorite,
     onMutate: (params) => {
       queryClient.setQueryData(queryKeys.favoritesGetList.queryKey, (prev) => {
-        return [params, ...(prev || [])];
+        return [...params, ...(prev || [])];
       });
     },
     onSettled: () => {
diff --git a/web/src/api/request_interfaces/user/interfaces.ts b/web/src/api/request_interfaces/user/interfaces.ts
index e038b237d..8f5652d19 100644
--- a/web/src/api/request_interfaces/user/interfaces.ts
+++ b/web/src/api/request_interfaces/user/interfaces.ts
@@ -1,11 +1,11 @@
 import type { ShareAssetType } from '@/api/asset_interfaces/share';
 
-export interface UsersFavoritePostPayload {
+export type UsersFavoritePostPayload = {
   id: string;
   asset_type: ShareAssetType;
   index?: number;
   name: string;
-}
+}[];
 
 export type UserFavoriteDeletePayload = {
   id: string;
diff --git a/web/src/components/features/list/FavoriteStar.tsx b/web/src/components/features/list/FavoriteStar.tsx
index 5b7611cde..95ddd4d02 100644
--- a/web/src/components/features/list/FavoriteStar.tsx
+++ b/web/src/components/features/list/FavoriteStar.tsx
@@ -1,6 +1,5 @@
 import { ShareAssetType } from '@/api/asset_interfaces';
 import { AppTooltip } from '@/components/ui/tooltip';
-import { useUserConfigContextSelector } from '@/context/Users';
 import React, { useMemo } from 'react';
 import { useMemoizedFn } from '@/hooks';
 import { Button } from '@/components/ui/buttons';
@@ -49,11 +48,13 @@ export const FavoriteStar: React.FC<{
     e.stopPropagation();
     e.preventDefault();
     if (!isFavorited)
-      return await addItemToFavorite({
-        asset_type: type,
-        id,
-        name
-      });
+      return await addItemToFavorite([
+        {
+          asset_type: type,
+          id,
+          name
+        }
+      ]);
 
     await removeItemFromFavorite([
       {
diff --git a/web/src/controllers/ChatsListController/ChatItemsSelectedPopup.tsx b/web/src/controllers/ChatsListController/ChatItemsSelectedPopup.tsx
index b65879237..324bc7de6 100644
--- a/web/src/controllers/ChatsListController/ChatItemsSelectedPopup.tsx
+++ b/web/src/controllers/ChatsListController/ChatItemsSelectedPopup.tsx
@@ -142,7 +142,9 @@ const ThreeDotButton: React.FC<{
   selectedRowKeys: string[];
   onSelectChange: (selectedRowKeys: string[]) => void;
 }> = ({ selectedRowKeys, onSelectChange }) => {
-  const { mutateAsync: removeUserFavorite } = useDeleteUserFavorite();
+  const { mutateAsync: removeUserFavorite, isPending: removingFromFavorites } =
+    useDeleteUserFavorite();
+  const { mutateAsync: addUserFavorite, isPending: addingToFavorites } = useAddUserFavorite();
   const { data: userFavorites } = useGetUserFavorites();
 
   const dropdownOptions: DropdownItems = [
@@ -150,15 +152,21 @@ const ThreeDotButton: React.FC<{
       label: 'Add to favorites',
       icon: <Star />,
       value: 'add-to-favorites',
+      loading: addingToFavorites,
       onClick: async () => {
-        const allFavorites: string[] = [...userFavorites.map((f) => f.id), ...selectedRowKeys];
-        //   bulkEditFavorites(allFavorites);
-        alert('TODO - feature not implemented yet');
+        await addUserFavorite(
+          selectedRowKeys.map((id) => ({
+            id,
+            asset_type: ShareAssetType.METRIC,
+            name: 'Metric'
+          }))
+        );
       }
     },
     {
       label: 'Remove from favorites',
       icon: <Xmark />,
+      loading: removingFromFavorites,
       value: 'remove-from-favorites',
       onClick: async () => {
         const allFavorites: Parameters<typeof removeUserFavorite>[0] = userFavorites
diff --git a/web/src/controllers/DashboardListController/DashboardSelectedPopup.tsx b/web/src/controllers/DashboardListController/DashboardSelectedPopup.tsx
index 59ea5f586..5aa278ee1 100644
--- a/web/src/controllers/DashboardListController/DashboardSelectedPopup.tsx
+++ b/web/src/controllers/DashboardListController/DashboardSelectedPopup.tsx
@@ -9,6 +9,12 @@ import { SaveToCollectionsDropdown } from '@/components/features/dropdowns/SaveT
 import { useBusterDashboardContextSelector } from '@/context/Dashboards';
 import { ASSET_ICONS } from '@/components/features/config/assetIcons';
 import { Dots, Star, Trash, Xmark } from '@/components/ui/icons';
+import {
+  useAddUserFavorite,
+  useDeleteUserFavorite,
+  useGetUserFavorites
+} from '@/api/buster_rest/users';
+import { ShareAssetType } from '@/api/asset_interfaces/share';
 
 export const DashboardSelectedOptionPopup: React.FC<{
   selectedRowKeys: string[];
@@ -119,8 +125,9 @@ const ThreeDotButton: React.FC<{
   selectedRowKeys: string[];
   onSelectChange: (selectedRowKeys: string[]) => void;
 }> = ({ selectedRowKeys, onSelectChange }) => {
-  const bulkEditFavorites = useUserConfigContextSelector((state) => state.bulkEditFavorites);
-  const userFavorites = useUserConfigContextSelector((state) => state.userFavorites);
+  const { mutateAsync: addUserFavorite } = useAddUserFavorite();
+  const { mutateAsync: removeUserFavorite } = useDeleteUserFavorite();
+  const { data: userFavorites } = useGetUserFavorites();
 
   const dropdownOptions: DropdownItems = [
     {
@@ -128,9 +135,12 @@ const ThreeDotButton: React.FC<{
       icon: <Star />,
       value: 'add-to-favorites',
       onClick: async () => {
-        const allFavorites: string[] = [...userFavorites.map((f) => f.id), ...selectedRowKeys];
-        //    bulkEditFavorites(allFavorites);
-        alert('TODO - feature not implemented yet');
+        const allFavorites: Parameters<typeof addUserFavorite>[0] = selectedRowKeys.map((id) => ({
+          id,
+          asset_type: ShareAssetType.DASHBOARD,
+          name: 'Dashboard'
+        }));
+        await addUserFavorite(allFavorites);
       }
     },
     {
@@ -138,10 +148,11 @@ const ThreeDotButton: React.FC<{
       icon: <Xmark />,
       value: 'remove-from-favorites',
       onClick: async () => {
-        const allFavorites: string[] = userFavorites
+        const allFavorites: Parameters<typeof removeUserFavorite>[0] = userFavorites
           .map((f) => f.id)
-          .filter((id) => !selectedRowKeys.includes(id));
-        bulkEditFavorites(allFavorites);
+          .filter((id) => !selectedRowKeys.includes(id))
+          .map((id) => ({ id, asset_type: ShareAssetType.DASHBOARD }));
+        await removeUserFavorite(allFavorites);
       }
     }
   ];
diff --git a/web/src/controllers/MetricListContainer/MetricItemsSelectedPopup.tsx b/web/src/controllers/MetricListContainer/MetricItemsSelectedPopup.tsx
index 8bff51b52..468892482 100644
--- a/web/src/controllers/MetricListContainer/MetricItemsSelectedPopup.tsx
+++ b/web/src/controllers/MetricListContainer/MetricItemsSelectedPopup.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { BusterListSelectedOptionPopupContainer } from '@/components/ui/list';
-import { VerificationStatus } from '@/api/asset_interfaces';
+import { ShareAssetType, VerificationStatus } from '@/api/asset_interfaces';
 import { useBusterMetricsIndividualContextSelector } from '@/context/Metrics';
 import { useUserConfigContextSelector } from '@/context/Users';
 import { useMemoizedFn } from '@/hooks';
@@ -12,6 +12,11 @@ import { Dropdown, DropdownItems } from '@/components/ui/dropdown';
 import { StatusBadgeButton } from '@/components/features/metrics/StatusBadgeIndicator';
 import { Dots, Star, Trash, Xmark } from '@/components/ui/icons';
 import { useDeleteMetric } from '@/api/buster_rest/metrics';
+import {
+  useAddUserFavorite,
+  useDeleteUserFavorite,
+  useGetUserFavorites
+} from '@/api/buster_rest/users';
 
 export const MetricSelectedOptionPopup: React.FC<{
   selectedRowKeys: string[];
@@ -174,8 +179,9 @@ const ThreeDotButton: React.FC<{
   selectedRowKeys: string[];
   onSelectChange: (selectedRowKeys: string[]) => void;
 }> = ({ selectedRowKeys, onSelectChange }) => {
-  const bulkEditFavorites = useUserConfigContextSelector((state) => state.bulkEditFavorites);
-  const userFavorites = useUserConfigContextSelector((state) => state.userFavorites);
+  const { mutateAsync: addUserFavorite } = useAddUserFavorite();
+  const { mutateAsync: removeUserFavorite } = useDeleteUserFavorite();
+  const { data: userFavorites } = useGetUserFavorites();
 
   const dropdownOptions: DropdownItems = [
     {
@@ -183,9 +189,12 @@ const ThreeDotButton: React.FC<{
       icon: <Star />,
       value: 'add-to-favorites',
       onClick: async () => {
-        const allFavorites: string[] = [...userFavorites.map((f) => f.id), ...selectedRowKeys];
-        //   bulkEditFavorites(allFavorites);
-        alert('TODO - feature not implemented yet');
+        const allFavorites: Parameters<typeof addUserFavorite>[0] = selectedRowKeys.map((id) => ({
+          id,
+          asset_type: ShareAssetType.METRIC,
+          name: 'Metric'
+        }));
+        await addUserFavorite(allFavorites);
       }
     },
     {
@@ -193,10 +202,11 @@ const ThreeDotButton: React.FC<{
       icon: <Xmark />,
       value: 'remove-from-favorites',
       onClick: async () => {
-        const allFavorites: string[] = userFavorites
+        const allFavorites: Parameters<typeof removeUserFavorite>[0] = userFavorites
           .map((f) => f.id)
-          .filter((id) => !selectedRowKeys.includes(id));
-        bulkEditFavorites(allFavorites);
+          .filter((id) => !selectedRowKeys.includes(id))
+          .map((id) => ({ id, asset_type: ShareAssetType.METRIC }));
+        await removeUserFavorite(allFavorites);
       }
     }
   ];