diff --git a/web/app/components/base/icons/assets/vender/other/square-checklist.svg b/web/app/components/base/icons/assets/vender/other/square-checklist.svg
new file mode 100644
index 0000000000..eaca7dfdea
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/other/square-checklist.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 6C19 5.44771 18.5523 5 18 5H6C5.44771 5 5 5.44771 5 6V18C5 18.5523 5.44771 19 6 19H18C18.5523 19 19 18.5523 19 18V6ZM9.73926 13.1533C10.0706 12.7115 10.6978 12.6218 11.1396 12.9531C11.5815 13.2845 11.6712 13.9117 11.3398 14.3535L9.46777 16.8486C9.14935 17.2732 8.55487 17.3754 8.11328 17.0811L6.98828 16.3311C6.52878 16.0247 6.40465 15.4039 6.71094 14.9443C7.01729 14.4848 7.63813 14.3606 8.09766 14.667L8.43457 14.8916L9.73926 13.1533ZM16 14C16.5523 14 17 14.4477 17 15C17 15.5523 16.5523 16 16 16H14C13.4477 16 13 15.5523 13 15C13 14.4477 13.4477 14 14 14H16ZM9.73926 7.15234C10.0706 6.71052 10.6978 6.62079 11.1396 6.95215C11.5815 7.28352 11.6712 7.91071 11.3398 8.35254L9.46777 10.8477C9.14936 11.2722 8.55487 11.3744 8.11328 11.0801L6.98828 10.3301C6.52884 10.0238 6.40476 9.40286 6.71094 8.94336C7.0173 8.48384 7.63814 8.35965 8.09766 8.66602L8.43457 8.89062L9.73926 7.15234ZM16.0576 8C16.6099 8 17.0576 8.44772 17.0576 9C17.0576 9.55228 16.6099 10 16.0576 10H14.0576C13.5055 9.99985 13.0576 9.55219 13.0576 9C13.0576 8.44781 13.5055 8.00015 14.0576 8H16.0576ZM21 18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34315 4.34315 3 6 3H18C19.6569 3 21 4.34315 21 6V18Z" fill="white"/>
+</svg>
diff --git a/web/app/components/base/icons/src/vender/other/SquareChecklist.json b/web/app/components/base/icons/src/vender/other/SquareChecklist.json
new file mode 100644
index 0000000000..2295cf3599
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/other/SquareChecklist.json
@@ -0,0 +1,26 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M19 6C19 5.44771 18.5523 5 18 5H6C5.44771 5 5 5.44771 5 6V18C5 18.5523 5.44771 19 6 19H18C18.5523 19 19 18.5523 19 18V6ZM9.73926 13.1533C10.0706 12.7115 10.6978 12.6218 11.1396 12.9531C11.5815 13.2845 11.6712 13.9117 11.3398 14.3535L9.46777 16.8486C9.14935 17.2732 8.55487 17.3754 8.11328 17.0811L6.98828 16.3311C6.52878 16.0247 6.40465 15.4039 6.71094 14.9443C7.01729 14.4848 7.63813 14.3606 8.09766 14.667L8.43457 14.8916L9.73926 13.1533ZM16 14C16.5523 14 17 14.4477 17 15C17 15.5523 16.5523 16 16 16H14C13.4477 16 13 15.5523 13 15C13 14.4477 13.4477 14 14 14H16ZM9.73926 7.15234C10.0706 6.71052 10.6978 6.62079 11.1396 6.95215C11.5815 7.28352 11.6712 7.91071 11.3398 8.35254L9.46777 10.8477C9.14936 11.2722 8.55487 11.3744 8.11328 11.0801L6.98828 10.3301C6.52884 10.0238 6.40476 9.40286 6.71094 8.94336C7.0173 8.48384 7.63814 8.35965 8.09766 8.66602L8.43457 8.89062L9.73926 7.15234ZM16.0576 8C16.6099 8 17.0576 8.44772 17.0576 9C17.0576 9.55228 16.6099 10 16.0576 10H14.0576C13.5055 9.99985 13.0576 9.55219 13.0576 9C13.0576 8.44781 13.5055 8.00015 14.0576 8H16.0576ZM21 18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34315 4.34315 3 6 3H18C19.6569 3 21 4.34315 21 6V18Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "SquareChecklist"
+}
diff --git a/web/app/components/base/icons/src/vender/other/SquareChecklist.tsx b/web/app/components/base/icons/src/vender/other/SquareChecklist.tsx
new file mode 100644
index 0000000000..f927fa88d2
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/other/SquareChecklist.tsx
@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './SquareChecklist.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'SquareChecklist'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/other/index.ts b/web/app/components/base/icons/src/vender/other/index.ts
index 89cbe9033d..0ca5f22bcf 100644
--- a/web/app/components/base/icons/src/vender/other/index.ts
+++ b/web/app/components/base/icons/src/vender/other/index.ts
@@ -6,3 +6,4 @@ export { default as Mcp } from './Mcp'
 export { default as NoToolPlaceholder } from './NoToolPlaceholder'
 export { default as Openai } from './Openai'
 export { default as ReplayLine } from './ReplayLine'
+export { default as SquareChecklist } from './SquareChecklist'
diff --git a/web/app/components/billing/plan-upgrade-modal/index.tsx b/web/app/components/billing/plan-upgrade-modal/index.tsx
index 7dfce468d0..79f354333c 100644
--- a/web/app/components/billing/plan-upgrade-modal/index.tsx
+++ b/web/app/components/billing/plan-upgrade-modal/index.tsx
@@ -1,12 +1,13 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
-import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import styles from './style.module.css'
+import { SquareChecklist } from '../../base/icons/src/vender/other'
+import { useModalContext } from '@/context/modal-context'
 
 type Props = {
   Icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>
@@ -19,38 +20,44 @@ type Props = {
 }
 
 const PlanUpgradeModal: FC<Props> = ({
-  Icon = TriggerAll,
+  Icon = SquareChecklist,
   title,
   description,
   extraInfo,
   show,
-  onClose: onClose,
+  onClose,
   onUpgrade,
 }) => {
   const { t } = useTranslation()
-  // const { plan } = useProviderContext()
+  const { setShowPricingModal } = useModalContext()
+
+  const handleUpgrade = useCallback(() => {
+    onClose()
+    onUpgrade ? onUpgrade() : setShowPricingModal()
+  }, [onClose, onUpgrade, setShowPricingModal])
+
   return (
     <Modal
       isShow={show}
       onClose={onClose}
       closable={false}
       clickOutsideNotClose
-      className={`${styles.surface} flex w-[580px] flex-col overflow-hidden rounded-2xl !p-0 shadow-xl`}
+      className={`${styles.surface} w-[580px] rounded-2xl !p-0`}
     >
-      <div className='relative flex w-full flex-1 items-stretch justify-center'>
+      <div className='relative'>
         <div
           aria-hidden
           className={`${styles.heroOverlay} pointer-events-none absolute inset-0`}
         />
-        <div className='relative z-10 flex w-full flex-col items-start gap-4 px-8 pt-8'>
-          <div className={`${styles.icon} flex h-12 w-12 items-center justify-center rounded-[12px]`}>
-            <Icon className='h-5 w-5 text-text-primary-on-surface' />
+        <div className='px-8 pt-8'>
+          <div className={`${styles.icon} flex size-12 items-center justify-center rounded-xl shadow-lg backdrop-blur-[5px]`}>
+            <Icon className='size-6 text-text-primary-on-surface' />
           </div>
-          <div className='flex flex-col items-start gap-2'>
-            <div className={`${styles.highlight} title-lg-semi-bold`}>
+          <div className='mt-6 space-y-2'>
+            <div className={`${styles.highlight} title-3xl-semi-bold`}>
               {title}
             </div>
-            <div className='body-md-regular text-text-secondary'>
+            <div className='system-md-regular text-text-tertiary'>
               {description}
             </div>
           </div>
@@ -58,7 +65,7 @@ const PlanUpgradeModal: FC<Props> = ({
         </div>
       </div>
 
-      <div className='flex h-[76px] w-full items-center justify-end gap-2 px-8 pb-8 pt-5'>
+      <div className='mb-8 mt-10 flex justify-end space-x-2 px-8'>
         <Button
           onClick={onClose}
         >
@@ -66,8 +73,8 @@ const PlanUpgradeModal: FC<Props> = ({
         </Button>
         <UpgradeBtn
           isShort
-          onClick={onUpgrade}
-          style={{ height: 32 }}
+          onClick={handleUpgrade}
+          className='!h-8 !rounded-lg'
           labelKey='billing.triggerLimitModal.upgrade'
           loc='trigger-events-limit-modal'
         />
diff --git a/web/app/components/billing/plan-upgrade-modal/style.module.css b/web/app/components/billing/plan-upgrade-modal/style.module.css
index e8e86719e6..50ad488388 100644
--- a/web/app/components/billing/plan-upgrade-modal/style.module.css
+++ b/web/app/components/billing/plan-upgrade-modal/style.module.css
@@ -19,7 +19,6 @@
   background:
     linear-gradient(180deg, var(--color-components-avatar-bg-mask-stop-0, rgba(255, 255, 255, 0.12)) 0%, var(--color-components-avatar-bg-mask-stop-100, rgba(255, 255, 255, 0.08)) 100%),
     var(--color-util-colors-blue-brand-blue-brand-500, #296dff);
-  box-shadow: 0 10px 20px color-mix(in srgb, var(--color-util-colors-blue-brand-blue-brand-500, #296dff) 35%, transparent);
 }
 
 .highlight {
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index 893f9ff07d..53f55a37f2 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -23,7 +23,7 @@ import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WAT
 import NotionConnector from '@/app/components/base/notion-connector'
 import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'
 import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal'
-import { noop } from 'lodash-es'
+import { useBoolean } from 'ahooks'
 
 type IStepOneProps = {
   datasetId?: string
@@ -132,6 +132,11 @@ const StepOne = ({
     return authedDataSourceList.find(item => item.provider === 'notion_datasource')?.credentials_list || []
   }, [authedDataSourceList])
 
+  const [isShowPlanUpgradeModal, {
+    // setTrue: showPlanUpgradeModal,
+    setFalse: hidePlanUpgradeModal,
+  }] = useBoolean(true)
+
   return (
     <div className='h-full w-full overflow-x-auto'>
       <div className='flex h-full w-full min-w-[1440px]'>
@@ -332,15 +337,14 @@ const StepOne = ({
             />
           )}
           {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}
-          {
+          {isShowPlanUpgradeModal && (
             <PlanUpgradeModal
               show
-              onClose={noop}
-              onUpgrade={noop}
+              onClose={hidePlanUpgradeModal}
               title='Upgrade to upload multiple pages at once'
               description='You’ve reached the upload limit — only one page can be selected and uploaded at a time on your current plan.'
             />
-          }
+          )}
         </div>
       </div>
     </div>