diff --git a/apps/canvas/front/src/components/resources.tsx b/apps/canvas/front/src/components/resources.tsx
index 3a5b334..cdd58c5 100644
--- a/apps/canvas/front/src/components/resources.tsx
+++ b/apps/canvas/front/src/components/resources.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { v4 as uuidv4 } from "uuid";
-import { useCallback, useState } from "react";
+import { useCallback, useState, useMemo } from "react";
 import { Accordion, AccordionTrigger } from "./ui/accordion";
 import { AccordionContent, AccordionItem } from "@radix-ui/react-accordion";
 import { AppState, useCategories, useMode, useProjectId, useStateStore } from "@/lib/state";
@@ -36,11 +37,36 @@
 	);
 
 	const [open, setOpen] = useState<string[]>(categories.map((c) => c.title));
+	const [searchValue, setSearchValue] = useState<string>("");
+
+	// Filter categories based on search value
+	const filteredCategories = useMemo(() => {
+		if (!searchValue.trim()) {
+			return categories;
+		}
+
+		const searchLower = searchValue.toLowerCase();
+		return categories
+			.map((category) => ({
+				...category,
+				items: category.items.filter((item) => item.title.toLowerCase().includes(searchLower)),
+			}))
+			.filter((category) => category.items.length > 0); // Remove empty categories
+	}, [categories, searchValue]);
 
 	return (
 		<>
+			<div className="px-3 pb-3 mt-2">
+				<Input
+					type="text"
+					placeholder="Search resources..."
+					value={searchValue}
+					onChange={(e) => setSearchValue(e.target.value)}
+					className="w-full"
+				/>
+			</div>
 			<Accordion type="multiple" value={open} onValueChange={(v) => setOpen(v)}>
-				{categories.map((c) => (
+				{filteredCategories.map((c) => (
 					<AccordionItem key={c.title} value={c.title} className={"px-3" + (c.active ? " bg-amber-100" : "")}>
 						<AccordionTrigger>{c.title}</AccordionTrigger>
 						<AccordionContent>