diff --git a/actions/publishToPublication.ts b/actions/publishToPublication.ts
index 1f53d7cc..5d49c3af 100644
--- a/actions/publishToPublication.ts
+++ b/actions/publishToPublication.ts
@@ -49,8 +49,7 @@ import {
   ColorToRGB,
   ColorToRGBA,
 } from "components/ThemeManager/colorToLexicons";
-import Color from "colorjs.io/types";
-import { parseColor } from "react-aria-components";
+import { parseColor } from "@react-stately/color";
 
 export async function publishToPublication({
   root_entity,
diff --git a/app/(home-pages)/home/LeafletList/LeafletOptions.tsx b/app/(home-pages)/home/LeafletList/LeafletOptions.tsx
index e61920d3..a9c1686d 100644
--- a/app/(home-pages)/home/LeafletList/LeafletOptions.tsx
+++ b/app/(home-pages)/home/LeafletList/LeafletOptions.tsx
@@ -15,6 +15,7 @@ import { TemplateRemoveSmall } from "components/Icons/TemplateRemoveSmall";
 import { TemplateSmall } from "components/Icons/TemplateSmall";
 import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny";
 import { addLeafletToHome } from "actions/addLeafletToHome";
+import { produce } from "immer";
 
 export const LeafletOptions = (props: {
   leaflet: PermissionToken;
@@ -143,19 +144,16 @@ const UndoRemoveFromHomeButton = (props: {
         await mutate(
           (identity) => {
             if (!identity) return;
-            return {
-              ...identity,
-              permission_token_on_homepage: [
-                ...identity.permission_token_on_homepage,
-                {
-                  created_at: props.added_at || new Date().toISOString(),
-                  permission_tokens: {
-                    ...props.leaflet,
-                    leaflets_in_publications: [],
-                  },
+            return produce<typeof identity>((draft) => {
+              draft.permission_token_on_homepage.push({
+                created_at: props.added_at || new Date().toISOString(),
+                permission_tokens: {
+                  ...props.leaflet,
+                  leaflets_to_documents: [],
+                  leaflets_in_publications: [],
                 },
-              ],
-            };
+              });
+            })(identity);
           },
           { revalidate: false },
         );
diff --git a/app/[leaflet_id]/actions/HomeButton.tsx b/app/[leaflet_id]/actions/HomeButton.tsx
index 5ed2ccb3..2b81b98e 100644
--- a/app/[leaflet_id]/actions/HomeButton.tsx
+++ b/app/[leaflet_id]/actions/HomeButton.tsx
@@ -9,6 +9,7 @@ import { addLeafletToHome } from "actions/addLeafletToHome";
 import { useSmoker } from "../../../components/Toast";
 import { AddToHomeSmall } from "../../../components/Icons/AddToHomeSmall";
 import { HomeSmall } from "../../../components/Icons/HomeSmall";
+import { produce } from "immer";
 
 export function HomeButton() {
   let { permissions } = useEntitySetContext();
@@ -46,19 +47,16 @@ const AddToHomeButton = (props: {}) => {
         await addLeafletToHome(permission_token.id);
         mutate((identity) => {
           if (!identity) return;
-          return {
-            ...identity,
-            permission_token_on_homepage: [
-              ...identity.permission_token_on_homepage,
-              {
-                created_at: new Date().toISOString(),
-                permission_tokens: {
-                  ...permission_token,
-                  leaflets_in_publications: [],
-                },
+          return produce<typeof identity>((draft) => {
+            draft.permission_token_on_homepage.push({
+              created_at: new Date().toISOString(),
+              permission_tokens: {
+                ...permission_token,
+                leaflets_to_documents: [],
+                leaflets_in_publications: [],
               },
-            ],
-          };
+            });
+          })(identity);
         });
         smoker({
           position: {