diff --git a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
index bbee477976..13f34513a6 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx
@@ -42,7 +42,6 @@ import {
 import ReactDOM from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { GeneratorType } from '@/app/components/app/configuration/config/automatic/types'
-import { SegmentedControl } from '@/app/components/base/segmented-control'
 import AgentNodeList from '@/app/components/workflow/nodes/_base/components/agent-node-list'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import { FilePickerPanel } from '@/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel'
@@ -50,6 +49,7 @@ import FilePickerUploadModal from '@/app/components/workflow/skill/editor/skill-
 import { $createFileReferenceNode } from '@/app/components/workflow/skill/editor/skill-editor/plugins/file-reference-block/node'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { cn } from '@/utils/classnames'
 import { useBasicTypeaheadTriggerMatch } from '../../hooks'
 import { $splitNodeContainingQuery } from '../../utils'
 import { INSERT_CURRENT_BLOCK_COMMAND } from '../current-block'
@@ -295,7 +295,7 @@ const ComponentPicker = ({
           {ReactDOM.createPortal(
             <div className="h-0 w-0">
               <div
-                className="w-[300px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-lg"
+                className="w-[360px] overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg"
                 style={{
                   ...floatingStyles,
                   visibility: isPositioned ? 'visible' : 'hidden',
@@ -306,35 +306,23 @@ const ComponentPicker = ({
                   event.stopPropagation()
                 }}
               >
-                <div
-                  className="w-full"
-                  role="presentation"
-                  onMouseDown={(event) => {
-                    event.preventDefault()
-                    event.stopPropagation()
-                  }}
-                >
-                  <SegmentedControl
-                    size="small"
-                    padding="with"
-                    activeState="accent"
-                    className="w-full"
-                    btnClassName="flex-1"
-                    options={[
-                      {
-                        value: 'variables',
-                        text: t('promptEditor.variable.outputToolDisabledItem.title', { ns: 'common' }),
-                      },
-                      {
-                        value: 'files',
-                        text: t('nodes.llm.files', { ns: 'workflow' }),
-                      },
-                    ]}
-                    value={activeTab}
-                    onChange={setActiveTab}
-                  />
+                <div className="flex items-center gap-1 border-b border-divider-subtle px-2 py-2">
+                  <div className="flex gap-1">
+                    <div
+                      className={cn('flex h-6 cursor-pointer items-center rounded-md px-2 text-text-tertiary system-xs-medium hover:bg-state-base-hover', activeTab === 'variables' && 'bg-state-base-active text-text-primary')}
+                      onClick={() => setActiveTab('variables')}
+                    >
+                      {t('promptEditor.variable.outputToolDisabledItem.title', { ns: 'common' })}
+                    </div>
+                    <div
+                      className={cn('flex h-6 cursor-pointer items-center rounded-md px-2 text-text-tertiary system-xs-medium hover:bg-state-base-hover', activeTab === 'files' && 'bg-state-base-active text-text-primary')}
+                      onClick={() => setActiveTab('files')}
+                    >
+                      {t('nodes.llm.files', { ns: 'workflow' })}
+                    </div>
+                  </div>
                 </div>
-                <div className="mt-2">
+                <div className="p-1">
                   {activeTab === 'variables' && (
                     <VarReferenceVars
                       searchBoxClassName="mt-1"
@@ -363,7 +351,7 @@ const ComponentPicker = ({
                         handleClose()
                       }}
                       className="w-full border-0 bg-transparent p-0 shadow-none"
-                      contentClassName="px-0"
+                      contentClassName="px-1"
                       showHeader={false}
                       showAddFiles
                       onAddFiles={() => {
diff --git a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
index b72ed34bd6..c6e2179db9 100644
--- a/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
+++ b/web/app/components/workflow/skill/editor/skill-editor/plugins/file-picker-panel.tsx
@@ -181,7 +181,7 @@ const FilePickerPanel = ({
         ref={containerRef}
         className={cn(
           'max-h-[250px] px-2 pb-2',
-          !showHeader && 'pt-2',
+          !showHeader && 'max-h-[34vh] min-h-[34vh] pt-1',
           contentClassName,
         )}
       >
@@ -223,18 +223,20 @@ const FilePickerPanel = ({
       {showAddFiles && (
         <>
           <div className="h-px bg-divider-subtle" />
-          <button
-            type="button"
-            className={cn(
-              'flex h-9 w-full items-center gap-2 px-3 text-left hover:bg-state-base-hover',
-              !onAddFiles && 'cursor-not-allowed opacity-50',
-            )}
-            onClick={onAddFiles}
-            disabled={!onAddFiles}
-          >
-            <span className="i-ri-file-add-line size-4 text-text-secondary" aria-hidden="true" />
-            <span className="text-[13px] font-medium leading-4 text-text-secondary">{t('skillEditor.addFiles')}</span>
-          </button>
+          <div className="p-1">
+            <button
+              type="button"
+              className={cn(
+                'flex w-full items-center rounded-md py-1 pl-3 pr-2 text-left hover:bg-state-base-hover',
+                !onAddFiles && 'cursor-not-allowed opacity-50',
+              )}
+              onClick={onAddFiles}
+              disabled={!onAddFiles}
+            >
+              <span className="i-ri-file-add-line mr-1.5 size-5 text-text-secondary" aria-hidden="true" />
+              <span className="text-[13px] font-normal leading-4 text-text-secondary">{t('skillEditor.addFiles')}</span>
+            </button>
+          </div>
         </>
       )}
     </div>