diff --git a/json-components-registry.json b/json-components-registry.json
index 6f49ed3..de2c434 100644
--- a/json-components-registry.json
+++ b/json-components-registry.json
@@ -787,7 +787,7 @@
       "category": "navigation",
       "canHaveChildren": true,
       "description": "NavigationGroupHeader component",
-      "status": "json-compatible",
+      "status": "supported",
       "source": "molecules",
       "jsonCompatible": true
     },
@@ -949,7 +949,7 @@
       "category": "feedback",
       "canHaveChildren": true,
       "description": "LabelWithBadge component",
-      "status": "json-compatible",
+      "status": "supported",
       "source": "molecules",
       "jsonCompatible": true
     },
@@ -1322,7 +1322,7 @@
       "category": "custom",
       "canHaveChildren": true,
       "description": "AppBranding component",
-      "status": "json-compatible",
+      "status": "supported",
       "source": "molecules",
       "jsonCompatible": true
     },
diff --git a/src/lib/component-definitions.json b/src/lib/component-definitions.json
index 2cbcf3c..8eb898e 100644
--- a/src/lib/component-definitions.json
+++ b/src/lib/component-definitions.json
@@ -294,6 +294,17 @@
     "icon": "Circle",
     "defaultProps": { "status": "active", "children": "Active" }
   },
+  {
+    "type": "LabelWithBadge",
+    "label": "Label With Badge",
+    "category": "feedback",
+    "icon": "Tag",
+    "defaultProps": {
+      "label": "Total Items",
+      "badge": 24,
+      "badgeVariant": "secondary"
+    }
+  },
   {
     "type": "ErrorBadge",
     "label": "Error Badge",
@@ -795,6 +806,17 @@
       "errorCount": 0
     }
   },
+  {
+    "type": "NavigationGroupHeader",
+    "label": "Navigation Group Header",
+    "category": "navigation",
+    "icon": "CaretDown",
+    "defaultProps": {
+      "label": "Components",
+      "count": 12,
+      "isExpanded": true
+    }
+  },
   {
     "type": "EmptyCanvasState",
     "label": "Empty Canvas State",
@@ -841,6 +863,16 @@
       "selectedTreeId": null
     }
   },
+  {
+    "type": "AppBranding",
+    "label": "App Branding",
+    "category": "custom",
+    "icon": "Layout",
+    "defaultProps": {
+      "title": "CodeForge",
+      "subtitle": "Low-Code Next.js App Builder"
+    }
+  },
   {
     "type": "AppHeader",
     "label": "App Header",
diff --git a/src/lib/json-ui/component-registry.ts b/src/lib/json-ui/component-registry.ts
index b7d0c7d..6d72682 100644
--- a/src/lib/json-ui/component-registry.ts
+++ b/src/lib/json-ui/component-registry.ts
@@ -194,10 +194,15 @@ if (breadcrumbComponent) {
   atomComponents.Breadcrumb = breadcrumbComponent as ComponentType<any>
 }
 
-export const moleculeComponents: UIComponentRegistry = buildRegistryFromNames(
-  moleculeRegistryNames,
-  MoleculeComponents as Record<string, ComponentType<any>>
-)
+export const moleculeComponents: UIComponentRegistry = {
+  ...buildRegistryFromNames(
+    moleculeRegistryNames,
+    MoleculeComponents as Record<string, ComponentType<any>>
+  ),
+  AppBranding: (MoleculeComponents as Record<string, ComponentType<any>>).AppBranding,
+  LabelWithBadge: (MoleculeComponents as Record<string, ComponentType<any>>).LabelWithBadge,
+  NavigationGroupHeader: (MoleculeComponents as Record<string, ComponentType<any>>).NavigationGroupHeader,
+}
 
 export const organismComponents: UIComponentRegistry = buildRegistryFromNames(
   organismRegistryNames,
diff --git a/src/schemas/new-molecules-showcase.json b/src/schemas/new-molecules-showcase.json
index f4d6ae2..d5b8191 100644
--- a/src/schemas/new-molecules-showcase.json
+++ b/src/schemas/new-molecules-showcase.json
@@ -115,6 +115,7 @@
                 {
                   "id": "branding-content",
                   "type": "CardContent",
+                  "props": { "className": "space-y-4" },
                   "children": [
                     {
                       "id": "branding-demo",
@@ -123,6 +124,10 @@
                         "title": { "source": "appTitle" },
                         "subtitle": { "source": "appSubtitle" }
                       }
+                    },
+                    {
+                      "id": "branding-demo-default",
+                      "type": "AppBranding"
                     }
                   ]
                 }
@@ -335,6 +340,7 @@
                 {
                   "id": "nav-header-content",
                   "type": "CardContent",
+                  "props": { "className": "space-y-2" },
                   "children": [
                     {
                       "id": "nav-header-demo",
@@ -344,6 +350,15 @@
                         "count": { "source": "navGroup", "path": "count" },
                         "isExpanded": { "source": "navGroup", "path": "isExpanded" }
                       }
+                    },
+                    {
+                      "id": "nav-header-demo-collapsed",
+                      "type": "NavigationGroupHeader",
+                      "props": {
+                        "label": "Workflows",
+                        "count": 6,
+                        "isExpanded": false
+                      }
                     }
                   ]
                 }
diff --git a/src/types/json-ui.ts b/src/types/json-ui.ts
index 160251d..970a424 100644
--- a/src/types/json-ui.ts
+++ b/src/types/json-ui.ts
@@ -13,7 +13,7 @@ export type ComponentType =
   | 'DataList' | 'DataTable' | 'MetricCard' | 'Timeline'
   | 'LazyBarChart' | 'LazyLineChart' | 'LazyD3BarChart' | 'SeedDataManager'
   | 'SaveIndicator' | 'StorageSettings'
-  | 'AppBranding' | 'LabelWithBadge' | 'EmptyEditorState' | 'LoadingFallback' | 'LoadingState' | 'NavigationGroupHeader'
+  | 'AppBranding' | 'LabelWithBadge' | 'NavigationGroupHeader' | 'EmptyEditorState' | 'LoadingFallback' | 'LoadingState'
   | 'CodeExplanationDialog' | 'ComponentBindingDialog' | 'DataSourceCard' | 'DataSourceEditorDialog' | 'TreeCard' | 'TreeFormDialog'
   | 'ToolbarButton'
   | 'SchemaCodeViewer'