diff --git a/web/app/components/plugins/base/key-value-item.tsx b/web/app/components/plugins/base/key-value-item.tsx
index 58c4962a6c..ec8e8155cb 100644
--- a/web/app/components/plugins/base/key-value-item.tsx
+++ b/web/app/components/plugins/base/key-value-item.tsx
@@ -9,14 +9,17 @@ import {
 import { useTranslation } from 'react-i18next'
 import { ClipboardCheck } from '../../base/icons/src/vender/line/files'
 import Tooltip from '../../base/tooltip'
+import cn from '@/utils/classnames'
 import ActionButton from '@/app/components/base/action-button'
 type Props = {
   label: string
+  labelWidthClassName?: string
   value: string
 }
 
 const KeyValueItem: FC<Props> = ({
   label,
+  labelWidthClassName = 'w-10',
   value,
 }) => {
   const { t } = useTranslation()
@@ -41,7 +44,7 @@ const KeyValueItem: FC<Props> = ({
 
   return (
     <div className='flex items-center gap-1 self-stretch'>
-      <span className='flex w-10 flex-col justify-center items-start text-text-tertiary system-xs-medium'>{label}</span>
+      <span className={cn('flex flex-col justify-center items-start text-text-tertiary system-xs-medium', labelWidthClassName)}>{label}</span>
       <div className='flex justify-center items-center gap-0.5'>
         <span className='system-xs-medium text-text-secondary'>
           {value}
diff --git a/web/app/components/plugins/plugin-item/action.tsx b/web/app/components/plugins/plugin-item/action.tsx
index 86198b9d70..998c808654 100644
--- a/web/app/components/plugins/plugin-item/action.tsx
+++ b/web/app/components/plugins/plugin-item/action.tsx
@@ -3,6 +3,9 @@ import type { FC } from 'react'
 import React from 'react'
 import { useRouter } from 'next/navigation'
 import { RiDeleteBinLine, RiInformation2Line, RiLoopLeftLine } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import PluginInfo from '../plugin-page/plugin-info'
+import ActionButton from '../../base/action-button'
 
 type Props = {
   pluginId: string
@@ -19,11 +22,13 @@ const Action: FC<Props> = ({
   onDelete,
 }) => {
   const router = useRouter()
+  const [isShowPluginInfo, {
+    setTrue: showPluginInfo,
+    setFalse: hidePluginInfo,
+  }] = useBoolean(false)
 
   const handleFetchNewVersion = () => { }
-  const handleShowInfo = () => {
-    router.refresh() // refresh the page ...
-  }
+
   // const handleDelete = () => { }
   return (
     <div className='flex space-x-1'>
@@ -34,9 +39,9 @@ const Action: FC<Props> = ({
       }
       {
         isShowInfo
-        && <div className='p-0.5 cursor-pointer' onClick={handleShowInfo}>
+        && <ActionButton onClick={showPluginInfo}>
           <RiInformation2Line className='w-5 h-5 text-text-tertiary' />
-        </div>
+        </ActionButton>
       }
       {
         isShowDelete
@@ -44,6 +49,15 @@ const Action: FC<Props> = ({
           <RiDeleteBinLine className='w-5 h-5 text-text-tertiary' />
         </div>
       }
+
+      {isShowPluginInfo && (
+        <PluginInfo
+          repository='https://github.com/langgenius/dify-github-plugin'
+          release='1.2.5'
+          packageName='notion-sync.difypkg'
+          onHide={hidePluginInfo}
+        />
+      )}
     </div>
   )
 }
diff --git a/web/app/components/plugins/plugin-page/debug-info.tsx b/web/app/components/plugins/plugin-page/debug-info.tsx
index e789f906ec..308b141836 100644
--- a/web/app/components/plugins/plugin-page/debug-info.tsx
+++ b/web/app/components/plugins/plugin-page/debug-info.tsx
@@ -26,7 +26,7 @@ const DebugInfo: FC = () => {
               <RiArrowRightUpLine className='w-3 h-3' />
             </a>
           </div>
-          <div className='flex flex-col items-start gap-0.5 self-stretch'>
+          <div className='space-y-0.5'>
             <KeyValueItem
               label={'Port'}
               value={'cloud.dify,ai:2048'}
diff --git a/web/app/components/plugins/plugin-page/plugin-info.tsx b/web/app/components/plugins/plugin-page/plugin-info.tsx
new file mode 100644
index 0000000000..ebec25f216
--- /dev/null
+++ b/web/app/components/plugins/plugin-page/plugin-info.tsx
@@ -0,0 +1,40 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import KeyValueItem from '../base/key-value-item'
+import Modal from '../../base/modal'
+
+const i18nPrefix = 'plugin.pluginInfoModal'
+type Props = {
+  repository: string
+  release: string
+  packageName: string
+  onHide: () => void
+}
+
+const PlugInfo: FC<Props> = ({
+  repository,
+  release,
+  packageName,
+  onHide,
+}) => {
+  const { t } = useTranslation()
+  const labelWidthClassName = 'w-[96px]'
+  return (
+    <Modal
+      title={t(`${i18nPrefix}.title`)}
+      className='w-[480px]'
+      isShow
+      onClose={onHide}
+      closable
+    >
+      <div className='mt-5 space-y-3'>
+        <KeyValueItem label={t(`${i18nPrefix}.repository`)} labelWidthClassName={labelWidthClassName} value={repository} />
+        <KeyValueItem label={t(`${i18nPrefix}.release`)} labelWidthClassName={labelWidthClassName} value={release} />
+        <KeyValueItem label={t(`${i18nPrefix}.packageName`)} labelWidthClassName={labelWidthClassName} value={packageName} />
+      </div>
+    </Modal>
+  )
+}
+export default React.memo(PlugInfo)
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index 817c9e0296..3d09474264 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -33,6 +33,12 @@ const translation = {
     admin: 'Admins',
     noOne: 'No one',
   },
+  pluginInfoModal: {
+    title: 'Plugin info',
+    repository: 'Repository',
+    release: 'Release',
+    packageName: 'Package',
+  },
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index d40920e0aa..7f88bda567 100644
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@@ -33,6 +33,12 @@ const translation = {
     admin: '管理员',
     noOne: '无人',
   },
+  pluginInfoModal: {
+    title: '插件信息',
+    repository: '仓库',
+    release: '发布版本',
+    packageName: '包',
+  },
 }
 
 export default translation