diff --git a/frontend/src/components/LanguageSettingsPanel.test.tsx b/frontend/src/components/LanguageSettingsPanel.test.tsx
index 41a5be6d..15d0e8fb 100644
--- a/frontend/src/components/LanguageSettingsPanel.test.tsx
+++ b/frontend/src/components/LanguageSettingsPanel.test.tsx
@@ -35,9 +35,21 @@ describe("LanguageSettingsPanel", () => {
     expect(text).toContain("Deutsch");
     expect(text).toContain("Русский");
 
-    const segmented = renderer!.root.findByProps({ "aria-label": "Language" });
+    const group = renderer!.root.findByProps({ role: "radiogroup", "aria-label": "Language" });
+    expect(group.props.style.gridTemplateColumns).toBe("repeat(2, minmax(0, 1fr))");
+
+    const radios = renderer!.root.findAll((node) => node.type === "button" && node.props.role === "radio");
+    expect(radios).toHaveLength(7);
+    expect(radios[0]?.props["aria-checked"]).toBe(true);
+
+    const simplifiedChinese = radios.find((node) => {
+      const children = Array.isArray(node.props.children) ? node.props.children.join("") : String(node.props.children ?? "");
+      return children.includes("Simplified Chinese");
+    });
+    expect(simplifiedChinese).toBeDefined();
+
     await act(async () => {
-      segmented.props.onChange("zh-CN");
+      simplifiedChinese!.props.onClick();
     });
 
     expect(onPreferenceChange).toHaveBeenCalledWith("zh-CN");
diff --git a/frontend/src/components/LanguageSettingsPanel.tsx b/frontend/src/components/LanguageSettingsPanel.tsx
index 9a049a1f..bb0f1a2c 100644
--- a/frontend/src/components/LanguageSettingsPanel.tsx
+++ b/frontend/src/components/LanguageSettingsPanel.tsx
@@ -1,8 +1,30 @@
 import React from "react";
-import { Segmented } from "antd";
 import { useI18n } from "../i18n/provider";
 import type { LanguagePreference } from "../i18n/types";
 
+const groupStyle: React.CSSProperties = {
+  display: "grid",
+  gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+  gap: 10,
+};
+
+const getOptionStyle = (selected: boolean): React.CSSProperties => ({
+  minHeight: 44,
+  borderRadius: 12,
+  border: selected ? "1px solid rgba(255, 255, 255, 0.55)" : "1px solid rgba(160, 179, 209, 0.10)",
+  background: selected
+    ? "linear-gradient(180deg, #f7f9fd 0%, #dfe5f1 100%)"
+    : "rgba(56, 64, 79, 0.78)",
+  color: selected ? "#151922" : "#d3d9e6",
+  padding: "10px 14px",
+  fontSize: 14,
+  fontWeight: 600,
+  textAlign: "center",
+  cursor: "pointer",
+  whiteSpace: "nowrap",
+  boxShadow: selected ? "inset 0 1px 0 rgba(255, 255, 255, 0.5)" : "none",
+});
+
 const LanguageSettingsPanel: React.FC = () => {
   const { preference, setPreference, t } = useI18n();
 
@@ -22,13 +44,23 @@ const LanguageSettingsPanel: React.FC = () => {
         <div style={{ fontSize: 14, fontWeight: 600 }}>{t("settings.language.title")}</div>
         <div style={{ fontSize: 12, opacity: 0.72 }}>{t("settings.language.description")}</div>
       </div>
-      <Segmented
-        aria-label={t("settings.language.title")}
-        block
-        options={options}
-        value={preference}
-        onChange={(value) => setPreference(value as LanguagePreference)}
-      />
+      <div role="radiogroup" aria-label={t("settings.language.title")} style={groupStyle}>
+        {options.map((option) => {
+          const selected = option.value === preference;
+          return (
+            <button
+              key={option.value}
+              type="button"
+              role="radio"
+              aria-checked={selected}
+              onClick={() => setPreference(option.value)}
+              style={getOptionStyle(selected)}
+            >
+              {option.label}
+            </button>
+          );
+        })}
+      </div>
       <div style={{ fontSize: 12, opacity: 0.64 }}>
         {t("settings.language.restart_hint")}
       </div>