diff --git a/docs/02-app/01-building-your-application/03-rendering/02-client-components.mdx b/docs/02-app/01-building-your-application/03-rendering/02-client-components.mdx
index eab9879e92909..319b8387ee87d 100644
--- a/docs/02-app/01-building-your-application/03-rendering/02-client-components.mdx
+++ b/docs/02-app/01-building-your-application/03-rendering/02-client-components.mdx
@@ -54,7 +54,7 @@ export default function Counter() {
 }
 ```
 
-The diagram below shows nested components, using `onClick` and `useState` in `toggle.js` will cause an error if the `"use client"` directive is not defined. This is because, by default, the components are rendered on the server where these APIs are not available. By defining the `"use client"` directive to `toggle.js`, you can tell React to render the component and its on the client, where the APIs are available.
+The diagram below shows nested components, using `onClick` and `useState` in `toggle.js` will cause an error if the `"use client"` directive is not defined. This is because, by default, the components are rendered on the server where these APIs are not available. By defining the `"use client"` directive to `toggle.js`, you can tell React to render the component and its children on the client, where the APIs are available.
 
 <Image
   alt="Use Client Directive and Network Boundary"