diff --git a/fern/components/cookbooks.tsx b/fern/components/cookbooks.tsx
new file mode 100644
index 000000000..71f298ef7
--- /dev/null
+++ b/fern/components/cookbooks.tsx
@@ -0,0 +1,368 @@
+import React, { useState, useEffect } from 'react';
+
+interface TagCategories {
+  useCases: string[];
+  endpoints: string[];
+  techStack: string[];
+}
+
+const ALL_TAGS: TagCategories = {
+  useCases: [
+    'RAG', 'Agents', 'Search', 'Embeddings', 'Tool Use', 
+    'Reranking', 'Fine-tuning', 'Summarization', 'Classification',
+    'Text Generation', 'Multi-step', 'Semantic Search'
+  ],
+  endpoints: ['Chat', 'Embed', 'Rerank', 'Finetuning'],
+  techStack: ['Langchain', 'LlamaIndex', 'Pinecone', 'Weaviate', 'CrewAI']
+};
+
+interface Cookbook {
+  title: string;
+  description: string;
+  imageSrc: string;
+  tags: {
+    useCases: string[];
+    endpoints: string[];
+    techStack: string[];
+  };
+  href: string;
+  author?: {
+    name: string;
+    image: string;
+  };
+}
+
+const CARD_COLORS = ['bg-[#EEF0EF]', 'bg-[#FDF2F0]', 'bg-[#F8F1F9]', 'bg-[#F0F2FB]'];
+
+// Replace the existing tag style constants with these:
+const tagButtonClass = "px-2 py-1 text-[12px] rounded-full transition-colors cursor-pointer font-normal";
+
+const selectedTagClass = "bg-[#333293] text-white hover:bg-[#333293]/90";
+const unselectedTagClass = "bg-white text-[#666666] border border-[#E5E5E5] hover:bg-gray-50";
+
+export const Cookbooks: React.FC = () => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedTags, setSelectedTags] = useState<{
+    useCases: string[];
+    endpoints: string[];
+    techStack: string[];
+  }>({
+    useCases: [],
+    endpoints: [],
+    techStack: []
+  });
+
+  // Base cookbook data
+  const baseCookbooks: Cookbook[] = [
+    {
+      title: "Agentic Multi-Stage RAG with Cohere Tools API",
+      description: "This cookbook demonstrates how to build a powerful, multi-stage agent with the Cohere platform that can retrieve documents in multiple steps.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Agentic+RAG",
+      tags: {
+        useCases: ['RAG', 'Agents', 'Tool Use'],
+        endpoints: ['Chat', 'Rerank'],
+        techStack: ['Langchain', 'Weaviate']
+      },
+      href: '/page/agentic-multi-stage-rag',
+      author: {
+        name: "Jason Jung",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/0803e3d-Jason_Jung.jpg"
+      }
+    },
+    {
+      title: "Agentic RAG for PDFs with mixed data",
+      description: "Learn how to build a powerful, multi-step chatbot with Cohere's models that can process PDFs containing both text and tables.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Mixed+Data+RAG",
+      tags: {
+        useCases: ['RAG', 'Agents', 'Tool Use'],
+        endpoints: ['Chat', 'Embed', 'Rerank'],
+        techStack: ['LlamaIndex', 'Pinecone']
+      },
+      href: '/page/agentic-rag-mixed-data',
+      author: {
+        name: "Shaan Desai",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/d17fc44-Shaan.jpg"
+      }
+    },
+    {
+      title: "Analysis of Financial Forms",
+      description: "Use Cohere's large language models to build an agent able to analyze financial forms like a 10-K or a 10-Q.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Financial+Analysis",
+      tags: {
+        useCases: ['RAG', 'Embeddings', 'Classification'],
+        endpoints: ['Embed', 'Finetuning'],
+        techStack: ['CrewAI', 'Weaviate']
+      },
+      href: '/page/analysis-of-financial-forms',
+      author: {
+        name: "Alex Barbet",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/bf2c763-Alex.jpg"
+      }
+    },
+    {
+      title: "Analyzing Hacker News with Cohere",
+      description: "Build a generative-AI powered tool to analyze headlines with Cohere's language models.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Hacker+News+Analysis",
+      tags: {
+        useCases: ['Embeddings', 'Classification', 'Summarization'],
+        endpoints: ['Chat', 'Rerank'],
+        techStack: ['Langchain', 'LlamaIndex']
+      },
+      href: '/page/analyzing-hacker-news',
+      author: {
+        name: "Ania Bialas",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/c5dc5a3-Ania.jpg"
+      }
+    },
+    {
+      title: "Article Recommender with Text Embedding",
+      description: "Build a generative-AI tool to recommend articles with Cohere's embedding and classification capabilities.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Article+Recommender",
+      tags: {
+        useCases: ['Embeddings', 'Classification', 'Search'],
+        endpoints: ['Embed', 'Rerank'],
+        techStack: ['Pinecone', 'CrewAI']
+      },
+      href: '/page/article-recommender-with-text-embeddings',
+      author: {
+        name: "Giannis Chatziveroglou",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/73153cb-giannis.jpeg"
+      }
+    },
+    {
+      title: "Basic Multi-Step Tool Use with Cohere",
+      description: "Create a multi-step, tool-using AI agent with Cohere's tool use functionality.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Multi-Step+Tool+Use",
+      tags: {
+        useCases: ['Agents', 'Tool Use', 'Multi-step'],
+        endpoints: ['Chat', 'Finetuning'],
+        techStack: ['Weaviate', 'Langchain']
+      },
+      href: '/page/basic-multi-step',
+      author: {
+        name: "Komal Teru",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/7026fcc-komal-headshot.jpg"
+      }
+    },
+    {
+      title: "Basic RAG: Retrieval-Augmented Generation",
+      description: "Learn how to work with Cohere's basic retrieval-augmented generation functionality.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Basic+RAG",
+      tags: {
+        useCases: ['RAG', 'Embeddings', 'Text Generation'],
+        endpoints: ['Chat', 'Embed'],
+        techStack: ['LlamaIndex', 'Pinecone']
+      },
+      href: '/page/basic-rag',
+      author: {
+        name: "Youran Qi",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/929cb1c-youran-headshot.jpg"
+      }
+    },
+    {
+      title: "Basic Semantic Search with Cohere Models",
+      description: "Implement basic semantic search with Cohere's embedding models.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Semantic+Search",
+      tags: {
+        useCases: ['Search', 'Embeddings', 'Semantic Search'],
+        endpoints: ['Embed', 'Rerank'],
+        techStack: ['Weaviate', 'CrewAI']
+      },
+      href: '/page/basic-semantic-search',
+      author: {
+        name: "Mike Mao",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/d514b09-mike-headshot.jpg"
+      }
+    },
+    {
+      title: "Calendar Agent with Native Multi Step Tool",
+      description: "Use Cohere Chat API with list_calendar_events and create_calendar_event tools to book appointments.",
+      imageSrc: "https://via.placeholder.com/400x200?text=Calendar+Agent",
+      tags: {
+        useCases: ['Agents', 'Tool Use', 'Multi-step'],
+        endpoints: ['Chat', 'Finetuning'],
+        techStack: ['Langchain', 'LlamaIndex']
+      },
+      href: '/page/calendar-agent',
+      author: {
+        name: "Aal Patankar",
+        image: "https://fern-image-hosting.s3.amazonaws.com/cohere/d48e622-Aal.jpg"
+      }
+    },
+  ];
+
+  // Create an array of 27 cookbooks by spreading the base cookbooks three times
+  const cookbooks: Cookbook[] = [
+    ...baseCookbooks,
+    ...baseCookbooks.map(cookbook => ({
+      ...cookbook,
+      href: `${cookbook.href}-2`, // Add suffix to make hrefs unique
+    })),
+    ...baseCookbooks.map(cookbook => ({
+      ...cookbook,
+      href: `${cookbook.href}-3`, // Add suffix to make hrefs unique
+    }))
+  ];
+
+  // Filter cookbooks based on search query and selected tags
+  const filteredCookbooks = cookbooks.filter(cookbook => {
+    const matchesQuery = searchQuery === '' || 
+      cookbook.title.toLowerCase().includes(searchQuery.toLowerCase());
+    
+    const matchesUseCases = selectedTags.useCases.length === 0 || 
+      selectedTags.useCases.every(tag => cookbook.tags.useCases.includes(tag));
+    
+    const matchesEndpoints = selectedTags.endpoints.length === 0 || 
+      selectedTags.endpoints.every(tag => cookbook.tags.endpoints.includes(tag));
+    
+    const matchesTechStack = selectedTags.techStack.length === 0 || 
+      selectedTags.techStack.every(tag => cookbook.tags.techStack.includes(tag));
+
+    return matchesQuery && matchesUseCases && matchesEndpoints && matchesTechStack;
+  });
+
+  // Function to get random color from array
+  const getRandomColor = (index: number) => {
+    return CARD_COLORS[index % CARD_COLORS.length];
+  };
+
+  // Helper function to check if a tag is selected
+  const isTagSelected = (category: keyof TagCategories, tag: string) => {
+    return selectedTags[category].includes(tag);
+  };
+
+  // Helper function to toggle a tag
+  const toggleTag = (category: keyof TagCategories, tag: string) => {
+    setSelectedTags(prev => ({
+      ...prev,
+      [category]: prev[category].includes(tag)
+        ? prev[category].filter(t => t !== tag)
+        : [...prev[category], tag]
+    }));
+  };
+
+  return (
+    <div className="w-full">
+      {/* Sidebar and main content container */}
+      <div className="flex flex-col md:flex-row gap-8">
+        {/* Sidebar */}
+        <div className="w-full md:w-64 flex-shrink-0">
+          <div className="sticky top-4">
+            {/* Use Cases */}
+            <div className="mb-6">
+              <h3 className="text-sm font-medium mb-4">Use Cases</h3>
+              <div className="flex flex-wrap gap-2">
+                {ALL_TAGS.useCases.map(tag => (
+                  <button
+                    key={tag}
+                    onClick={() => toggleTag('useCases', tag)}
+                    className={`${tagButtonClass} ${
+                      isTagSelected('useCases', tag) ? selectedTagClass : unselectedTagClass
+                    }`}
+                  >
+                    {tag}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Endpoints */}
+            <div className="mb-6">
+              <h3 className="text-sm font-medium mb-4">Endpoints</h3>
+              <div className="flex flex-wrap gap-2">
+                {ALL_TAGS.endpoints.map(tag => (
+                  <button
+                    key={tag}
+                    onClick={() => toggleTag('endpoints', tag)}
+                    className={`${tagButtonClass} ${
+                      isTagSelected('endpoints', tag) ? selectedTagClass : unselectedTagClass
+                    }`}
+                  >
+                    {tag}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Tools */}
+            <div className="mb-6">
+              <h3 className="text-sm font-medium mb-4">Tools</h3>
+              <div className="flex flex-wrap gap-2">
+                {ALL_TAGS.techStack.map(tag => (
+                  <button
+                    key={tag}
+                    onClick={() => toggleTag('techStack', tag)}
+                    className={`${tagButtonClass} ${
+                      isTagSelected('techStack', tag) ? selectedTagClass : unselectedTagClass
+                    }`}
+                  >
+                    {tag}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Main content */}
+        <div className="flex-1">
+          <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
+            <div className="w-full">
+              <div className="relative">
+                <input
+                  type="text"
+                  placeholder="Search"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+                <div className="absolute left-3 top-1/2 transform -translate-y-1/2">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="text-gray-400" viewBox="0 0 16 16">
+                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filteredCookbooks.map((cookbook, index) => (
+              <a
+                key={index}
+                href={cookbook.href}
+                className={`block border border-gray-200 rounded-lg hover:shadow-md transition-shadow ${getRandomColor(index)}`}
+              >
+                <div className="p-6">
+                  <h3 className="text-base font-medium text-gray-800 mb-3">{cookbook.title}</h3>
+                  
+                  {cookbook.author && (
+                    <div className="flex items-center mb-4">
+                      <img 
+                        src={cookbook.author.image} 
+                        alt={cookbook.author.name}
+                        className="w-5 h-5 rounded-full mr-2"
+                      />
+                      <span className="text-xs text-gray-600">{cookbook.author.name}</span>
+                    </div>
+                  )}
+                  
+                  {/* Display only endpoint tags */}
+                  <div className="flex flex-wrap gap-1.5">
+                    {cookbook.tags.endpoints.map((tag, tagIndex) => (
+                      <span
+                        key={tagIndex}
+                        className="px-1.5 py-0.5 text-[10px] text-gray-600 bg-white/50 rounded-full"
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}; 
\ No newline at end of file
diff --git a/fern/pages/cookbooks.mdx b/fern/pages/cookbooks.mdx
index e3cdd3c6d..9f7edc160 100644
--- a/fern/pages/cookbooks.mdx
+++ b/fern/pages/cookbooks.mdx
@@ -1,654 +1,18 @@
 ---
 layout: custom
-description: >-
-  Explore a range of AI guides and get started with Cohere's generative
-  platform, ready-made and best-practice optimized.
+description: Explore Cohere's cookbooks with our new interface. Search and filter by title, description, or tags to find the cookbook you need.
 ---
 
-import { CardsContainer } from "../components/cards-container";
-import { SecondaryTitleContainer } from "../components/secondary-title-container";
+import { Cookbooks } from "../components/cookbooks";
 
-export const marco = {
-  name: "Marco Del Tredici",
-  imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/f103c96-Marco.jpg",
-};
 
-export const shaan = {
-  name: "Shaan Desai",
-  imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/d17fc44-Shaan.jpg",
-};
-
-export const jason = {
-  name: "Jason Jung",
-  imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/0803e3d-Jason_Jung.jpg",
-};
-
-export const ania = {
-  name: "Ania Bialas",
-  imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/c5dc5a3-Ania.jpg",
-};
-
-export const aal = {
-  name: "Aal Patankar",
-  imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/d48e622-Aal.jpg",
-};
-
-export const alex = {
-  name: "Alex Barbet",
-  imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/bf2c763-Alex.jpg",
-};
-
-export const giannis = {
-  name: "Giannis Chatziveroglou",
-  imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/73153cb-giannis.jpeg",
-};
-
-export const komal = {
-  name: "Komal Teru",
-  imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/7026fcc-komal-headshot.jpg"
-}
-
-export const youran = {
-  name: "Youran Qi",
-  imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/929cb1c-youran-headshot.jpg"
-}
-
-export const mike = {
-  name: "Mike Mao",
-  imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/d514b09-mike-headshot.jpg"
-}
-
-export const agentCards = [
-  {
-    title: "Calendar Agent with Native Multi Step Tool",
-    description:
-      "A minimal working example of how to use our chat API to call tools.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/5523913-Community_Demo_1.png",
-    tags: ["agents"],
-    href: "/page/calendar-agent",
-  },
-  {
-    title: "Basic Tool Use",
-    description:
-      "Connect large language models to external tools, like search engines, APIs, and databases, to access and utilise a wider range of data.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/bad278b-Community_Demo_2.png",
-    tags: ["agents"],
-    href: "/page/basic-tool-use",
-  },
-  {
-    title: "Multi-Step Tool Use",
-    description:
-      "Multi-step tool use allows developers to connect Cohere's models to external tools like search engines, APIs, and databases.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/8b24122-Community_Demo_3.png",
-    tags: ["agents", "oss"],
-    href: "/page/basic-multi-step",
-  },
-  {
-    title: "A Data Analyst Agent Built with Cohere and Langchain",
-    description:
-      "Build a data analyst agent with Python and Cohere's Command R+ mode and Langchain.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/86191a6-Community_Demo_5.png",
-    tags: ["agents", "oss"],
-    href: "/page/data-analyst-agent",
-  },
-  {
-    title: "Short-Term Memory Handling for Agents",
-    description:
-      "A walkthrough of how to use Langchain cohere_react_agent to effectively manage short-term chat history that contains tool calls with Langchain.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/d86be24-Community_Demo_6.png",
-    tags: ["agents"],
-    href: "/page/agent-short-term-memory",
-    authors: [marco],
-  },
-  {
-    title: "Agent API Calls",
-    description:
-      "A walkthrough of how to use Langchain cohere_react_agent to make API calls to external services that require regex.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/083d9e2-Community_Demo_7.png",
-    tags: ["agents"],
-    href: "/page/agent-api-calls",
-    authors: [marco],
-  },
-  {
-    title: "Financial CSV Agent with Langchain",
-    description:
-      "The notebook demonstrates how to setup a Langchain Cohere ReAct Agent to answer questions over the income statement and balance sheet from Apple's SEC10K 2020 form.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/13cb578-Community_Demo_8.png",
-    tags: ["agents", "oss"],
-    href: "/page/csv-agent",
-    authors: [shaan],
-  },
-  {
-    title: "Agentic RAG for PDFs with mixed data",
-    description:
-      "A walkthrough of how to use Langchain cohere_react_agent to run RAG as an agent tool to handle PDFs with mixed table and text data.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/142e385-Community_Demo_9.png",
-    tags: ["agents"],
-    href: "/page/agentic-rag-mixed-data",
-    authors: [shaan],
-  },
-  {
-    title: "SQL Agent",
-    description:
-      "In this notebook we explore how to setup a Cohere ReAct Agent to answer questions over SQL Databases using Langchain's SQLDBToolkit.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/5523913-Community_Demo_1.png",
-    tags: ["agents"],
-    href: "/page/sql-agent",
-    authors: [shaan],
-  },
-  {
-    title: "SQL Agent with Cohere and LangChain (i-5O Case Study)",
-    description:
-      "Build a SQL agent with Cohere and LangChain in the manufacturing industry.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/bad278b-Community_Demo_2.png",
-    tags: ["agents"],
-    href: "/page/sql-agent-cohere-langchain",
-  },
-  {
-    title: "Financial CSV Agent with Native Multi-Step Cohere API",
-    description:
-      "This notebook demonstrates how to setup a Cohere Native API sequence of tool calls to answer questions over the income statement and balance sheet from Apple's SEC10K 2020 form.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/bad278b-Community_Demo_2.png",
-    tags: ["agents"],
-    href: "/page/csv-agent-native-api",
-    authors: [jason],
-  },
-  {
-    title: "PDF Extractor with Native Multi Step Tool Use",
-    description: "How we can leverage agents to extract information from PDFs?",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/28ee583-Community_Demo_4.png",
-    tags: ["agents"],
-    href: "/page/pdf-extractor",
-    authors: [jason],
-  },
-  {
-    title: "Agentic Multi-Stage RAG with Cohere Tools API",
-    description: "How to use Agents to improve RAG performance.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/86191a6-Community_Demo_5.png",
-    tags: ["agents"],
-    href: "/page/agentic-multi-stage-rag",
-    authors: [jason],
-  },
-];
-
-export const ossCards = [
-  {
-    title: "Multi-Step Tool Use",
-    description:
-      "Multi-step tool use allows developers to connect Cohere's models to external tools like search engines, APIs, and databases.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/8b24122-Community_Demo_3.png",
-    tags: ["agents", "oss"],
-    href: "/page/basic-multi-step",
-  },
-  {
-    title: "A Data Analyst Agent Built with Cohere and Langchain",
-    description:
-      "Build a data analyst agent with Python and Cohere's Command R+ mode and Langchain.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/86191a6-Community_Demo_5.png",
-    tags: ["agents", "oss"],
-    href: "/page/data-analyst-agent",
-  },
-  {
-    title: "Financial CSV Agent with Langchain",
-    description:
-      "The notebook demonstrates how to setup a Langchain Cohere ReAct Agent to answer questions over the income statement and balance sheet from Apple's SEC10K 2020 form.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/13cb578-Community_Demo_8.png",
-    tags: ["agents", "oss"],
-    href: "/page/csv-agent",
-    authors: [shaan],
-  },
-  {
-    title: "Multilingual Search with Cohere and Langchain",
-    description: "Multilingual search with Cohere and Langchain.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/d86be24-Community_Demo_6.png",
-    tags: ["search", "oss"],
-    href: "/page/multilingual-search",
-  },
-  {
-    title: "Creating a QA Bot From Technical Documentation",
-    description:
-      "Create a chatbot that answers user questions based on technical documentation using Cohere embeddings and LlamaIndex.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/28ee583-Community_Demo_4.png",
-    tags: ["oss", "search", "rag"],
-    href: "/page/creating-a-qa-bot",
-  },
-  {
-    title: "Migrating away from deprecated create_csv_agent in langchain-cohere",
-    description:
-      "This page contains a tutorial on how to build a CSV agent without the deprecated `create_csv_agent` abstraction in langchain-cohere v0.3.5 and beyond.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/13cb578-Community_Demo_8.png",
-    tags: ["agents", "oss", "csv"],
-    href: "/page/migrate-csv-agent",
-  },
-];
-
-export const searchCards = [
-  {
-    title: "Wikipedia Semantic Search with Cohere Embedding Archives",
-    description:
-      "Find relevant Wikipedia passages with semantic search and Cohere embeddings.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/083d9e2-Community_Demo_7.png",
-    tags: ["search"],
-    href: "/page/wikipedia-semantic-search",
-  },
-  {
-    title:
-      "Semantic Search with Cohere Embed Jobs and Pinecone serverless Solution",
-    description:
-      "Learn how to use Cohere's Embed Jobs and Pinecone's serverless solution to perform semantic search.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/13cb578-Community_Demo_8.png",
-    tags: ["cloud", "search"],
-    href: "/page/embed-jobs-serverless-pinecone",
-  },
-  {
-    title: "End-to-end RAG using Elasticsearch and Cohere",
-    description:
-      "Learn how to use Cohere and Elastic for semantic search and retrieval-augmented generation.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/5523913-Community_Demo_1.png",
-    tags: ["search", "rag", "cloud"],
-    href: "/page/elasticsearch-and-cohere",
-  },
-  {
-    title: "Semantic Search with Cohere Embed Jobs",
-    description:
-      "Learn how to use Cohere Embed Jobs to create semantic search functionality.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/bad278b-Community_Demo_2.png",
-    tags: ["search"],
-    href: "/page/embed-jobs",
-  },
-  {
-    title: "Basic Semantic Search",
-    description:
-      "Learn how to build a simple semantic search engine using sentence embeddings.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/bad278b-Community_Demo_2.png",
-    tags: ["search"],
-    href: "/page/basic-semantic-search",
-  },
-  {
-    title: "Multilingual Search with Cohere and Langchain",
-    description: "Multilingual search with Cohere and Langchain.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/d86be24-Community_Demo_6.png",
-    tags: ["search", "oss"],
-    href: "/page/multilingual-search",
-  },
-  {
-    title: "Wikipedia Semantic Search with Cohere + Weaviate",
-    description:
-      "Search 10 million Wikipedia vectors with Cohere's multilingual model and Weaviate's public dataset.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/5523913-Community_Demo_1.png",
-    tags: ["search"],
-    href: "/page/wikipedia-search-with-weaviate",
-  },
-  {
-    title: "Creating a QA Bot From Technical Documentation",
-    description:
-      "Create a chatbot that answers user questions based on technical documentation using Cohere embeddings and LlamaIndex.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/28ee583-Community_Demo_4.png",
-    tags: ["oss", "search", "rag"],
-    href: "/page/creating-a-qa-bot",
-  },
-  {
-    title: "Demo of Rerank",
-    description:
-      "Improve search results with Cohere's Relevance Endpoint, which reranks documents for better accuracy.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/d86be24-Community_Demo_6.png",
-    tags: ["search"],
-    href: "/page/rerank-demo",
-  },
-  {
-    title: "RAG with MongoDB and Cohere",
-    description:
-      "Build a chatbot that provides actionable insights on technology company market reports.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/bad278b-Community_Demo_2.png",
-    tags: ["search"],
-    href: "/page/rag-cohere-mongodb",
-  },
-];
-
-export const cloudCards = [
-  {
-    title:
-      "Semantic Search with Cohere Embed Jobs and Pinecone serverless Solution",
-    description:
-      "Learn how to use Cohere's Embed Jobs and Pinecone's serverless solution to perform semantic search.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/13cb578-Community_Demo_8.png",
-    tags: ["cloud", "search"],
-    href: "/page/embed-jobs-serverless-pinecone",
-  },
-  {
-    title: "End-to-end RAG using Elasticsearch and Cohere",
-    description:
-      "Learn how to use Cohere and Elastic for semantic search and retrieval-augmented generation.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/5523913-Community_Demo_1.png",
-    tags: ["search", "rag", "cloud"],
-    href: "/page/elasticsearch-and-cohere",
-  },
-];
-
-export const ragCards = [
-  {
-    title: "Basic RAG",
-    description:
-      "RAG boosts the accuracy of language models by combining them with a retrieval system.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/142e385-Community_Demo_9.png",
-    tags: ["rag"],
-    href: "/page/basic-rag",
-  },
-  {
-    title: "End-to-end RAG using Elasticsearch and Cohere",
-    description:
-      "Learn how to use Cohere and Elastic for semantic search and retrieval-augmented generation.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/5523913-Community_Demo_1.png",
-    tags: ["search", "rag", "cloud"],
-    href: "/page/elasticsearch-and-cohere",
-  },
-  {
-    title: "Chunking Strategies",
-    description: "Explore chunking strategies for RAG systems.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/28ee583-Community_Demo_4.png",
-    tags: ["rag"],
-    href: "/page/chunking-strategies",
-    authors: [ania],
-  },
-  {
-    title: "Migrating Monolithic Prompts to Command-R with RAG",
-    description:
-      "Command-R simplifies prompt migration to RAG, reducing hallucination and improving conciseness and grounding.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/5523913-Community_Demo_1.png",
-    tags: ["rag"],
-    href: "/page/migrating-prompts",
-  },
-  {
-    title: "RAG With Chat Embed and Rerank via Pinecone",
-    description:
-      "This notebook shows how to build a RAG-powered chatbot with Cohere's Chat endpoint.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/8b24122-Community_Demo_3.png",
-    tags: ["rag"],
-    href: "/page/rag-with-chat-embed",
-  },
-  {
-    title: "Creating a QA Bot From Technical Documentation",
-    description:
-      "Create a chatbot that answers user questions based on technical documentation using Cohere embeddings and LlamaIndex.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/28ee583-Community_Demo_4.png",
-    tags: ["oss", "search", "rag"],
-    href: "/page/creating-a-qa-bot",
-  },
-  {
-    title: "Deep Dive Into RAG Evaluation",
-    description: "Learn how to evaluate RAG models.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/8b24122-Community_Demo_3.png",
-    tags: ["rag"],
-    href: "/page/rag-evaluation-deep-dive",
-    authors: [marco, aal],
-  },
-];
-
-export const summarizationCards = [
-  {
-    title: "Analysis of Form 10-K/10-Q Using Cohere and RAG",
-    description:
-      "Jumpstart financial analysis of 10-Ks or 10-Qs with Cohere's Command model and LlamaIndex tooling.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/083d9e2-Community_Demo_7.png",
-    tags: ["summarization"],
-    href: "/page/analysis-of-financial-forms",
-    authors: [alex],
-  },
-  {
-    title: "Long Form General Strategies",
-    description:
-      "Techniques to address lengthy documents exceeding the context window of LLMs.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/28ee583-Community_Demo_4.png",
-    tags: ["summarization"],
-    href: "/page/long-form-general-strategies",
-    authors: [ania],
-  },
-  {
-    title: "Summarization Evals",
-    description:
-      "This cookbook demonstrates an approach to evaluating summarization tasks using LLM evaluation.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/86191a6-Community_Demo_5.png",
-    tags: ["summarization"],
-    href: "/page/summarization-evals",
-  },
-  {
-    title: "Grounded Summarization Using Command R",
-    description:
-      "Learn how to summarise long documents with citations, reducing cost and improving latency.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/bad278b-Community_Demo_2.png",
-    tags: ["summarization"],
-    href: "/page/grounded-summarization",
-  },
-];
-
-export const finetuningCards = [
-  {
-    title: "Finetuning on Cohere's Platform",
-    description:
-      "An example of finetuning using Cohere's platform and a financial dataset.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/86191a6-Community_Demo_5.png",
-    tags: ["finetuning", "wandb"],
-    href: "/page/convfinqa-finetuning-wandb",
-    authors: [komal],
-  },
-  {
-    title: "Deploy your finetuned model on AWS Marketplace",
-    description:
-      "Learn how to deploy your finetuned model on AWS Marketplace.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/5523913-Community_Demo_1.png",
-    tags: ["finetuning", "sagemaker"],
-    href: "/page/deploy-finetuned-model-aws-marketplace",
-    authors: [youran],
-  },
-  {
-    title: "Finetuning on AWS Sagemaker",
-    description:
-      "Learn how to finetune one of Cohere's models on AWS Sagemaker.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/bad278b-Community_Demo_2.png",
-    tags: ["finetuning", "sagemaker"],
-    href: "/page/finetune-on-sagemaker",
-    authors: [mike],
-  }
-]
-
-export const otherCards = [
-  {
-    title: "Fueling Generative Content with Keyword Research",
-    description:
-      "Enhance content creation with keyword-based topic clusters, generating blog ideas with Cohere's Chat model.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/8b24122-Community_Demo_3.png",
-    tags: [],
-    href: "/page/fueling-generative-content",
-  },
-  {
-    title: "Text Classification Using Embeddings",
-    description:
-      "Build a text classifier with Cohere embeddings. This notebook shows you how to train a sentiment analysis model with a small dataset.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/86191a6-Community_Demo_5.png",
-    tags: [],
-    href: "/page/text-classification-using-embeddings",
-  },
-  {
-    title: "Article Recommender with Text Embedding Classification Extraction",
-    description:
-      "Improve news article recommendations with embeddings, text classification, and keyword extraction.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/142e385-Community_Demo_9.png",
-    tags: [],
-    href: "/page/article-recommender-with-text-embeddings",
-  },
-  {
-    title: "Advanced Document Parsing For Enterprises",
-    description: "Learn how to parse PDFs into text with a real-world example.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/083d9e2-Community_Demo_7.png",
-    tags: [],
-    href: "/page/document-parsing-for-enterprises",
-    authors: [
-      giannis,
-      {
-        name: "Justin Lee",
-        imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/3678fac-Justin.jpg",
-      },
-    ],
-  },
-  {
-    title: "Pondr, Fostering Connection through Good Conversation",
-    description:
-      "Learn how to create Pondr, a game that fosters connections and meaningful conversations with friends and strangers.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/86191a6-Community_Demo_5.png",
-    tags: [],
-    href: "/page/pondr",
-  },
-  {
-    title: "Hello World! Meet Language AI",
-    description:
-      "General quickstart with basic instructions on how to get started with generative AI.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/083d9e2-Community_Demo_7.png",
-    tags: [],
-    href: "/page/hello-world-meet-ai",
-  },
-  {
-    title: "Topic Modeling AI Papers",
-    description: "Learn how to build a topic modeling pipeline in Python.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/5523913-Community_Demo_1.png",
-    tags: [],
-    href: "/page/topic-modeling-ai-papers",
-  },
-  {
-    title: "Analyzing Hacker News with Six Language Understanding Methods",
-    description: "Learn how to analyze textual data using Cohere's tools.",
-    imageSrc: "https://fern-image-hosting.s3.amazonaws.com/cohere/28ee583-Community_Demo_4.png",
-    tags: [],
-    href: "/page/analyzing-hacker-news",
-  },
-];
-
-export const sections = [
-  {
-    id: "agents",
-    title: "Agents",
-    description:
-      "Learn how to build powerful agents that use tools to connect to external services, like search engines, APIs, and databases. Agents can be used to automate tasks, answer questions, and more.",
-    cards: agentCards,
-  },
-  {
-    id: "oss",
-    title: "Open Source Software Integrations",
-    description:
-      "Cohere integrates natively with a variety of popular Open Source Software tools like LangChain and LlamaIndex. These guides will help you get started with these integrations.",
-    cards: ossCards,
-  },
-  {
-    id: "search",
-    title: "Search and Embeddings",
-    description:
-      "Learn how to embed and search text with Cohere. These guides will help you build semantic search engines, search Wikipedia, and more.",
-    cards: searchCards,
-  },
-  {
-    id: "cloud",
-    title: "Cloud",
-    description:
-      "Learn how to use Cohere's cloud-based services in your preferred environment. Cohere is integrated with most major cloud providers. These guides will help you get started wherever your code lives.",
-    cards: cloudCards,
-  },
-  {
-    id: "rag",
-    title: "RAG",
-    description:
-      "Learn how to use Cohere's foundation model for Retrieval-Augmented Generation (RAG). RAG can be used to improve the accuracy of language models by combining them with a retrieval system. This allows the model to generate completions that are grounded in provided sources of truth.",
-    cards: ragCards,
-  },
-  {
-    id: "summarization",
-    title: "Summarization",
-    description:
-      "Learn how to summarize long documents, meeting summaries, and technical reports. Summarization is a key feature of Cohere's Command model, which can be used to generate summaries of long documents with citations.",
-    cards: summarizationCards,
-  },
-  {
-    id: "finetuning",
-    title: "Finetuning",
-    description:
-      "Learn how to finetune Cohere's models using custom data. Finetuning allows you to adapt Cohere's models to your specific use case, improving performance and accuracy.",
-    cards: finetuningCards,
-  },
-  {
-    id: "other",
-    title: "Other",
-    description:
-      "Here are a variety of other fun and useful guides to help you get started with Cohere. From text classification to document parsing, there's something for everyone!",
-    cards: otherCards,
-  },
-];
-
-export const AllCardsContainer = () => (
-  <div className="all-cards-container">
-    {sections.map(({ id, title, description, cards }) => (
-      <div key={id}>
-        <SecondaryTitleContainer
-          id={id}
-          title={title}
-          description={description}
-        />
-        <div className="divider" />
-        <CardsContainer cards={cards} />
-      </div>
-    ))}
-  </div>
-);
-
-export const UseCasesContainer = () => (
-  <div className="all-cards-container !py-0">
-    <div className="page-secondary-title-container">
-      <div className="toc-title">
-        <h3 className="h2-title mb-3">Use Cases</h3>
-        <p className="p-base mb-6">
-          Click on one of the section headers below to jump to guides for that
-          use case category.
-        </p>
-        <div className="toc-list">
-          {sections.map(({ id, title }) => (
-            <div key={id} className="toc-item">
-              <a
-                href={`#${id}`}
-                className="group inline-block cursor-pointer font-medium"
-                target="_self"
-              >
-                {title}
-              </a>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  </div>
-);
-
-<div className="h-[400px] md:h-[300px] w-full relative flex flex-col justify-end">
-  <div
-    className="max-md:hidden absolute inset-0 -z-10 bg-cover bg-[right_center] bg-no-repeat"
-    style={{
-      backgroundImage: `url(https://fern-image-hosting.s3.amazonaws.com/cohere/9bd3335-bg-apps-desktop.svg)`,
-    }}
-  />
-  <div
-    className="md:hidden absolute inset-0 -z-10 bg-cover bg-right-bottom bg-no-repeat"
-    style={{
-      backgroundImage: `url(https://fern-image-hosting.s3.amazonaws.com/cohere/f08bf1e-landingPage.svg)`,
-    }}
-  />
-  <div className="max-w-[1100px] mx-auto page-title-container px-4 md:px-6 lg:px-9">
-    <h1 className="page-title !mt-0 mb-6 dark-text">Cookbooks</h1>
-    <p className="p-base page-blurb !mb-10 dark-text">
-      Explore what you can build on Cohere's generative AI platform. These
-      ready-made guides will get you started with best-practices that get the
-      most out of Cohere's models. Everything is set up and ready for you to
-      start testing!
+<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+  <div className="max-w-3xl">
+    <h1 className="text-3xl font-bold mb-4">Cookbooks</h1>
+    <p className="text-gray-600 mb-8">
+      Explore what you can build on Cohere's generative AI platform with our new interface. 
+      Search and filter cookbooks by title, description, or tags to find exactly what you need.
     </p>
   </div>
-</div>
-
-<div className="max-w-[1100px] mx-auto px-4 md:px-6 lg:px-9">
-  <UseCasesContainer />
-  <AllCardsContainer />
-</div>
+  <Cookbooks />
+</div> 
\ No newline at end of file