diff --git a/public/locales/en/setting.json b/public/locales/en/setting.json
index 0cd4c60f..058791c3 100644
--- a/public/locales/en/setting.json
+++ b/public/locales/en/setting.json
@@ -79,7 +79,9 @@
     },
     "online_status": {
       "title": "Online Status",
-      "desc": "Toggle users' online status visible"
+      "desc": "Toggle users' online status visible",
+      "enable": "Enable",
+      "disable": "Disable"
     }
   },
   "license": {
diff --git a/public/locales/zh/setting.json b/public/locales/zh/setting.json
index d2950807..0b446dce 100644
--- a/public/locales/zh/setting.json
+++ b/public/locales/zh/setting.json
@@ -71,7 +71,9 @@
     },
     "online_status": {
       "title": "在线状态",
-      "desc": "开启或关闭用户在线状态"
+      "desc": "开启或关闭用户在线状态",
+      "enable": "开启",
+      "disable": "关闭"
     }
   },
   "license": {
diff --git a/src/routes/setting/Overview/OnlineStatus.tsx b/src/routes/setting/Overview/OnlineStatus.tsx
index b32681fc..f4d3bcca 100644
--- a/src/routes/setting/Overview/OnlineStatus.tsx
+++ b/src/routes/setting/Overview/OnlineStatus.tsx
@@ -3,16 +3,15 @@ import { useTranslation } from 'react-i18next';
 import { useGetSystemCommonQuery, useUpdateSystemCommonMutation } from '../../../app/services/server';
 import { useEffect } from 'react';
 import { toast } from 'react-hot-toast';
-import Label from '../../../common/component/styled/Label';
-import Toggle from '../../../common/component/styled/Toggle';
+import StyledRadio from "../../../common/component/styled/Radio";
 import { useAppSelector } from '../../../app/store';
 // type Props = {}
 
 const Index = () => {
-    const currStatus = useAppSelector(store => store.server.show_user_online_status);
+    const currStatus = useAppSelector(store => !!store.server.show_user_online_status);
     const { t } = useTranslation("setting", { keyPrefix: "overview.online_status" });
     const { t: ct } = useTranslation();
-    const { data, isSuccess: loadSuccess, refetch } = useGetSystemCommonQuery();
+    const { refetch } = useGetSystemCommonQuery();
     const [updateSetting, { isSuccess }] = useUpdateSystemCommonMutation();
     useEffect(() => {
         if (isSuccess) {
@@ -21,22 +20,23 @@ const Index = () => {
         }
     }, [isSuccess]);
     const handleToggle = () => {
-        const opposite = !data?.show_user_online_status;
-        updateSetting({ show_user_online_status: opposite });
+        updateSetting({ show_user_online_status: !currStatus });
     };
-    if (!loadSuccess) return null;
+    // if (!loadSuccess) return null;
     return (
-        <div className="flex justify-between">
-            <div className="text-sm">
-                <div className="dark:text-gray-100 font-semibold">
-                    <Label className="dark:text-gray-200">{t("title")}</Label>
-                </div>
-                <span className="flex justify-between w-full text-gray-400" >{t("desc")}</span>
-            </div>
-            <Toggle
-                onClick={handleToggle}
-                checked={currStatus}
-            ></Toggle>
+        <div className="text-sm">
+            <p className="dark:text-gray-100 font-semibold">{t("title")}</p>
+            <p className="flex justify-between w-full text-gray-400 mb-2">
+                <span className="txt">
+                    {t("desc")}
+                </span>
+            </p>
+            <StyledRadio
+                options={[t("enable"), t("disable")]}
+                values={["true", "false"]}
+                value={`${currStatus}`}
+                onChange={handleToggle}
+            />
         </div>
     );
 };