diff --git a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
index 25fa625e0..90a9a052e 100644
--- a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
@@ -23,7 +23,6 @@ import {
   VStatusDot,
 } from "@halo-dev/components";
 import { useQuery } from "@tanstack/vue-query";
-import { cloneDeep } from "lodash-es";
 import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
@@ -132,12 +131,17 @@ const handleRecovery = async (singlePage: SinglePage) => {
     confirmText: t("core.common.buttons.confirm"),
     cancelText: t("core.common.buttons.cancel"),
     onConfirm: async () => {
-      const singlePageToUpdate = cloneDeep(singlePage);
-      singlePageToUpdate.spec.deleted = false;
-      await coreApiClient.content.singlePage.updateSinglePage({
-        name: singlePageToUpdate.metadata.name,
-        singlePage: singlePageToUpdate,
+      await coreApiClient.content.singlePage.patchSinglePage({
+        name: singlePage.metadata.name,
+        jsonPatchInner: [
+          {
+            op: "add",
+            path: "/spec/deleted",
+            value: false,
+          },
+        ],
       });
+
       await refetch();
 
       Toast.success(t("core.common.toast.recovery_success"));
@@ -164,15 +168,15 @@ const handleRecoveryInBatch = async () => {
             return Promise.resolve();
           }
 
-          return coreApiClient.content.singlePage.updateSinglePage({
+          return coreApiClient.content.singlePage.patchSinglePage({
             name: singlePage.metadata.name,
-            singlePage: {
-              ...singlePage,
-              spec: {
-                ...singlePage.spec,
-                deleted: false,
+            jsonPatchInner: [
+              {
+                op: "add",
+                path: "/spec/deleted",
+                value: false,
               },
-            },
+            ],
           });
         })
       );
diff --git a/ui/console-src/modules/contents/pages/SinglePageList.vue b/ui/console-src/modules/contents/pages/SinglePageList.vue
index 508b4099c..77b25c0ae 100644
--- a/ui/console-src/modules/contents/pages/SinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/SinglePageList.vue
@@ -237,15 +237,15 @@ const handleDeleteInBatch = async () => {
             return Promise.resolve();
           }
 
-          return coreApiClient.content.singlePage.updateSinglePage({
+          return coreApiClient.content.singlePage.patchSinglePage({
             name: page.metadata.name,
-            singlePage: {
-              ...page,
-              spec: {
-                ...page.spec,
-                deleted: true,
+            jsonPatchInner: [
+              {
+                op: "add",
+                path: "/spec/deleted",
+                value: true,
               },
-            },
+            ],
           });
         })
       );
diff --git a/ui/console-src/modules/contents/pages/components/SinglePageListItem.vue b/ui/console-src/modules/contents/pages/components/SinglePageListItem.vue
index a4de2d71d..c6e5bf450 100644
--- a/ui/console-src/modules/contents/pages/components/SinglePageListItem.vue
+++ b/ui/console-src/modules/contents/pages/components/SinglePageListItem.vue
@@ -19,7 +19,6 @@ import {
   VStatusDot,
 } from "@halo-dev/components";
 import { useMutation, useQueryClient } from "@tanstack/vue-query";
-import { cloneDeep } from "lodash-es";
 import type { Ref } from "vue";
 import { computed, inject, ref } from "vue";
 import { useI18n } from "vue-i18n";
@@ -71,24 +70,21 @@ const isPublishing = computed(() => {
 
 const { mutate: changeVisibleMutation } = useMutation({
   mutationFn: async (singlePage: SinglePage) => {
-    const { data } = await coreApiClient.content.singlePage.getSinglePage({
+    return await coreApiClient.content.singlePage.patchSinglePage({
       name: singlePage.metadata.name,
+      jsonPatchInner: [
+        {
+          op: "add",
+          path: "/spec/visible",
+          value: singlePage.spec.visible === "PRIVATE" ? "PUBLIC" : "PRIVATE",
+        },
+      ],
     });
-    data.spec.visible = data.spec.visible === "PRIVATE" ? "PUBLIC" : "PRIVATE";
-    await coreApiClient.content.singlePage.updateSinglePage(
-      {
-        name: singlePage.metadata.name,
-        singlePage: data,
-      },
-      {
-        mute: true,
-      }
-    );
-    await queryClient.invalidateQueries({ queryKey: ["singlePages"] });
   },
   retry: 3,
   onSuccess: () => {
     Toast.success(t("core.common.toast.operation_success"));
+    queryClient.invalidateQueries({ queryKey: ["singlePages"] });
   },
   onError: () => {
     Toast.error(t("core.common.toast.operation_failed"));
@@ -103,12 +99,17 @@ const handleDelete = async () => {
     confirmText: t("core.common.buttons.confirm"),
     cancelText: t("core.common.buttons.cancel"),
     onConfirm: async () => {
-      const singlePageToUpdate = cloneDeep(props.singlePage.page);
-      singlePageToUpdate.spec.deleted = true;
-      await coreApiClient.content.singlePage.updateSinglePage({
+      await coreApiClient.content.singlePage.patchSinglePage({
         name: props.singlePage.page.metadata.name,
-        singlePage: singlePageToUpdate,
+        jsonPatchInner: [
+          {
+            op: "add",
+            path: "/spec/deleted",
+            value: true,
+          },
+        ],
       });
+
       await queryClient.invalidateQueries({ queryKey: ["singlePages"] });
 
       Toast.success(t("core.common.toast.delete_success"));
@@ -195,22 +196,25 @@ const handleDelete = async () => {
           <VStatusDot :text="$t('core.common.tooltips.publishing')" animate />
         </template>
       </VEntityField>
-      <VEntityField>
-        <template #description>
-          <IconEye
-            v-if="singlePage.page.spec.visible === 'PUBLIC'"
-            v-tooltip="$t('core.page.filters.visible.items.public')"
-            class="cursor-pointer text-sm transition-all hover:text-blue-600"
-            @click="changeVisibleMutation(singlePage.page)"
-          />
-          <IconEyeOff
-            v-if="singlePage.page.spec.visible === 'PRIVATE'"
-            v-tooltip="$t('core.page.filters.visible.items.private')"
-            class="cursor-pointer text-sm transition-all hover:text-blue-600"
-            @click="changeVisibleMutation(singlePage.page)"
-          />
-        </template>
-      </VEntityField>
+      <HasPermission :permissions="['system:singlepages:manage']">
+        <VEntityField>
+          <template #description>
+            <IconEye
+              v-if="singlePage.page.spec.visible === 'PUBLIC'"
+              v-tooltip="$t('core.page.filters.visible.items.public')"
+              class="cursor-pointer text-sm transition-all hover:text-blue-600"
+              @click="changeVisibleMutation(singlePage.page)"
+            />
+            <IconEyeOff
+              v-if="singlePage.page.spec.visible === 'PRIVATE'"
+              v-tooltip="$t('core.page.filters.visible.items.private')"
+              class="cursor-pointer text-sm transition-all hover:text-blue-600"
+              @click="changeVisibleMutation(singlePage.page)"
+            />
+          </template>
+        </VEntityField>
+      </HasPermission>
+
       <VEntityField v-if="singlePage?.page?.spec.deleted">
         <template #description>
           <VStatusDot