diff --git a/docs/src/03.state-hierarchy.md b/docs/src/03.state-hierarchy.md
index a236844..65ce488 100644
--- a/docs/src/03.state-hierarchy.md
+++ b/docs/src/03.state-hierarchy.md
@@ -69,13 +69,13 @@ As you can see, the page's state is composed of the states of all its stateful c
 
 When persisting the state of a component inside a state hierarchy, **Blazor.State** uses the component's type name as an identifier by default. This approach works well in cases where a single state parent does not contain multiple stateful components of the same type.
 
-Consider the following example:
+Consider the following example of how a page containing multiple instances of the same component might look:
 
-```html
-<MyComponent>
-    <MyComponent />
-    <MyComponent />
-</MyComponent>
+```csharp
+// MyPage.razor
+
+<MyComponent />
+<MyComponent />
 ```
 
 In this case, the page's state hierarchy should look something like the following:
@@ -83,13 +83,10 @@ In this case, the page's state hierarchy should look something like the followin
 ```json
 {
     "n__MyComponent": {
-        "Text": "Some text",
-        "n__MyComponent": {
-            "Text": "Some text"
-        },
-        "n__MyComponent": {
-            "Text": "Some text"
-        }
+        "Text": "Some text"
+    },
+    "n__MyComponent": {
+        "Text": "Some text"
     }
 }
 ```
@@ -100,27 +97,26 @@ To solve this problem, **Blazor.State** introduces a component parameter **State
 
 Consider the following example:
 
-```html
-<MyComponent>
-    <MyComponent StateId="NestedComponent1" />
-    <MyComponent StateId="NestedComponent2" />
-</MyComponent>
+```csharp
+// MyPage.razor
+
+<MyComponent StateId="NestedComponent1" />
+<MyComponent StateId="NestedComponent2" />
 ```
 
 In this case, the page's state hierarchy should now look something like the following:
 
 ```json
 {
-    "n__MyComponent": {
-        "Text": "Some text",
-        "n__NestedComponent1": {
-            "Text": "Some text"
-        },
-        "n__NestedComponent2": {
-            "Text": "Some text"
-        }
+    "n__NestedComponent1": {
+        "Text": "Some text"
+    },
+    "n__NestedComponent2": {
+        "Text": "Some text"
     }
 }
 ```
 
-As you can see, the state of the nested components is stored in the parent component's state, and the state of each nested component is prefixed with `n__` and suffixed with the component's **StateId**. This way, **Blazor.State** can distinguish between multiple components of the same type located under the same parent stateful component - and restore their states correctly, with each component receiving it's own state.
\ No newline at end of file
+As you can see, the state of the nested components is stored in the parent component's state (in this example, the page is the parent component), and the state of each nested component is prefixed with `n__` and suffixed with the component's **StateId**. This way, **Blazor.State** can distinguish between multiple components of the same type located under the same parent stateful component - and restore their states correctly, with each component receiving it's own state.
+
+You can use this knowledge to build state hierarchies of any complexity, including ones with multiple nested components of the same type, and **Blazor.State** will take care of persisting and restoring their states for you.
\ No newline at end of file