diff --git a/web/app/components/header/account-setting/model-provider-page/atoms.ts b/web/app/components/header/account-setting/model-provider-page/atoms.ts
index d0f5a3b3e3..66737c5eb2 100644
--- a/web/app/components/header/account-setting/model-provider-page/atoms.ts
+++ b/web/app/components/header/account-setting/model-provider-page/atoms.ts
@@ -2,63 +2,34 @@ import { atom, useAtomValue, useSetAtom } from 'jotai'
 import { selectAtom } from 'jotai/utils'
 import { useCallback, useMemo } from 'react'
 
-const modelProviderListExpandedAtom = atom<Record<string, boolean>>({})
-
-const setModelProviderListExpandedAtom = atom(
-  null,
-  (get, set, params: { providerName: string, expanded: boolean }) => {
-    const { providerName, expanded } = params
-    const current = get(modelProviderListExpandedAtom)
-
-    if (expanded) {
-      if (current[providerName])
-        return
-
-      set(modelProviderListExpandedAtom, {
-        ...current,
-        [providerName]: true,
-      })
-      return
-    }
-
-    if (!current[providerName])
-      return
-
-    const next = { ...current }
-    delete next[providerName]
-    set(modelProviderListExpandedAtom, next)
-  },
-)
-
-const resetModelProviderListExpandedAtom = atom(
-  null,
-  (_get, set) => {
-    set(modelProviderListExpandedAtom, {})
-  },
-)
+const expandedAtom = atom<Record<string, boolean>>({})
 
 export function useModelProviderListExpanded(providerName: string) {
-  const selectedAtom = useMemo(
-    () => selectAtom(modelProviderListExpandedAtom, state => state[providerName] ?? false),
-    [providerName],
+  return useAtomValue(
+    useMemo(
+      () => selectAtom(expandedAtom, s => !!s[providerName]),
+      [providerName],
+    ),
   )
-  return useAtomValue(selectedAtom)
 }
 
 export function useSetModelProviderListExpanded(providerName: string) {
-  const setExpanded = useSetAtom(setModelProviderListExpandedAtom)
-  return useCallback((expanded: boolean) => {
-    setExpanded({ providerName, expanded })
-  }, [providerName, setExpanded])
+  const set = useSetAtom(expandedAtom)
+  return useCallback(
+    (expanded: boolean) => set(prev => ({ ...prev, [providerName]: expanded })),
+    [providerName, set],
+  )
 }
 
 export function useExpandModelProviderList() {
-  const setExpanded = useSetAtom(setModelProviderListExpandedAtom)
-  return useCallback((providerName: string) => {
-    setExpanded({ providerName, expanded: true })
-  }, [setExpanded])
+  const set = useSetAtom(expandedAtom)
+  return useCallback(
+    (providerName: string) => set(prev => ({ ...prev, [providerName]: true })),
+    [set],
+  )
 }
 
 export function useResetModelProviderListExpanded() {
-  return useSetAtom(resetModelProviderListExpandedAtom)
+  const set = useSetAtom(expandedAtom)
+  return useCallback(() => set({}), [set])
 }