diff --git a/web/app/components/header/plugins-nav/index.tsx b/web/app/components/header/plugins-nav/index.tsx
index 7cef0ce6fb..8bc654d860 100644
--- a/web/app/components/header/plugins-nav/index.tsx
+++ b/web/app/components/header/plugins-nav/index.tsx
@@ -4,6 +4,8 @@ import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import classNames from '@/utils/classnames'
 import { Group } from '@/app/components/base/icons/src/vender/other'
+import { useSelectedLayoutSegment } from 'next/navigation'
+
 type PluginsNavProps = {
   className?: string
 }
@@ -12,12 +14,17 @@ const PluginsNav = ({
   className,
 }: PluginsNavProps) => {
   const { t } = useTranslation()
+  const selectedSegment = useSelectedLayoutSegment()
+  const activated = selectedSegment === 'plugins'
 
   return (
     <Link href="/plugins" className={classNames(
       className, 'group',
     )}>
-      <div className='flex flex-row h-8 p-1.5 gap-0.5 items-center justify-center rounded-xl system-sm-medium-uppercase hover:bg-state-base-hover text-text-tertiary hover:text-text-secondary'>
+      <div className={`flex flex-row h-8 p-1.5 gap-0.5 items-center justify-center 
+        rounded-xl system-sm-medium-uppercase ${activated
+      ? 'border border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active shadow-md text-components-main-nav-nav-button-text'
+      : 'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary'}`}>
         <div className='flex w-4 h-4 justify-center items-center'>
           <Group />
         </div>
diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
index 6338e387f7..6b63c24aea 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
@@ -7,7 +7,8 @@ import Card from '../../../card'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import { useTranslation } from 'react-i18next'
-import { installPackageFromGitHub, updateFromGitHub } from '@/service/plugins'
+import { updateFromGitHub } from '@/service/plugins'
+import { useInstallPackageFromGitHub } from '@/service/use-plugins'
 import { RiLoader2Line } from '@remixicon/react'
 import { usePluginTaskList } from '@/service/use-plugins'
 import checkTaskStatus from '../../base/check-task-status'
@@ -40,6 +41,7 @@ const Loaded: React.FC<LoadedProps> = ({
 }) => {
   const { t } = useTranslation()
   const [isInstalling, setIsInstalling] = React.useState(false)
+  const { mutateAsync: installPackageFromGitHub } = useInstallPackageFromGitHub()
   const { handleRefetch } = usePluginTaskList()
   const { check } = checkTaskStatus()
 
@@ -72,12 +74,12 @@ const Loaded: React.FC<LoadedProps> = ({
         onInstalled()
       }
       else {
-        const { all_installed: isInstalled, task_id: taskId } = await installPackageFromGitHub(
-          `${owner}/${repo}`,
+        const { all_installed: isInstalled, task_id: taskId } = await installPackageFromGitHub({
+          repoUrl: `${owner}/${repo}`,
           selectedVersion,
           selectedPackage,
           uniqueIdentifier,
-        )
+        })
 
         if (isInstalled) {
           onInstalled()
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index 2cba8cf939..d089d37543 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -132,7 +132,7 @@ const PluginPage = ({
               options={options}
             />
           </div>
-          <div className='flex flex-shrink-0 items-center gap-1'>
+          <div className='flex shrink-0 items-center gap-1'>
             <PluginTasks />
             {canManagement && (
               <InstallPluginDropdown
@@ -172,7 +172,7 @@ const PluginPage = ({
           )}
           <div className={`flex py-4 justify-center items-center gap-2 ${dragging ? 'text-text-accent' : 'text-text-quaternary'}`}>
             <RiDragDropLine className="w-4 h-4" />
-            <span className="system-xs-regular">Drop plugin package here to install</span>
+            <span className="system-xs-regular">{t('plugin.installModal.dropPluginToInstall')}</span>
           </div>
           {currentFile && (
             <InstallFromLocalPackage
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index 5c38a3a3ab..16389b2129 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -103,6 +103,7 @@ const translation = {
     readyToInstallPackage: 'About to install the following plugin',
     readyToInstallPackages: 'About to install the following {{num}} plugins',
     fromTrustSource: 'Please make sure that you only install plugins from a <trustSource>trusted source</trustSource>.',
+    dropPluginToInstall: 'Drop plugin package here to install',
     labels: {
       repository: 'Repository',
       version: 'Version',
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index f3c34a8219..2e9f234af6 100644
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@@ -103,6 +103,7 @@ const translation = {
     readyToInstallPackage: '即将安装以下插件',
     readyToInstallPackages: '即将安装以下 {{num}} 个插件',
     fromTrustSource: '请保证仅从<trustSource>可信源</trustSource>安装插件。',
+    dropPluginToInstall: '拖放插件包到此处安装',
     labels: {
       repository: '仓库',
       version: '版本',
diff --git a/web/service/plugins.ts b/web/service/plugins.ts
index 4782738be5..46a90b885c 100644
--- a/web/service/plugins.ts
+++ b/web/service/plugins.ts
@@ -54,17 +54,6 @@ export const uploadGitHub = async (repoUrl: string, selectedVersion: string, sel
   })
 }
 
-export const installPackageFromGitHub = async (repoUrl: string, selectedVersion: string, selectedPackage: string, uniqueIdentifier: string) => {
-  return post<InstallPackageResponse>('/workspaces/current/plugin/install/github', {
-    body: {
-      repo: repoUrl,
-      version: selectedVersion,
-      package: selectedPackage,
-      plugin_unique_identifier: uniqueIdentifier,
-    },
-  })
-}
-
 export const fetchIcon = (tenantId: string, fileName: string) => {
   return get(`workspaces/current/plugin/icon?tenant_id=${tenantId}&filename=${fileName}`)
 }
diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts
index c9f8058e8f..5de2b5f7fd 100644
--- a/web/service/use-plugins.ts
+++ b/web/service/use-plugins.ts
@@ -60,6 +60,26 @@ export const useInstallPackageFromLocal = () => {
   })
 }
 
+export const useInstallPackageFromGitHub = () => {
+  return useMutation({
+    mutationFn: ({ repoUrl, selectedVersion, selectedPackage, uniqueIdentifier }: {
+      repoUrl: string
+      selectedVersion: string
+      selectedPackage: string
+      uniqueIdentifier: string
+    }) => {
+      return post<InstallPackageResponse>('/workspaces/current/plugin/install/github', {
+        body: {
+          repo: repoUrl,
+          version: selectedVersion,
+          package: selectedPackage,
+          plugin_unique_identifier: uniqueIdentifier,
+        },
+      })
+    },
+  })
+}
+
 export const useDebugKey = () => {
   return useQuery({
     queryKey: [NAME_SPACE, 'debugKey'],