diff --git a/web/app/components/tools/__tests__/provider-list.spec.tsx b/web/app/components/tools/__tests__/provider-list.spec.tsx
index 30f60dc637..991e63f317 100644
--- a/web/app/components/tools/__tests__/provider-list.spec.tsx
+++ b/web/app/components/tools/__tests__/provider-list.spec.tsx
@@ -104,6 +104,39 @@ vi.mock('@/service/use-plugins', () => ({
   useInvalidateInstalledPluginList: () => mockInvalidateInstalledPluginList,
 }))
 
+const {
+  mockCanSetPermissions,
+  mockReferenceSetting,
+  mockSetReferenceSettings,
+} = vi.hoisted(() => ({
+  mockCanSetPermissions: vi.fn(() => true),
+  mockReferenceSetting: vi.fn(() => ({
+    permission: {
+      install_permission: 'everyone',
+      debug_permission: 'admins',
+    },
+    auto_upgrade: {},
+  })),
+  mockSetReferenceSettings: vi.fn(),
+}))
+
+vi.mock('@/app/components/plugins/plugin-page/use-reference-setting', () => ({
+  default: () => ({
+    referenceSetting: mockReferenceSetting(),
+    canSetPermissions: mockCanSetPermissions(),
+    setReferenceSettings: mockSetReferenceSettings,
+  }),
+}))
+
+vi.mock('@/app/components/plugins/reference-setting-modal', () => ({
+  __esModule: true,
+  default: ({ onHide }: { onHide: () => void }) => (
+    <div data-testid="reference-setting-modal">
+      <button type="button" onClick={onHide}>Close modal</button>
+    </div>
+  ),
+}))
+
 vi.mock('@/app/components/plugins/card', () => ({
   default: ({ payload, className }: { payload: { name: string }, className?: string }) => (
     <div data-testid={`card-${payload.name}`} className={className}>{payload.name}</div>
@@ -227,6 +260,14 @@ describe('ProviderList', () => {
     mockEnableMarketplace = false
     mockCollectionData = createDefaultCollections()
     mockCheckedInstalledData = null
+    mockCanSetPermissions.mockReturnValue(true)
+    mockReferenceSetting.mockReturnValue({
+      permission: {
+        install_permission: 'everyone',
+        debug_permission: 'admins',
+      },
+      auto_upgrade: {},
+    })
     Element.prototype.scrollTo = vi.fn()
   })
 
@@ -280,20 +321,27 @@ describe('ProviderList', () => {
     it('uses default content inset outside compact integrations layout', () => {
       const { container } = renderProviderList()
 
-      expect(container.querySelector('.sticky')).toHaveClass('px-12')
-      expect(container.querySelector('.sticky')).not.toHaveClass('max-w-[1600px]')
-      expect(screen.getByTestId('card-google-search').closest('.grid')).toHaveClass('px-12')
-      expect(screen.getByTestId('card-google-search').closest('.grid')).not.toHaveClass('max-w-[1600px]')
+      expect(container.querySelector('.sticky')).toHaveClass('px-12', 'pt-2', 'pb-0')
+      expect(container.querySelector('.sticky')).toHaveClass('max-w-[1600px]')
+      expect(screen.getByTestId('card-google-search').closest('.grid')).toHaveClass('px-12', 'gap-2', 'pt-2')
+      expect(screen.getByTestId('card-google-search').closest('.grid')).toHaveClass('max-w-[1600px]')
     })
 
     it('uses compact content inset when rendered by integrations layout', () => {
       const { container } = renderProviderList(undefined, 'builtin', 'compact')
 
-      expect(container.querySelector('.sticky')).toHaveClass('px-6')
+      expect(container.querySelector('.sticky')).toHaveClass('px-6', 'pt-2', 'pb-0')
       expect(container.querySelector('.sticky')).toHaveClass('max-w-[1600px]')
-      expect(screen.getByTestId('card-google-search').closest('.grid')).toHaveClass('px-6')
+      expect(screen.getByTestId('card-google-search').closest('.grid')).toHaveClass('px-6', 'gap-2', 'pt-2')
       expect(screen.getByTestId('card-google-search').closest('.grid')).toHaveClass('max-w-[1600px]')
     })
+
+    it('keeps tool cards at three columns on desktop and wider screens', () => {
+      renderProviderList(undefined, 'builtin', 'compact')
+
+      expect(screen.getByTestId('card-google-search').closest('.grid')).toHaveClass('grid-cols-1', 'sm:grid-cols-2', 'md:grid-cols-3')
+      expect(screen.getByTestId('card-google-search').closest('.grid')).not.toHaveClass('lg:grid-cols-4')
+    })
   })
 
   describe('Filtering', () => {
@@ -344,6 +392,16 @@ describe('ProviderList', () => {
       expect(screen.getByTestId('card-weather-tool')).toBeInTheDocument()
     })
 
+    it('does not apply hidden tag filters on non-tools tabs', () => {
+      renderProviderList()
+
+      fireEvent.click(screen.getByTestId('add-filter'))
+      fireEvent.click(screen.getByText('tools.type.custom'))
+
+      expect(screen.queryByTestId('label-filter')).not.toBeInTheDocument()
+      expect(screen.getByTestId('card-my-api')).toBeInTheDocument()
+    })
+
     it('clears search with clear button', () => {
       renderProviderList()
       const input = screen.getByRole('textbox')
@@ -353,13 +411,17 @@ describe('ProviderList', () => {
       expect(screen.getByTestId('card-weather-tool')).toBeInTheDocument()
     })
 
-    it('shows label filter for non-MCP tabs', () => {
+    it('shows label filter for the built-in tools page', () => {
       renderProviderList()
       expect(screen.getByTestId('label-filter')).toBeInTheDocument()
     })
 
-    it('hides label filter for MCP tab', () => {
-      renderProviderList({ category: 'mcp' })
+    it.each([
+      ['api'],
+      ['workflow'],
+      ['mcp'],
+    ] as const)('hides label filter for the %s tool page', (category) => {
+      renderProviderList({ category })
       expect(screen.queryByTestId('label-filter')).not.toBeInTheDocument()
     })
 
@@ -367,6 +429,28 @@ describe('ProviderList', () => {
       renderProviderList()
       expect(screen.getByRole('textbox')).toBeInTheDocument()
     })
+
+    it('opens plugin update settings from the tools toolbar', () => {
+      renderProviderList(undefined, 'builtin')
+
+      expect(screen.getByText('common.modelProvider.updateSetting')).toBeInTheDocument()
+      expect(screen.getByText('plugin.autoUpdate.strategy.latest.name')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByText('common.modelProvider.updateSetting'))
+
+      expect(screen.getByTestId('reference-setting-modal')).toBeInTheDocument()
+    })
+
+    it.each([
+      ['mcp'],
+      ['api'],
+      ['workflow'],
+    ] as const)('does not show plugin update settings on the %s tool page', (category) => {
+      renderProviderList({ category })
+
+      expect(screen.queryByText('common.modelProvider.updateSetting')).not.toBeInTheDocument()
+      expect(screen.queryByText('plugin.autoUpdate.strategy.latest.name')).not.toBeInTheDocument()
+    })
   })
 
   describe('Custom Tab', () => {
diff --git a/web/app/components/tools/marketplace/__tests__/index.spec.tsx b/web/app/components/tools/marketplace/__tests__/index.spec.tsx
index 822359eece..673bd55879 100644
--- a/web/app/components/tools/marketplace/__tests__/index.spec.tsx
+++ b/web/app/components/tools/marketplace/__tests__/index.spec.tsx
@@ -15,6 +15,7 @@ vi.mock('@/app/components/plugins/marketplace/list', () => ({
   default: (props: {
     marketplaceCollections: unknown[]
     marketplaceCollectionPluginsMap: Record<string, unknown[]>
+    cardContainerClassName?: string
     plugins?: unknown[]
     showInstallButton?: boolean
   }) => {
@@ -136,6 +137,7 @@ describe('Marketplace', () => {
       // Assert
       expect(screen.getByTestId('marketplace-list')).toBeInTheDocument()
       expect(listRenderSpy).toHaveBeenCalledWith(expect.objectContaining({
+        cardContainerClassName: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
         showInstallButton: true,
       }))
     })
diff --git a/web/app/components/tools/marketplace/index.tsx b/web/app/components/tools/marketplace/index.tsx
index e2606771d2..a1dbbb37fe 100644
--- a/web/app/components/tools/marketplace/index.tsx
+++ b/web/app/components/tools/marketplace/index.tsx
@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import List from '@/app/components/plugins/marketplace/list'
 import { getMarketplaceUrl } from '@/utils/var'
-import { toolsContentFrameClassNames, toolsContentInsetClassNames } from '../content-inset'
+import { toolsContentInsetClassNames, toolsUnifiedContentFrameClassName } from '../content-inset'
 
 type MarketplaceProps = {
   searchPluginText: string
@@ -40,7 +40,8 @@ const Marketplace = ({
     page,
   } = marketplaceContext
   const contentPaddingClassName = toolsContentInsetClassNames[contentInset]
-  const contentFrameClassName = cn(toolsContentFrameClassNames[contentInset], contentPaddingClassName)
+  const marketplaceFrameClassName = cn(contentPaddingClassName, toolsUnifiedContentFrameClassName)
+  const cardContainerClassName = 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3'
 
   return (
     <>
@@ -51,7 +52,7 @@ const Marketplace = ({
             onClick={showMarketplacePanel}
           />
         )}
-        <div className={cn('pt-4 pb-3', contentFrameClassName)}>
+        <div className={cn('pt-4 pb-3', marketplaceFrameClassName)}>
           <div className="bg-linear-to-r from-[rgba(11,165,236,0.95)] to-[rgba(21,90,239,0.95)] bg-clip-text title-2xl-semi-bold text-transparent">
             {t('marketplace.moreFrom', { ns: 'plugin' })}
           </div>
@@ -106,12 +107,13 @@ const Marketplace = ({
         }
         {
           (!isLoading || page > 1) && (
-            <div className={contentFrameClassName}>
+            <div className={marketplaceFrameClassName}>
               <List
                 marketplaceCollections={marketplaceCollections || []}
                 marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap || {}}
                 plugins={plugins}
                 showInstallButton
+                cardContainerClassName={cardContainerClassName}
               />
             </div>
           )
diff --git a/web/app/components/tools/mcp/__tests__/create-card.spec.tsx b/web/app/components/tools/mcp/__tests__/create-card.spec.tsx
index 6e5b4038f4..d343be23be 100644
--- a/web/app/components/tools/mcp/__tests__/create-card.spec.tsx
+++ b/web/app/components/tools/mcp/__tests__/create-card.spec.tsx
@@ -149,11 +149,25 @@ describe('NewMCPCard', () => {
   })
 
   describe('Styling', () => {
-    it('should have correct card structure', () => {
+    it('should match the Figma card shell and section sizing', () => {
       render(<NewMCPCard {...defaultProps} />, { wrapper: createWrapper() })
 
-      const card = document.querySelector('.rounded-xl')
-      expect(card).toBeInTheDocument()
+      const card = screen.getByText('tools.mcp.create.cardTitle').closest('.col-span-1')
+      expect(card).toHaveClass(
+        'h-[120px]',
+        'overflow-hidden',
+        'rounded-xl',
+        'border-[0.5px]',
+        'border-components-panel-border',
+        'bg-components-panel-on-panel-item-bg',
+        'shadow-md',
+      )
+
+      const header = screen.getByRole('button', { name: 'tools.mcp.create.cardTitle' })
+      expect(header).toHaveClass('h-[84px]', 'gap-3', 'p-4')
+
+      const docLink = screen.getByText('tools.mcp.create.cardLink').closest('a')
+      expect(docLink).toHaveClass('h-8', 'border-t', 'border-divider-subtle', 'px-3', 'py-2')
     })
 
     it('should have clickable cursor style', () => {
diff --git a/web/app/components/tools/mcp/__tests__/index.spec.tsx b/web/app/components/tools/mcp/__tests__/index.spec.tsx
index 4a07d3f82a..f5b26af2c2 100644
--- a/web/app/components/tools/mcp/__tests__/index.spec.tsx
+++ b/web/app/components/tools/mcp/__tests__/index.spec.tsx
@@ -167,6 +167,7 @@ describe('MCPList', () => {
       mockProviders = [
         { id: '1', name: { 'en-US': 'Search Tool' }, type: 'mcp' },
         { id: '2', name: { 'en-US': 'Another Provider' }, type: 'mcp' },
+        { id: '3', name: { 'en-US': 'Search API Tool' }, type: 'api' },
       ]
     })
 
@@ -175,6 +176,7 @@ describe('MCPList', () => {
 
       expect(screen.getByTestId('provider-card-1')).toBeInTheDocument()
       expect(screen.queryByTestId('provider-card-2')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('provider-card-3')).not.toBeInTheDocument()
     })
 
     it('should filter case-insensitively', () => {
@@ -316,13 +318,14 @@ describe('MCPList', () => {
   })
 
   describe('Grid Layout', () => {
-    it('should have responsive grid layout', () => {
+    it('should keep MCP cards to three columns at desktop width and above', () => {
       render(<MCPList searchText="" />)
 
       const grid = document.querySelector('.grid')
-      expect(grid).toHaveClass('grid-cols-1')
-      expect(grid).toHaveClass('md:grid-cols-2')
-      expect(grid).toHaveClass('xl:grid-cols-4')
+      expect(grid).toHaveClass('grid-cols-1', 'sm:grid-cols-2', 'md:grid-cols-3')
+      expect(grid).not.toHaveClass('xl:grid-cols-4')
+      expect(grid).not.toHaveClass('2xl:grid-cols-5')
+      expect(grid).not.toHaveClass('2k:grid-cols-6')
     })
 
     it('should have overflow hidden when list is empty', () => {
diff --git a/web/app/components/tools/mcp/__tests__/provider-card.spec.tsx b/web/app/components/tools/mcp/__tests__/provider-card.spec.tsx
index fc4c07275a..8b66bb1c6e 100644
--- a/web/app/components/tools/mcp/__tests__/provider-card.spec.tsx
+++ b/web/app/components/tools/mcp/__tests__/provider-card.spec.tsx
@@ -183,6 +183,20 @@ describe('MCPCard', () => {
       render(<MCPCard {...defaultProps} />, { wrapper: createWrapper() })
       expect(screen.getByText(/tools.mcp.updateTime/)).toBeInTheDocument()
     })
+
+    it('should use the Figma card shell', () => {
+      render(<MCPCard {...defaultProps} />, { wrapper: createWrapper() })
+
+      const card = screen.getByText('Test MCP Server').closest('.group')
+      expect(card).toHaveClass(
+        'overflow-hidden',
+        'rounded-xl',
+        'border-[0.5px]',
+        'border-components-panel-border',
+        'bg-components-panel-on-panel-item-bg',
+        'shadow-md',
+      )
+    })
   })
 
   describe('No Tools State', () => {
diff --git a/web/app/components/tools/mcp/create-card.tsx b/web/app/components/tools/mcp/create-card.tsx
index d96365b2db..b2fb040da8 100644
--- a/web/app/components/tools/mcp/create-card.tsx
+++ b/web/app/components/tools/mcp/create-card.tsx
@@ -1,9 +1,8 @@
 'use client'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import {
-  RiAddCircleFill,
+  RiAddLine,
   RiArrowRightUpLine,
-  RiBookOpenLine,
 } from '@remixicon/react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -35,22 +34,34 @@ const NewMCPCard = ({ handleCreate }: Props) => {
   return (
     <>
       {isCurrentWorkspaceManager && (
-        <div className="col-span-1 flex min-h-[108px] cursor-pointer flex-col rounded-xl bg-background-default-dimmed transition-all duration-200 ease-in-out">
-          <div className="group grow rounded-t-xl" onClick={() => setShowModal(true)}>
-            <div className="flex shrink-0 items-center p-4 pb-3">
-              <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-dashed border-divider-deep group-hover:border-solid group-hover:border-state-accent-hover-alt group-hover:bg-state-accent-hover">
-                <RiAddCircleFill className="h-4 w-4 text-text-quaternary group-hover:text-text-accent" />
+        <div className="col-span-1 flex h-[120px] flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-md">
+          <button
+            type="button"
+            className="group flex h-[84px] w-full cursor-pointer items-center gap-3 p-4 text-left outline-hidden hover:bg-components-panel-on-panel-item-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
+            onClick={() => setShowModal(true)}
+          >
+            <div className="flex size-10 shrink-0 items-center justify-center">
+              <div className="flex size-10 items-center justify-center rounded-lg border-[0.5px] border-dashed border-divider-regular bg-background-body">
+                <RiAddLine className="size-4 text-text-quaternary group-hover:text-text-accent" />
               </div>
-              <div className="ml-3 system-md-semibold text-text-secondary group-hover:text-text-accent">{t('mcp.create.cardTitle', { ns: 'tools' })}</div>
             </div>
-          </div>
-          <div className="rounded-b-xl border-t-[0.5px] border-divider-subtle px-4 py-3 text-text-tertiary hover:text-text-accent">
-            <a href={linkUrl} target="_blank" rel="noopener noreferrer" className="flex items-center space-x-1">
-              <RiBookOpenLine className="h-3 w-3 shrink-0" />
-              <div className="grow truncate system-xs-regular" title={t('mcp.create.cardLink', { ns: 'tools' }) || ''}>{t('mcp.create.cardLink', { ns: 'tools' })}</div>
-              <RiArrowRightUpLine className="h-3 w-3 shrink-0" />
-            </a>
-          </div>
+            <div className="min-w-0 flex-1 py-px">
+              <div className="truncate system-md-semibold text-text-primary group-hover:text-text-accent" title={t('mcp.create.cardTitle', { ns: 'tools' }) || ''}>
+                {t('mcp.create.cardTitle', { ns: 'tools' })}
+              </div>
+            </div>
+          </button>
+          <a
+            href={linkUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex h-8 items-center gap-0.5 border-t border-divider-subtle px-3 py-2 text-components-button-secondary-text outline-hidden hover:bg-components-panel-on-panel-item-bg-hover hover:text-text-accent focus-visible:ring-1 focus-visible:ring-components-input-border-hover"
+          >
+            <div className="min-w-0 flex-1 px-0.5">
+              <div className="truncate system-sm-medium" title={t('mcp.create.cardLink', { ns: 'tools' }) || ''}>{t('mcp.create.cardLink', { ns: 'tools' })}</div>
+            </div>
+            <RiArrowRightUpLine className="size-4 shrink-0" />
+          </a>
         </div>
       )}
       {showModal && (
diff --git a/web/app/components/tools/mcp/detail/__tests__/provider-detail.spec.tsx b/web/app/components/tools/mcp/detail/__tests__/provider-detail.spec.tsx
index 4d69d89516..c32398070b 100644
--- a/web/app/components/tools/mcp/detail/__tests__/provider-detail.spec.tsx
+++ b/web/app/components/tools/mcp/detail/__tests__/provider-detail.spec.tsx
@@ -62,7 +62,16 @@ describe('MCPDetailPanel', () => {
         <MCPDetailPanel {...defaultProps} detail={detail} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByRole('dialog')).toBeInTheDocument()
+      const dialog = screen.getByRole('dialog')
+
+      expect(dialog).toBeInTheDocument()
+      expect(dialog).toHaveClass(
+        'data-[swipe-direction=right]:top-2',
+        'data-[swipe-direction=right]:bottom-2',
+        'data-[swipe-direction=right]:h-[calc(100dvh-16px)]',
+        'data-[swipe-direction=right]:w-[400px]',
+        'data-[swipe-direction=right]:max-w-[calc(100vw-1rem)]',
+      )
     })
 
     it('should render content when detail is provided', () => {
diff --git a/web/app/components/tools/mcp/detail/provider-detail.tsx b/web/app/components/tools/mcp/detail/provider-detail.tsx
index e704e6d262..54906246f4 100644
--- a/web/app/components/tools/mcp/detail/provider-detail.tsx
+++ b/web/app/components/tools/mcp/detail/provider-detail.tsx
@@ -50,7 +50,7 @@ const MCPDetailPanel: FC<Props> = ({
       <DrawerPortal>
         <DrawerBackdrop className="bg-transparent" />
         <DrawerViewport>
-          <DrawerPopup className={cn('justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-[420px] data-[swipe-direction=right]:max-w-[420px] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
+          <DrawerPopup className={cn('justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-[400px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
             <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
               {detail && (
                 <MCPDetailContent
diff --git a/web/app/components/tools/mcp/index.tsx b/web/app/components/tools/mcp/index.tsx
index eb56340a4e..009d63ca18 100644
--- a/web/app/components/tools/mcp/index.tsx
+++ b/web/app/components/tools/mcp/index.tsx
@@ -6,7 +6,7 @@ import { useMemo, useState } from 'react'
 import {
   useAllToolProviders,
 } from '@/service/use-tools'
-import { toolsContentFrameClassNames, toolsContentInsetClassNames } from '../content-inset'
+import { toolsContentInsetClassNames, toolsUnifiedContentFrameClassName } from '../content-inset'
 import NewMCPCard from './create-card'
 import MCPDetailPanel from './detail/provider-detail'
 import MCPCard from './provider-card'
@@ -44,9 +44,11 @@ const MCPList = ({
 
   const filteredList = useMemo(() => {
     return list.filter((collection) => {
+      if (collection.type !== 'mcp')
+        return false
       if (searchText)
         return Object.values(collection.name).some(value => (value as string).toLowerCase().includes(searchText.toLowerCase()))
-      return collection.type === 'mcp'
+      return true
     }) as ToolWithProvider[]
   }, [list, searchText])
 
@@ -68,12 +70,12 @@ const MCPList = ({
     setIsTriggerAuthorize(true)
   }
   const contentPaddingClassName = toolsContentInsetClassNames[contentInset]
-  const contentFrameClassName = cn(toolsContentFrameClassNames[contentInset], contentPaddingClassName)
+  const contentFrameClassName = cn(contentPaddingClassName, toolsUnifiedContentFrameClassName)
   return (
     <>
       <div
         className={cn(
-          'relative grid shrink-0 grid-cols-1 content-start gap-4 pt-2 pb-4 2k:grid-cols-6 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5',
+          'relative grid shrink-0 grid-cols-1 content-start gap-4 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3',
           contentFrameClassName,
           !list.length && 'h-[calc(100vh-136px)] overflow-hidden',
         )}
diff --git a/web/app/components/tools/mcp/provider-card.tsx b/web/app/components/tools/mcp/provider-card.tsx
index 9d68e6f02b..0d685b2453 100644
--- a/web/app/components/tools/mcp/provider-card.tsx
+++ b/web/app/components/tools/mcp/provider-card.tsx
@@ -85,8 +85,8 @@ const MCPCard = ({
     <div
       onClick={() => handleSelect(data.id)}
       className={cn(
-        'group relative flex cursor-pointer flex-col rounded-xl border-[1.5px] border-transparent bg-components-card-bg shadow-xs hover:bg-components-card-bg-alt hover:shadow-md',
-        currentProvider?.id === data.id && 'border-components-option-card-option-selected-border bg-components-card-bg-alt',
+        'group relative flex cursor-pointer flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-md hover:bg-components-panel-on-panel-item-bg-hover',
+        currentProvider?.id === data.id && 'border-components-option-card-option-selected-border bg-components-panel-on-panel-item-bg-hover',
       )}
     >
       <div className="flex grow items-center gap-3 rounded-t-xl p-4">
diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx
index 1dac25bc64..6c2551c2bc 100644
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@@ -3,6 +3,7 @@ import type { ToolsContentInset } from './content-inset'
 import type { Collection } from './types'
 import type { Plugin } from '@/app/components/plugins/types'
 import type { ToolCategory } from '@/app/components/tools/integration-routes'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { parseAsStringLiteral, useQueryState } from 'nuqs'
@@ -15,6 +16,8 @@ import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import { useTags } from '@/app/components/plugins/hooks'
 import Empty from '@/app/components/plugins/marketplace/empty'
 import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
+import useReferenceSetting from '@/app/components/plugins/plugin-page/use-reference-setting'
+import ReferenceSettingModal from '@/app/components/plugins/reference-setting-modal'
 import { TOOL_CATEGORY_VALUES } from '@/app/components/tools/integration-routes'
 import LabelFilter from '@/app/components/tools/labels/filter'
 import CustomCreateCard from '@/app/components/tools/provider/custom-create-card'
@@ -23,7 +26,7 @@ import WorkflowToolEmpty from '@/app/components/tools/provider/empty'
 import { systemFeaturesQueryOptions } from '@/service/system-features'
 import { useCheckInstalled, useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { useAllToolProviders } from '@/service/use-tools'
-import { toolsContentFrameClassNames, toolsContentInsetClassNames } from './content-inset'
+import { toolsContentInsetClassNames, toolsUnifiedContentFrameClassName } from './content-inset'
 import Marketplace from './marketplace'
 import { useMarketplace } from './marketplace/hooks'
 import MCPList from './mcp'
@@ -51,6 +54,11 @@ const ProviderList = ({
   // searchParams.get('category') === 'workflow'
   const { t } = useTranslation()
   const { getTagLabel } = useTags()
+  const {
+    referenceSetting,
+    canSetPermissions,
+    setReferenceSettings,
+  } = useReferenceSetting()
   const { data: enable_marketplace } = useSuspenseQuery({
     ...systemFeaturesQueryOptions(),
     select: s => s.enable_marketplace,
@@ -61,7 +69,9 @@ const ProviderList = ({
   const activeTab = category ?? categoryParam
   const isRouteCategory = !!category
   const contentPaddingClassName = toolsContentInsetClassNames[contentInset]
-  const contentFrameClassName = cn(toolsContentFrameClassNames[contentInset], contentPaddingClassName)
+  const toolListFrameClassName = cn(contentPaddingClassName, toolsUnifiedContentFrameClassName)
+  const showToolsUpdateSetting = activeTab === 'builtin' && canSetPermissions && !!referenceSetting
+  const showLabelFilter = activeTab === 'builtin'
   const options = [
     { value: 'builtin', text: t('type.builtIn', { ns: 'tools' }) },
     { value: 'api', text: t('type.custom', { ns: 'tools' }) },
@@ -69,6 +79,7 @@ const ProviderList = ({
     { value: 'mcp', text: 'MCP' },
   ]
   const [tagFilterValue, setTagFilterValue] = useState<string[]>([])
+  const [showPluginSettingModal, setShowPluginSettingModal] = useState(false)
   const handleTagsChange = (value: string[]) => {
     setTagFilterValue(value)
   }
@@ -81,13 +92,13 @@ const ProviderList = ({
     return collectionList.filter((collection) => {
       if (collection.type !== activeTab)
         return false
-      if (tagFilterValue.length > 0 && (!collection.labels || collection.labels.every(label => !tagFilterValue.includes(label))))
+      if (showLabelFilter && tagFilterValue.length > 0 && (!collection.labels || collection.labels.every(label => !tagFilterValue.includes(label))))
         return false
       if (keywords)
         return Object.values(collection.label).some(value => value.toLowerCase().includes(keywords.toLowerCase()))
       return true
     })
-  }, [activeTab, tagFilterValue, keywords, collectionList])
+  }, [activeTab, showLabelFilter, tagFilterValue, keywords, collectionList])
 
   const [currentProviderId, setCurrentProviderId] = useState<string | undefined>()
   const currentProvider = useMemo<Collection | undefined>(() => {
@@ -146,8 +157,8 @@ const ProviderList = ({
         >
           <div
             className={cn(
-              'sticky top-0 z-10 flex flex-wrap items-center justify-start gap-x-4 gap-y-2 bg-background-body pt-4 pb-2',
-              contentFrameClassName,
+              'sticky top-0 z-10 flex flex-wrap items-center justify-start gap-x-2 gap-y-2 bg-background-body pt-2 pb-0',
+              toolListFrameClassName,
               currentProviderId && 'pr-6',
             )}
           >
@@ -165,25 +176,41 @@ const ProviderList = ({
                 options={options}
               />
             )}
-            <div className="flex items-center gap-2">
-              {activeTab !== 'mcp' && (
-                <LabelFilter value={tagFilterValue} onChange={handleTagsChange} />
+            <div className="flex min-w-[200px] flex-1 items-center justify-between gap-2">
+              <div className="flex min-w-0 items-center gap-2">
+                {showLabelFilter && (
+                  <LabelFilter value={tagFilterValue} onChange={handleTagsChange} />
+                )}
+                <Input
+                  showLeftIcon
+                  showClearIcon
+                  wrapperClassName="w-[200px]"
+                  value={keywords}
+                  onChange={e => handleKeywordsChange(e.target.value)}
+                  onClear={() => handleKeywordsChange('')}
+                />
+              </div>
+              {showToolsUpdateSetting && (
+                <Button
+                  variant="secondary"
+                  className="h-8 shrink-0 gap-0.5 px-3 system-sm-medium"
+                  onClick={() => setShowPluginSettingModal(true)}
+                >
+                  <span aria-hidden className="i-ri-flashlight-line size-4" />
+                  <span className="px-0.5">{t('modelProvider.updateSetting', { ns: 'common' })}</span>
+                  <span className="flex min-w-4 items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5 system-2xs-medium-uppercase text-text-tertiary">
+                    {t('autoUpdate.strategy.latest.name', { ns: 'plugin' })}
+                  </span>
+                  <span aria-hidden className="i-ri-arrow-down-s-line size-4" />
+                </Button>
               )}
-              <Input
-                showLeftIcon
-                showClearIcon
-                wrapperClassName="w-[200px]"
-                value={keywords}
-                onChange={e => handleKeywordsChange(e.target.value)}
-                onClear={() => handleKeywordsChange('')}
-              />
             </div>
           </div>
           {activeTab !== 'mcp' && (
             <div
               className={cn(
-                'relative grid shrink-0 grid-cols-1 content-start gap-4 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
-                contentFrameClassName,
+                'relative grid shrink-0 grid-cols-1 content-start gap-2 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3',
+                toolListFrameClassName,
                 !filteredCollectionList.length && activeTab === 'workflow' && 'grow',
               )}
             >
@@ -217,7 +244,7 @@ const ProviderList = ({
             </div>
           )}
           {!filteredCollectionList.length && activeTab === 'builtin' && (
-            <Empty lightCard text={t('noTools', { ns: 'tools' })} className={cn('h-[224px] shrink-0', contentFrameClassName)} />
+            <Empty lightCard text={t('noTools', { ns: 'tools' })} className={cn('h-[224px] shrink-0', toolListFrameClassName)} />
           )}
           <div ref={toolListTailRef} />
           {enable_marketplace && activeTab === 'builtin' && (
@@ -247,6 +274,13 @@ const ProviderList = ({
         onUpdate={() => invalidateInstalledPluginList()}
         onHide={() => setCurrentProviderId(undefined)}
       />
+      {showPluginSettingModal && referenceSetting && (
+        <ReferenceSettingModal
+          payload={referenceSetting}
+          onHide={() => setShowPluginSettingModal(false)}
+          onSave={setReferenceSettings}
+        />
+      )}
     </>
   )
 }
diff --git a/web/app/components/tools/provider/__tests__/detail.spec.tsx b/web/app/components/tools/provider/__tests__/detail.spec.tsx
index 5a26589e11..bcaec02f34 100644
--- a/web/app/components/tools/provider/__tests__/detail.spec.tsx
+++ b/web/app/components/tools/provider/__tests__/detail.spec.tsx
@@ -174,6 +174,32 @@ describe('ProviderDetail', () => {
   })
 
   describe('Rendering', () => {
+    it('uses the full-height right drawer layout from the design', () => {
+      render(
+        <ProviderDetail
+          collection={createMockCollection()}
+          onHide={mockOnHide}
+          onRefreshData={mockOnRefreshData}
+        />,
+      )
+
+      const dialog = screen.getByRole('dialog')
+
+      expect(dialog).toHaveClass(
+        'data-[swipe-direction=right]:top-2',
+        'data-[swipe-direction=right]:right-2',
+        'data-[swipe-direction=right]:bottom-2',
+        'data-[swipe-direction=right]:h-[calc(100dvh-16px)]',
+        'data-[swipe-direction=right]:w-[400px]',
+        'data-[swipe-direction=right]:max-w-[calc(100vw-1rem)]',
+      )
+      expect(dialog).not.toHaveClass(
+        'data-[swipe-direction=right]:top-16',
+        'data-[swipe-direction=right]:w-[420px]',
+        'data-[swipe-direction=right]:max-w-[420px]',
+      )
+    })
+
     it('renders title, org info and description for a builtIn collection', async () => {
       render(
         <ProviderDetail
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index 359f6af88c..afea6ad496 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -248,7 +248,7 @@ const ProviderDetail = ({
       <DrawerPortal>
         <DrawerBackdrop className="bg-transparent" />
         <DrawerViewport>
-          <DrawerPopup className={cn('justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-[420px] data-[swipe-direction=right]:max-w-[420px] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
+          <DrawerPopup className={cn('justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-[400px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
             <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
               <div className="flex h-full flex-col p-4">
                 <div className="shrink-0">