diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
new file mode 100644
index 0000000000..b913f7284d
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
@@ -0,0 +1,39 @@
+import {
+  memo,
+  useCallback,
+} from 'react'
+import { RiAddLine } from '@remixicon/react'
+import {
+  AuthCategory,
+  Authorized,
+} from '@/app/components/plugins/plugin-auth'
+import cn from '@/utils/classnames'
+
+const AddCredentialInLoadBalancing = () => {
+  const renderTrigger = useCallback((open?: boolean) => {
+    return (
+      <div className={cn(
+        'flex h-8 items-center rounded-lg px-3 hover:bg-state-base-hover',
+        open && 'bg-state-base-hover',
+      )}>
+        <RiAddLine className='system-sm-medium h-4 w-4 text-text-accent' />
+        Add credential
+      </div>
+    )
+  }, [])
+
+  return (
+    <Authorized
+      credentials={[]}
+      pluginPayload={{
+        provider: '',
+        category: AuthCategory.model,
+      }}
+      canApiKey
+      offset={4}
+      renderTrigger={renderTrigger}
+    />
+  )
+}
+
+export default memo(AddCredentialInLoadBalancing)
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-model.tsx
new file mode 100644
index 0000000000..fcd4272a27
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-model.tsx
@@ -0,0 +1,76 @@
+import {
+  memo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiAddCircleFill,
+  RiAddLine,
+} from '@remixicon/react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Button from '@/app/components/base/button'
+import Tooltip from '@/app/components/base/tooltip'
+
+const AddModel = () => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      placement='bottom-end'
+      offset={{
+        mainAxis: 4,
+        crossAxis: -4,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <PortalToFollowElemTrigger>
+        <Button
+          variant='ghost-accent'
+          size='small'
+        >
+          <RiAddCircleFill className='mr-1 h-3.5 w-3.5' />
+          {t('common.modelProvider.addModel')}
+        </Button>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent>
+        <div className='w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
+          <div className='p-1'>
+            <div className='flex h-9 items-center'>
+              <div className='h-5 w-5 shrink-0'></div>
+              <div
+                className='system-md-medium mx-1 truncate text-text-primary'
+                title='chat-finetune-01'
+              >
+                chat-finetune-01
+              </div>
+              <Tooltip
+                asChild
+                popupContent='Add model credential'
+              >
+                <Button
+                  className='h-6 w-6 rounded-full p-0'
+                  size='small'
+                  variant='secondary-accent'
+                >
+                  <RiAddLine className='h-4 w-4' />
+                </Button>
+              </Tooltip>
+            </div>
+          </div>
+          <div className='system-xs-medium flex h-10 cursor-pointer items-center border-t border-divider-subtle px-4 text-text-accent-light-mode-only'>
+            <RiAddLine className='mr-1 h-4 w-4' />
+            {t('common.modelProvider.addModel')}
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default memo(AddModel)
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/index.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
new file mode 100644
index 0000000000..bb5b8bd62e
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
@@ -0,0 +1,47 @@
+import {
+  memo,
+  useCallback,
+} from 'react'
+import { RiArrowDownSLine } from '@remixicon/react'
+import Button from '@/app/components/base/button'
+import {
+  AuthCategory,
+  Authorized,
+} from '@/app/components/plugins/plugin-auth'
+import Indicator from '@/app/components/header/indicator'
+import Badge from '@/app/components/base/badge'
+
+const SwitchCredentialInLoadBalancing = () => {
+  const renderTrigger = useCallback(() => {
+    return (
+      <Button
+        variant='secondary'
+        className='space-x-1'
+      >
+        <Indicator />
+        chat-enterprise
+        <Badge>enterprise</Badge>
+        <RiArrowDownSLine className='h-4 w-4' />
+      </Button>
+    )
+  }, [])
+
+  return (
+    <Authorized
+      credentials={[]}
+      pluginPayload={{
+        provider: '',
+        category: AuthCategory.model,
+      }}
+      canApiKey
+      placement='bottom-end'
+      offset={{
+        mainAxis: 4,
+        crossAxis: -8,
+      }}
+      renderTrigger={renderTrigger}
+    />
+  )
+}
+
+export default memo(SwitchCredentialInLoadBalancing)