diff --git a/examples/src/App.tsx b/examples/src/App.tsx
index f091e63..d9eb3b5 100644
--- a/examples/src/App.tsx
+++ b/examples/src/App.tsx
@@ -5,35 +5,29 @@ import { createMachineComponent } from "@webinargeek/machine-component"
 
 const Count = createMachineComponent<CountMachine>({
   states: {
-    a: {
-      Component: ({ actorRef }) => {
-        const count = useSelector(actorRef, (state) => state.context.count)
+    a: ({ actorRef }) => {
+      const count = useSelector(actorRef, (state) => state.context.count)
 
-        return (
-          <>
-            <div className="card">
-              <button onClick={() => actorRef.send({ type: "count" })}>
-                count is {count}
-              </button>
-            </div>
-            <div className="card">
-              <button onClick={() => actorRef.send({ type: "stop" })}>
-                Stop
-              </button>
-            </div>
-          </>
-        )
-      },
-    },
-    b: {
-      Component: ({ actorRef }) => (
-        <div className="card">
-          <button onClick={() => actorRef.send({ type: "start" })}>
-            Start
-          </button>
-        </div>
-      ),
+      return (
+        <>
+          <div className="card">
+            <button onClick={() => actorRef.send({ type: "count" })}>
+              count is {count}
+            </button>
+          </div>
+          <div className="card">
+            <button onClick={() => actorRef.send({ type: "stop" })}>
+              Stop
+            </button>
+          </div>
+        </>
+      )
     },
+    b: ({ actorRef }) => (
+      <div className="card">
+        <button onClick={() => actorRef.send({ type: "start" })}>Start</button>
+      </div>
+    ),
   },
 })
 
diff --git a/packages/machine-component/README.md b/packages/machine-component/README.md
index 9d08a15..ebc3eb9 100644
--- a/packages/machine-component/README.md
+++ b/packages/machine-component/README.md
@@ -88,7 +88,7 @@ const App = () => {
 
 ### Layout components
 
-A Component can be passed to the `Component` field of a parent state which will be rendered without being unmounted as the child states change.
+A component can be passed to the `Layout` field of a parent state which will be rendered without being unmounted as the child states change.
 
 The components defined in the child states will be passed into the `children` prop.
 
@@ -96,7 +96,7 @@ The components defined in the child states will be passed into the `children` pr
 const Component = createMachineComponent<MyMachine>({
   states: {
     a: {
-      Component: () => <div>A {children}</div>,
+      Layout: ({ children }) => <div>A {children}</div>,
       states: {
         b: () => <div>B</div>,
         c: () => <div>C</div>,
@@ -117,7 +117,7 @@ The state components will also receive the `actorRef` prop that was passed to th
 const Component = createMachineComponent<MyMachine, { foo: string }>({
   states: {
     a: {
-      Component: ({ foo }) => <div>A {foo}</div>,
+      Layout: ({ foo }) => <div>A {foo}</div>,
     },
     b: ({ foo }) => <div>B {foo}</div>,
     c: ({ children, actorRef }) => {