diff --git a/docs/start/framework/react/tutorial/reading-writing-file.md b/docs/start/framework/react/tutorial/reading-writing-file.md
index 11b1be07944..7666d9ad0d0 100644
--- a/docs/start/framework/react/tutorial/reading-writing-file.md
+++ b/docs/start/framework/react/tutorial/reading-writing-file.md
@@ -375,7 +375,7 @@ export function JokeForm() {
 Now, let's wire the form up to our `addJoke` server function in the `handleSubmit` function. Calling a server action is simple! It's just a function call.
 
 ```tsx
-//JokeForm.tsx
+// src/components/JokeForm.tsx
 import { useState } from 'react'
 import { useRouter } from '@tanstack/react-router'
 import { addJoke } from '../serverActions/jokesActions'
@@ -446,6 +446,42 @@ export function JokeForm() {
 }
 ```
 
+Import and render <JokeForm /> in the home route src/routes/index.tsx so the add-joke form becomes visible on the page.
+
+```tsx
+// src/components/JokesList.tsx
+
+// src/components/JokesList.tsx
+import type { Joke } from '../types'
+import { JokeForm } from '@/components/JokeForm' 
+
+interface JokesListProps {
+  jokes: Joke[]
+}
+
+export function JokesList({ jokes }: JokesListProps) {
+  if (!jokes || jokes.length === 0) {
+    return <p className="text-gray-500 italic">No jokes found. Add some!</p>
+  }
+
+  return (
+    <div className="space-y-4">
+      <JokeForm />
+      <h2 className="text-xl font-semibold">Jokes Collection</h2>
+      {jokes.map((joke) => (
+        <div
+          key={joke.id}
+          className="bg-white p-4 rounded-lg shadow-md border border-gray-200"
+        >
+          <p className="font-bold text-lg mb-2">{joke.question}</p>
+          <p className="text-gray-700">{joke.answer}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
 With this, our UI should look like this:
 ![DevJoke App with Form to Add Jokes](https://raw.githubusercontent.com/TanStack/router/main/docs/router/assets/reading-writing-file-devjokes-2.png)