diff --git a/.gitignore b/.gitignore
index 35271f69b..716ac5e21 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,3 +48,6 @@ docs/.vitepress/cache
 apps/site/.next
 apps/site/.map.ts
 apps/site/.source
+
+# Test artifacts
+test-screenshots
diff --git a/packages/components/src/renderers/basic/button-group.tsx b/packages/components/src/renderers/basic/button-group.tsx
index d49602b38..ccba2fdd4 100644
--- a/packages/components/src/renderers/basic/button-group.tsx
+++ b/packages/components/src/renderers/basic/button-group.tsx
@@ -22,7 +22,7 @@ ComponentRegistry.register('button-group',
     
     return (
       <div 
-        className={cn('inline-flex rounded-md shadow-sm', schema.className)} 
+        className={cn('flex flex-wrap sm:inline-flex rounded-md shadow-sm', schema.className)} 
         role="group"
         {...buttonGroupProps}
         {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
diff --git a/packages/components/src/renderers/basic/div.tsx b/packages/components/src/renderers/basic/div.tsx
index e7a823b2e..912fe6979 100644
--- a/packages/components/src/renderers/basic/div.tsx
+++ b/packages/components/src/renderers/basic/div.tsx
@@ -43,7 +43,7 @@ ComponentRegistry.register('div',
       { name: 'className', type: 'string', label: 'CSS Class' }
     ],
     defaultProps: {
-      className: 'p-4 border border-dashed border-gray-300 rounded min-h-[100px]'
+      className: 'p-2 sm:p-4 border border-dashed border-gray-300 rounded min-h-[100px]'
     }
   }
 );
diff --git a/packages/components/src/renderers/basic/image.tsx b/packages/components/src/renderers/basic/image.tsx
index bbc4a3200..db91dfe0d 100644
--- a/packages/components/src/renderers/basic/image.tsx
+++ b/packages/components/src/renderers/basic/image.tsx
@@ -40,6 +40,9 @@ ComponentRegistry.register('image',
       { name: 'src', type: 'string', label: 'Source URL' },
       { name: 'alt', type: 'string', label: 'Alt Text' },
       { name: 'className', type: 'string', label: 'Classes' }
-    ]
+    ],
+    defaultProps: {
+      className: 'max-w-full h-auto'
+    }
   }
 );
diff --git a/packages/components/src/renderers/basic/navigation-menu.tsx b/packages/components/src/renderers/basic/navigation-menu.tsx
index eb76a97ed..0763d08f3 100644
--- a/packages/components/src/renderers/basic/navigation-menu.tsx
+++ b/packages/components/src/renderers/basic/navigation-menu.tsx
@@ -33,7 +33,7 @@ ComponentRegistry.register('navigation-menu',
                 <>
                   <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>
                   <NavigationMenuContent>
-                    <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+                    <ul className="grid w-full gap-3 p-4 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]">
                       {item.children.map((child, childIdx) => (
                         <li key={childIdx}>
                           <NavigationMenuLink asChild>
diff --git a/packages/components/src/renderers/basic/separator.tsx b/packages/components/src/renderers/basic/separator.tsx
index eb8e1de19..4faf7292d 100644
--- a/packages/components/src/renderers/basic/separator.tsx
+++ b/packages/components/src/renderers/basic/separator.tsx
@@ -50,7 +50,7 @@ ComponentRegistry.register('separator',
     ],
     defaultProps: {
       orientation: 'horizontal',
-      className: 'my-4'
+      className: 'my-2 sm:my-4'
     }
   }
 );
diff --git a/packages/components/src/renderers/basic/span.tsx b/packages/components/src/renderers/basic/span.tsx
index c76fbdb12..b10787056 100644
--- a/packages/components/src/renderers/basic/span.tsx
+++ b/packages/components/src/renderers/basic/span.tsx
@@ -43,7 +43,7 @@ ComponentRegistry.register('span',
       { name: 'className', type: 'string', label: 'CSS Class' }
     ],
     defaultProps: {
-      className: 'px-2 py-1'
+      className: 'px-1.5 py-0.5 sm:px-2 sm:py-1'
     },
     defaultChildren: [
       { type: 'text', content: 'Inline text' }
diff --git a/packages/components/src/renderers/complex/carousel.tsx b/packages/components/src/renderers/complex/carousel.tsx
index 123a2157d..ccf60ac47 100644
--- a/packages/components/src/renderers/complex/carousel.tsx
+++ b/packages/components/src/renderers/complex/carousel.tsx
@@ -58,9 +58,9 @@ ComponentRegistry.register('carousel',
       orientation: 'horizontal',
       showArrows: true,
       items: [
-        [{ type: 'div', className: 'p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 1' }] }],
-        [{ type: 'div', className: 'p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 2' }] }],
-        [{ type: 'div', className: 'p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 3' }] }]
+        [{ type: 'div', className: 'p-4 sm:p-6 md:p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 1' }] }],
+        [{ type: 'div', className: 'p-4 sm:p-6 md:p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 2' }] }],
+        [{ type: 'div', className: 'p-4 sm:p-6 md:p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 3' }] }]
       ],
       className: 'w-full max-w-xs'
     }
diff --git a/packages/components/src/renderers/data-display/kbd.tsx b/packages/components/src/renderers/data-display/kbd.tsx
index 81c6d19ad..56aa7edd9 100644
--- a/packages/components/src/renderers/data-display/kbd.tsx
+++ b/packages/components/src/renderers/data-display/kbd.tsx
@@ -22,7 +22,7 @@ ComponentRegistry.register('kbd',
     const keys = Array.isArray(schema.keys) ? schema.keys : [schema.keys || schema.label || 'K'];
     
     return (
-      <div className={cn('inline-flex gap-1', schema.className)}>
+      <div className={cn('inline-flex flex-wrap gap-1', schema.className)}>
         {keys.map((key, idx) => (
           <kbd
             key={idx}
diff --git a/packages/components/src/renderers/data-display/statistic.tsx b/packages/components/src/renderers/data-display/statistic.tsx
index a0bd4c6e8..0c02bf519 100644
--- a/packages/components/src/renderers/data-display/statistic.tsx
+++ b/packages/components/src/renderers/data-display/statistic.tsx
@@ -14,7 +14,7 @@ import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
 const StatisticRenderer = ({ schema }: { schema: StatisticSchema }) => {
   return (
     <div className={cn(
-        "group relative flex flex-col p-6 rounded-xl border bg-card text-card-foreground shadow-sm",
+        "group relative flex flex-col p-4 sm:p-5 md:p-6 rounded-xl border bg-card text-card-foreground shadow-sm",
         schema.className
     )}>
       {/* Label */}
diff --git a/packages/components/src/renderers/form/file-upload.tsx b/packages/components/src/renderers/form/file-upload.tsx
index 2fd2952fc..1f800a830 100644
--- a/packages/components/src/renderers/form/file-upload.tsx
+++ b/packages/components/src/renderers/form/file-upload.tsx
@@ -95,7 +95,7 @@ ComponentRegistry.register('file-upload',
           <div 
             onClick={handleClick}
             className={cn(
-                "relative overflow-hidden cursor-pointer rounded-lg border-2 border-dashed transition-all duration-300 min-h-[120px] flex flex-col items-center justify-center p-6 gap-3",
+                "relative overflow-hidden cursor-pointer rounded-lg border-2 border-dashed transition-all duration-300 min-h-[120px] flex flex-col items-center justify-center p-4 sm:p-6 gap-3",
                 isUploading 
                     ? "border-cyan-400 bg-cyan-950/30" 
                     : "border-slate-700 bg-slate-900/50 hover:bg-slate-900 hover:border-cyan-500/50 hover:shadow-[0_0_20px_-5px_rgba(6,182,212,0.3)]"
@@ -141,7 +141,7 @@ ComponentRegistry.register('file-upload',
                   
                   <div className="flex items-center gap-3 z-10">
                     <CheckCircle2 className="w-4 h-4 text-emerald-500 rounded-full" />
-                    <span className="truncate max-w-[200px] text-muted-foreground group-hover/file:text-foreground font-mono text-xs transition-colors">{file.name}</span>
+                    <span className="truncate max-w-[150px] sm:max-w-[200px] md:max-w-[300px] text-muted-foreground group-hover/file:text-foreground font-mono text-xs transition-colors">{file.name}</span>
                   </div>
                   
                   <Button
diff --git a/packages/components/src/renderers/form/form.tsx b/packages/components/src/renderers/form/form.tsx
index d3e0ffbec..140689618 100644
--- a/packages/components/src/renderers/form/form.tsx
+++ b/packages/components/src/renderers/form/form.tsx
@@ -126,11 +126,12 @@ ComponentRegistry.register('form',
     };
 
     // Determine grid classes based on columns (explicit classes for Tailwind JIT)
+    // Mobile-first: 1 column on mobile, 2 on sm, then md/lg for larger values
     const gridColsClass = 
       columns === 1 ? '' :
-      columns === 2 ? 'md:grid-cols-2' :
-      columns === 3 ? 'md:grid-cols-3' :
-      'md:grid-cols-4';
+      columns === 2 ? 'sm:grid-cols-2' :
+      columns === 3 ? 'sm:grid-cols-2 md:grid-cols-3' :
+      'sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4';
     
     const gridClass = columns > 1 
       ? cn('grid gap-4', gridColsClass)
diff --git a/packages/components/src/renderers/layout/container.tsx b/packages/components/src/renderers/layout/container.tsx
index 9442fbf5a..4579c7d71 100644
--- a/packages/components/src/renderers/layout/container.tsx
+++ b/packages/components/src/renderers/layout/container.tsx
@@ -36,19 +36,19 @@ const ContainerRenderer = forwardRef<HTMLDivElement, { schema: ContainerSchema;
       maxWidth === 'screen' && 'max-w-screen-2xl',
       // Centering
       centered && 'mx-auto',
-      // Padding
+      // Padding - Mobile-first responsive
       padding === 0 && 'p-0',
-      padding === 1 && 'p-1',
-      padding === 2 && 'p-2',
-      padding === 3 && 'p-3',
-      padding === 4 && 'p-4',
-      padding === 5 && 'p-5',
-      padding === 6 && 'p-6',
-      padding === 7 && 'p-7',
-      padding === 8 && 'p-8',
-      padding === 10 && 'p-10',
-      padding === 12 && 'p-12',
-      padding === 16 && 'p-16',
+      padding === 1 && 'p-0.5 sm:p-1',
+      padding === 2 && 'p-1 sm:p-2',
+      padding === 3 && 'p-2 sm:p-3',
+      padding === 4 && 'p-2 sm:p-3 md:p-4',
+      padding === 5 && 'p-3 sm:p-4 md:p-5',
+      padding === 6 && 'p-3 sm:p-4 md:p-6',
+      padding === 7 && 'p-4 sm:p-5 md:p-7',
+      padding === 8 && 'p-4 sm:p-6 md:p-8',
+      padding === 10 && 'p-5 sm:p-7 md:p-10',
+      padding === 12 && 'p-6 sm:p-8 md:p-12',
+      padding === 16 && 'p-8 sm:p-10 md:p-16',
       className
     );
 
diff --git a/packages/components/src/renderers/layout/flex.tsx b/packages/components/src/renderers/layout/flex.tsx
index 56b85705f..62f988c57 100644
--- a/packages/components/src/renderers/layout/flex.tsx
+++ b/packages/components/src/renderers/layout/flex.tsx
@@ -39,16 +39,16 @@ ComponentRegistry.register('flex',
       align === 'center' && 'items-center',
       align === 'baseline' && 'items-baseline',
       align === 'stretch' && 'items-stretch',
-      // Gap
+      // Gap - Mobile-first responsive
       gap === 0 && 'gap-0',
       gap === 1 && 'gap-1',
-      gap === 2 && 'gap-2',
-      gap === 3 && 'gap-3',
-      gap === 4 && 'gap-4',
-      gap === 5 && 'gap-5',
-      gap === 6 && 'gap-6',
-      gap === 7 && 'gap-7',
-      gap === 8 && 'gap-8',
+      gap === 2 && 'gap-1.5 sm:gap-2',
+      gap === 3 && 'gap-2 sm:gap-3',
+      gap === 4 && 'gap-2 sm:gap-3 md:gap-4',
+      gap === 5 && 'gap-3 sm:gap-4 md:gap-5',
+      gap === 6 && 'gap-3 sm:gap-4 md:gap-6',
+      gap === 7 && 'gap-4 sm:gap-5 md:gap-7',
+      gap === 8 && 'gap-4 sm:gap-6 md:gap-8',
       // Wrap
       wrap && 'flex-wrap',
       className
diff --git a/packages/components/src/renderers/layout/page.tsx b/packages/components/src/renderers/layout/page.tsx
index 2a0eb4cc3..b23e4953b 100644
--- a/packages/components/src/renderers/layout/page.tsx
+++ b/packages/components/src/renderers/layout/page.tsx
@@ -31,7 +31,7 @@ export const PageRenderer: React.FC<{ schema: PageSchema; className?: string; [k
 
   return (
     <div 
-      className={cn("min-h-full w-full bg-background p-6 md:p-8", className)}
+      className={cn("min-h-full w-full bg-background p-4 md:p-6 lg:p-8", className)}
       {...pageProps}
       // Apply designer props
       data-obj-id={dataObjId}
diff --git a/packages/components/src/renderers/layout/stack.tsx b/packages/components/src/renderers/layout/stack.tsx
index f28d0d4fa..da40d0411 100644
--- a/packages/components/src/renderers/layout/stack.tsx
+++ b/packages/components/src/renderers/layout/stack.tsx
@@ -42,16 +42,16 @@ const StackRenderer = forwardRef<HTMLDivElement, { schema: StackSchema; classNam
       align === 'center' && 'items-center',
       align === 'baseline' && 'items-baseline',
       align === 'stretch' && 'items-stretch',
-      // Gap
+      // Gap - Mobile-first responsive
       gap === 0 && 'gap-0',
       gap === 1 && 'gap-1',
-      gap === 2 && 'gap-2',
-      gap === 3 && 'gap-3',
-      gap === 4 && 'gap-4',
-      gap === 5 && 'gap-5',
-      gap === 6 && 'gap-6',
-      gap === 8 && 'gap-8',
-      gap === 10 && 'gap-10',
+      gap === 2 && 'gap-1.5 sm:gap-2',
+      gap === 3 && 'gap-2 sm:gap-3',
+      gap === 4 && 'gap-2 sm:gap-3 md:gap-4',
+      gap === 5 && 'gap-3 sm:gap-4 md:gap-5',
+      gap === 6 && 'gap-3 sm:gap-4 md:gap-6',
+      gap === 8 && 'gap-4 sm:gap-6 md:gap-8',
+      gap === 10 && 'gap-5 sm:gap-7 md:gap-10',
       // Wrap
       wrap && 'flex-wrap',
       className
diff --git a/packages/components/src/renderers/navigation/header-bar.tsx b/packages/components/src/renderers/navigation/header-bar.tsx
index 7c07d360f..b4d527dff 100644
--- a/packages/components/src/renderers/navigation/header-bar.tsx
+++ b/packages/components/src/renderers/navigation/header-bar.tsx
@@ -22,7 +22,7 @@ import {
 
 ComponentRegistry.register('header-bar', 
   ({ schema }: { schema: HeaderBarSchema }) => (
-    <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+    <header className="flex h-14 sm:h-16 shrink-0 items-center gap-2 border-b px-3 sm:px-4">
       <SidebarTrigger />
       <Separator orientation="vertical" className="mr-2 h-4" />
       <Breadcrumb>
diff --git a/packages/components/src/renderers/overlay/context-menu.tsx b/packages/components/src/renderers/overlay/context-menu.tsx
index dcf16c71d..9ee8a16d3 100644
--- a/packages/components/src/renderers/overlay/context-menu.tsx
+++ b/packages/components/src/renderers/overlay/context-menu.tsx
@@ -53,7 +53,7 @@ const renderContextMenuItems = (items: any[]) => {
 ComponentRegistry.register('context-menu', 
   ({ schema, className, ...props }: { schema: ContextMenuSchema; className?: string; [key: string]: any }) => {
     // Determine classes
-    const triggerClass = schema.triggerClassName || className || (schema.className as string) || "h-[150px] w-[300px] border border-dashed text-sm flex items-center justify-center";
+    const triggerClass = schema.triggerClassName || className || (schema.className as string) || "h-[120px] w-full sm:h-[150px] sm:w-[300px] border border-dashed text-sm flex items-center justify-center";
     const contentClass = schema.contentClassName;
 
     return (