diff --git a/module3/lessons/react-router-prework.md b/module3/lessons/react-router-prework.md
index aa53656e..2cdf90e3 100644
--- a/module3/lessons/react-router-prework.md
+++ b/module3/lessons/react-router-prework.md
@@ -35,7 +35,6 @@ Any code that uses a React-Router-provided component must be wrapped in a _route
 #### Route Matchers
 2. What does the `<Route />` component do? 
 3. What does the `<Routes />` component do?
-4. What does the `<Outlet />` component do?
 
 #### Route Changers
 9. What does the `<Link />` component do? How does a user interact with it?
diff --git a/module3/lessons/react-router.md b/module3/lessons/react-router.md
index ac0f208c..ffe96b17 100644
--- a/module3/lessons/react-router.md
+++ b/module3/lessons/react-router.md
@@ -17,7 +17,6 @@ module: 3
 * `NavLink` A special version of the \<Link\> that will add styling attributes to the rendered element when it matches the current URL.
 * `Route` Its most basic responsibility is to render some UI when a location matches the route’s path
 * `Routes` A component that wraps your Route components that selects the best path match
-* `Outlet` A component that renders the next match in a set of matches. it must exist in the parent component when nesting routes
 * `useParams` A hook that allows us to gain access to a Route's params
 
 <!-- COMMENTING OUT THE PREWORK AS IT'S BEEN DEEMED UNNECCESARY AT THIS TIME -->
@@ -39,7 +38,6 @@ In small groups, discuss the following questions:
 - Routes
 - Link
 - NavLink
-- Outlet
 </section> -->
 
 ## Why Routing?
@@ -498,11 +496,11 @@ export default Creatures;
 </section>
 
 <section class="dropdown">
-### 13. Let's tell Router what to do with this new path
 
-```jsx
-// App.js
+### 13. Let's define a new separate route for `/:animal/:id`
 
+```jsx
+import './App.css';
 import './App.css';
 import { Routes, Route, NavLink } from 'react-router-dom';
 import Home from '../Home/Home';
@@ -518,77 +516,21 @@ function App() {
       </nav>
       <h1>Puppies or Sharks?</h1>
       <Routes>
-        <Route path="/" element={<Home />}/>
-        <Route path="/:animal" element={<Creatures />}>
-          <Route path=":id" element={<CreatureDetails />}/>
-        </Route>
+        <Route path="/" element={<Home />} />
+        <Route path=":animal" element={<Creatures />} />
+        <Route path="/:animal/:id" element={<CreatureDetails />} />
       </Routes>
     </main>
   );
 }
 
 export default App;
-```
-
-<section class="call-to-action">
-### Let's explore
-
-1. Why did we nest the routes?
-2. Why don't I have a '/' in front of ":id"? (Note: You can include the '/', if you also include the rest of the path. Meaning, you could do `:/id` OR `/:animal/:id`)
-3. Is it working? Is CreatureDetails rendering to the page?
-</section>
-
-</section>
-
-<section class="dropdown">
-### 14. One more step to getting CreatureDetails to appear
 
-```jsx
-// Creatures.js
-
-import './Creatures.css';
-import { getCreaturesData } from '../../data/animalData';
-import { useParams, Link, Outlet } from 'react-router-dom';
-
-const Creatures = () => {
-  const creatureType = useParams().animal;
-
-  const creatureImages = getCreaturesData(creatureType).map(creature => {
-    const { id, image } = creature;
-    return (
-      <Link to={`/${creatureType}/${id}`}>
-        <img src={image} key={id} id={id} className="app-img"/>
-      </Link>
-     )
-   });
-
-   return (
-     <>
-       <h1>{creatureType}!</h1>
-       <Outlet />
-       {creatureImages}
-     </>
-   )
-}
-
-export default Creatures;
 ```
-<section class="call-to-action">
-### Let's explore
-
-1. Try moving the `<Outlet />` component around. Does it's placement matter?
-2. Why is the `<Creatures />` component still showing?
-3. What would you have to change if you didn't want the `<Creatures />` component to render at this path?
-</section>
-***Why Use the `Outlet`*** ?  
-The Outlet component serves as a placeholder for rendering nested route content within a parent component. It's a fundamental tool that allows you to seamlessly integrate child components' content into a parent's layout while maintaining UI coherence.
-
-***Real-World Analogy: Twitter Inbox*** <br/>
-Imagine a scenario similar to the Twitter inbox. When you access your inbox, you see a list of message previews on the left side of the screen, but the right side remains blank until you select a specific conversation. This structure is where the Outlet comes into play.
 </section>
 
 <section class="dropdown">
-### 15. Now let's make CreatureDetails show the animal's info (hint: look at animalData.js!)
+### 14. Now let's make CreatureDetails show the animal's info (hint: look at animalData.js!)
 
 ```jsx
 // CreatureDetails.js
@@ -616,15 +558,18 @@ export default CreatureDetails;
 ```
 </section>
 
-Now that you know how to use Outlet, let's explore other ways we can achieve dynamic routing without it.
-We are going to remove our nested route and define a new separate route for `/:animal/:id` which is not directly nested within the first route `/`. Each route has it's own component. 
-You would use this approach when you have distinct pages or components that should be displayed separately based on the URL. 
-<section class="dropdown">
+<br>
+
+## Self-Guided Exploration: Outlet
+
+An `Outlet` is a special component used for rendering child routes in nested routing setups. It acts as a placeholder where the content of child routes will be displayed. The `Outlet` component specifies where child route components will be rendered within a parent route's component.
 
-### Defining a new separate route for `/:animal/:id`
+<section class="dropdown">
+### 15. Let's update our routes to use nested routes instead
 
 ```jsx
-import './App.css';
+// App.js
+
 import './App.css';
 import { Routes, Route, NavLink } from 'react-router-dom';
 import Home from '../Home/Home';
@@ -640,21 +585,75 @@ function App() {
       </nav>
       <h1>Puppies or Sharks?</h1>
       <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path=":animal" element={<Creatures />} />
-        <Route path="/:animal/:id" element={<CreatureDetails />} />
+        <Route path="/" element={<Home />}/>
+        <Route path="/:animal" element={<Creatures />}>
+          <Route path=":id" element={<CreatureDetails />}/>
+        </Route>
       </Routes>
     </main>
   );
 }
 
 export default App;
+```
+
+<section class="call-to-action">
+### Let's explore
+
+1. Why might we choose to nest the routes?
+2. What is the full URL that would render CreatureDetails?
+3. Is it working? Is CreatureDetails rendering to the page?
+</section>
+
+</section>
+
+<section class="dropdown">
+### 16. One more step to getting CreatureDetails to appear
 
+```jsx
+// Creatures.js
+
+import './Creatures.css';
+import { getCreaturesData } from '../../data/animalData';
+import { useParams, Link, Outlet } from 'react-router-dom';
+
+const Creatures = () => {
+  const creatureType = useParams().animal;
+
+  const creatureImages = getCreaturesData(creatureType).map(creature => {
+    const { id, image } = creature;
+    return (
+      <Link to={`/${creatureType}/${id}`}>
+        <img src={image} key={id} id={id} className="app-img"/>
+      </Link>
+     )
+   });
+
+   return (
+     <>
+       <h1>{creatureType}!</h1>
+       <Outlet />
+       {creatureImages}
+     </>
+   )
+}
+
+export default Creatures;
 ```
-Now it's time to remove `Outlet` from our `Creature.js` file since we don't have nested routes and we don't need `Outlet` anymore
+<section class="call-to-action">
+### Let's explore
+
+1. Try moving the `<Outlet />` component around. Does it's placement matter?
+2. Why is the `<Creatures />` component still showing?
+3. What would you have to change if you didn't want the `<Creatures />` component to render at this path?
+</section>
 </section>
 
-<br>
+***Why Use the `Outlet`*** ?  
+The Outlet component serves as a placeholder for rendering nested route content within a parent component. It's a fundamental tool that allows you to seamlessly integrate child components' content into a parent's layout while maintaining UI coherence.
+
+***Real-World Analogy: Twitter Inbox*** <br/>
+Imagine a scenario similar to the Twitter inbox. When you access your inbox, you see a list of message previews on the left side of the screen, but the right side remains blank until you select a specific conversation. This structure is where the Outlet comes into play.
 
 <section class="call-to-action">
 ### Final Reflections
@@ -665,8 +664,9 @@ Now it's time to remove `Outlet` from our `Creature.js` file since we don't have
 - `Routes`
 - `Link`
 - `NavLink`
-- `Outlet`
 - `useParams`
+- `Outlet`
+
 </section>
 
 ## Extra Resources: