diff --git a/app/canvas/[id]/canvas-client.tsx b/app/canvas/[id]/canvas-client.tsx
index 447ffbf..40850b9 100644
--- a/app/canvas/[id]/canvas-client.tsx
+++ b/app/canvas/[id]/canvas-client.tsx
@@ -24,6 +24,16 @@ interface CanvasClientProps {
   initialCards: CardType[]
 }
 
+/**
+ * CanvasClient component for managing and displaying a canvas of cards with recommendations.
+ *
+ * This component initializes state for cards, recommendations, and loading indicators. It fetches recommendations based on card IDs and handles user interactions for generating new cards and exploring recommendations. The component also manages polling for canvas status updates and organizes cards by their levels for display.
+ *
+ * @param {CanvasClientProps} props - The properties for the CanvasClient component.
+ * @param {Canvas} props.canvas - The canvas object containing seed content and ID.
+ * @param {CardType[]} props.initialCards - The initial array of cards to display.
+ * @returns {JSX.Element} The rendered CanvasClient component.
+ */
 export function CanvasClient({ canvas, initialCards }: CanvasClientProps) {
   const router = useRouter()
   const { toast } = useToast()
diff --git a/components/knowledge-card.tsx b/components/knowledge-card.tsx
index 9bd1c69..6478b2b 100644
--- a/components/knowledge-card.tsx
+++ b/components/knowledge-card.tsx
@@ -14,6 +14,20 @@ interface KnowledgeCardProps {
   isGenerating?: boolean
 }
 
+/**
+ * Renders a KnowledgeCard component displaying a summary and content with a specific level.
+ * The component utilizes memoization to determine accent classes based on the level and handles
+ * expanded and generating states to adjust its appearance. It includes a header with level information
+ * and a content area that can display Markdown content, adapting its layout based on the expansion state.
+ *
+ * @param {Object} props - The properties for the KnowledgeCard component.
+ * @param {string} props.summary - The summary text to display in the card.
+ * @param {string} props.content - The content to be rendered as Markdown.
+ * @param {number} props.level - The level of the card, affecting its styling.
+ * @param {number} [props.displayLevel] - An optional display level that overrides the level.
+ * @param {boolean} [props.isExpanded=false] - Indicates if the card is expanded.
+ * @param {boolean} [props.isGenerating=false] - Indicates if the card is in a generating state.
+ */
 export function KnowledgeCard({
   summary,
   content,