diff --git a/src/course/02- lessons/03-Gold/ErrorBoundary/exercise/exercise.stories.tsx b/src/course/02- lessons/03-Gold/ErrorBoundary/exercise/exercise.stories.tsx
index 86a013f..c2c391a 100644
--- a/src/course/02- lessons/03-Gold/ErrorBoundary/exercise/exercise.stories.tsx	
+++ b/src/course/02- lessons/03-Gold/ErrorBoundary/exercise/exercise.stories.tsx	
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './exercise';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥇 Gold/Error Boundaries/02-Exercise',
+  title: 'Lessons/🥇 Gold/🛡️ Error Boundaries Pattern/02-Exercise',
   component: Final
 };
 
diff --git a/src/course/02- lessons/03-Gold/ErrorBoundary/final/final.stories.tsx b/src/course/02- lessons/03-Gold/ErrorBoundary/final/final.stories.tsx
index e878de1..13f5f8e 100644
--- a/src/course/02- lessons/03-Gold/ErrorBoundary/final/final.stories.tsx	
+++ b/src/course/02- lessons/03-Gold/ErrorBoundary/final/final.stories.tsx	
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './final';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥇 Gold/Error Boundaries/03-Final',
+  title: 'Lessons/🥇 Gold/🛡️ Error Boundaries Pattern/03-Final',
   component: Final
 };
 
diff --git a/src/course/02- lessons/03-Gold/ErrorBoundary/lesson.mdx b/src/course/02- lessons/03-Gold/ErrorBoundary/lesson.mdx
index 45013f5..816603b 100644
--- a/src/course/02- lessons/03-Gold/ErrorBoundary/lesson.mdx	
+++ b/src/course/02- lessons/03-Gold/ErrorBoundary/lesson.mdx	
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥇 Gold/Error Boundaries/01-Lesson" />
+<Meta title="Lessons/🥇 Gold/🛡️ Error Boundaries Pattern/01-Lesson" />
 
-# Error Boundaries Pattern
+# 🛡️ Error Boundaries Pattern
 
 React makes it easy to build interactive UIs, but what happens when something goes wrong during rendering? Without safeguards, an error in one part of the UI can crash the entire application.
 
diff --git a/src/course/02-lessons/01-Bronze/ConditionalRendering/exercise/exercise.stories.tsx b/src/course/02-lessons/01-Bronze/ConditionalRendering/exercise/exercise.stories.tsx
index b8777c9..531c811 100644
--- a/src/course/02-lessons/01-Bronze/ConditionalRendering/exercise/exercise.stories.tsx
+++ b/src/course/02-lessons/01-Bronze/ConditionalRendering/exercise/exercise.stories.tsx
@@ -2,18 +2,18 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { userEvent, within, expect } from '@storybook/test';
 
-import { ComponentOne } from './exercise';
+import { PokemonTrainerStatus } from './exercise';
 
-const meta: Meta<typeof ComponentOne> = {
+const meta: Meta<typeof PokemonTrainerStatus> = {
   title:
-    'Lessons/🥉 Bronze/Conditional Rendering Pattern/02-Exercise',
-  component: ComponentOne
+    'Lessons/🥉 Bronze/🔀 Conditional Rendering Pattern/02-Exercise',
+  component: PokemonTrainerStatus
 };
 
 export default meta;
-type Story = StoryObj<typeof ComponentOne>;
+type Story = StoryObj<typeof PokemonTrainerStatus>;
 
-const username = 'John Doe';
+const trainerName = 'Ash';
 
 /*
  * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
@@ -24,28 +24,28 @@ export const Default: Story = {
     const canvas = within(canvasElement);
 
     await userEvent.click(
-      canvas.getByRole('button', { name: 'Login' })
+      canvas.getByRole('button', { name: '🎯 Challenge Gym Leader' })
     );
 
     await expect(
-      canvas.getByText(`Welcome ${username}`)
+      canvas.getByText(`Welcome Gym Leader ${trainerName}! 🏆`)
     ).toBeInTheDocument();
     await expect(
-      canvas.queryByRole('button', { name: 'Login' })
+      canvas.queryByRole('button', { name: '🎯 Challenge Gym Leader' })
     ).toBeNull();
 
     await userEvent.click(
-      canvas.getByRole('button', { name: 'Logout' })
+      canvas.getByRole('button', { name: '🔄 Reset Journey' })
     );
 
     await expect(
-      canvas.queryByText(`Welcome ${username}`)
+      canvas.queryByText(`Welcome Gym Leader ${trainerName}! 🏆`)
     ).toBeNull();
     await expect(
-      canvas.queryByRole('button', { name: 'Logout' })
+      canvas.queryByRole('button', { name: '🔄 Reset Journey' })
     ).toBeNull();
   },
   args: {
-    username
+    trainerName
   }
-};
+};
\ No newline at end of file
diff --git a/src/course/02-lessons/01-Bronze/ConditionalRendering/exercise/exercise.tsx b/src/course/02-lessons/01-Bronze/ConditionalRendering/exercise/exercise.tsx
index 5bb0e63..1a486e2 100644
--- a/src/course/02-lessons/01-Bronze/ConditionalRendering/exercise/exercise.tsx
+++ b/src/course/02-lessons/01-Bronze/ConditionalRendering/exercise/exercise.tsx
@@ -1,23 +1,23 @@
 import { Button } from '@shared/components/Button/Button.component';
 
-interface IComponentProps {
-  username: string;
+interface ITrainerProps {
+  trainerName: string;
 }
 
 // 1g - 💣 The ignore lint rules can be removed now
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const ComponentOne = (props: IComponentProps) => {
-  // 1a - 👨🏻‍💻 add a useState that has false as default. Name the variable [isAuthenticated, setIsAuthenticated]
+export const PokemonTrainerStatus = (props: ITrainerProps) => {
+  // 1a - 👨🏻💻 add a useState that has false as default. Name the variable [hasGymBadges, setHasGymBadges]
 
-  // 1b - 👨🏻‍💻 create me a onLogin function which setIsAuthenticated to be true
+  // 1b - 👨🏻💻 create me a onEarnBadge function which setHasGymBadges to be true
 
-  // 1c - 👨🏻‍💻 create me a onLogout function which setIsAuthenticated to be false
+  // 1c - 👨🏻💻 create me a onLoseBadges function which setHasGymBadges to be false
 
-  // 1d - 👨🏻‍💻 if authenticated, return a button called "Logout" with the onClick of onLogout
-  // 1e - 👨🏻‍💻 if authenticated, return some text called "Welcome {props.username}"
+  // 1d - 👨🏻💻 if hasGymBadges, return a button called "Reset Journey" with the onClick of onLoseBadges
+  // 1e - 👨🏻💻 if hasGymBadges, return some text called "Welcome Gym Leader {props.trainerName}! 🏆"
 
-  // 1f - 👨🏻‍💻 add onClick function onLogin to the button
-  return <Button>Login</Button>;
-};
+  // 1f - 👨🏻💻 add onClick function onEarnBadge to the button
+  return <Button>🎯 Challenge Gym Leader</Button>;
+};
\ No newline at end of file
diff --git a/src/course/02-lessons/01-Bronze/ConditionalRendering/final/final.stories.tsx b/src/course/02-lessons/01-Bronze/ConditionalRendering/final/final.stories.tsx
index 7052c79..74bb2aa 100644
--- a/src/course/02-lessons/01-Bronze/ConditionalRendering/final/final.stories.tsx
+++ b/src/course/02-lessons/01-Bronze/ConditionalRendering/final/final.stories.tsx
@@ -1,17 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { userEvent, within, expect } from '@storybook/test';
-import { ComponentOne } from './final';
 
-const meta: Meta<typeof ComponentOne> = {
-  title: 'Lessons/🥉 Bronze/Conditional Rendering Pattern/03-Final',
-  component: ComponentOne
+import { PokemonTrainerStatus } from './final';
+
+const meta: Meta<typeof PokemonTrainerStatus> = {
+  title:
+    'Lessons/🥉 Bronze/🔀 Conditional Rendering Pattern/03-Final',
+  component: PokemonTrainerStatus
 };
 
 export default meta;
-type Story = StoryObj<typeof ComponentOne>;
+type Story = StoryObj<typeof PokemonTrainerStatus>;
 
-const username = 'John Doe';
+const trainerName = 'Ash';
 
 /*
  * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
@@ -22,28 +24,22 @@ export const Default: Story = {
     const canvas = within(canvasElement);
 
     await userEvent.click(
-      canvas.getByRole('button', { name: 'Login' })
+      canvas.getByRole('button', { name: '🎯 Challenge Gym Leader' })
     );
 
     await expect(
-      canvas.getByText(`Welcome ${username}`)
+      canvas.getByText(`Welcome Gym Leader ${trainerName}! 🏆`)
     ).toBeInTheDocument();
-    await expect(
-      canvas.queryByRole('button', { name: 'Login' })
-    ).toBeNull();
 
     await userEvent.click(
-      canvas.getByRole('button', { name: 'Logout' })
+      canvas.getByRole('button', { name: '🔄 Reset Journey' })
     );
 
     await expect(
-      canvas.queryByText(`Welcome ${username}`)
-    ).toBeNull();
-    await expect(
-      canvas.queryByRole('button', { name: 'Logout' })
-    ).toBeNull();
+      canvas.getByRole('button', { name: '🎯 Challenge Gym Leader' })
+    ).toBeInTheDocument();
   },
   args: {
-    username
+    trainerName
   }
-};
+};
\ No newline at end of file
diff --git a/src/course/02-lessons/01-Bronze/ConditionalRendering/final/final.tsx b/src/course/02-lessons/01-Bronze/ConditionalRendering/final/final.tsx
index d2779ef..a7c89a8 100644
--- a/src/course/02-lessons/01-Bronze/ConditionalRendering/final/final.tsx
+++ b/src/course/02-lessons/01-Bronze/ConditionalRendering/final/final.tsx
@@ -1,31 +1,39 @@
 import { useState } from 'react';
 import { Button } from '@shared/components/Button/Button.component';
 
-interface IComponentProps {
-  username: string;
+interface ITrainerProps {
+  trainerName: string;
 }
 
-export const ComponentOne = (props: IComponentProps) => {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
+export const PokemonTrainerStatus = (props: ITrainerProps) => {
+  const [hasGymBadges, setHasGymBadges] = useState(false);
 
-  const onLogin = () => {
-    setIsAuthenticated(true);
+  const onEarnBadge = () => {
+    setHasGymBadges(true);
   };
 
-  const onLogout = () => {
-    setIsAuthenticated(false);
+  const onLoseBadges = () => {
+    setHasGymBadges(false);
   };
 
   return (
-    <header>
-      {/* Other components */}
-      {!isAuthenticated && <Button onClick={onLogin}>Login</Button>}
-      {isAuthenticated && (
-        <>
-          <Button onClick={onLogout}>Logout</Button>
-          <h1>Welcome {props.username}</h1>
-        </>
+    <div className="p-6 bg-blue-50 rounded-lg border-2 border-blue-200">
+      {!hasGymBadges && (
+        <div className="text-center">
+          <h2 className="text-xl mb-4">🎒 Pokemon Trainer</h2>
+          <p className="mb-4">Ready to challenge the Gym Leader?</p>
+          <Button onClick={onEarnBadge}>🎯 Challenge Gym Leader</Button>
+        </div>
       )}
-    </header>
+      {hasGymBadges && (
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-yellow-600 mb-2">
+            Welcome Gym Leader {props.trainerName}! 🏆
+          </h1>
+          <p className="mb-4">🥇 You've earned your gym badges!</p>
+          <Button onClick={onLoseBadges}>🔄 Reset Journey</Button>
+        </div>
+      )}
+    </div>
   );
-};
+};
\ No newline at end of file
diff --git a/src/course/02-lessons/01-Bronze/ConditionalRendering/lesson.mdx b/src/course/02-lessons/01-Bronze/ConditionalRendering/lesson.mdx
index ccecd36..cc53d7b 100644
--- a/src/course/02-lessons/01-Bronze/ConditionalRendering/lesson.mdx
+++ b/src/course/02-lessons/01-Bronze/ConditionalRendering/lesson.mdx
@@ -1,17 +1,17 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥉 Bronze/Conditional Rendering Pattern/01-Lesson" />
+<Meta title="Lessons/🥉 Bronze/🔀 Conditional Rendering Pattern/01-Lesson" />
 
-# Conditional Rendering Pattern
+# 🔀 Conditional Rendering Pattern
 
-The conditional rendering pattern is a way to dynamically change UI based what values are set at that time. The most common way that this is done is by using an if statement. For example:
+The conditional rendering pattern is a way to dynamically change UI based on what values are set at that time. The most common way that this is done is by using an if statement. For example:
 
 ```jsx
-const Component = (props) => {
-  if (props.isAuthenticated) {
-    return <h1>Welcome {props.username}!</h1>;
+const TrainerStatus = (props) => {
+  if (props.hasGymBadges) {
+    return <h1>Welcome Gym Leader {props.trainerName}!</h1>;
   } else {
-    return <h1>Not logged in.</h1>;
+    return <h1>Welcome Pokemon Trainer!</h1>;
   }
 };
 ```
@@ -19,11 +19,11 @@ const Component = (props) => {
 There are many syntactical ways you can do the same as above such as the ternary:
 
 ```jsx
-const Component = (props) => {
-  return props.isAuthenticated ? (
-    <h1>Welcome {props.username}!</h1>
+const TrainerStatus = (props) => {
+  return props.hasGymBadges ? (
+    <h1>Welcome Gym Leader {props.trainerName}!</h1>
   ) : (
-    <h1>Not logged in.</h1>
+    <h1>Welcome Pokemon Trainer!</h1>
   );
 };
 ```
@@ -31,23 +31,23 @@ const Component = (props) => {
 Or you can use the AND syntax:
 
 ```jsx
-const Component = (props) => {
-  return props.isAuthenticated && <h1>Welcome {props.username}!</h1>;
+const TrainerStatus = (props) => {
+  return props.hasGymBadges && <h1>Welcome Gym Leader {props.trainerName}!</h1>;
 };
 ```
 
-If I had a lot of complexity in this component that still would be getting executed but the component will just return nothing if it's not authenticated. The best way to return something like this is to do the conditional render outside of the component, for example:
+If I had a lot of complexity in this component that still would be getting executed but the component will just return nothing if the trainer doesn't have badges. The best way to return something like this is to do the conditional render outside of the component, for example:
 
 ```jsx
-const ComponentOne = (props) => {
-  return <h1>Welcome {props.username}</h1>;
+const GymLeaderWelcome = (props) => {
+  return <h1>Welcome Gym Leader {props.trainerName}</h1>;
 };
 
-const ComponentTwo = (props) => {
+const TrainerDashboard = (props) => {
   return (
     <header>
       {/* Other components */}
-      {props.isAuthenticated && <ComponentOne username="JohnDoe" />}
+      {props.hasGymBadges && <GymLeaderWelcome trainerName="Ash" />}
     </header>
   );
 };
@@ -55,28 +55,28 @@ const ComponentTwo = (props) => {
 
 ### Event driven rendering
 
-There may be times when you need to conditionally render a component based on an event that has been changed. This example conditionally renders a box when you click the button.
+There may be times when you need to conditionally render a component based on an event that has been changed. This example conditionally renders a wild Pokemon encounter when you click the explore button.
 
 ```jsx
-const Component = () => {
-  const [displayBox, setDisplayBox] = useState(false);
+const PokemonExplorer = () => {
+  const [wildPokemonFound, setWildPokemonFound] = useState(false);
 
-  const showBox = () => {
-    setDisplayBox(true);
+  const startExploring = () => {
+    setWildPokemonFound(true);
   };
 
-  const hideBox = () => {
-    setDisplayBox(false);
+  const stopExploring = () => {
+    setWildPokemonFound(false);
   };
 
   return (
     <>
-      <button type="button" onClick={displayBox ? hideBox : showBox}>
-        Toggle Box
+      <button type="button" onClick={wildPokemonFound ? stopExploring : startExploring}>
+        {wildPokemonFound ? 'Stop Exploring' : 'Explore Tall Grass'}
       </button>
-      {displayBox && (
-        <div>
-          <p>Box</p>
+      {wildPokemonFound && (
+        <div className="wild-encounter">
+          <p>🌿 A wild Pikachu appeared!</p>
         </div>
       )}
     </>
@@ -86,7 +86,7 @@ const Component = () => {
 
 ## Exercise
 
-In the first exercise we are going to look into building a login and logout toggle which will render a username when they have logged in. Go to the exercise.tsx inside the ConditionalRendering folder and start the exercise. Once completed, the Tests will show as passed in the storybook "Interactions" addon section.
+In the first exercise we are going to look into building a Pokemon trainer status system that shows different content based on whether the trainer has earned gym badges. Go to the exercise.tsx inside the ConditionalRendering folder and start the exercise. Once completed, the Tests will show as passed in the storybook "Interactions" addon section.
 
 ## Feedback
 
diff --git a/src/course/02-lessons/01-Bronze/Hooks/exercise/exercise.stories.tsx b/src/course/02-lessons/01-Bronze/Hooks/exercise/exercise.stories.tsx
index 2407fb0..2781dbc 100644
--- a/src/course/02-lessons/01-Bronze/Hooks/exercise/exercise.stories.tsx
+++ b/src/course/02-lessons/01-Bronze/Hooks/exercise/exercise.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Exercise } from './exercise';
 
 const meta: Meta<typeof Exercise> = {
-  title: 'Lessons/🥉 Bronze/Hooks Pattern/02-Exercise',
+  title: 'Lessons/🥉 Bronze/🎣 Hooks Pattern/02-Exercise',
   component: Exercise
 };
 
diff --git a/src/course/02-lessons/01-Bronze/Hooks/final/final.stories.tsx b/src/course/02-lessons/01-Bronze/Hooks/final/final.stories.tsx
index bc3c325..0e69151 100644
--- a/src/course/02-lessons/01-Bronze/Hooks/final/final.stories.tsx
+++ b/src/course/02-lessons/01-Bronze/Hooks/final/final.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './final';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥉 Bronze/Hooks Pattern/03-Final',
+  title: 'Lessons/🥉 Bronze/🎣 Hooks Pattern/03-Final',
   component: Final
 };
 
diff --git a/src/course/02-lessons/01-Bronze/Hooks/lesson.mdx b/src/course/02-lessons/01-Bronze/Hooks/lesson.mdx
index 6ab9443..aba50c0 100644
--- a/src/course/02-lessons/01-Bronze/Hooks/lesson.mdx
+++ b/src/course/02-lessons/01-Bronze/Hooks/lesson.mdx
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥉 Bronze/Hooks Pattern/01-Lesson" />
+<Meta title="Lessons/🥉 Bronze/🎣 Hooks Pattern/01-Lesson" />
 
-# Hooks Pattern
+# 🎣 Hooks Pattern
 
 React Hooks, introduced in React 16.8, revolutionize the traditional presentational and container component pattern by allowing functional components to manage state and side effects directly. This means you no longer need to separate components into presentational (stateless) and container (stateful) types. Hooks like useState and useEffect enable functional components to handle both UI rendering and business logic, simplifying code and improving readability.
 
diff --git a/src/course/02-lessons/01-Bronze/PresentationalAndContainer/exercise/exercise.stories.tsx b/src/course/02-lessons/01-Bronze/PresentationalAndContainer/exercise/exercise.stories.tsx
index 0f004ef..3bd9880 100644
--- a/src/course/02-lessons/01-Bronze/PresentationalAndContainer/exercise/exercise.stories.tsx
+++ b/src/course/02-lessons/01-Bronze/PresentationalAndContainer/exercise/exercise.stories.tsx
@@ -4,7 +4,7 @@ import { BrandPageOne, BrandPageTwo } from './exercise';
 
 const meta: Meta<typeof BrandPageOne> = {
   title:
-    'Lessons/🥉 Bronze/Presentational & Container Pattern/02-Exercise',
+    'Lessons/🥉 Bronze/🎭 Presentational & Container Pattern/02-Exercise',
   component: BrandPageOne
 };
 
diff --git a/src/course/02-lessons/01-Bronze/PresentationalAndContainer/final/final.stories.tsx b/src/course/02-lessons/01-Bronze/PresentationalAndContainer/final/final.stories.tsx
index 448e8fe..5b3caf5 100644
--- a/src/course/02-lessons/01-Bronze/PresentationalAndContainer/final/final.stories.tsx
+++ b/src/course/02-lessons/01-Bronze/PresentationalAndContainer/final/final.stories.tsx
@@ -4,7 +4,7 @@ import { BrandPageOne, BrandPageTwo } from './final';
 
 const meta: Meta<typeof BrandPageOne> = {
   title:
-    'Lessons/🥉 Bronze/Presentational & Container Pattern/03-Final',
+    'Lessons/🥉 Bronze/🎭 Presentational & Container Pattern/03-Final',
   component: BrandPageOne
 };
 
diff --git a/src/course/02-lessons/01-Bronze/PresentationalAndContainer/lesson.mdx b/src/course/02-lessons/01-Bronze/PresentationalAndContainer/lesson.mdx
index 080b3ae..b01ec5a 100644
--- a/src/course/02-lessons/01-Bronze/PresentationalAndContainer/lesson.mdx
+++ b/src/course/02-lessons/01-Bronze/PresentationalAndContainer/lesson.mdx
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥉 Bronze/Presentational & Container Pattern/01-Lesson" />
+<Meta title="Lessons/🥉 Bronze/🎭 Presentational & Container Pattern/01-Lesson" />
 
-# Presentational & Container Pattern
+# 🎭 Presentational & Container Pattern
 
 This is an old pattern created by Dan Abramov. However, he doesn't suggest to use this pattern anymore as it was more linked to before reack hooks. This pattern has become more obsolete since hooks came into the mix.
 
diff --git a/src/course/02-lessons/01-Bronze/PropsCombination/exercise/exercise.stories.tsx b/src/course/02-lessons/01-Bronze/PropsCombination/exercise/exercise.stories.tsx
index 3a85de5..97894a9 100644
--- a/src/course/02-lessons/01-Bronze/PropsCombination/exercise/exercise.stories.tsx
+++ b/src/course/02-lessons/01-Bronze/PropsCombination/exercise/exercise.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Exercise } from './exercise';
 
 const meta: Meta<typeof Exercise> = {
-  title: 'Lessons/🥉 Bronze/Props Combination Pattern/02-Exercise',
+  title: 'Lessons/🥉 Bronze/🧩 Props Combination Pattern/02-Exercise',
   component: Exercise
 };
 
diff --git a/src/course/02-lessons/01-Bronze/PropsCombination/final/final.stories.tsx b/src/course/02-lessons/01-Bronze/PropsCombination/final/final.stories.tsx
index fe71bb7..71c16d1 100644
--- a/src/course/02-lessons/01-Bronze/PropsCombination/final/final.stories.tsx
+++ b/src/course/02-lessons/01-Bronze/PropsCombination/final/final.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './final';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥉 Bronze/Props Combination Pattern/03-Final',
+  title: 'Lessons/🥉 Bronze/🧩 Props Combination Pattern/03-Final',
   component: Final
 };
 
diff --git a/src/course/02-lessons/01-Bronze/PropsCombination/lesson.mdx b/src/course/02-lessons/01-Bronze/PropsCombination/lesson.mdx
index 2115d3c..da091c1 100644
--- a/src/course/02-lessons/01-Bronze/PropsCombination/lesson.mdx
+++ b/src/course/02-lessons/01-Bronze/PropsCombination/lesson.mdx
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥉 Bronze/Props Combination Pattern/01-Lesson" />
+<Meta title="Lessons/🥉 Bronze/🧩 Props Combination Pattern/01-Lesson" />
 
-# Props Combination Pattern
+# 🧩 Props Combination Pattern
 
 Props are used to pass data from one component to another. The prop combination pattern groups related props into a single object. This object is then passed as a single prop to a component.
 
diff --git a/src/course/02-lessons/01-Bronze/Slots/exercise/exercise.stories.tsx b/src/course/02-lessons/01-Bronze/Slots/exercise/exercise.stories.tsx
index a40b57b..0f6fdc4 100644
--- a/src/course/02-lessons/01-Bronze/Slots/exercise/exercise.stories.tsx
+++ b/src/course/02-lessons/01-Bronze/Slots/exercise/exercise.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Exercise } from './exercise';
 
 const meta: Meta<typeof Exercise> = {
-  title: 'Lessons/🥉 Bronze/Slots/02-Exercise',
+  title: 'Lessons/🥉 Bronze/🎰 Slots Pattern/02-Exercise',
   component: Exercise
 };
 
diff --git a/src/course/02-lessons/01-Bronze/Slots/final/final.stories.tsx b/src/course/02-lessons/01-Bronze/Slots/final/final.stories.tsx
index 8fb0fda..b8ac096 100644
--- a/src/course/02-lessons/01-Bronze/Slots/final/final.stories.tsx
+++ b/src/course/02-lessons/01-Bronze/Slots/final/final.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './final';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥉 Bronze/Slots/03-Final',
+  title: 'Lessons/🥉 Bronze/🎰 Slots Pattern/03-Final',
   component: Final
 };
 
diff --git a/src/course/02-lessons/01-Bronze/Slots/lesson.mdx b/src/course/02-lessons/01-Bronze/Slots/lesson.mdx
index 3538912..79b8743 100644
--- a/src/course/02-lessons/01-Bronze/Slots/lesson.mdx
+++ b/src/course/02-lessons/01-Bronze/Slots/lesson.mdx
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥉 Bronze/Slots/01-Lesson" />
+<Meta title="Lessons/🥉 Bronze/🎰 Slots Pattern/01-Lesson" />
 
-# Slots Pattern
+# 🎰 Slots Pattern
 
 The slots pattern is very similar to the [render props pattern](?path=/docs/lessons-03-render-props-pattern-01-lesson--docs) but it has a slight difference which justifies why you would do one over the other.
 
diff --git a/src/course/02-lessons/02-Silver/Compound/exercise/exercise.stories.tsx b/src/course/02-lessons/02-Silver/Compound/exercise/exercise.stories.tsx
index 2553528..d4f8ce4 100644
--- a/src/course/02-lessons/02-Silver/Compound/exercise/exercise.stories.tsx
+++ b/src/course/02-lessons/02-Silver/Compound/exercise/exercise.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Exercise } from './exercise';
 
 const meta: Meta<typeof Exercise> = {
-  title: 'Lessons/🥈 Silver/Compound Components Pattern/02-Exercise',
+  title: 'Lessons/🥈 Silver/🧩 Compound Components Pattern/02-Exercise',
   component: Exercise
 };
 
diff --git a/src/course/02-lessons/02-Silver/Compound/final/final.stories.tsx b/src/course/02-lessons/02-Silver/Compound/final/final.stories.tsx
index e7a6771..f8fb201 100644
--- a/src/course/02-lessons/02-Silver/Compound/final/final.stories.tsx
+++ b/src/course/02-lessons/02-Silver/Compound/final/final.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './final';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥈 Silver/Compound Components Pattern/03-Final',
+  title: 'Lessons/🥈 Silver/🧩 Compound Components Pattern/03-Final',
   component: Final
 };
 
diff --git a/src/course/02-lessons/02-Silver/Compound/lesson.mdx b/src/course/02-lessons/02-Silver/Compound/lesson.mdx
index 739f3a3..7bbd99d 100644
--- a/src/course/02-lessons/02-Silver/Compound/lesson.mdx
+++ b/src/course/02-lessons/02-Silver/Compound/lesson.mdx
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥈 Silver/Compound Components Pattern/01-Lesson" />
+<Meta title="Lessons/🥈 Silver/🧩 Compound Components Pattern/01-Lesson" />
 
-# Compound Components Pattern
+# 🧩 Compound Components Pattern
 
 Compound components is an advanced React container pattern that provides a simple and efficient way for multiple components to share states and handle logic — working together.
 
diff --git a/src/course/02-lessons/02-Silver/Controlled/exercise/exercise.stories.tsx b/src/course/02-lessons/02-Silver/Controlled/exercise/exercise.stories.tsx
index 99a98cd..e9e36b5 100644
--- a/src/course/02-lessons/02-Silver/Controlled/exercise/exercise.stories.tsx
+++ b/src/course/02-lessons/02-Silver/Controlled/exercise/exercise.stories.tsx
@@ -4,7 +4,7 @@ import { Exercise } from './exercise';
 
 const meta: Meta<typeof Exercise> = {
   title:
-    'Lessons/🥈 Silver/Controlled Components Pattern/02-Exercise',
+    'Lessons/🥈 Silver/🎮 Controlled Components Pattern/02-Exercise',
   component: Exercise
 };
 
diff --git a/src/course/02-lessons/02-Silver/Controlled/final/final.stories.tsx b/src/course/02-lessons/02-Silver/Controlled/final/final.stories.tsx
index 56ee988..ea63a77 100644
--- a/src/course/02-lessons/02-Silver/Controlled/final/final.stories.tsx
+++ b/src/course/02-lessons/02-Silver/Controlled/final/final.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './final';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥈 Silver/Controlled Components Pattern/03-Final',
+  title: 'Lessons/🥈 Silver/🎮 Controlled Components Pattern/03-Final',
   component: Final
 };
 
diff --git a/src/course/02-lessons/02-Silver/Controlled/lesson.mdx b/src/course/02-lessons/02-Silver/Controlled/lesson.mdx
index 77f4b7f..f1226fa 100644
--- a/src/course/02-lessons/02-Silver/Controlled/lesson.mdx
+++ b/src/course/02-lessons/02-Silver/Controlled/lesson.mdx
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥈 Silver/Controlled Components Pattern/01-Lesson" />
+<Meta title="Lessons/🥈 Silver/🎮 Controlled Components Pattern/01-Lesson" />
 
-# Controlled Components Pattern
+# 🎮 Controlled Components Pattern
 
 The concept of controlled components involves creating components with highly predictable behavior by managing their state through props. A controlled components behavior changes based on the state passed to it as a prop.
 
diff --git a/src/course/02-lessons/02-Silver/PolymorphicComponents/exercise/exercise.stories.tsx b/src/course/02-lessons/02-Silver/PolymorphicComponents/exercise/exercise.stories.tsx
index 6e64026..b729d74 100644
--- a/src/course/02-lessons/02-Silver/PolymorphicComponents/exercise/exercise.stories.tsx
+++ b/src/course/02-lessons/02-Silver/PolymorphicComponents/exercise/exercise.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Exercise } from './exercise';
 
 const meta: Meta<typeof Exercise> = {
-  title: 'Lessons/🥈 Silver/Polymorphic Components/02-Exercise',
+  title: 'Lessons/🥈 Silver/🦄 Polymorphic Components Pattern/02-Exercise',
   component: Exercise
 };
 
diff --git a/src/course/02-lessons/02-Silver/PolymorphicComponents/final/final.stories.tsx b/src/course/02-lessons/02-Silver/PolymorphicComponents/final/final.stories.tsx
index e677c1f..c4fed3a 100644
--- a/src/course/02-lessons/02-Silver/PolymorphicComponents/final/final.stories.tsx
+++ b/src/course/02-lessons/02-Silver/PolymorphicComponents/final/final.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './final';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥈 Silver/Polymorphic Components/03-Final',
+  title: 'Lessons/🥈 Silver/🦄 Polymorphic Components Pattern/03-Final',
   component: Final
 };
 
diff --git a/src/course/02-lessons/02-Silver/PolymorphicComponents/lesson.mdx b/src/course/02-lessons/02-Silver/PolymorphicComponents/lesson.mdx
index 7e43870..1f713d3 100644
--- a/src/course/02-lessons/02-Silver/PolymorphicComponents/lesson.mdx
+++ b/src/course/02-lessons/02-Silver/PolymorphicComponents/lesson.mdx
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥈 Silver/Polymorphic Components/01-Lesson" />
+<Meta title="Lessons/🥈 Silver/🦄 Polymorphic Components Pattern/01-Lesson" />
 
-# Polymorphic Components Pattern
+# 🦄 Polymorphic Components Pattern
 
 React excels at building reusable components, but repetition can creep in when components only differ slightly—like headings or buttons with varied HTML tags.
 
diff --git a/src/course/02-lessons/02-Silver/Portals/exercise/exercise.stories.tsx b/src/course/02-lessons/02-Silver/Portals/exercise/exercise.stories.tsx
index 0bae7c2..c57ec29 100644
--- a/src/course/02-lessons/02-Silver/Portals/exercise/exercise.stories.tsx
+++ b/src/course/02-lessons/02-Silver/Portals/exercise/exercise.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Exercise } from './exercise';
 
 const meta: Meta<typeof Exercise> = {
-  title: 'Lessons/🥈 Silver/Portals/02-Exercise',
+  title: 'Lessons/🥈 Silver/🌌 Portals Pattern/02-Exercise',
   component: Exercise
 };
 
diff --git a/src/course/02-lessons/02-Silver/Portals/final/final.stories.tsx b/src/course/02-lessons/02-Silver/Portals/final/final.stories.tsx
index f908de1..fd4502b 100644
--- a/src/course/02-lessons/02-Silver/Portals/final/final.stories.tsx
+++ b/src/course/02-lessons/02-Silver/Portals/final/final.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './final';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥈 Silver/Portals/03-Final',
+  title: 'Lessons/🥈 Silver/🌌 Portals Pattern/03-Final',
   component: Final
 };
 
diff --git a/src/course/02-lessons/02-Silver/Portals/lesson.mdx b/src/course/02-lessons/02-Silver/Portals/lesson.mdx
index 75767b6..1442280 100644
--- a/src/course/02-lessons/02-Silver/Portals/lesson.mdx
+++ b/src/course/02-lessons/02-Silver/Portals/lesson.mdx
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥈 Silver/Portals/01-Lesson" />
+<Meta title="Lessons/🥈 Silver/🌌 Portals Pattern/01-Lesson" />
 
-# Portals Pattern
+# 🌌 Portals Pattern
 
 A React portal lets you render some children into a different part of the DOM. When you call the **createPortal** it will trigger the creation of the portal. When you unmount, the portal removes itself. This is how it looks in React:
 
diff --git a/src/course/02-lessons/02-Silver/Provider/exercise/exercise.stories.tsx b/src/course/02-lessons/02-Silver/Provider/exercise/exercise.stories.tsx
index 634dca0..d329d80 100644
--- a/src/course/02-lessons/02-Silver/Provider/exercise/exercise.stories.tsx
+++ b/src/course/02-lessons/02-Silver/Provider/exercise/exercise.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Exercise } from './exercise';
 
 const meta: Meta<typeof Exercise> = {
-  title: 'Lessons/🥈 Silver/Provider Pattern/02-Exercise',
+  title: 'Lessons/🥈 Silver/🎁 Provider Pattern/02-Exercise',
   component: Exercise
 };
 
diff --git a/src/course/02-lessons/02-Silver/Provider/final/final.stories.tsx b/src/course/02-lessons/02-Silver/Provider/final/final.stories.tsx
index 78349af..6b9ad89 100644
--- a/src/course/02-lessons/02-Silver/Provider/final/final.stories.tsx
+++ b/src/course/02-lessons/02-Silver/Provider/final/final.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './final';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥈 Silver/Provider Pattern/03-Final',
+  title: 'Lessons/🥈 Silver/🎁 Provider Pattern/03-Final',
   component: Final
 };
 
diff --git a/src/course/02-lessons/02-Silver/Provider/lesson.mdx b/src/course/02-lessons/02-Silver/Provider/lesson.mdx
index 31cd02d..7d89fc6 100644
--- a/src/course/02-lessons/02-Silver/Provider/lesson.mdx
+++ b/src/course/02-lessons/02-Silver/Provider/lesson.mdx
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥈 Silver/Provider Pattern/01-Lesson" />
+<Meta title="Lessons/🥈 Silver/🎁 Provider Pattern/01-Lesson" />
 
-# Provider Pattern
+# 🎁 Provider Pattern
 
 The Provider Pattern is a design approach used to efficiently supply data to various parts of an application without the need to manually pass it down through multiple layers of components. In the context of React, this pattern helps avoid "prop drilling," where props have to be passed through each component in the hierarchy until they reach the desired component. Instead, by utilizing React Context, you can create a provider component that wraps parts of your app, making the necessary data or functionality available to all nested components. These components can then access the data or functions directly via custom React hooks, leading to cleaner, more maintainable code.
 
diff --git a/src/course/02-lessons/02-Silver/RenderProps/exercise/exercise.stories.tsx b/src/course/02-lessons/02-Silver/RenderProps/exercise/exercise.stories.tsx
index 133be89..ee6894a 100644
--- a/src/course/02-lessons/02-Silver/RenderProps/exercise/exercise.stories.tsx
+++ b/src/course/02-lessons/02-Silver/RenderProps/exercise/exercise.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Exercise } from './exercise';
 
 const meta: Meta<typeof Exercise> = {
-  title: 'Lessons/🥈 Silver/Render Props Pattern/02-Exercise',
+  title: 'Lessons/🥈 Silver/🎨 Render Props Pattern/02-Exercise',
   component: Exercise
 };
 
diff --git a/src/course/02-lessons/02-Silver/RenderProps/final/final.stories.tsx b/src/course/02-lessons/02-Silver/RenderProps/final/final.stories.tsx
index cd576d2..42bf44f 100644
--- a/src/course/02-lessons/02-Silver/RenderProps/final/final.stories.tsx
+++ b/src/course/02-lessons/02-Silver/RenderProps/final/final.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './final';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥈 Silver/Render Props Pattern/03-Final',
+  title: 'Lessons/🥈 Silver/🎨 Render Props Pattern/03-Final',
   component: Final
 };
 
diff --git a/src/course/02-lessons/02-Silver/RenderProps/lesson.mdx b/src/course/02-lessons/02-Silver/RenderProps/lesson.mdx
index c9b5497..b72aa24 100644
--- a/src/course/02-lessons/02-Silver/RenderProps/lesson.mdx
+++ b/src/course/02-lessons/02-Silver/RenderProps/lesson.mdx
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥈 Silver/Render Props Pattern/01-Lesson" />
+<Meta title="Lessons/🥈 Silver/🎨 Render Props Pattern/01-Lesson" />
 
-# Render Props Pattern
+# 🎨 Render Props Pattern
 
 Render props is a common pattern you will see in popular NPM packages like [Formik](https://formik.org/) or [React Final form](https://final-form.org/react) and it is very useful for building components that manage the logic and pass information to their children/prop so they can use that logic in the UI layer.
 
diff --git a/src/course/02-lessons/02-Silver/StateReducer/exercise/exercise.stories.tsx b/src/course/02-lessons/02-Silver/StateReducer/exercise/exercise.stories.tsx
index 08eace5..3880071 100644
--- a/src/course/02-lessons/02-Silver/StateReducer/exercise/exercise.stories.tsx
+++ b/src/course/02-lessons/02-Silver/StateReducer/exercise/exercise.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Exercise } from './exercise';
 
 const meta: Meta<typeof Exercise> = {
-  title: 'Lessons/🥈 Silver/State Reducer Pattern/02-Exercise',
+  title: 'Lessons/🥈 Silver/⚙️ State Reducer Pattern/02-Exercise',
   component: Exercise
 };
 
diff --git a/src/course/02-lessons/02-Silver/StateReducer/final/final.stories.tsx b/src/course/02-lessons/02-Silver/StateReducer/final/final.stories.tsx
index d458cab..7c4c75c 100644
--- a/src/course/02-lessons/02-Silver/StateReducer/final/final.stories.tsx
+++ b/src/course/02-lessons/02-Silver/StateReducer/final/final.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './final';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥈 Silver/State Reducer Pattern/03-Final',
+  title: 'Lessons/🥈 Silver/⚙️ State Reducer Pattern/03-Final',
   component: Final
 };
 
diff --git a/src/course/02-lessons/02-Silver/StateReducer/lesson.mdx b/src/course/02-lessons/02-Silver/StateReducer/lesson.mdx
index ffbf94e..20fb7cf 100644
--- a/src/course/02-lessons/02-Silver/StateReducer/lesson.mdx
+++ b/src/course/02-lessons/02-Silver/StateReducer/lesson.mdx
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥈 Silver/State Reducer Pattern/01-Lesson" />
+<Meta title="Lessons/🥈 Silver/⚙️ State Reducer Pattern/01-Lesson" />
 
-# State Reducer Pattern
+# ⚙️ State Reducer Pattern
 
 When you have a component which has a lot of useState logic and it updates multiple state values are a sign to start refacotring over to using the State Reducer Pattern.
 
diff --git a/src/course/02-lessons/03-Gold/HigherOrderComponents/exercise/exercise.stories.tsx b/src/course/02-lessons/03-Gold/HigherOrderComponents/exercise/exercise.stories.tsx
index adedfa2..ec8548e 100644
--- a/src/course/02-lessons/03-Gold/HigherOrderComponents/exercise/exercise.stories.tsx
+++ b/src/course/02-lessons/03-Gold/HigherOrderComponents/exercise/exercise.stories.tsx
@@ -4,7 +4,7 @@ import { Exercise } from './exercise';
 
 const meta: Meta<typeof Exercise> = {
   title:
-    'Lessons/🥇 Gold/Higher Order Components Pattern/02-Exercise',
+    'Lessons/🥇 Gold/🎆 Higher Order Components Pattern/02-Exercise',
   component: Exercise
 };
 
diff --git a/src/course/02-lessons/03-Gold/HigherOrderComponents/final/final.stories.tsx b/src/course/02-lessons/03-Gold/HigherOrderComponents/final/final.stories.tsx
index 43ddf05..c8861d6 100644
--- a/src/course/02-lessons/03-Gold/HigherOrderComponents/final/final.stories.tsx
+++ b/src/course/02-lessons/03-Gold/HigherOrderComponents/final/final.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Final } from './final';
 
 const meta: Meta<typeof Final> = {
-  title: 'Lessons/🥇 Gold/Higher Order Components Pattern/03-Final',
+  title: 'Lessons/🥇 Gold/🎆 Higher Order Components Pattern/03-Final',
   component: Final
 };
 
diff --git a/src/course/02-lessons/03-Gold/HigherOrderComponents/lesson.mdx b/src/course/02-lessons/03-Gold/HigherOrderComponents/lesson.mdx
index eeddd2b..e4df04d 100644
--- a/src/course/02-lessons/03-Gold/HigherOrderComponents/lesson.mdx
+++ b/src/course/02-lessons/03-Gold/HigherOrderComponents/lesson.mdx
@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lessons/🥇 Gold/Higher Order Components Pattern/01-Lesson" />
+<Meta title="Lessons/🥇 Gold/🎆 Higher Order Components Pattern/01-Lesson" />
 
-# Higher Order Components Pattern
+# 🎆 Higher Order Components Pattern
 
 In some cases you may want to have some logic that is consistent across your application. You could use hooks but this requires implementing some logic of code within each component you apply the hook which isn't sustainable as a higher order component.