diff --git a/client/ui/preference/Preference.tsx b/client/ui/preference/Preference.tsx
new file mode 100644
index 0000000..b3811d7
--- /dev/null
+++ b/client/ui/preference/Preference.tsx
@@ -0,0 +1,13 @@
+import { $ } from 'mdui/jq'
+import { Switch } from 'mdui'
+import React from 'react'
+import useEventListener from '../useEventListener.ts'
+
+export default function Preference({ title, icon, disabled, description, ...props } = {
+    disabled: false,
+}) {
+    return <mdui-list-item disabled={disabled ? true : undefined} rounded icon={icon} {...props}>
+        {title}
+        {description && <span slot="description">{description}</span>}
+    </mdui-list-item>
+}
\ No newline at end of file
diff --git a/client/ui/preference/PreferenceHeader.tsx b/client/ui/preference/PreferenceHeader.tsx
new file mode 100644
index 0000000..c6ca694
--- /dev/null
+++ b/client/ui/preference/PreferenceHeader.tsx
@@ -0,0 +1,3 @@
+export default function PreferenceHeader({ title }) {
+    return <mdui-list-subheader>{title}</mdui-list-subheader>
+}
\ No newline at end of file
diff --git a/client/ui/preference/PreferenceLayout.tsx b/client/ui/preference/PreferenceLayout.tsx
new file mode 100644
index 0000000..a34a5ad
--- /dev/null
+++ b/client/ui/preference/PreferenceLayout.tsx
@@ -0,0 +1,8 @@
+export default function PreferenceLayout({ children, ...props }) {
+    return <mdui-list style={{
+        marginLeft: '15px',
+        marginRight: '15px',
+    }} {...props}>
+        {children}
+    </mdui-list>
+}
\ No newline at end of file
diff --git a/client/ui/preference/PreferenceStore.ts b/client/ui/preference/PreferenceStore.ts
new file mode 100644
index 0000000..5f2a8b5
--- /dev/null
+++ b/client/ui/preference/PreferenceStore.ts
@@ -0,0 +1,23 @@
+import React from 'react'
+
+export default class PreferenceStore {
+    constructor() {
+        const _ = React.useState<{ [key: string]: unknown }>({})
+        this.value = _[0]
+        this.setter = _[1]
+    }
+    // 创建一个用于子选项的更新函数
+    updater(key: string) {
+        return (value: unknown) => {
+            const newValue = JSON.parse(JSON.stringify({
+                ...this.value,
+                [key]: value,
+            }))
+            this.setter(newValue)
+            this.onUpdate?.(newValue)
+        }
+    }
+    setOnUpdate(onUpdate) {
+        this.onUpdate = onUpdate
+    }
+}
diff --git a/client/ui/preference/SelectPreference.tsx b/client/ui/preference/SelectPreference.tsx
new file mode 100644
index 0000000..f01a2be
--- /dev/null
+++ b/client/ui/preference/SelectPreference.tsx
@@ -0,0 +1,38 @@
+import { $ } from 'mdui/jq'
+import React from 'react'
+import { Dropdown } from 'mdui'
+import useEventListener from '../useEventListener.ts'
+
+// value as { [id: string]: string }
+export default function SelectPreference({ title, icon, updater, selections, defaultCheckedId, disabled } = {
+    disabled: false,
+}) {
+    const [ checkedId, setCheckedId ] = React.useState(defaultCheckedId)
+    
+    const dropDownRef = React.useRef<Dropdown>(null)
+    const [isDropDownOpen, setDropDownOpen] = React.useState(false)
+    
+    useEventListener(dropDownRef, 'closed', (e) => {
+        setDropDownOpen(false)
+    })
+    
+    return <mdui-list-item icon={icon} rounded disabled={disabled ? true : undefined} onClick={() => setDropDownOpen(!isDropDownOpen)}>
+        <mdui-dropdown ref={dropDownRef} trigger="manual" open={isDropDownOpen}>
+            <span slot="trigger">{ title }</span>
+            <mdui-menu onClick={(e) => {
+                e.stopPropagation()
+                setDropDownOpen(false)
+            }}>
+                {
+                    Object.keys(selections).map((id) => 
+                        <mdui-menu-item selected={checkedId == id ? true : undefined} onClick={() => {
+                            setCheckedId(id)
+                            updater(id)
+                        }}>{selections[id]}</mdui-menu-item>
+                    )
+                }
+            </mdui-menu>
+        </mdui-dropdown>
+        <span slot="description">{ selections[checkedId] }</span>
+    </mdui-list-item>
+}
\ No newline at end of file
diff --git a/client/ui/preference/SwitchPreference.tsx b/client/ui/preference/SwitchPreference.tsx
new file mode 100644
index 0000000..69bb271
--- /dev/null
+++ b/client/ui/preference/SwitchPreference.tsx
@@ -0,0 +1,19 @@
+import { $ } from 'mdui/jq'
+import { Switch } from 'mdui'
+import React from 'react'
+import useEventListener from '../useEventListener.ts'
+
+export default function SwitchPreference({ title, icon, updater, disabled, description } = {
+    disabled: false,
+}) {
+    const switchRef = React.useRef<Switch>(null)
+    
+    return <mdui-list-item disabled={disabled ? true : undefined} rounded icon={icon} onClick={() => {
+        switchRef.current!.checked = !switchRef.current!.checked
+        updater(switchRef.current!.checked)
+    }}>
+        {title}
+        {description && <span slot="description">{description}</span>}
+        <mdui-switch slot="end-icon" checked-icon="" ref={switchRef} onClick={(e) => e.preventDefault()}></mdui-switch>
+    </mdui-list-item>
+}
\ No newline at end of file
diff --git a/client/ui/preference/TextFieldPreference.tsx b/client/ui/preference/TextFieldPreference.tsx
new file mode 100644
index 0000000..ac96e5d
--- /dev/null
+++ b/client/ui/preference/TextFieldPreference.tsx
@@ -0,0 +1,30 @@
+import { $ } from 'mdui/jq'
+import React from 'react'
+import { TextField, prompt } from 'mdui'
+import useEventListener from '../useEventListener.ts'
+
+export default function TextFieldPreference({ title, icon, description, updater, defaultValue, disabled } = {
+    disabled: false,
+}) {
+    const [ text, setText ] = React.useState(defaultValue)
+    
+    return <mdui-list-item icon={icon} rounded disabled={disabled ? true : undefined} onClick={() => {
+        prompt({
+            headline: title,
+            confirmText: "确定",
+            cancelText: "取消",
+            onConfirm: (value) => {
+                setText(value)
+                updater(value)
+            },
+            onCancel: () => {},
+            textFieldOptions: {
+                label: description,
+                value: text,
+            },
+        })
+    }}>
+        {title}
+        {description && <span slot="description">{description}</span>}
+    </mdui-list-item>
+}
\ No newline at end of file