diff --git a/packages/server/marketplaces/chatflows/API Agent OpenAI.json b/packages/server/marketplaces/chatflows/API Agent OpenAI.json
index 87f6d6d2e9..621529fcf8 100644
--- a/packages/server/marketplaces/chatflows/API Agent OpenAI.json	
+++ b/packages/server/marketplaces/chatflows/API Agent OpenAI.json	
@@ -1,5 +1,7 @@
 {
     "description": "Use OpenAI Function Agent and Chain to automatically decide which API to call, generating url and body request from conversation",
+    "categories": "Buffer Memory,ChainTool,API Chain,ChatOpenAI,OpenAI Function Agent,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/API Agent.json b/packages/server/marketplaces/chatflows/API Agent.json
index af99be9d0b..9d5a6c5475 100644
--- a/packages/server/marketplaces/chatflows/API Agent.json	
+++ b/packages/server/marketplaces/chatflows/API Agent.json	
@@ -1,5 +1,7 @@
 {
     "description": "Given API docs, agent automatically decide which API to call, generating url and body request from conversation",
+    "categories": "Buffer Memory,ChainTool,API Chain,ChatOpenAI,Conversational Agent,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Antonym.json b/packages/server/marketplaces/chatflows/Antonym.json
index ef997feb56..97c5af7167 100644
--- a/packages/server/marketplaces/chatflows/Antonym.json
+++ b/packages/server/marketplaces/chatflows/Antonym.json
@@ -1,5 +1,7 @@
 {
     "description": "Output antonym of given user input using few-shot prompt template built with examples",
+    "categories": "Few Shot Prompt,ChatOpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/AutoGPT.json b/packages/server/marketplaces/chatflows/AutoGPT.json
index 4edbf8231e..c0ed08072b 100644
--- a/packages/server/marketplaces/chatflows/AutoGPT.json
+++ b/packages/server/marketplaces/chatflows/AutoGPT.json
@@ -1,5 +1,7 @@
 {
     "description": "Use AutoGPT - Autonomous agent with chain of thoughts for self-guided task completion",
+    "categories": "AutoGPT,SERP Tool,File Read/Write,ChatOpenAI,Pinecone,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/BabyAGI.json b/packages/server/marketplaces/chatflows/BabyAGI.json
index 3137d5117a..14976ad320 100644
--- a/packages/server/marketplaces/chatflows/BabyAGI.json
+++ b/packages/server/marketplaces/chatflows/BabyAGI.json
@@ -1,5 +1,7 @@
 {
     "description": "Use BabyAGI to create tasks and reprioritize for a given objective",
+    "categories": "BabyAGI,ChatOpenAI,Pinecone,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/CSV Agent.json b/packages/server/marketplaces/chatflows/CSV Agent.json
index e16377d278..3439625bee 100644
--- a/packages/server/marketplaces/chatflows/CSV Agent.json	
+++ b/packages/server/marketplaces/chatflows/CSV Agent.json	
@@ -1,5 +1,7 @@
 {
     "description": "Analyse and summarize CSV data",
+    "categories": "CSV Agent,ChatOpenAI,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Chat with a Podcast.json b/packages/server/marketplaces/chatflows/Chat with a Podcast.json
index f8d8d26c70..c87b3f2cad 100644
--- a/packages/server/marketplaces/chatflows/Chat with a Podcast.json	
+++ b/packages/server/marketplaces/chatflows/Chat with a Podcast.json	
@@ -1,5 +1,7 @@
 {
     "description": "Engage with data sources such as YouTube Transcripts, Google, and more through intelligent Q&A interactions",
+    "categories": "Memory Vector Store,SearchAPI,ChatOpenAI,Conversational Retrieval QA Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/ChatGPTPlugin.json b/packages/server/marketplaces/chatflows/ChatGPTPlugin.json
index 12bea993e1..3777b637ab 100644
--- a/packages/server/marketplaces/chatflows/ChatGPTPlugin.json
+++ b/packages/server/marketplaces/chatflows/ChatGPTPlugin.json
@@ -1,5 +1,7 @@
 {
     "description": "Use ChatGPT Plugins within LangChain abstractions with GET and POST Tools",
+    "categories": "ChatGPT Plugin,HTTP GET/POST,ChatOpenAI,MRKL Agent,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Claude LLM.json b/packages/server/marketplaces/chatflows/Claude LLM.json
index 7b32de48ad..a0fd4e1a90 100644
--- a/packages/server/marketplaces/chatflows/Claude LLM.json	
+++ b/packages/server/marketplaces/chatflows/Claude LLM.json	
@@ -1,5 +1,7 @@
 {
     "description": "Use Anthropic Claude with 200k context window to ingest whole document for QnA",
+    "categories": "Buffer Memory,Prompt Template,Conversation Chain,ChatAnthropic,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Context Chat Engine.json b/packages/server/marketplaces/chatflows/Context Chat Engine.json
index 475c6b3a57..15d3dade96 100644
--- a/packages/server/marketplaces/chatflows/Context Chat Engine.json	
+++ b/packages/server/marketplaces/chatflows/Context Chat Engine.json	
@@ -1,5 +1,7 @@
 {
     "description": "Answer question based on retrieved documents (context) with built-in memory to remember conversation using LlamaIndex",
+    "categories": "Text File,Prompt Template,ChatOpenAI,Conversation Chain,Pinecone,LlamaIndex,Redis",
+    "framework": "LlamaIndex",
     "badge": "NEW",
     "nodes": [
         {
diff --git a/packages/server/marketplaces/chatflows/Conversational Agent.json b/packages/server/marketplaces/chatflows/Conversational Agent.json
index 031a29c010..4cb736a0ef 100644
--- a/packages/server/marketplaces/chatflows/Conversational Agent.json	
+++ b/packages/server/marketplaces/chatflows/Conversational Agent.json	
@@ -1,5 +1,7 @@
 {
     "description": "A conversational agent for a chat model which utilize chat specific prompts",
+    "categories": "Calculator Tool,Buffer Memory,SerpAPI,ChatOpenAI,Conversational Agent,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Conversational Retrieval Agent.json b/packages/server/marketplaces/chatflows/Conversational Retrieval Agent.json
index 40c689f50e..a4ec6b5be4 100644
--- a/packages/server/marketplaces/chatflows/Conversational Retrieval Agent.json	
+++ b/packages/server/marketplaces/chatflows/Conversational Retrieval Agent.json	
@@ -1,6 +1,8 @@
 {
     "description": "Agent optimized for vector retrieval during conversation and answering questions based on previous dialogue.",
+    "categories": "Retriever Tool,Buffer Memory,ChatOpenAI,Conversational Retrieval Agent, Pinecone,Langchain",
     "badge": "POPULAR",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Conversational Retrieval QA Chain.json b/packages/server/marketplaces/chatflows/Conversational Retrieval QA Chain.json
index e73a9d28a0..e360141d5d 100644
--- a/packages/server/marketplaces/chatflows/Conversational Retrieval QA Chain.json	
+++ b/packages/server/marketplaces/chatflows/Conversational Retrieval QA Chain.json	
@@ -1,6 +1,8 @@
 {
     "description": "Text file QnA using conversational retrieval QA chain",
+    "categories": "TextFile,ChatOpenAI,Conversational Retrieval QA Chain,Pinecone,Langchain",
     "badge": "POPULAR",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Flowise Docs QnA.json b/packages/server/marketplaces/chatflows/Flowise Docs QnA.json
index 6975fc686a..31d65c4804 100644
--- a/packages/server/marketplaces/chatflows/Flowise Docs QnA.json	
+++ b/packages/server/marketplaces/chatflows/Flowise Docs QnA.json	
@@ -1,6 +1,8 @@
 {
     "description": "Flowise Docs Github QnA using conversational retrieval QA chain",
+    "categories": "Memory Vector Store,Github Loader,ChatOpenAI,Conversational Retrieval QA Chain,Langchain",
     "badge": "POPULAR",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/HuggingFace LLM Chain.json b/packages/server/marketplaces/chatflows/HuggingFace LLM Chain.json
index 930095741f..6e7154b785 100644
--- a/packages/server/marketplaces/chatflows/HuggingFace LLM Chain.json	
+++ b/packages/server/marketplaces/chatflows/HuggingFace LLM Chain.json	
@@ -1,5 +1,7 @@
 {
     "description": "Simple LLM Chain using HuggingFace Inference API on falcon-7b-instruct model",
+    "categories": "HuggingFace,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/IfElse.json b/packages/server/marketplaces/chatflows/IfElse.json
index f3fddebf4a..e3b66f4479 100644
--- a/packages/server/marketplaces/chatflows/IfElse.json
+++ b/packages/server/marketplaces/chatflows/IfElse.json
@@ -1,5 +1,7 @@
 {
     "description": "Split flows based on if else condition",
+    "categories": "IfElse Function,ChatOpenAI,OpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "badge": "new",
     "nodes": [
         {
diff --git a/packages/server/marketplaces/chatflows/Image Generation.json b/packages/server/marketplaces/chatflows/Image Generation.json
index 7dafcedf97..46cb79eccb 100644
--- a/packages/server/marketplaces/chatflows/Image Generation.json	
+++ b/packages/server/marketplaces/chatflows/Image Generation.json	
@@ -1,6 +1,8 @@
 {
     "description": "Generate image using Replicate Stability text-to-image generative AI model",
     "badge": "NEW",
+    "categories": "Replicate,ChatOpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Input Moderation.json b/packages/server/marketplaces/chatflows/Input Moderation.json
index ed823a21cb..bd44977775 100644
--- a/packages/server/marketplaces/chatflows/Input Moderation.json	
+++ b/packages/server/marketplaces/chatflows/Input Moderation.json	
@@ -1,6 +1,8 @@
 {
     "description": "Detect text that could generate harmful output and prevent it from being sent to the language model",
     "badge": "NEW",
+    "categories": "Moderation,ChatOpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/List Output Parser.json b/packages/server/marketplaces/chatflows/List Output Parser.json
index eaf56dff4c..0eb269b4a3 100644
--- a/packages/server/marketplaces/chatflows/List Output Parser.json	
+++ b/packages/server/marketplaces/chatflows/List Output Parser.json	
@@ -1,6 +1,8 @@
 {
     "description": "Return response as a list (array) instead of a string/text",
     "badge": "NEW",
+    "categories": "CSV Output Parser,ChatOpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Local QnA.json b/packages/server/marketplaces/chatflows/Local QnA.json
index 6f78cb0569..2637f259e4 100644
--- a/packages/server/marketplaces/chatflows/Local QnA.json	
+++ b/packages/server/marketplaces/chatflows/Local QnA.json	
@@ -1,6 +1,8 @@
 {
     "description": "QnA chain using Ollama local LLM, LocalAI embedding model, and Faiss local vector store",
     "badge": "POPULAR",
+    "categories": "Text File,ChatOllama,Conversational Retrieval QA Chain,Faiss,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Long Term Memory.json b/packages/server/marketplaces/chatflows/Long Term Memory.json
index 1b3e48e17e..c5681d3d56 100644
--- a/packages/server/marketplaces/chatflows/Long Term Memory.json	
+++ b/packages/server/marketplaces/chatflows/Long Term Memory.json	
@@ -1,5 +1,7 @@
 {
     "description": "Use long term memory like Zep to differentiate conversations between users with sessionId",
+    "categories": "ChatOpenAI,Conversational Retrieval QA Chain,Zep Memory,Qdrant,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Metadata Filter.json b/packages/server/marketplaces/chatflows/Metadata Filter.json
index ef92885420..38ad92111e 100644
--- a/packages/server/marketplaces/chatflows/Metadata Filter.json	
+++ b/packages/server/marketplaces/chatflows/Metadata Filter.json	
@@ -1,6 +1,8 @@
 {
     "description": "Upsert multiple files with metadata and filter by it using conversational retrieval QA chain",
+    "categories": "Text File,PDF File,ChatOpenAI,Conversational Retrieval QA Chain,Pinecone,Langchain",
     "badge": "POPULAR",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Multi Prompt Chain.json b/packages/server/marketplaces/chatflows/Multi Prompt Chain.json
index 314e24a6a2..97cca3081d 100644
--- a/packages/server/marketplaces/chatflows/Multi Prompt Chain.json	
+++ b/packages/server/marketplaces/chatflows/Multi Prompt Chain.json	
@@ -1,5 +1,7 @@
 {
     "description": "A chain that automatically picks an appropriate prompt from multiple prompts",
+    "categories": "ChatOpenAI,Multi Prompt Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Multi Retrieval QA Chain.json b/packages/server/marketplaces/chatflows/Multi Retrieval QA Chain.json
index 8c9e8537cf..6b8f2c33f9 100644
--- a/packages/server/marketplaces/chatflows/Multi Retrieval QA Chain.json	
+++ b/packages/server/marketplaces/chatflows/Multi Retrieval QA Chain.json	
@@ -1,5 +1,7 @@
 {
     "description": "A chain that automatically picks an appropriate retriever from multiple different vector databases",
+    "categories": "ChatOpenAI,Multi Retrieval QA Chain,Pinecone,Chroma,Supabase,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Multiple VectorDB.json b/packages/server/marketplaces/chatflows/Multiple VectorDB.json
index e5a16caa89..e8141ad7c0 100644
--- a/packages/server/marketplaces/chatflows/Multiple VectorDB.json	
+++ b/packages/server/marketplaces/chatflows/Multiple VectorDB.json	
@@ -1,5 +1,7 @@
 {
     "description": "Use the agent to choose between multiple different vector databases, with the ability to use other tools",
+    "categories": "Buffer Memory,ChatOpenAI,Chain Tool,Retrieval QA Chain,Redis,Faiss,Conversational Agent,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/OpenAI Agent.json b/packages/server/marketplaces/chatflows/OpenAI Agent.json
index e3e80dcc0a..6f35e5953f 100644
--- a/packages/server/marketplaces/chatflows/OpenAI Agent.json	
+++ b/packages/server/marketplaces/chatflows/OpenAI Agent.json	
@@ -1,5 +1,7 @@
 {
     "description": "An agent that uses OpenAI's Function Calling functionality to pick the tool and args to call",
+    "categories": "Buffer Memory,Custom Tool, SerpAPI,OpenAI Function,Calculator Tool,ChatOpenAI,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/OpenAI Assistant.json b/packages/server/marketplaces/chatflows/OpenAI Assistant.json
index e9311c9783..73c01413a4 100644
--- a/packages/server/marketplaces/chatflows/OpenAI Assistant.json	
+++ b/packages/server/marketplaces/chatflows/OpenAI Assistant.json	
@@ -1,5 +1,7 @@
 {
     "description": "OpenAI Assistant that has instructions and can leverage models, tools, and knowledge to respond to user queries",
+    "categories": "Custom Tool, SerpAPI,OpenAI Assistant,Calculator Tool,Langchain",
+    "framework": "Langchain",
     "badge": "NEW",
     "nodes": [
         {
diff --git a/packages/server/marketplaces/chatflows/Prompt Chaining with VectorStore.json b/packages/server/marketplaces/chatflows/Prompt Chaining with VectorStore.json
index c2060e79bf..d225e41a7f 100644
--- a/packages/server/marketplaces/chatflows/Prompt Chaining with VectorStore.json	
+++ b/packages/server/marketplaces/chatflows/Prompt Chaining with VectorStore.json	
@@ -1,6 +1,8 @@
 {
     "description": "Use chat history to rephrase user question, and answer the rephrased question using retrieved docs from vector store",
+    "categories": "ChatOpenAI,LLM Chain,SingleStore,Langchain",
     "badge": "POPULAR",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Prompt Chaining.json b/packages/server/marketplaces/chatflows/Prompt Chaining.json
index 267d8222df..42debac8e4 100644
--- a/packages/server/marketplaces/chatflows/Prompt Chaining.json	
+++ b/packages/server/marketplaces/chatflows/Prompt Chaining.json	
@@ -1,5 +1,7 @@
 {
     "description": "Use output from a chain as prompt for another chain",
+    "categories": "Custom Tool,OpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Query Engine.json b/packages/server/marketplaces/chatflows/Query Engine.json
index 825533339d..b3a3c2925a 100644
--- a/packages/server/marketplaces/chatflows/Query Engine.json	
+++ b/packages/server/marketplaces/chatflows/Query Engine.json	
@@ -1,6 +1,8 @@
 {
     "description": "Stateless query engine designed to answer question over your data using LlamaIndex",
+    "categories": "ChatAnthropic,Compact and Refine,Pinecone,LlamaIndex",
     "badge": "NEW",
+    "framework": "LlamaIndex",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/ReAct Agent.json b/packages/server/marketplaces/chatflows/ReAct Agent.json
index e4a7fab806..5fd191fe5f 100644
--- a/packages/server/marketplaces/chatflows/ReAct Agent.json	
+++ b/packages/server/marketplaces/chatflows/ReAct Agent.json	
@@ -1,5 +1,7 @@
 {
     "description": "An agent that uses ReAct logic to decide what action to take",
+    "categories": "Calculator Tool,SerpAPI,ChatOpenAI,MRKL Agent,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Replicate LLM.json b/packages/server/marketplaces/chatflows/Replicate LLM.json
index 832e85c7b2..578983cfb8 100644
--- a/packages/server/marketplaces/chatflows/Replicate LLM.json	
+++ b/packages/server/marketplaces/chatflows/Replicate LLM.json	
@@ -1,5 +1,7 @@
 {
     "description": "Use Replicate API that runs Llama 13b v2 model with LLMChain",
+    "categories": "Replicate,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/SQL DB Chain.json b/packages/server/marketplaces/chatflows/SQL DB Chain.json
index 92e421788a..ec9d465ddc 100644
--- a/packages/server/marketplaces/chatflows/SQL DB Chain.json	
+++ b/packages/server/marketplaces/chatflows/SQL DB Chain.json	
@@ -1,5 +1,7 @@
 {
     "description": "Answer questions over a SQL database",
+    "categories": "ChatOpenAI,Sql Database Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/SQL Prompt.json b/packages/server/marketplaces/chatflows/SQL Prompt.json
index 406c2e5249..8d2691c656 100644
--- a/packages/server/marketplaces/chatflows/SQL Prompt.json	
+++ b/packages/server/marketplaces/chatflows/SQL Prompt.json	
@@ -1,5 +1,7 @@
 {
     "description": "Manually construct prompts to query a SQL database",
+    "categories": "IfElse Function,Variable Set/Get,Custom JS Function,ChatOpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "badge": "new",
     "nodes": [
         {
diff --git a/packages/server/marketplaces/chatflows/Simple Chat Engine.json b/packages/server/marketplaces/chatflows/Simple Chat Engine.json
index 630b68335e..fd17ded16a 100644
--- a/packages/server/marketplaces/chatflows/Simple Chat Engine.json	
+++ b/packages/server/marketplaces/chatflows/Simple Chat Engine.json	
@@ -1,5 +1,7 @@
 {
     "description": "Simple chat engine to handle back and forth conversations using LlamaIndex",
+    "categories": "BufferMemory,AzureChatOpenAI,LlamaIndex",
+    "framework": "LlamaIndex",
     "badge": "NEW",
     "nodes": [
         {
diff --git a/packages/server/marketplaces/chatflows/Simple Conversation Chain.json b/packages/server/marketplaces/chatflows/Simple Conversation Chain.json
index 1ffbee4476..53cfeace83 100644
--- a/packages/server/marketplaces/chatflows/Simple Conversation Chain.json	
+++ b/packages/server/marketplaces/chatflows/Simple Conversation Chain.json	
@@ -1,5 +1,7 @@
 {
     "description": "Basic example of Conversation Chain with built-in memory - works exactly like ChatGPT",
+    "categories": "Buffer Memory,ChatOpenAI,Conversation Chain,Langchain",
+    "framework": "Langchain",
     "badge": "POPULAR",
     "nodes": [
         {
diff --git a/packages/server/marketplaces/chatflows/Simple LLM Chain.json b/packages/server/marketplaces/chatflows/Simple LLM Chain.json
index f2e3a4a226..36a5a8d84e 100644
--- a/packages/server/marketplaces/chatflows/Simple LLM Chain.json	
+++ b/packages/server/marketplaces/chatflows/Simple LLM Chain.json	
@@ -1,5 +1,7 @@
 {
     "description": "Basic example of stateless (no memory) LLM Chain with a Prompt Template and LLM Model",
+    "categories": "OpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Structured Output Parser.json b/packages/server/marketplaces/chatflows/Structured Output Parser.json
index 9233644326..9801a90f75 100644
--- a/packages/server/marketplaces/chatflows/Structured Output Parser.json	
+++ b/packages/server/marketplaces/chatflows/Structured Output Parser.json	
@@ -1,5 +1,7 @@
 {
     "description": "Return response as a specified JSON structure instead of a string/text",
+    "categories": "Structured Output Parser,ChatOpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "badge": "NEW",
     "nodes": [
         {
diff --git a/packages/server/marketplaces/chatflows/SubQuestion Query Engine.json b/packages/server/marketplaces/chatflows/SubQuestion Query Engine.json
index f14607daa3..620712c4da 100644
--- a/packages/server/marketplaces/chatflows/SubQuestion Query Engine.json	
+++ b/packages/server/marketplaces/chatflows/SubQuestion Query Engine.json	
@@ -1,5 +1,7 @@
 {
     "description": "Breaks down query into sub questions for each relevant data source, then combine into final response",
+    "categories": "Sub Question Query Engine,Sticky Note,QueryEngine Tool,Compact and Refine,ChatOpenAI,Pinecone,LlamaIndex",
+    "framework": "LlamaIndex",
     "badge": "NEW",
     "nodes": [
         {
diff --git a/packages/server/marketplaces/chatflows/Translator.json b/packages/server/marketplaces/chatflows/Translator.json
index 0bf4925259..5c8a3cc5e0 100644
--- a/packages/server/marketplaces/chatflows/Translator.json
+++ b/packages/server/marketplaces/chatflows/Translator.json
@@ -1,5 +1,7 @@
 {
     "description": "Language translation using LLM Chain with a Chat Prompt Template and Chat Model",
+    "categories": "Chat Prompt Template,ChatOpenAI,LLM Chain,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/Vectara RAG Chain.json b/packages/server/marketplaces/chatflows/Vectara RAG Chain.json
index d3bb5bf89c..2ef1474a58 100644
--- a/packages/server/marketplaces/chatflows/Vectara RAG Chain.json	
+++ b/packages/server/marketplaces/chatflows/Vectara RAG Chain.json	
@@ -1,4 +1,7 @@
 {
+    "description": "QA chain for Vectara",
+    "categories": "Vectara QA Chain,Vectara,Langchain",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/WebBrowser.json b/packages/server/marketplaces/chatflows/WebBrowser.json
index 2376e29e7a..232bd83e4f 100644
--- a/packages/server/marketplaces/chatflows/WebBrowser.json
+++ b/packages/server/marketplaces/chatflows/WebBrowser.json
@@ -1,5 +1,7 @@
 {
     "description": "Conversational Agent with ability to visit a website and extract information",
+    "categories": "Buffer Memory,Web Browser,ChatOpenAI,Conversational Agent",
+    "framework": "Langchain",
     "nodes": [
         {
             "width": 300,
diff --git a/packages/server/marketplaces/chatflows/WebPage QnA.json b/packages/server/marketplaces/chatflows/WebPage QnA.json
index a5a5323310..50806161e8 100644
--- a/packages/server/marketplaces/chatflows/WebPage QnA.json	
+++ b/packages/server/marketplaces/chatflows/WebPage QnA.json	
@@ -1,5 +1,7 @@
 {
     "description": "Scrape web pages for QnA with long term memory Motorhead and return source documents",
+    "categories": "HtmlToMarkdown,Cheerio Web Scraper,ChatOpenAI,Redis,Pinecone,Langchain",
+    "framework": "Langchain",
     "badge": "POPULAR",
     "nodes": [
         {
diff --git a/packages/server/marketplaces/tools/Add Hubspot Contact.json b/packages/server/marketplaces/tools/Add Hubspot Contact.json
index 584df4c334..f8715dcd66 100644
--- a/packages/server/marketplaces/tools/Add Hubspot Contact.json	
+++ b/packages/server/marketplaces/tools/Add Hubspot Contact.json	
@@ -1,5 +1,6 @@
 {
     "name": "add_contact_hubspot",
+    "framework": "Langchain",
     "description": "Add new contact to Hubspot",
     "color": "linear-gradient(rgb(85,198,123), rgb(0,230,99))",
     "iconSrc": "https://cdn.worldvectorlogo.com/logos/hubspot-1.svg",
diff --git a/packages/server/marketplaces/tools/Create Airtable Record.json b/packages/server/marketplaces/tools/Create Airtable Record.json
index c52c9199c5..5471b650da 100644
--- a/packages/server/marketplaces/tools/Create Airtable Record.json	
+++ b/packages/server/marketplaces/tools/Create Airtable Record.json	
@@ -1,5 +1,6 @@
 {
     "name": "add_airtable",
+    "framework": "Langchain",
     "description": "Add column1, column2 to Airtable",
     "color": "linear-gradient(rgb(125,71,222), rgb(128,102,23))",
     "iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/airtable.svg",
diff --git a/packages/server/marketplaces/tools/Get Current DateTime.json b/packages/server/marketplaces/tools/Get Current DateTime.json
index b6860b302d..b8279e334d 100644
--- a/packages/server/marketplaces/tools/Get Current DateTime.json	
+++ b/packages/server/marketplaces/tools/Get Current DateTime.json	
@@ -1,5 +1,6 @@
 {
     "name": "todays_date_time",
+    "framework": "Langchain",
     "description": "Useful to get todays day, date and time.",
     "color": "linear-gradient(rgb(117,118,129), rgb(230,10,250))",
     "iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/javascript.svg",
diff --git a/packages/server/marketplaces/tools/Get Stock Mover.json b/packages/server/marketplaces/tools/Get Stock Mover.json
index 9108cc5037..27d444b272 100644
--- a/packages/server/marketplaces/tools/Get Stock Mover.json	
+++ b/packages/server/marketplaces/tools/Get Stock Mover.json	
@@ -1,5 +1,6 @@
 {
     "name": "get_stock_movers",
+    "framework": "Langchain",
     "description": "Get the stocks that has biggest price/volume moves, e.g. actives, gainers, losers, etc.",
     "iconSrc": "https://rapidapi.com/cdn/images?url=https://rapidapi-prod-apis.s3.amazonaws.com/9c/e743343bdd41edad39a3fdffd5b974/016c33699f51603ae6fe4420c439124b.png",
     "color": "linear-gradient(rgb(191,202,167), rgb(143,202,246))",
diff --git a/packages/server/marketplaces/tools/Make Webhook.json b/packages/server/marketplaces/tools/Make Webhook.json
index 24d00900f4..93e67a3f95 100644
--- a/packages/server/marketplaces/tools/Make Webhook.json	
+++ b/packages/server/marketplaces/tools/Make Webhook.json	
@@ -1,5 +1,6 @@
 {
     "name": "make_webhook",
+    "framework": "Langchain",
     "description": "Useful when you need to send message to Discord",
     "color": "linear-gradient(rgb(19,94,2), rgb(19,124,59))",
     "iconSrc": "https://github.com/FlowiseAI/Flowise/assets/26460777/517fdab2-8a6e-4781-b3c8-fb92cc78aa0b",
diff --git a/packages/server/marketplaces/tools/Send Discord Message.json b/packages/server/marketplaces/tools/Send Discord Message.json
index bbfaaa9053..2d7adcac42 100644
--- a/packages/server/marketplaces/tools/Send Discord Message.json	
+++ b/packages/server/marketplaces/tools/Send Discord Message.json	
@@ -1,5 +1,6 @@
 {
     "name": "send_message_to_discord_channel",
+    "framework": "Langchain",
     "description": "Send message to Discord channel",
     "color": "linear-gradient(rgb(155,190,84), rgb(176,69,245))",
     "iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/discord-icon.svg",
diff --git a/packages/server/marketplaces/tools/Send Slack Message.json b/packages/server/marketplaces/tools/Send Slack Message.json
index f15d40505c..5516b69af5 100644
--- a/packages/server/marketplaces/tools/Send Slack Message.json	
+++ b/packages/server/marketplaces/tools/Send Slack Message.json	
@@ -1,5 +1,6 @@
 {
     "name": "send_message_to_slack_channel",
+    "framework": "Langchain",
     "description": "Send message to Slack channel",
     "color": "linear-gradient(rgb(155,190,84), rgb(176,69,245))",
     "iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/slack-icon.svg",
diff --git a/packages/server/marketplaces/tools/Send Teams Message.json b/packages/server/marketplaces/tools/Send Teams Message.json
index 1af8111b58..8ec32abdb6 100644
--- a/packages/server/marketplaces/tools/Send Teams Message.json	
+++ b/packages/server/marketplaces/tools/Send Teams Message.json	
@@ -1,5 +1,6 @@
 {
     "name": "send_message_to_teams_channel",
+    "framework": "Langchain",
     "description": "Send message to Teams channel",
     "color": "linear-gradient(rgb(155,190,84), rgb(176,69,245))",
     "iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/microsoft-teams.svg",
diff --git a/packages/server/marketplaces/tools/SendGrid Email.json b/packages/server/marketplaces/tools/SendGrid Email.json
index 8a6bf99302..b454f2c58c 100644
--- a/packages/server/marketplaces/tools/SendGrid Email.json	
+++ b/packages/server/marketplaces/tools/SendGrid Email.json	
@@ -1,5 +1,6 @@
 {
     "name": "sendgrid_email",
+    "framework": "Langchain",
     "description": "Send email using SendGrid",
     "color": "linear-gradient(rgb(230,108,70), rgb(222,4,98))",
     "iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/sendgrid-icon.svg",
diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
index dbb5717df5..86595dc101 100644
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -1223,38 +1223,30 @@ export class App {
         // Marketplaces
         // ----------------------------------------
 
-        // Get all chatflows for marketplaces
-        this.app.get('/api/v1/marketplaces/chatflows', async (req: Request, res: Response) => {
-            const marketplaceDir = path.join(__dirname, '..', 'marketplaces', 'chatflows')
-            const jsonsInDir = fs.readdirSync(marketplaceDir).filter((file) => path.extname(file) === '.json')
-            const templates: any[] = []
+        // Get all templates for marketplaces
+        this.app.get('/api/v1/marketplaces/templates', async (req: Request, res: Response) => {
+            let marketplaceDir = path.join(__dirname, '..', 'marketplaces', 'chatflows')
+            let jsonsInDir = fs.readdirSync(marketplaceDir).filter((file) => path.extname(file) === '.json')
+            let templates: any[] = []
             jsonsInDir.forEach((file, index) => {
                 const filePath = path.join(__dirname, '..', 'marketplaces', 'chatflows', file)
                 const fileData = fs.readFileSync(filePath)
                 const fileDataObj = JSON.parse(fileData.toString())
                 const template = {
                     id: index,
-                    name: file.split('.json')[0],
+                    templateName: file.split('.json')[0],
                     flowData: fileData.toString(),
                     badge: fileDataObj?.badge,
+                    framework: fileDataObj?.framework,
+                    categories: fileDataObj?.categories,
+                    type: 'Chatflow',
                     description: fileDataObj?.description || ''
                 }
                 templates.push(template)
             })
-            const FlowiseDocsQnA = templates.find((tmp) => tmp.name === 'Flowise Docs QnA')
-            const FlowiseDocsQnAIndex = templates.findIndex((tmp) => tmp.name === 'Flowise Docs QnA')
-            if (FlowiseDocsQnA && FlowiseDocsQnAIndex > 0) {
-                templates.splice(FlowiseDocsQnAIndex, 1)
-                templates.unshift(FlowiseDocsQnA)
-            }
-            return res.json(templates)
-        })
 
-        // Get all tools for marketplaces
-        this.app.get('/api/v1/marketplaces/tools', async (req: Request, res: Response) => {
-            const marketplaceDir = path.join(__dirname, '..', 'marketplaces', 'tools')
-            const jsonsInDir = fs.readdirSync(marketplaceDir).filter((file) => path.extname(file) === '.json')
-            const templates: any[] = []
+            marketplaceDir = path.join(__dirname, '..', 'marketplaces', 'tools')
+            jsonsInDir = fs.readdirSync(marketplaceDir).filter((file) => path.extname(file) === '.json')
             jsonsInDir.forEach((file, index) => {
                 const filePath = path.join(__dirname, '..', 'marketplaces', 'tools', file)
                 const fileData = fs.readFileSync(filePath)
@@ -1262,11 +1254,21 @@ export class App {
                 const template = {
                     ...fileDataObj,
                     id: index,
+                    type: 'Tool',
+                    framework: fileDataObj?.framework,
+                    badge: fileDataObj?.badge,
+                    categories: '',
                     templateName: file.split('.json')[0]
                 }
                 templates.push(template)
             })
-            return res.json(templates)
+            const FlowiseDocsQnA = templates.find((tmp) => tmp.name === 'Flowise Docs QnA')
+            const FlowiseDocsQnAIndex = templates.findIndex((tmp) => tmp.name === 'Flowise Docs QnA')
+            if (FlowiseDocsQnA && FlowiseDocsQnAIndex > 0) {
+                templates.splice(FlowiseDocsQnAIndex, 1)
+                templates.unshift(FlowiseDocsQnA)
+            }
+            return res.json(templates.sort((a, b) => a.templateName.localeCompare(b.templateName)))
         })
 
         // ----------------------------------------
diff --git a/packages/ui/craco.config.js b/packages/ui/craco.config.js
index 142305e01b..093e5ecea9 100644
--- a/packages/ui/craco.config.js
+++ b/packages/ui/craco.config.js
@@ -10,7 +10,8 @@ module.exports = {
                         }
                     }
                 ]
-            }
+            },
+            ignoreWarnings: [/Failed to parse source map/] // Ignore warnings about source maps
         }
     }
 }
diff --git a/packages/ui/src/api/marketplaces.js b/packages/ui/src/api/marketplaces.js
index 3fd4ae8720..bba914a70c 100644
--- a/packages/ui/src/api/marketplaces.js
+++ b/packages/ui/src/api/marketplaces.js
@@ -2,8 +2,10 @@ import client from './client'
 
 const getAllChatflowsMarketplaces = () => client.get('/marketplaces/chatflows')
 const getAllToolsMarketplaces = () => client.get('/marketplaces/tools')
+const getAllTemplatesFromMarketplaces = () => client.get('/marketplaces/templates')
 
 export default {
     getAllChatflowsMarketplaces,
-    getAllToolsMarketplaces
+    getAllToolsMarketplaces,
+    getAllTemplatesFromMarketplaces
 }
diff --git a/packages/ui/src/ui-component/table/MarketplaceTable.js b/packages/ui/src/ui-component/table/MarketplaceTable.js
new file mode 100644
index 0000000000..3b66409bf9
--- /dev/null
+++ b/packages/ui/src/ui-component/table/MarketplaceTable.js
@@ -0,0 +1,146 @@
+import PropTypes from 'prop-types'
+import { styled } from '@mui/material/styles'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell, { tableCellClasses } from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Paper from '@mui/material/Paper'
+import Chip from '@mui/material/Chip'
+import { Button, Typography } from '@mui/material'
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+    [`&.${tableCellClasses.head}`]: {
+        backgroundColor: theme.palette.common.black,
+        color: theme.palette.common.white
+    },
+    [`&.${tableCellClasses.body}`]: {
+        fontSize: 14
+    }
+}))
+
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+    '&:nth-of-type(odd)': {
+        backgroundColor: theme.palette.action.hover
+    },
+    // hide last border
+    '&:last-child td, &:last-child th': {
+        border: 0
+    }
+}))
+
+export const MarketplaceTable = ({ data, filterFunction, filterByBadge, filterByType, filterByFramework, goToCanvas, goToTool }) => {
+    const openTemplate = (selectedTemplate) => {
+        if (selectedTemplate.flowData) {
+            goToCanvas(selectedTemplate)
+        } else {
+            goToTool(selectedTemplate)
+        }
+    }
+
+    return (
+        <>
+            <TableContainer style={{ marginTop: '30', border: 1 }} component={Paper}>
+                <Table sx={{ minWidth: 650 }} size='small' aria-label='a dense table'>
+                    <TableHead>
+                        <TableRow sx={{ marginTop: '10', backgroundColor: 'primary' }}>
+                            <StyledTableCell component='th' scope='row' style={{ width: '15%' }} key='0'>
+                                Name
+                            </StyledTableCell>
+                            <StyledTableCell component='th' scope='row' style={{ width: '5%' }} key='1'>
+                                Type
+                            </StyledTableCell>
+                            <StyledTableCell style={{ width: '35%' }} key='2'>
+                                Description
+                            </StyledTableCell>
+                            <StyledTableCell style={{ width: '35%' }} key='3'>
+                                Nodes
+                            </StyledTableCell>
+                            <StyledTableCell component='th' scope='row' style={{ width: '5%' }} key='4'>
+                                &nbsp;
+                            </StyledTableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {data
+                            .filter(filterByBadge)
+                            .filter(filterByType)
+                            .filter(filterFunction)
+                            .filter(filterByFramework)
+                            .map((row, index) => (
+                                <StyledTableRow key={index}>
+                                    <TableCell key='0'>
+                                        <Typography
+                                            sx={{ fontSize: '1.2rem', fontWeight: 500, overflowWrap: 'break-word', whiteSpace: 'pre-line' }}
+                                        >
+                                            <Button onClick={() => openTemplate(row)} sx={{ textAlign: 'left' }}>
+                                                {row.templateName || row.name}
+                                            </Button>
+                                        </Typography>
+                                    </TableCell>
+                                    <TableCell key='1'>
+                                        <Typography>{row.type}</Typography>
+                                    </TableCell>
+                                    <TableCell key='2'>
+                                        <Typography sx={{ overflowWrap: 'break-word', whiteSpace: 'pre-line' }}>
+                                            {row.description || ''}
+                                        </Typography>
+                                    </TableCell>
+                                    <TableCell key='3'>
+                                        <div
+                                            style={{
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                flexWrap: 'wrap',
+                                                marginTop: 5
+                                            }}
+                                        >
+                                            {row.categories &&
+                                                row.categories
+                                                    .split(',')
+                                                    .map((tag, index) => (
+                                                        <Chip
+                                                            variant='outlined'
+                                                            key={index}
+                                                            size='small'
+                                                            label={tag.toUpperCase()}
+                                                            style={{ marginRight: 3, marginBottom: 3 }}
+                                                        />
+                                                    ))}
+                                        </div>
+                                    </TableCell>
+                                    <TableCell key='4'>
+                                        <Typography>
+                                            {row.badge &&
+                                                row.badge
+                                                    .split(';')
+                                                    .map((tag, index) => (
+                                                        <Chip
+                                                            color={tag === 'POPULAR' ? 'primary' : 'error'}
+                                                            key={index}
+                                                            size='small'
+                                                            label={tag.toUpperCase()}
+                                                            style={{ marginRight: 5, marginBottom: 5 }}
+                                                        />
+                                                    ))}
+                                        </Typography>
+                                    </TableCell>
+                                </StyledTableRow>
+                            ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+        </>
+    )
+}
+
+MarketplaceTable.propTypes = {
+    data: PropTypes.array,
+    filterFunction: PropTypes.func,
+    filterByBadge: PropTypes.func,
+    filterByType: PropTypes.func,
+    filterByFramework: PropTypes.func,
+    goToTool: PropTypes.func,
+    goToCanvas: PropTypes.func
+}
diff --git a/packages/ui/src/views/marketplaces/index.js b/packages/ui/src/views/marketplaces/index.js
index 665341c455..e5a65cb9c7 100644
--- a/packages/ui/src/views/marketplaces/index.js
+++ b/packages/ui/src/views/marketplaces/index.js
@@ -4,9 +4,26 @@ import { useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 
 // material-ui
-import { Grid, Box, Stack, Tabs, Tab, Badge } from '@mui/material'
+import {
+    Grid,
+    Box,
+    Stack,
+    Badge,
+    Toolbar,
+    TextField,
+    InputAdornment,
+    ButtonGroup,
+    ToggleButton,
+    InputLabel,
+    FormControl,
+    Select,
+    OutlinedInput,
+    Checkbox,
+    ListItemText,
+    Button
+} from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { IconHierarchy, IconTool } from '@tabler/icons'
+import { IconChevronsDown, IconChevronsUp, IconLayoutGrid, IconList, IconSearch } from '@tabler/icons'
 
 // project imports
 import MainCard from 'ui-component/cards/MainCard'
@@ -23,6 +40,10 @@ import useApi from 'hooks/useApi'
 
 // const
 import { baseURL } from 'store/constant'
+import * as React from 'react'
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
+import { MarketplaceTable } from '../../ui-component/table/MarketplaceTable'
+import MenuItem from '@mui/material/MenuItem'
 
 function TabPanel(props) {
     const { children, value, index, ...other } = props
@@ -45,6 +66,19 @@ TabPanel.propTypes = {
     value: PropTypes.number.isRequired
 }
 
+const ITEM_HEIGHT = 48
+const ITEM_PADDING_TOP = 8
+const badges = ['POPULAR', 'NEW']
+const types = ['Chatflow', 'Tool']
+const framework = ['Langchain', 'LlamaIndex']
+const MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+            width: 250
+        }
+    }
+}
 // ==============================|| Marketplace ||============================== //
 
 const Marketplace = () => {
@@ -53,16 +87,77 @@ const Marketplace = () => {
     const theme = useTheme()
     const customization = useSelector((state) => state.customization)
 
-    const [isChatflowsLoading, setChatflowsLoading] = useState(true)
-    const [isToolsLoading, setToolsLoading] = useState(true)
+    const [isLoading, setLoading] = useState(true)
     const [images, setImages] = useState({})
-    const tabItems = ['Chatflows', 'Tools']
-    const [value, setValue] = useState(0)
+
     const [showToolDialog, setShowToolDialog] = useState(false)
     const [toolDialogProps, setToolDialogProps] = useState({})
 
-    const getAllChatflowsMarketplacesApi = useApi(marketplacesApi.getAllChatflowsMarketplaces)
-    const getAllToolsMarketplacesApi = useApi(marketplacesApi.getAllToolsMarketplaces)
+    const getAllTemplatesMarketplacesApi = useApi(marketplacesApi.getAllTemplatesFromMarketplaces)
+
+    const [view, setView] = React.useState(localStorage.getItem('mpDisplayStyle') || 'card')
+    const [search, setSearch] = useState('')
+
+    const [badgeFilter, setBadgeFilter] = useState([])
+    const [typeFilter, setTypeFilter] = useState([])
+    const [frameworkFilter, setFrameworkFilter] = useState([])
+    const [open, setOpen] = useState(false)
+    const handleBadgeFilterChange = (event) => {
+        const {
+            target: { value }
+        } = event
+        setBadgeFilter(
+            // On autofill we get a stringified value.
+            typeof value === 'string' ? value.split(',') : value
+        )
+    }
+    const handleTypeFilterChange = (event) => {
+        const {
+            target: { value }
+        } = event
+        setTypeFilter(
+            // On autofill we get a stringified value.
+            typeof value === 'string' ? value.split(',') : value
+        )
+    }
+    const handleFrameworkFilterChange = (event) => {
+        const {
+            target: { value }
+        } = event
+        setFrameworkFilter(
+            // On autofill we get a stringified value.
+            typeof value === 'string' ? value.split(',') : value
+        )
+    }
+
+    const handleViewChange = (event, nextView) => {
+        localStorage.setItem('mpDisplayStyle', nextView)
+        setView(nextView)
+    }
+
+    const onSearchChange = (event) => {
+        setSearch(event.target.value)
+    }
+
+    function filterFlows(data) {
+        return (
+            data.categories?.toLowerCase().indexOf(search.toLowerCase()) > -1 ||
+            data.templateName.toLowerCase().indexOf(search.toLowerCase()) > -1 ||
+            (data.description && data.description.toLowerCase().indexOf(search.toLowerCase()) > -1)
+        )
+    }
+
+    function filterByBadge(data) {
+        return badgeFilter.length > 0 ? badgeFilter.includes(data.badge) : true
+    }
+
+    function filterByType(data) {
+        return typeFilter.length > 0 ? typeFilter.includes(data.type) : true
+    }
+
+    function filterByFramework(data) {
+        return frameworkFilter.length > 0 ? frameworkFilter.includes(data.framework) : true
+    }
 
     const onUseTemplate = (selectedTool) => {
         const dialogProp = {
@@ -90,39 +185,33 @@ const Marketplace = () => {
         navigate(`/marketplace/${selectedChatflow.id}`, { state: selectedChatflow })
     }
 
-    const handleChange = (event, newValue) => {
-        setValue(newValue)
-    }
-
     useEffect(() => {
-        getAllChatflowsMarketplacesApi.request()
-        getAllToolsMarketplacesApi.request()
+        getAllTemplatesMarketplacesApi.request()
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
     useEffect(() => {
-        setChatflowsLoading(getAllChatflowsMarketplacesApi.loading)
-    }, [getAllChatflowsMarketplacesApi.loading])
-
-    useEffect(() => {
-        setToolsLoading(getAllToolsMarketplacesApi.loading)
-    }, [getAllToolsMarketplacesApi.loading])
+        setLoading(getAllTemplatesMarketplacesApi.loading)
+    }, [getAllTemplatesMarketplacesApi.loading])
 
     useEffect(() => {
-        if (getAllChatflowsMarketplacesApi.data) {
+        if (getAllTemplatesMarketplacesApi.data) {
             try {
-                const chatflows = getAllChatflowsMarketplacesApi.data
+                const flows = getAllTemplatesMarketplacesApi.data
+
                 const images = {}
-                for (let i = 0; i < chatflows.length; i += 1) {
-                    const flowDataStr = chatflows[i].flowData
-                    const flowData = JSON.parse(flowDataStr)
-                    const nodes = flowData.nodes || []
-                    images[chatflows[i].id] = []
-                    for (let j = 0; j < nodes.length; j += 1) {
-                        const imageSrc = `${baseURL}/api/v1/node-icon/${nodes[j].data.name}`
-                        if (!images[chatflows[i].id].includes(imageSrc)) {
-                            images[chatflows[i].id].push(imageSrc)
+                for (let i = 0; i < flows.length; i += 1) {
+                    if (flows[i].flowData) {
+                        const flowDataStr = flows[i].flowData
+                        const flowData = JSON.parse(flowDataStr)
+                        const nodes = flowData.nodes || []
+                        images[flows[i].id] = []
+                        for (let j = 0; j < nodes.length; j += 1) {
+                            const imageSrc = `${baseURL}/api/v1/node-icon/${nodes[j].data.name}`
+                            if (!images[flows[i].id].includes(imageSrc)) {
+                                images[flows[i].id].push(imageSrc)
+                            }
                         }
                     }
                 }
@@ -131,80 +220,215 @@ const Marketplace = () => {
                 console.error(e)
             }
         }
-    }, [getAllChatflowsMarketplacesApi.data])
+    }, [getAllTemplatesMarketplacesApi.data])
 
     return (
         <>
             <MainCard sx={{ background: customization.isDarkMode ? theme.palette.common.black : '' }}>
-                <Stack flexDirection='row'>
-                    <h1>Marketplace</h1>
-                </Stack>
-                <Tabs sx={{ mb: 2 }} variant='fullWidth' value={value} onChange={handleChange} aria-label='tabs'>
-                    {tabItems.map((item, index) => (
-                        <Tab
-                            key={index}
-                            icon={index === 0 ? <IconHierarchy /> : <IconTool />}
-                            iconPosition='start'
-                            label={<span style={{ fontSize: '1.1rem' }}>{item}</span>}
+                <Box sx={{ flexGrow: 1 }}>
+                    <Toolbar
+                        disableGutters={true}
+                        style={{
+                            margin: 1,
+                            padding: 1,
+                            paddingBottom: 10,
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            width: '100%'
+                        }}
+                    >
+                        <h1>Marketplace</h1>
+                        <TextField
+                            size='small'
+                            id='search-filter-textbox'
+                            sx={{ display: { xs: 'none', sm: 'block' }, ml: 3 }}
+                            variant='outlined'
+                            fullWidth='true'
+                            placeholder='Search name or description or node name'
+                            onChange={onSearchChange}
+                            InputProps={{
+                                startAdornment: (
+                                    <InputAdornment position='start'>
+                                        <IconSearch />
+                                    </InputAdornment>
+                                )
+                            }}
                         />
-                    ))}
-                </Tabs>
-                {tabItems.map((item, index) => (
-                    <TabPanel key={index} value={value} index={index}>
-                        {item === 'Chatflows' && (
-                            <Grid container spacing={gridSpacing}>
-                                {!isChatflowsLoading &&
-                                    getAllChatflowsMarketplacesApi.data &&
-                                    getAllChatflowsMarketplacesApi.data.map((data, index) => (
-                                        <Grid key={index} item lg={3} md={4} sm={6} xs={12}>
-                                            {data.badge && (
-                                                <Badge
-                                                    sx={{
-                                                        '& .MuiBadge-badge': {
-                                                            right: 20
-                                                        }
-                                                    }}
-                                                    badgeContent={data.badge}
-                                                    color={data.badge === 'POPULAR' ? 'primary' : 'error'}
-                                                >
-                                                    <ItemCard onClick={() => goToCanvas(data)} data={data} images={images[data.id]} />
-                                                </Badge>
-                                            )}
-                                            {!data.badge && (
-                                                <ItemCard onClick={() => goToCanvas(data)} data={data} images={images[data.id]} />
-                                            )}
-                                        </Grid>
+                        <Button
+                            sx={{ width: '220px', ml: 3, mr: 5 }}
+                            variant='outlined'
+                            onClick={() => setOpen(!open)}
+                            startIcon={open ? <IconChevronsUp /> : <IconChevronsDown />}
+                        >
+                            {open ? 'Hide Filters' : 'Show Filters'}
+                        </Button>
+                        <Box sx={{ flexGrow: 1 }} />
+                        <ButtonGroup sx={{ maxHeight: 40 }} disableElevation variant='contained' aria-label='outlined primary button group'>
+                            <ButtonGroup disableElevation variant='contained' aria-label='outlined primary button group'>
+                                <ToggleButtonGroup
+                                    sx={{ maxHeight: 40 }}
+                                    value={view}
+                                    color='primary'
+                                    exclusive
+                                    onChange={handleViewChange}
+                                >
+                                    <ToggleButton
+                                        sx={{ color: theme?.customization?.isDarkMode ? 'white' : 'inherit' }}
+                                        variant='contained'
+                                        value='card'
+                                        title='Card View'
+                                    >
+                                        <IconLayoutGrid />
+                                    </ToggleButton>
+                                    <ToggleButton
+                                        sx={{ color: theme?.customization?.isDarkMode ? 'white' : 'inherit' }}
+                                        variant='contained'
+                                        value='list'
+                                        title='List View'
+                                    >
+                                        <IconList />
+                                    </ToggleButton>
+                                </ToggleButtonGroup>
+                            </ButtonGroup>
+                        </ButtonGroup>
+                    </Toolbar>
+                </Box>
+                {open && (
+                    <Box sx={{ flexGrow: 1, mb: 2 }}>
+                        <Toolbar
+                            disableGutters={true}
+                            style={{
+                                margin: 1,
+                                padding: 1,
+                                paddingBottom: 10,
+                                display: 'flex',
+                                justifyContent: 'flex-start',
+                                width: '100%',
+                                borderBottom: '1px solid'
+                            }}
+                        >
+                            <FormControl sx={{ m: 1, width: 250 }}>
+                                <InputLabel size='small' id='filter-badge-label'>
+                                    Tag
+                                </InputLabel>
+                                <Select
+                                    labelId='filter-badge-label'
+                                    id='filter-badge-checkbox'
+                                    size='small'
+                                    multiple
+                                    value={badgeFilter}
+                                    onChange={handleBadgeFilterChange}
+                                    input={<OutlinedInput label='Badge' />}
+                                    renderValue={(selected) => selected.join(', ')}
+                                    MenuProps={MenuProps}
+                                >
+                                    {badges.map((name) => (
+                                        <MenuItem key={name} value={name}>
+                                            <Checkbox checked={badgeFilter.indexOf(name) > -1} />
+                                            <ListItemText primary={name} />
+                                        </MenuItem>
+                                    ))}
+                                </Select>
+                            </FormControl>
+                            <FormControl sx={{ m: 1, width: 250 }}>
+                                <InputLabel size='small' id='type-badge-label'>
+                                    Type
+                                </InputLabel>
+                                <Select
+                                    size='small'
+                                    labelId='type-badge-label'
+                                    id='type-badge-checkbox'
+                                    multiple
+                                    value={typeFilter}
+                                    onChange={handleTypeFilterChange}
+                                    input={<OutlinedInput label='Badge' />}
+                                    renderValue={(selected) => selected.join(', ')}
+                                    MenuProps={MenuProps}
+                                >
+                                    {types.map((name) => (
+                                        <MenuItem key={name} value={name}>
+                                            <Checkbox checked={typeFilter.indexOf(name) > -1} />
+                                            <ListItemText primary={name} />
+                                        </MenuItem>
                                     ))}
-                            </Grid>
-                        )}
-                        {item === 'Tools' && (
-                            <Grid container spacing={gridSpacing}>
-                                {!isToolsLoading &&
-                                    getAllToolsMarketplacesApi.data &&
-                                    getAllToolsMarketplacesApi.data.map((data, index) => (
-                                        <Grid key={index} item lg={3} md={4} sm={6} xs={12}>
-                                            {data.badge && (
-                                                <Badge
-                                                    sx={{
-                                                        '& .MuiBadge-badge': {
-                                                            right: 20
-                                                        }
-                                                    }}
-                                                    badgeContent={data.badge}
-                                                    color={data.badge === 'POPULAR' ? 'primary' : 'error'}
-                                                >
-                                                    <ItemCard data={data} onClick={() => goToTool(data)} />
-                                                </Badge>
-                                            )}
-                                            {!data.badge && <ItemCard data={data} onClick={() => goToTool(data)} />}
-                                        </Grid>
+                                </Select>
+                            </FormControl>
+                            <FormControl sx={{ m: 1, width: 250 }}>
+                                <InputLabel size='small' id='type-fw-label'>
+                                    Framework
+                                </InputLabel>
+                                <Select
+                                    size='small'
+                                    labelId='type-fw-label'
+                                    id='type-fw-checkbox'
+                                    multiple
+                                    value={frameworkFilter}
+                                    onChange={handleFrameworkFilterChange}
+                                    input={<OutlinedInput label='Badge' />}
+                                    renderValue={(selected) => selected.join(', ')}
+                                    MenuProps={MenuProps}
+                                >
+                                    {framework.map((name) => (
+                                        <MenuItem key={name} value={name}>
+                                            <Checkbox checked={frameworkFilter.indexOf(name) > -1} />
+                                            <ListItemText primary={name} />
+                                        </MenuItem>
                                     ))}
-                            </Grid>
-                        )}
-                    </TabPanel>
-                ))}
-                {((!isChatflowsLoading && (!getAllChatflowsMarketplacesApi.data || getAllChatflowsMarketplacesApi.data.length === 0)) ||
-                    (!isToolsLoading && (!getAllToolsMarketplacesApi.data || getAllToolsMarketplacesApi.data.length === 0))) && (
+                                </Select>
+                            </FormControl>
+                        </Toolbar>
+                    </Box>
+                )}
+
+                {!isLoading && (!view || view === 'card') && getAllTemplatesMarketplacesApi.data && (
+                    <>
+                        <Grid container spacing={gridSpacing}>
+                            {getAllTemplatesMarketplacesApi.data
+                                .filter(filterByBadge)
+                                .filter(filterByType)
+                                .filter(filterFlows)
+                                .filter(filterByFramework)
+                                .map((data, index) => (
+                                    <Grid key={index} item lg={3} md={4} sm={6} xs={12}>
+                                        {data.badge && (
+                                            <Badge
+                                                sx={{
+                                                    '& .MuiBadge-badge': {
+                                                        right: 20
+                                                    }
+                                                }}
+                                                badgeContent={data.badge}
+                                                color={data.badge === 'POPULAR' ? 'primary' : 'error'}
+                                            >
+                                                {data.type === 'Chatflow' && (
+                                                    <ItemCard onClick={() => goToCanvas(data)} data={data} images={images[data.id]} />
+                                                )}
+                                                {data.type === 'Tool' && <ItemCard data={data} onClick={() => goToTool(data)} />}
+                                            </Badge>
+                                        )}
+                                        {!data.badge && data.type === 'Chatflow' && (
+                                            <ItemCard onClick={() => goToCanvas(data)} data={data} images={images[data.id]} />
+                                        )}
+                                        {!data.badge && data.type === 'Tool' && <ItemCard data={data} onClick={() => goToTool(data)} />}
+                                    </Grid>
+                                ))}
+                        </Grid>
+                    </>
+                )}
+                {!isLoading && view === 'list' && getAllTemplatesMarketplacesApi.data && (
+                    <MarketplaceTable
+                        sx={{ mt: 20 }}
+                        data={getAllTemplatesMarketplacesApi.data}
+                        filterFunction={filterFlows}
+                        filterByType={filterByType}
+                        filterByBadge={filterByBadge}
+                        filterByFramework={filterByFramework}
+                        goToTool={goToTool}
+                        goToCanvas={goToCanvas}
+                    />
+                )}
+
+                {!isLoading && (!getAllTemplatesMarketplacesApi.data || getAllTemplatesMarketplacesApi.data.length === 0) && (
                     <Stack sx={{ alignItems: 'center', justifyContent: 'center' }} flexDirection='column'>
                         <Box sx={{ p: 2, height: 'auto' }}>
                             <img