diff --git a/packages/docs/docs/intro.md b/packages/docs/docs/intro.md
index 428c9bd..b37a396 100644
--- a/packages/docs/docs/intro.md
+++ b/packages/docs/docs/intro.md
@@ -47,6 +47,19 @@ export class TodosView extends Component.make("TodosView")(function*() {
         </Container>
     )
 }) {}
+
+const Index = Component.make("IndexView")(function*() {
+    const context = yield* Component.useContextFromLayer(TodosState.Default)
+    const Todos = yield* Effect.provide(TodosView.use, context)
+
+    return <Todos />
+}).pipe(
+    Component.withRuntime(runtime.context)
+)
+
+export const Route = createFileRoute("/")({
+    component: Index
+})
 ```
 
 ## Getting Started
diff --git a/packages/effect-fc/README.md b/packages/effect-fc/README.md
index b3c7ecd..d35c93d 100644
--- a/packages/effect-fc/README.md
+++ b/packages/effect-fc/README.md
@@ -15,39 +15,37 @@ Documentation is currently being written. In the meantime, you can take a look a
 
 ## What writing components looks like
 ```typescript
-export class Todos extends Component.make("Todos")(function*() {
+export class TodosView extends Component.make("TodosView")(function*() {
     const state = yield* TodosState
-    const [todos] = yield* useSubscribables(state.ref)
+    const [todos] = yield* Component.useSubscribables([state.subscriptionRef])
 
-    yield* useOnMount(() => Effect.andThen(
+    yield* Component.useOnMount(() => Effect.andThen(
         Console.log("Todos mounted"),
         Effect.addFinalizer(() => Console.log("Todos unmounted")),
     ))
 
-    const TodoFC = yield* Todo
+    const Todo = yield* TodoView.use
 
     return (
         <Container>
             <Heading align="center">Todos</Heading>
 
             <Flex direction="column" align="stretch" gap="2" mt="2">
-                <TodoFC _tag="new" />
+                <Todo _tag="new" />
 
                 {Chunk.map(todos, todo =>
-                    <TodoFC key={todo.id} _tag="edit" id={todo.id} />
+                    <Todo key={todo.id} _tag="edit" id={todo.id} />
                 )}
             </Flex>
         </Container>
     )
 }) {}
 
-const TodosStateLive = TodosState.Default("todos")
+const Index = Component.make("IndexView")(function*() {
+    const context = yield* Component.useContextFromLayer(TodosState.Default)
+    const Todos = yield* Effect.provide(TodosView.use, context)
 
-const Index = Component.make("Index")(function*() {
-    const context = yield* useContext(TodosStateLive)
-    const TodosFC = yield* Effect.provide(Todos, context)
-
-    return <TodosFC />
+    return <Todos />
 }).pipe(
     Component.withRuntime(runtime.context)
 )
diff --git a/packages/effect-fc/package.json b/packages/effect-fc/package.json
index c8429df..0dee8af 100644
--- a/packages/effect-fc/package.json
+++ b/packages/effect-fc/package.json
@@ -1,7 +1,7 @@
 {
   "name": "effect-fc",
   "description": "Write React function components with Effect",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "type": "module",
   "files": [
     "./README.md",