diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx
new file mode 100644
index 0000000000..f35f455618
--- /dev/null
+++ b/web/app/components/plugins/marketplace/index.tsx
@@ -0,0 +1,35 @@
+import SearchBox from './search-box'
+
+const Marketplace = () => {
+  return (
+    <div className='w-full'>
+      <h1 className='mb-2 text-center title-4xl-semibold text-text-primary'>
+        Empower your AI development
+      </h1>
+      <h2 className='flex justify-center items-center mb-4 text-center body-md-regular text-text-tertiary'>
+        Discover
+        <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
+          models
+        </span>
+        ,
+        <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
+          tools
+        </span>
+        ,
+        <span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
+          extensions
+        </span>
+        and
+        <span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected">
+          bundles
+        </span>
+        in Dify Marketplace
+      </h2>
+      <div className='flex items-center justify-center'>
+        <SearchBox onChange={() => {}} />
+      </div>
+    </div>
+  )
+}
+
+export default Marketplace
diff --git a/web/app/components/plugins/marketplace/search-box/index.tsx b/web/app/components/plugins/marketplace/search-box/index.tsx
new file mode 100644
index 0000000000..e29256b555
--- /dev/null
+++ b/web/app/components/plugins/marketplace/search-box/index.tsx
@@ -0,0 +1,50 @@
+'use client'
+import {
+  useCallback,
+  useState,
+} from 'react'
+import { RiCloseLine } from '@remixicon/react'
+import TagsFilter from './tags-filter'
+import ActionButton from '@/app/components/base/action-button'
+
+type SearchBoxProps = {
+  onChange: (searchText: string, tags: string[]) => void
+}
+const SearchBox = ({
+  onChange,
+}: SearchBoxProps) => {
+  const [searchText, setSearchText] = useState('')
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+
+  const handleTagsChange = useCallback((tags: string[]) => {
+    setSelectedTags(tags)
+    onChange(searchText, tags)
+  }, [searchText, onChange])
+
+  return (
+    <div className='flex items-center p-1.5 w-[640px] h-11 border border-components-chat-input-border bg-components-panel-bg-blur rounded-xl shadow-md'>
+      <TagsFilter
+        value={selectedTags}
+        onChange={handleTagsChange}
+      />
+      <div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
+      <div className='grow flex items-center p-1 pl-2'>
+        <div className='flex items-center mr-2 py-0.5 w-full'>
+          <input
+            className='grow block outline-none appearance-none body-md-medium text-text-secondary'
+            value={searchText}
+            onChange={(e) => {
+              setSearchText(e.target.value)
+              onChange(e.target.value, selectedTags)
+            }}
+          />
+          <ActionButton onClick={() => setSearchText('')}>
+            <RiCloseLine className='w-4 h-4' />
+          </ActionButton>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SearchBox
diff --git a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
new file mode 100644
index 0000000000..1615478af6
--- /dev/null
+++ b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
@@ -0,0 +1,135 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  RiArrowDownSLine,
+  RiCloseCircleFill,
+  RiFilter3Line,
+  RiSearchLine,
+} from '@remixicon/react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Checkbox from '@/app/components/base/checkbox'
+import cn from '@/utils/classnames'
+
+type TagsFilterProps = {
+  value: string[]
+  onChange: (tags: string[]) => void
+}
+const TagsFilter = ({
+  value,
+  onChange,
+}: TagsFilterProps) => {
+  const [open, setOpen] = useState(false)
+  const [searchText, setSearchText] = useState('')
+  const options = [
+    {
+      value: 'search',
+      text: 'Search',
+    },
+    {
+      value: 'image',
+      text: 'Image',
+    },
+  ]
+  const filteredOptions = options.filter(option => option.text.toLowerCase().includes(searchText.toLowerCase()))
+  const handleCheck = (id: string) => {
+    if (value.includes(id))
+      onChange(value.filter(tag => tag !== id))
+    else
+      onChange([...value, id])
+  }
+  const selectedTagsLength = value.length
+
+  return (
+    <PortalToFollowElem
+      placement='bottom-start'
+      offset={{
+        mainAxis: 4,
+        crossAxis: -6,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <div className={cn(
+          'flex items-center px-2 py-1 h-8 text-text-tertiary rounded-lg hover:bg-state-base-hover cursor-pointer',
+          selectedTagsLength && 'text-text-secondary',
+          open && 'bg-state-base-hover',
+        )}>
+          <div className='p-0.5'>
+            <RiFilter3Line className='w-4 h-4' />
+          </div>
+          <div className={cn(
+            'flex items-center p-1 system-sm-medium',
+          )}>
+            {
+              !selectedTagsLength && 'All Tags'
+            }
+            {
+              !!selectedTagsLength && value.slice(0, 2).join(',')
+            }
+            {
+              selectedTagsLength > 2 && (
+                <div className='ml-1 system-xs-medium text-text-tertiary'>
+                  +{selectedTagsLength - 2}
+                </div>
+              )
+            }
+          </div>
+          {
+            !!selectedTagsLength && (
+              <RiCloseCircleFill
+                className='w-4 h-4 text-text-quaternary cursor-pointer'
+                onClick={() => onChange([])}
+              />
+            )
+          }
+          {
+            !selectedTagsLength && (
+              <RiArrowDownSLine className='w-4 h-4' />
+            )
+          }
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent>
+        <div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
+          <div className='p-2 pb-1'>
+            <div className='flex items-center p-2'>
+              <RiSearchLine className='mr-0.5 w-4 h-4 text-text-placeholder' />
+              <input
+                className='px-1 system-sm-regular outline-none appearance-none'
+                value={searchText}
+                onChange={e => setSearchText(e.target.value)}
+              />
+            </div>
+          </div>
+          <div className='p-1 max-h-[448px] overflow-y-auto'>
+            {
+              filteredOptions.map(option => (
+                <div
+                  key={option.value}
+                  className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
+                >
+                  <Checkbox
+                    className='mr-1'
+                    checked={value.includes(option.value)}
+                    onCheck={() => handleCheck(option.value)}
+                  />
+                  <div className='px-1 system-sm-medium text-text-secondary'>
+                    {option.text}
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default TagsFilter