diff --git a/components/dashboard/product-list.tsx b/components/dashboard/product-list.tsx
index 8a5cd41..8968144 100644
--- a/components/dashboard/product-list.tsx
+++ b/components/dashboard/product-list.tsx
@@ -78,8 +78,9 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
           className={`group bg-surface-container-low border border-border rounded-xl p-4 transition-colors ${
             showArchived ? 'opacity-60' : 'cursor-pointer hover:border-primary'
           }`}
+          data-debug-id="product-list__items"
         >
-          <div className="flex items-start justify-between gap-4">
+          <div className="flex items-start justify-between gap-4" data-debug-id="product-list__header">
             <div className="min-w-0">
               <div className="flex items-center gap-2">
                 {product.code && <CodeBadge code={product.code} />}
diff --git a/components/markdown.tsx b/components/markdown.tsx
index 2b07fa8..1541d7e 100644
--- a/components/markdown.tsx
+++ b/components/markdown.tsx
@@ -1,6 +1,7 @@
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { cn } from '@/lib/utils'
+import { debugProps } from '@/lib/debug'
 
 interface MarkdownProps {
   children: string
@@ -9,7 +10,7 @@ interface MarkdownProps {
 
 export function Markdown({ children, className }: MarkdownProps) {
   return (
-    <div className={cn('prose prose-sm dark:prose-invert max-w-none', className)}>
+    <div className={cn('prose prose-sm dark:prose-invert max-w-none', className)} {...debugProps('markdown', 'Markdown', 'components/markdown.tsx')}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         disallowedElements={['script', 'iframe']}