diff --git a/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx b/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx
index e4303882..4c896127 100644
--- a/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx
+++ b/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx
@@ -11,7 +11,14 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { Search, Loader2, Wrench, AudioWaveform, Hash } from 'lucide-react';
+import {
+  Search,
+  Loader2,
+  Wrench,
+  AudioWaveform,
+  Hash,
+  Book,
+} from 'lucide-react';
 import PluginMarketCardComponent from './plugin-market-card/PluginMarketCardComponent';
 import { PluginMarketCardVO } from './plugin-market-card/PluginMarketCardVO';
 import { getCloudServiceClientSync } from '@/app/infra/http';
@@ -377,14 +384,14 @@ function MarketPageContent({
               <ToggleGroupItem
                 value="all"
                 aria-label="All components"
-                className="text-xs sm:text-sm"
+                className="text-xs sm:text-sm cursor-pointer"
               >
                 {t('market.allComponents')}
               </ToggleGroupItem>
               <ToggleGroupItem
                 value="Tool"
                 aria-label="Tool"
-                className="text-xs sm:text-sm"
+                className="text-xs sm:text-sm cursor-pointer"
               >
                 <Wrench className="h-4 w-4 mr-1" />
                 {t('plugins.componentName.Tool')}
@@ -392,7 +399,7 @@ function MarketPageContent({
               <ToggleGroupItem
                 value="Command"
                 aria-label="Command"
-                className="text-xs sm:text-sm"
+                className="text-xs sm:text-sm cursor-pointer"
               >
                 <Hash className="h-4 w-4 mr-1" />
                 {t('plugins.componentName.Command')}
@@ -400,11 +407,19 @@ function MarketPageContent({
               <ToggleGroupItem
                 value="EventListener"
                 aria-label="EventListener"
-                className="text-xs sm:text-sm"
+                className="text-xs sm:text-sm cursor-pointer"
               >
                 <AudioWaveform className="h-4 w-4 mr-1" />
                 {t('plugins.componentName.EventListener')}
               </ToggleGroupItem>
+              <ToggleGroupItem
+                value="KnowledgeRetriever"
+                aria-label="KnowledgeRetriever"
+                className="text-xs sm:text-sm cursor-pointer"
+              >
+                <Book className="h-4 w-4 mr-1" />
+                {t('plugins.componentName.KnowledgeRetriever')}
+              </ToggleGroupItem>
             </ToggleGroup>
           </div>
 
diff --git a/web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx b/web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
index 20118493..7936e5d7 100644
--- a/web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
+++ b/web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx
@@ -7,6 +7,7 @@ import {
   Hash,
   Download,
   ExternalLink,
+  Book,
 } from 'lucide-react';
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
@@ -38,12 +39,14 @@ export default function PluginMarketCardComponent({
     Tool: <Wrench className="w-4 h-4" />,
     EventListener: <AudioWaveform className="w-4 h-4" />,
     Command: <Hash className="w-4 h-4" />,
+    KnowledgeRetriever: <Book className="w-4 h-4" />,
   };
 
   const componentKindNameMap: Record<string, string> = {
     Tool: t('plugins.componentName.Tool'),
     EventListener: t('plugins.componentName.EventListener'),
     Command: t('plugins.componentName.Command'),
+    KnowledgeRetriever: t('plugins.componentName.KnowledgeRetriever'),
   };
 
   return (