diff --git a/beta/public/images/docs/diagrams/responding_to_input_flow.dark.svg b/beta/public/images/docs/diagrams/responding_to_input_flow.dark.svg
new file mode 100644
index 00000000..7b0a2645
--- /dev/null
+++ b/beta/public/images/docs/diagrams/responding_to_input_flow.dark.svg
@@ -0,0 +1,20 @@
+
diff --git a/beta/public/images/docs/diagrams/responding_to_input_flow.svg b/beta/public/images/docs/diagrams/responding_to_input_flow.svg
new file mode 100644
index 00000000..a353950e
--- /dev/null
+++ b/beta/public/images/docs/diagrams/responding_to_input_flow.svg
@@ -0,0 +1,20 @@
+
diff --git a/beta/public/images/docs/sketches/s_flow-chart.jpg b/beta/public/images/docs/sketches/s_flow-chart.jpg
deleted file mode 100644
index 1e5d94bd..00000000
Binary files a/beta/public/images/docs/sketches/s_flow-chart.jpg and /dev/null differ
diff --git a/beta/src/pages/learn/reacting-to-input-with-state.md b/beta/src/pages/learn/reacting-to-input-with-state.md
index 9695454e..7c60ed77 100644
--- a/beta/src/pages/learn/reacting-to-input-with-state.md
+++ b/beta/src/pages/learn/reacting-to-input-with-state.md
@@ -332,7 +332,15 @@ In both cases, **you must set [state variables](/learn/state-a-components-memory
To help visualize this flow, try drawing each state on paper as a labeled circle, and each change between two states as an arrow. You can sketch out many flows this way and sort out bugs long before implementation.
-
+
+
+
+
+Form States
+
+
+
+
### Step 3: Represent the state in memory with `useState` {/*step-3-represent-the-state-in-memory-with-usestate*/}