diff --git a/src/components/JSONPageRenderer.tsx b/src/components/JSONPageRenderer.tsx
index 8943cf8..93329a9 100644
--- a/src/components/JSONPageRenderer.tsx
+++ b/src/components/JSONPageRenderer.tsx
@@ -32,9 +32,10 @@ export interface PageSchema {
   [key: string]: any
 }
 
-interface ComponentRendererProps {
-  schema: PageSchema
-  data: Record<string, any>
+export interface ComponentRendererProps {
+  config?: PageSchema
+  schema?: PageSchema
+  data?: Record<string, any>
   functions?: Record<string, (...args: any[]) => any>
 }
 
@@ -53,7 +54,12 @@ function getIcon(iconName: string, props?: any) {
   return <IconComponent size={24} weight="duotone" {...props} />
 }
 
-export function JSONPageRenderer({ schema, data, functions = {} }: ComponentRendererProps) {
+export function JSONPageRenderer({ config, schema, data = {}, functions = {} }: ComponentRendererProps) {
+  const pageSchema = config || schema
+  if (!pageSchema) {
+    return <div>No schema provided</div>
+  }
+
   const renderSection = (section: PageSectionConfig, index: number): ReactNode => {
     switch (section.type) {
       case 'header':
@@ -67,7 +73,7 @@ export function JSONPageRenderer({ schema, data, functions = {} }: ComponentRend
         )
 
       case 'cards':
-        const cards = schema[section.items as string] || []
+        const cards = pageSchema[section.items as string] || []
         return (
           <div key={index} className={cn('space-y-' + (section.spacing || '4'))}>
             {cards.map((card: any) => renderCard(card))}
@@ -75,7 +81,7 @@ export function JSONPageRenderer({ schema, data, functions = {} }: ComponentRend
         )
 
       case 'grid':
-        const gridItems = schema[section.items as string] || []
+        const gridItems = pageSchema[section.items as string] || []
         const { sm = 1, md = 2, lg = 3 } = section.columns || {}
         return (
           <div
@@ -199,7 +205,7 @@ export function JSONPageRenderer({ schema, data, functions = {} }: ComponentRend
 
   return (
     <div className="h-full overflow-auto p-6 space-y-6">
-      {schema.layout.sections?.map((section, index) => renderSection(section, index))}
+      {pageSchema.layout.sections?.map((section, index) => renderSection(section, index))}
     </div>
   )
 }
diff --git a/src/components/ProjectDashboard.tsx b/src/components/ProjectDashboard.tsx
index 78aa6ec..98891a7 100644
--- a/src/components/ProjectDashboard.tsx
+++ b/src/components/ProjectDashboard.tsx
@@ -10,9 +10,8 @@ import {
   FileText,
 } from '@phosphor-icons/react'
 import { ProjectFile, PrismaModel, ComponentNode, ThemeConfig, PlaywrightTest, StorybookStory, UnitTest, FlaskConfig, NextJsConfig } from '@/types/project'
-import { SeedDataStatus, DetailRow, CompletionCard, TipsCard } from '@/components/atoms'
+import { SeedDataStatus, DetailRow, CompletionCard, TipsCard, StatCard } from '@/components/atoms'
 import { GitHubBuildStatus } from '@/components/molecules/GitHubBuildStatus'
-import { StatCard } from '@/components/molecules'
 import { useDashboardMetrics } from '@/hooks/ui/use-dashboard-metrics'
 import { useDashboardTips } from '@/hooks/ui/use-dashboard-tips'
 
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index d4b14d1..2ed619e 100644
--- a/src/components/molecules/index.ts
+++ b/src/components/molecules/index.ts
@@ -4,7 +4,6 @@ export { CodeExplanationDialog } from './CodeExplanationDialog'
 export { EditorActions } from './EditorActions'
 export { EditorToolbar } from './EditorToolbar'
 export { EmptyEditorState } from './EmptyEditorState'
-export { EmptyState } from './EmptyState'
 export { FileTabs } from './FileTabs'
 export { GitHubBuildStatus } from './GitHubBuildStatus'
 export { LabelWithBadge } from './LabelWithBadge'
@@ -14,14 +13,13 @@ export { LazyLineChart } from './LazyLineChart'
 export { LazyBarChart } from './LazyBarChart'
 export { LazyD3BarChart } from './LazyD3BarChart'
 export { LoadingFallback } from './LoadingFallback'
-export { LoadingState } from './LoadingState'
 export { MonacoEditorPanel } from './MonacoEditorPanel'
 export { NavigationGroupHeader } from './NavigationGroupHeader'
 export { NavigationItem } from './NavigationItem'
 export { PageHeaderContent } from './PageHeaderContent'
 export { SaveIndicator } from './SaveIndicator'
 export { SeedDataManager } from './SeedDataManager'
-export { StatCard } from './StatCard'
+export { StatCard as MoleculeStatCard } from './StatCard'
 export { ToolbarButton } from './ToolbarButton'
 export { TreeCard } from './TreeCard'
 export { TreeFormDialog } from './TreeFormDialog'
@@ -33,4 +31,6 @@ export { DataSourceCard } from './DataSourceCard'
 export { BindingEditor } from './BindingEditor'
 export { DataSourceEditorDialog } from './DataSourceEditorDialog'
 export { ComponentBindingDialog } from './ComponentBindingDialog'
+export { EmptyState as MoleculeEmptyState } from './EmptyState'
+export { LoadingState as MoleculeLoadingState } from './LoadingState'
 
diff --git a/src/components/organisms/TreeListPanel.tsx b/src/components/organisms/TreeListPanel.tsx
index 0144c21..3eb0773 100644
--- a/src/components/organisms/TreeListPanel.tsx
+++ b/src/components/organisms/TreeListPanel.tsx
@@ -1,7 +1,7 @@
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Button } from '@/components/ui/button'
 import { TreeCard, TreeListHeader } from '@/components/molecules'
-import { EmptyState } from '@/components/molecules'
+import { EmptyState } from '@/components/atoms'
 import { ComponentTree } from '@/types/project'
 import { FolderOpen } from '@phosphor-icons/react'
 
@@ -43,11 +43,10 @@ export function TreeListPanel({
             icon={<FolderOpen size={48} weight="duotone" />}
             title="No component trees yet"
             description="Create your first tree to get started"
-            action={
-              <Button size="sm" onClick={onCreateNew}>
-                Create First Tree
-              </Button>
-            }
+            action={{
+              label: 'Create First Tree',
+              onClick: onCreateNew
+            }}
           />
         </div>
       ) : (
diff --git a/src/config/pages/lambda-designer.json b/src/config/pages/lambda-designer.json
index bb60b6e..4792bb3 100644
--- a/src/config/pages/lambda-designer.json
+++ b/src/config/pages/lambda-designer.json
@@ -1,4 +1,5 @@
 {
+  "id": "lambda-designer",
   "name": "Lambda Designer",
   "layout": {
     "type": "single"
diff --git a/src/config/pages/workflow-designer.json b/src/config/pages/workflow-designer.json
index e15ea62..6486690 100644
--- a/src/config/pages/workflow-designer.json
+++ b/src/config/pages/workflow-designer.json
@@ -1,4 +1,5 @@
 {
+  "id": "workflow-designer",
   "name": "Workflow Designer",
   "layout": {
     "type": "single"