diff --git a/packages/example/src/todo/Todo.tsx b/packages/example/src/todo/Todo.tsx
index 5e2f33c..4f49b9f 100644
--- a/packages/example/src/todo/Todo.tsx
+++ b/packages/example/src/todo/Todo.tsx
@@ -57,6 +57,7 @@ export const Todo = Component.make(function* Todo(props: TodoProps) {
                 {props._tag === "edit" &&
                     <Flex direction="column" justify="center" align="center" gap="1">
                         <IconButton
+                            disabled={props.index <= 0}
                             onClick={() => Runtime.runSync(runtime)(
                                 Ref.updateSome(state.ref, todos => Option.gen(function*() {
                                     if (props.index <= 0)
@@ -75,6 +76,7 @@ export const Todo = Component.make(function* Todo(props: TodoProps) {
                         </IconButton>
 
                         <IconButton
+                            disabled={props.index >= todosSize}
                             onClick={() => Runtime.runSync(runtime)(
                                 Ref.updateSome(state.ref, todos => Option.gen(function*() {
                                     if (props.index >= Chunk.size(todos))