diff --git a/islands/TalkListContent.tsx b/islands/TalkListContent.tsx
index 492e2175..1fa8cf64 100644
--- a/islands/TalkListContent.tsx
+++ b/islands/TalkListContent.tsx
@@ -140,9 +140,7 @@ function TalkListContent({ state }: { state: AppStateType }) {
             }
           }}
         />
-        {settingPage.value === 2 && (
-          <OtherSettingPage settingPage={settingPage} />
-        )}
+        {settingPage.value === 2 && <OtherSettingPage settingPage={settingPage} />}
         {settingPage.value === 1 && (
           <>
             <div class="fixed z-50 w-full h-full bg-[rgba(75,92,108,0.4)] left-0 top-0 flex justify-center items-center p-3 md:pb-3 pb-[76px]">
@@ -288,7 +286,7 @@ function OtherSettingPage({ settingPage }: { settingPage: any }) {
   const allowOtherServerUsers = useSignal(false);
   useEffect(() => {
     async function run() {
-      const res = await fetch("/api/v2/client/users/settings")
+      const res = await fetch("/api/v2/client/users/settings");
       const json = await res.json();
       addFriendById.value = json.settings.addFriendById;
       allowOtherServerUsers.value = json.settings.allowOtherServerUsers;
@@ -318,7 +316,11 @@ function OtherSettingPage({ settingPage }: { settingPage: any }) {
                 </div>
                 <div class="w-1/2 flex">
                   <label class="inline-flex items-center cursor-pointer mx-auto">
-                    <input type="checkbox" checked={addFriendById.value} class="sr-only peer" />
+                    <input type="checkbox" checked={addFriendById.value} class="sr-only peer"
+                    onChange={() => {
+                      addFriendById.value = !addFriendById.value;
+                    }}
+                    />
                     <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
                     </div>
                   </label>
@@ -330,7 +332,11 @@ function OtherSettingPage({ settingPage }: { settingPage: any }) {
                 </div>
                 <div class="w-1/2 flex">
                   <label class="inline-flex items-center cursor-pointer mx-auto">
-                    <input type="checkbox" checked={allowOtherServerUsers.value} class="sr-only peer" />
+                    <input type="checkbox" checked={allowOtherServerUsers.value} class="sr-only peer"
+                    onChange={() => {
+                      allowOtherServerUsers.value = !allowOtherServerUsers.value;
+                    }}
+                    />
                     <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
                     </div>
                   </label>
@@ -338,12 +344,36 @@ function OtherSettingPage({ settingPage }: { settingPage: any }) {
               </div>
             </div>
             <div class="flex">
-            <button
+              <button
                 type="submit"
                 class="rounded-lg mx-auto text-white bg-[#007AFF] ring-1 ring-[rgba(0,122,255,12%)] shadow-[0_1px_2.5px_rgba(0,122,255,24%)] px-5 py-2 hover:bg-[#1f7adb] focus:outline-none disabled:bg-gray-300 disabled:dark:bg-gray-700"
+                onClick={async () => {
+                  const csrftokenRes = await fetch("/api/v2/client/csrftoken");
+                  const csrftokenJson = await csrftokenRes.json();
+                  const csrftoken = csrftokenJson.csrftoken;
+                  const res = await fetch("/api/v2/client/settings/privacy", {
+                    method: "POST",
+                    headers: {
+                      "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({
+                      setting: {
+                        addFriendById: addFriendById.value,
+                        allowOtherServerUsers: allowOtherServerUsers.value,
+                      },
+                      csrftoken: csrftoken,
+                    }),
+                  });
+                  const json = await res.json();
+                  if(!json.status) {
+                    alert("エラーが発生しました");
+                    return;
+                  }
+                  alert("保存しました");
+                }}
               >
-              更新
-            </button>
+                更新
+              </button>
             </div>
           </div>
         </div>
diff --git a/routes/api/v2/client/settings/privacy.ts b/routes/api/v2/client/settings/privacy.ts
index 4aacce3e..be7d651a 100644
--- a/routes/api/v2/client/settings/privacy.ts
+++ b/routes/api/v2/client/settings/privacy.ts
@@ -2,3 +2,41 @@
 //POST /api/v2/client/settings/privacy
 // { setting: { ... }, csrftoken: string }
 // -> { status: boolean, message: string }
+import takos from "../../../../../util/takos.ts";
+import userConfig from "../../../../../models/userConfig.ts";
+export const handler = {
+  async POST(req: Request, ctx: any) {
+    if (!ctx.state.data.loggedIn) {
+      return ctx.json({ status: false, message: "You are not logged in" });
+    }
+    let body;
+    try {
+      body = await req.json();
+    } catch (e) {
+      return ctx.json({ status: false, message: "Invalid JSON" });
+    }
+    const userid = ctx.state.data.userid;
+    const setting = body.setting;
+    const csrftoken = body.csrftoken;
+    if (await takos.checkCsrfToken(csrftoken, ctx.state.data.sessionid) === false) {
+      return new Response(JSON.stringify({ status: false, message: "Invalid CSRF Token" }), {
+        headers: { "Content-Type": "application/json" },
+        status: 400,
+      });
+    }
+    if (
+      typeof setting !== "object" || setting === null || setting.addFriendById === undefined || setting.allowOtherServerUsers === undefined || typeof setting.addFriendById !== "boolean" ||
+      typeof setting.allowOtherServerUsers !== "boolean"
+    ) {
+      return new Response(JSON.stringify({ status: false, message: "Invalid setting" }), {
+        headers: { "Content-Type": "application/json" },
+        status: 400,
+      });
+    }
+    await userConfig.updateOne({ userid: userid }, { addFriendById: setting.addFriendById, allowOtherServerUsers: setting.allowOtherServerUsers });
+    return new Response(JSON.stringify({ status: true, message: "Success" }), {
+      headers: { "Content-Type": "application/json" },
+      status: 200,
+    });
+  },
+};