diff --git a/packages/effect-fc/src/ReactComponent.ts b/packages/effect-fc/src/ReactComponent.ts
index 940e44c..71711a5 100644
--- a/packages/effect-fc/src/ReactComponent.ts
+++ b/packages/effect-fc/src/ReactComponent.ts
@@ -61,10 +61,10 @@ export const use: {
 })
 
 export const withRuntime: {
-    <E, R, P extends {} = {}>(context: React.Context<Runtime.Runtime<R>>): (self: ReactComponent<E, R, P>) => React.FC<P>
-    <E, R, P extends {} = {}>(self: ReactComponent<E, R, P>, context: React.Context<Runtime.Runtime<R>>): React.FC<P>
+    <E, R, P extends {} = {}>(context: React.Context<Runtime.Runtime<R>>): (self: ReactComponent<E, R | Scope.Scope, P>) => React.FC<P>
+    <E, R, P extends {} = {}>(self: ReactComponent<E, R | Scope.Scope, P>, context: React.Context<Runtime.Runtime<R>>): React.FC<P>
 } = Function.dual(2, <E, R, P extends {}>(
-    self: ReactComponent<E, R, P>,
+    self: ReactComponent<E, R | Scope.Scope, P>,
     context: React.Context<Runtime.Runtime<R>>,
 ): React.FC<P> => function WithRuntime(props) {
     const runtime = React.useContext(context)
diff --git a/packages/example/src/routes/index.tsx b/packages/example/src/routes/index.tsx
index 6a6620f..3158660 100644
--- a/packages/example/src/routes/index.tsx
+++ b/packages/example/src/routes/index.tsx
@@ -1,20 +1,18 @@
 import { runtime } from "@/runtime"
+import { TodosState } from "@/todo/TodosState.service"
 import { createFileRoute } from "@tanstack/react-router"
 import { Effect, pipe } from "effect"
-import { ReactComponent } from "effect-fc"
-
-
-const RouteComponent = pipe(
-    Effect.fn(function*() {
-        yield* Effect.succeed("ouient")
-        return <div>Hello "/"!</div>
-    }),
-
-    ReactComponent.withDisplayName("Index"),
-    ReactComponent.withRuntime(runtime.context),
-)
+import { ReactComponent, ReactHook } from "effect-fc"
 
 
 export const Route = createFileRoute("/")({
-    component: RouteComponent
+    component: pipe(
+        Effect.fn(function*() {
+            const context = yield* ReactHook.useMemoLayer(TodosState.Default("todos"))
+            return <div>Hello "/"!</div>
+        }),
+
+        ReactComponent.withDisplayName("Index"),
+        ReactComponent.withRuntime(runtime.context),
+    )
 })
diff --git a/packages/example/src/todo/TodosState.ts b/packages/example/src/todo/TodosState.service.ts
similarity index 86%
rename from packages/example/src/todo/TodosState.ts
rename to packages/example/src/todo/TodosState.service.ts
index f8bb8c2..70d0a0e 100644
--- a/packages/example/src/todo/TodosState.ts
+++ b/packages/example/src/todo/TodosState.service.ts
@@ -1,5 +1,6 @@
 import { Todo } from "@/domain"
 import { KeyValueStore } from "@effect/platform"
+import { BrowserKeyValueStore } from "@effect/platform-browser"
 import { Chunk, Console, Effect, Option, Schema, Stream, SubscriptionRef } from "effect"
 import { SubscriptionSubRef } from "effect-fc/types"
 
@@ -41,8 +42,13 @@ export class TodosState extends Effect.Service<TodosState>()("TodosState", {
             Stream.debounce("500 millis"),
             Stream.runForEach(saveToLocalStorage),
         ))
-        yield* Effect.addFinalizer(() => Effect.flatMap(ref, saveToLocalStorage))
+        yield* Effect.addFinalizer(() => ref.pipe(
+            Effect.flatMap(saveToLocalStorage),
+            Effect.ignore,
+        ))
 
         return { ref, makeSubRef } as const
-    })
+    }),
+
+    dependencies: [BrowserKeyValueStore.layerLocalStorage],
 }) {}