diff --git a/.github/agents/accessibility.md b/.github/agents/accessibility.md
new file mode 100644
index 0000000..3de98a2
--- /dev/null
+++ b/.github/agents/accessibility.md
@@ -0,0 +1,184 @@
+---
+name: Accessibility agent
+description: Designed to generate accessible websites
+---
+
+# Accessibility Specialist Agent
+
+You are an expert accessibility specialist focused on creating inclusive web experiences that comply with WCAG 2.1 Level AA standards.
+
+## Core Responsibilities
+
+- Ensure POUR principles: Perceivable, Operable, Understandable, Robust
+- Identify and fix accessibility violations in HTML, CSS, and JavaScript
+- Validate semantic HTML, ARIA attributes, keyboard navigation, and screen reader compatibility
+- Verify color contrast ratios and ensure forms are accessible
+
+## WCAG 2.1 Level AA Requirements
+
+### Perceivable
+- **Text Alternatives**: All images need `alt` attributes; decorative images use `alt=""` or `role="presentation"`
+- **Color Contrast**: Normal text 4.5:1, large text 3:1; don't rely on color alone
+- **Semantic Structure**: Use `<nav>`, `<main>`, `<article>`, `<section>`, `<header>`, `<footer>`
+- **Heading Hierarchy**: No skipping levels (h1 → h2 → h3)
+- **Language**: Define with `lang` attribute on `<html>` tag
+
+### Operable
+- **Keyboard Navigation**: All interactive elements keyboard accessible; visible focus indicators required
+- **Tab Order**: Logical order; use `tabindex="0"` for custom controls; avoid positive tabindex
+- **Touch Targets**: Minimum 44x44 pixels on mobile with adequate spacing
+- **No Keyboard Traps**: Users can navigate in and out of all components
+- **Motion**: Respect `prefers-reduced-motion`; avoid flashing content >3 times/second
+
+### Understandable
+- **Form Labels**: All inputs need `<label>` elements or `aria-label`
+- **Error Messages**: Clear errors with suggestions; use `aria-invalid` for invalid fields
+- **Predictability**: Consistent navigation; no unexpected context changes
+- **Instructions**: Provide before form controls, not just in placeholders
+
+### Robust
+- **Valid HTML**: Proper nesting, unique IDs, semantic HTML5
+- **ARIA**: Use correctly; don't override native semantics; prefer native HTML first
+- **Compatibility**: Test with screen readers (NVDA, JAWS, VoiceOver)
+
+## HTML Code Examples
+
+### Semantic Structure
+```html
+<header>
+  <nav aria-label="Main navigation">
+    <ul><li><a href="/">Home</a></li></ul>
+  </nav>
+</header>
+<main id="main-content">
+  <h1>Page Title</h1>
+  <article><h2>Section Title</h2></article>
+</main>
+```
+
+### Accessible Forms
+```html
+<label for="email">Email:</label>
+<input type="email" id="email" required aria-describedby="hint">
+<span id="hint">We'll never share your email</span>
+
+<fieldset>
+  <legend>Contact Preference</legend>
+  <label><input type="radio" name="contact" value="email"> Email</label>
+</fieldset>
+```
+
+### Buttons vs Links
+```html
+<button type="button" onclick="openModal()">Open Details</button>
+<a href="/about">About Us</a>
+
+<!-- Custom elements need roles and keyboard support -->
+<div role="button" tabindex="0" onkeypress="handleKey(event)">Custom</div>
+```
+
+## ARIA Guidelines
+
+### When to Use ARIA
+- Use native HTML first (`<button>` over `<div role="button">`)
+- Common roles: `navigation`, `search`, `main`, `complementary`, `banner`, `contentinfo`
+- Only use ARIA when native HTML is insufficient
+
+### ARIA Patterns
+```html
+<!-- Labels for elements without visible text -->
+<button aria-label="Close">×</button>
+
+<!-- Reference existing text -->
+<section aria-labelledby="title">
+  <h2 id="title">Latest News</h2>
+</section>
+
+<!-- Additional descriptions -->
+<input type="password" aria-describedby="requirements">
+<div id="requirements">Must be 8+ characters</div>
+
+<!-- Live regions for dynamic updates -->
+<div role="status" aria-live="polite">Item added to cart</div>
+<div role="alert" aria-live="assertive">Error occurred</div>
+```
+
+## CSS & JavaScript Patterns
+
+### Focus Indicators
+```css
+a:focus, button:focus {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px;
+}
+/* Never remove outline without replacement */
+```
+
+### Motion Sensitivity
+```css
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+### Focus Management
+```javascript
+// Manage focus for modals
+function openModal() {
+  const modal = document.getElementById('modal');
+  modal.querySelector('button').focus();
+  modal.addEventListener('keydown', trapFocus);
+}
+```
+
+### Keyboard Events
+```javascript
+element.addEventListener('click', handleInteraction);
+element.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault();
+    handleInteraction();
+  }
+});
+```
+
+## Testing & Common Pitfalls
+
+### Testing Checklist
+- Keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys, Escape)
+- Focus indicators visible on all interactive elements
+- Screen reader testing (NVDA, JAWS, VoiceOver)
+- Color contrast verification (4.5:1 for text, 3:1 for UI components)
+- Page zoom to 200% maintains functionality
+- Automated tools (axe, WAVE, Lighthouse)
+
+### Top 10 Pitfalls to Avoid
+1. Empty links/buttons without accessible text
+2. Positive tabindex values (use 0 or -1 only)
+3. ARIA overuse when native HTML works
+4. Missing form input labels
+5. Auto-playing media
+6. Placeholder text as only label
+7. Skipping heading levels
+8. Insufficient color contrast
+9. Keyboard traps
+10. Images without alt attributes
+
+### Framework Notes (Svelte/Astro)
+- Use semantic HTML in templates
+- Manage focus after client-side routing
+- Announce route changes to screen readers
+- Test SSR content for accessibility
+
+## Output Format
+
+When reviewing code:
+1. Identify accessibility violations with WCAG reference
+2. Provide corrected code example
+3. Explain impact on users with disabilities
+4. Suggest verification method
+
+**Remember**: Accessibility is a fundamental requirement for inclusive web experiences, not optional.
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 1b342b6..62c2325 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -4,6 +4,10 @@ This is a crowdfunding platform for games with a developer theme. The applicatio
 
 ## Agent notes
 
+- Explore the project before beginning code generation
+- Create todo lists for long operations
+  - Before each step in a todo list, reread the instructions to ensure you always have the right directions
+- Always use instructions files when available, reviewing before generating code
 - Do not generate summary markdown files upon completion of a task
 - Always use absolute paths when running scripts and BASH commands
 
@@ -30,16 +34,16 @@ This is a crowdfunding platform for games with a developer theme. The applicatio
 
 ### Svelte and Astro Patterns
 
-- Use Svelte for interactive components
-- Follow Svelte's reactive programming model
-- Create reusable components when functionality is used in multiple places
-- Use Astro for page routing and static content
+- **Svelte 5 Components**: Use runes-based reactivity (`$state`, `$derived`, `$effect`, `$props`) - see `svelte.instructions.md`
+- **Astro Pages**: Use Astro for routing, layouts, and static content - see `astro.instructions.md`
+- Create reusable Svelte components when functionality is used in multiple places
+- Use `client:only="svelte"` directive when embedding Svelte in Astro pages
 
 ### Styling
 
-- Use Tailwind CSS classes for styling
-- Maintain dark mode theme throughout the application
-- Use rounded corners for UI elements
+- Use Tailwind CSS utility classes exclusively - see `tailwindcss.instructions.md`
+- Dark theme colors: slate palette (`bg-slate-800`, `text-slate-100`, etc.)
+- Rounded corners and modern UI patterns
 - Follow modern UI/UX principles with clean, accessible interfaces
 
 ### GitHub Actions workflows
@@ -71,5 +75,4 @@ This is a crowdfunding platform for games with a developer theme. The applicatio
   - `src/styles/`: CSS and Tailwind configuration
 - `scripts/`: Development and deployment scripts
 - `data/`: Database files
-- `docs/`: Project documentation
 - `README.md`: Project documentation
diff --git a/.github/instructions/astro.instructions.md b/.github/instructions/astro.instructions.md
new file mode 100644
index 0000000..8ac2820
--- /dev/null
+++ b/.github/instructions/astro.instructions.md
@@ -0,0 +1,125 @@
+---
+description: 'Astro component patterns for pages, layouts, and routing'
+applyTo: '**/*.astro'
+---
+
+# Astro Component Instructions
+
+## Astro Component Patterns
+
+Astro is used for page routing, layouts, and static content. Svelte components handle interactivity.
+
+### Component Structure
+
+```astro
+---
+// Frontmatter: Server-side code (runs at build time)
+import Layout from '../layouts/Layout.astro';
+import Component from '../components/Component.svelte';
+
+interface Props {
+  title: string;
+  description?: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<Layout title={title}>
+  <!-- HTML content -->
+  <Component client:only="svelte" />
+</Layout>
+```
+
+## Layouts
+
+- Create reusable layout components in `src/layouts/`
+- Use `<slot />` for content injection
+- Include common elements: `<head>`, navigation, footer
+- Import global styles in layouts
+
+### Layout Example
+
+```astro
+---
+interface Props {
+  title: string;
+}
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+```
+
+## Pages
+
+- Create pages in `src/pages/`
+- File-based routing: `src/pages/about.astro` → `/about`
+- Dynamic routes: `src/pages/game/[id].astro`
+
+### Dynamic Routes
+
+For dynamic routes, export `getStaticPaths()`:
+
+```astro
+---
+export async function getStaticPaths() {
+  const games = await fetchGames();
+  
+  return games.map(game => ({
+    params: { id: game.id },
+    props: { game }
+  }));
+}
+
+const { game } = Astro.props;
+---
+
+<Layout title={game.title}>
+  <!-- Game details -->
+</Layout>
+```
+
+## Svelte Integration
+
+Use client directives to control hydration:
+
+- `client:only="svelte"` - Only runs on client (use for most interactive components)
+- `client:load` - Hydrates immediately on page load
+- `client:visible` - Hydrates when component becomes visible
+- `client:idle` - Hydrates when browser is idle
+
+### Example
+
+```astro
+---
+import GameList from '../components/GameList.svelte';
+---
+
+<Layout>
+  <GameList client:only="svelte" />
+</Layout>
+```
+
+## TypeScript
+
+- Use TypeScript for type-safe props
+- Define `Props` interface in frontmatter
+- Type component imports
+
+## Best Practices
+
+- Keep Astro components for static content and routing
+- Use Svelte for interactivity and client-side state
+- Minimize client-side JavaScript by using Astro's static rendering where possible
+- Import and use global CSS styles from layouts
diff --git a/.github/instructions/flask-endpoint.instructions.md b/.github/instructions/flask-endpoint.instructions.md
index 59bdce9..857d281 100644
--- a/.github/instructions/flask-endpoint.instructions.md
+++ b/.github/instructions/flask-endpoint.instructions.md
@@ -1,21 +1,52 @@
-# Endpoint creation guidelines
+---
+description: 'Flask API endpoint instructions'
+applyTo: 'server/routes/*.py'
+---
 
-## Endpoint notes
+# Flask Endpoint Development Guidelines
 
-- Endpoints are created in Flask using blueprints
-- Create a centralized function for accessing data
-- All endpoints require tests
-    - Use the `unittest` module for testing
-    - All tests must pass
-    - [A script is provided to run tests](../../scripts/run-server-tests.sh)
+## Blueprint Structure
 
-## Project notes
+- Create Blueprint: `bp_name = Blueprint('name', __name__)`
+- Use descriptive names matching resource (e.g., `games_bp`)
+- Include type hints: `Response`, `tuple[Response, int]`, `Query`
+- Import: `from flask import jsonify, Response, Blueprint`
 
-- The Python virtual environment is located in the root of the project in a **venv** folder
-- Register all blueprints in [the app entrypoint](../../server/app.py)
-- Use the [test instructions](./python-tests.instructions.md) when creating tests
+## Data Access Patterns
 
-## Prototype files
+- Create base query functions: `get_<resource>_base_query() -> Query`
+- Use SQLAlchemy with outer joins: `isouter=True` for optional relations
+- Return queries from helpers for reusability across endpoints
+- Use `.all()` for multiple results, `.first()` for single result
 
-- [Endpoint prototype](../../server/routes/games.py)
-- [Tests prototype](../../server/tests/test_games.py)
+## Route Definitions
+
+- Full path with methods: `@bp.route('/api/resource', methods=['GET'])`
+- REST conventions: GET (retrieve), POST (create), PUT/PATCH (update)
+- Path params with types: `@bp.route('/api/games/<int:id>')`
+
+## Response Handling
+
+- Use model `to_dict()` for serialization
+- Status codes: 200 (OK), 404 (not found), 400 (bad request)
+- Error format: `{"error": "Resource not found"}`
+- Always use `jsonify()` for JSON responses
+- Non-200 responses: `return jsonify(error), 404`
+
+## Query and Validation
+
+- Filter conditions: `.filter(Model.id == id)`
+- Check None: `if not result: return jsonify({"error": "..."}), 404`
+- Apply ordering when needed
+
+## Required Testing
+
+- All endpoints need unit tests per [python-tests.instructions.md](./python-tests.instructions.md)
+- Run: [scripts/run-server-tests.sh](../../scripts/run-server-tests.sh)
+- All tests must pass before commit
+
+## Registration & References
+
+- Register in [server/app.py](../../server/app.py): `app.register_blueprint(bp)`
+- Example: [server/routes/games.py](../../server/routes/games.py)
+- Tests: [server/tests/test_games.py](../../server/tests/test_games.py)
diff --git a/.github/instructions/playwright.instructions.md b/.github/instructions/playwright.instructions.md
new file mode 100644
index 0000000..79283f0
--- /dev/null
+++ b/.github/instructions/playwright.instructions.md
@@ -0,0 +1,89 @@
+---
+description: 'Playwright test generation instructions'
+applyTo: '**/*.spec.ts'
+---
+
+# Test Writing Guidelines
+
+## Code Quality Standards
+
+- **Locators**: Prioritize user-facing, role-based locators (`getByRole`, `getByLabel`, `getByText`, etc.) for resilience and accessibility. Use `test.step()` to group interactions and improve test readability and reporting.
+- **Timeouts**: Rely solely on Playwright's built-in auto-waiting mechanisms. NEVER use hard-coded waits such as `waitForTimeout`, increased default timeouts, or `waitForLoadState`.
+- **Assertions**: Use auto-retrying web-first assertions. These assertions start with the `await` keyword (e.g., `await expect(locator).toHaveText()`). NEVER use `expect(locator).toBeVisible()` unless specifically testing for visibility changes.
+- **Clarity**: Use descriptive test and step titles that clearly state the intent. Add comments only to explain complex logic or non-obvious interactions.
+
+## Test Structure
+
+- **Imports**: Start with `import { test, expect } from '@playwright/test';`.
+- **Organization**: Group related tests for a feature under a `test.describe()` block.
+- **Hooks**: Use `beforeEach` for setup actions common to all tests in a `describe` block (e.g., navigating to a page).
+- **Titles**: Follow a clear naming convention, such as `Feature - Specific action or scenario`.
+
+
+## File Organization
+
+- **Location**: Store all test files in the `tests/` directory.
+- **Naming**: Use the convention `<feature-or-page>.spec.ts` (e.g., `login.spec.ts`, `search.spec.ts`).
+- **Scope**: Aim for one test file per major application feature or page.
+
+## Assertion Best Practices
+
+- **UI Structure**: Use `toMatchAriaSnapshot` to verify the accessibility tree structure of a component. This provides a comprehensive and accessible snapshot.
+- **Element Counts**: Use `toHaveCount` to assert the number of elements found by a locator.
+- **Text Content**: Use `toHaveText` for exact text matches and `toContainText` for partial matches.
+- **Navigation**: Use `toHaveURL` to verify the page URL after an action.
+
+
+## Example Test Structure
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Movie Search Feature', () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to the application before each test
+    await page.goto('https://debs-obrien.github.io/playwright-movies-app');
+  });
+
+  test('Search for a movie by title', async ({ page }) => {
+    await test.step('Activate and perform search', async () => {
+      await page.getByRole('search').click();
+      const searchInput = page.getByRole('textbox', { name: 'Search Input' });
+      await searchInput.fill('Garfield');
+      await searchInput.press('Enter');
+    });
+
+    await test.step('Verify search results', async () => {
+      // Verify the accessibility tree of the search results
+      await expect(page.getByRole('main')).toMatchAriaSnapshot(`
+        - main:
+          - heading "Garfield" [level=1]
+          - heading "search results" [level=2]
+          - list "movies":
+            - listitem "movie":
+              - link "poster of The Garfield Movie The Garfield Movie rating":
+                - /url: /playwright-movies-app/movie?id=tt5779228&page=1
+                - img "poster of The Garfield Movie"
+                - heading "The Garfield Movie" [level=2]
+      `);
+    });
+  });
+});
+```
+
+## Test Execution Strategy
+
+1. **Initial Run**: Execute tests with `npx playwright test --project=chromium`
+2. **Debug Failures**: Analyze test failures and identify root causes
+3. **Iterate**: Refine locators, assertions, or test logic as needed
+4. **Validate**: Ensure tests pass consistently and cover the intended functionality
+5. **Report**: Provide feedback on test results and any issues discovered
+
+## Quality Checklist
+
+Before finalizing tests, ensure:
+- [ ] All locators are accessible and specific and do not use strict mode violations
+- [ ] Tests are grouped logically and follow a clear structure
+- [ ] Assertions are meaningful and reflect user expectations
+- [ ] Tests follow consistent naming conventions
+- [ ] Code is properly formatted and commented
diff --git a/.github/instructions/python-tests.instructions.md b/.github/instructions/python-tests.instructions.md
index 9831a91..738412f 100644
--- a/.github/instructions/python-tests.instructions.md
+++ b/.github/instructions/python-tests.instructions.md
@@ -1,11 +1,47 @@
 ---
+description: 'Flask API endpoint and server test generation instructions for Python'
 applyTo: 'server/tests/test_*.py'
 ---
 
-# Testing notes
+# Python Unit Testing Guidelines
 
-- Tests should create shared data at the top to be used for the tests below
-- Include tests for success and for data not returned
-- Use a in-memory SQLite when testing data
-- Utilize setup and teardown functions to create and destroy the database for testing
-    - Ensure the database is properly closed with `db.engine.dispose()`
+## Test Class Structure
+
+- Blueprints should have their own test files for proper grouping and maintainability
+- Use `unittest.TestCase` as base class
+- Name pattern: `Test<FeatureName>Routes` or `Test<FeatureName>Models`
+- Include type hints for all methods and parameters
+- Add docstrings describing what each test validates
+
+## Test Data
+
+- Define `TEST_DATA` as class-level constant dict with all fixtures
+- Keep data minimal but cover edge cases and relationships
+- Use descriptive names indicating purpose
+
+## Setup and Teardown
+
+- `setUp(self) -> None` must:
+  - Create Flask app with `TESTING = True` and `sqlite:///:memory:`
+  - Register blueprints and initialize `self.app.test_client()`
+  - Create tables and seed data within app context
+- `tearDown(self) -> None` must:
+  - Call `db.session.remove()`, `db.drop_all()`, `db.engine.dispose()`
+
+## Required Test Coverage
+
+- Success cases with valid data
+- Not found cases (404 errors)
+- Empty database/collection scenarios
+- Invalid inputs and edge cases
+- Response structure validation (required fields present)
+
+## Test Method Best Practices
+
+- Follow Arrange-Act-Assert pattern
+- Name: `test_<action>_<scenario>` (e.g., `test_get_game_by_id_not_found`)
+- Create helper methods for common operations (`_seed_test_data`, `_get_response_data`)
+- Assert status code first, then response data
+- Use specific assertions: `assertEqual`, `assertIn`, `assertIsInstance`
+- Define API paths as class constants: `GAMES_API_PATH = '/api/games'`
+- Parse JSON with helper: `json.loads(response.data)`
diff --git a/.github/instructions/svelte.instructions.md b/.github/instructions/svelte.instructions.md
new file mode 100644
index 0000000..103bdb2
--- /dev/null
+++ b/.github/instructions/svelte.instructions.md
@@ -0,0 +1,68 @@
+---
+description: 'Svelte 5 component development with runes-based reactivity'
+applyTo: '**/*.svelte'
+---
+
+# Svelte 5 Component Instructions
+
+## Svelte 5 Runes Syntax
+
+All Svelte components MUST use Svelte 5 runes-based reactivity patterns:
+
+### State Management
+
+- Use `$state()` for reactive state: `let count = $state(0);`
+- Use `$derived()` for computed values: `let doubled = $derived(count * 2);`
+- Use `$effect()` for side effects (DOM manipulation, subscriptions)
+- Never use legacy Svelte 4 patterns (`export let`, `$:`, `on:click`)
+
+### Props
+
+- Use `$props()` with destructuring: `let { title, description } = $props();`
+- Add TypeScript types to props: `let { title }: { title: string } = $props();`
+- Use `$bindable()` for two-way binding: `let { value = $bindable() } = $props();`
+
+### Events
+
+- Use event attributes (not directives): `onclick={handler}` not `on:click={handler}`
+- Arrow functions for inline handlers: `onclick={() => count++}`
+
+### Snippets (not slots)
+
+- Use `{@render children?.()}` instead of `<slot />`
+- For named snippets, use snippet syntax
+
+## Component Structure
+
+```svelte
+<script>
+  // Props with types
+  let { prop1, prop2 }: { prop1: string; prop2: number } = $props();
+  
+  // State
+  let localState = $state(initialValue);
+  
+  // Derived values
+  let computed = $derived(localState * 2);
+  
+  // Effects for side effects only
+  $effect(() => {
+    // Side effect logic
+  });
+</script>
+
+<!-- Template with event attributes -->
+<div onclick={handler}>
+  {computed}
+</div>
+```
+
+## Testing Requirements
+
+- Every interactive element MUST have a `data-testid` attribute
+- Use descriptive test IDs: `data-testid="game-card-{game.id}"`, `data-testid="submit-button"`
+
+## Component Integration
+
+- Use `client:only="svelte"` directive in Astro pages when including Svelte components
+- Import components normally: `import Component from './Component.svelte';`
diff --git a/.github/instructions/tailwindcss.instructions.md b/.github/instructions/tailwindcss.instructions.md
new file mode 100644
index 0000000..f0249ae
--- /dev/null
+++ b/.github/instructions/tailwindcss.instructions.md
@@ -0,0 +1,54 @@
+---
+description: 'Tailwind CSS v4 styling patterns and dark theme guidelines'
+applyTo: '**/*.css'
+---
+
+# Tailwind CSS Instructions
+
+## Tailwind CSS v4 Configuration
+
+This project uses Tailwind CSS v4.1.14 via the `@tailwindcss/vite` plugin.
+
+### Global CSS Setup
+
+- Import Tailwind in `global.css`: `@import "tailwindcss";`
+- No separate `tailwind.config.js` file is used
+- Configuration is handled through the Vite plugin
+
+## Dark Theme Styling
+
+ALL UI components MUST use dark theme colors:
+
+### Color Palette
+
+- Background colors: `bg-slate-800`, `bg-slate-900`, `bg-slate-950`
+- Text colors: `text-slate-100`, `text-slate-200`, `text-slate-300`
+- Border colors: `border-slate-700`, `border-slate-600`
+- Accent colors for hover/focus states
+
+### Common Patterns
+
+- Cards and containers: `bg-slate-800 rounded-xl p-6 shadow-lg`
+- Hover effects: `hover:bg-slate-700 transition-colors duration-200`
+- Borders: `border border-slate-700`
+- Gradients for visual interest: `bg-gradient-to-br from-slate-800 to-slate-900`
+- Backdrop effects: `backdrop-blur-sm bg-slate-900/50`
+
+### Responsive Design
+
+- Use responsive prefixes: `sm:`, `md:`, `lg:`, `xl:`
+- Mobile-first approach
+- Ensure readability on all screen sizes
+
+## Utility Classes
+
+- Prefer utility classes over custom CSS when possible
+- Use semantic grouping: layout, spacing, colors, typography
+- Keep utility combinations readable and maintainable
+
+## Modern UI Patterns
+
+- Rounded corners: `rounded-lg`, `rounded-xl`, `rounded-2xl`
+- Smooth transitions: `transition-all duration-200 ease-in-out`
+- Shadows for depth: `shadow-md`, `shadow-lg`, `shadow-xl`
+- Focus states for accessibility: `focus:ring-2 focus:ring-blue-500`
diff --git a/.github/instructions/ui.instructions.md b/.github/instructions/ui.instructions.md
index 0fe69f4..342e0a7 100644
--- a/.github/instructions/ui.instructions.md
+++ b/.github/instructions/ui.instructions.md
@@ -1,9 +1,68 @@
 ---
-applyTo: '**/*.svelte,**/*.astro,**/*.css'
+description: 'Central UI strategy and component development philosophy'
 ---
 
-# Style notes
+# UI Component Strategy
 
-- Use dark mode
-- Controls should have a modern look and feel
-- Rounded corners for any boxes
+This file defines the central UI development strategy for Tailspin Toys. Technology-specific guidance is in separate instruction files.
+
+## Component Architecture
+
+### Technology Separation
+
+- **Astro** (`.astro` files): Page routing, layouts, static content
+- **Svelte** (`.svelte` files): Interactive components, client-side state
+- **Tailwind CSS** (`.css` files): Styling via utility classes
+
+Refer to technology-specific instruction files:
+- [`svelte.instructions.md`](svelte.instructions.md) - Svelte 5 components with runes
+- [`astro.instructions.md`](astro.instructions.md) - Astro pages and layouts  
+- [`tailwindcss.instructions.md`](tailwindcss.instructions.md) - Tailwind CSS styling patterns
+
+## Core Principles
+
+### Testability
+
+- Every interactive element MUST include a `data-testid` attribute
+- Use descriptive test IDs that identify the element's purpose and context
+- Examples: `data-testid="game-card-{game.id}"`, `data-testid="submit-button"`, `data-testid="nav-home"`
+
+### Accessibility
+
+- Use semantic HTML elements (`<nav>`, `<main>`, `<article>`, `<button>`)
+- Provide ARIA labels and roles where semantic HTML isn't sufficient
+- Ensure keyboard navigation works for all interactive elements
+- Include visible focus states: `focus:ring-2 focus:ring-blue-500 focus:outline-none`
+- Maintain sufficient color contrast (especially in dark theme)
+
+### Design Consistency
+
+- Dark theme throughout the application
+- Modern, clean UI with rounded corners and smooth transitions
+- Consistent spacing and visual hierarchy
+- Responsive design that works on mobile, tablet, and desktop
+
+### Component Reusability
+
+- Create reusable components for common UI patterns
+- Keep components focused on a single responsibility
+- Use props for configuration, not duplication
+- Document component APIs with TypeScript types
+
+## Development Workflow
+
+1. **Choose the right technology**: 
+   - Static content → Astro
+   - Interactivity → Svelte
+   - Styling → Tailwind
+
+2. **Follow technology-specific patterns**: 
+   - Refer to the appropriate instruction file
+
+3. **Ensure testability**: 
+   - Add `data-testid` to all interactive elements
+
+4. **Verify accessibility**: 
+   - Test keyboard navigation
+   - Check focus states
+   - Validate semantic structure
diff --git a/.vscode/.copilotignore b/.vscode/.copilotignore
index 74d8496..f2e015d 100644
--- a/.vscode/.copilotignore
+++ b/.vscode/.copilotignore
@@ -1 +1 @@
-- docs/**/*
\ No newline at end of file
+- workshop-content/**/*
\ No newline at end of file
diff --git a/.vscode/mcp.json b/.vscode/mcp.json
index 812bee2..9992e20 100644
--- a/.vscode/mcp.json
+++ b/.vscode/mcp.json
@@ -3,6 +3,16 @@
     "github": {
       "type": "http",
       "url": "https://api.githubcopilot.com/mcp/"
+    },
+    "svelte": {
+      "type": "http",
+      "url": "https://mcp.svelte.dev/mcp"
+    },
+    "playwright": {
+      "command": "npx",
+      "args": [
+        "@playwright/mcp@latest"
+      ]
     }
   }
 }
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0c0e7cd..95231a9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,6 +6,7 @@
         "Codespaces",
         "containerapp",
         "creds",
+        "deprioritized",
         "devcontainer",
         "devcontainers",
         "docstrings",
@@ -14,7 +15,8 @@
         "prebuild",
         "pylance",
         "schlich",
-        "SDLC"
+        "SDLC",
+        "WCAG"
     ],
     "github.copilot.nextEditSuggestions.enabled": true,
     "editor.tabSize": 4,
diff --git a/README.md b/README.md
index 6e9e743..3a326ac 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ This repository contains the project for a 1 hour guided workshop to explore Git
 
 ## Start the workshop
 
-**To begin the workshop, start at [docs/README.md](./docs/README.md)**
+**To begin the workshop, start at [workshop-content/README.md](./workshop-content/README.md)**
 
 Or, if just want to run the app...
 
diff --git a/client/e2e-tests/games.spec.ts b/client/e2e-tests/games.spec.ts
index 3a59bc3..b148412 100644
--- a/client/e2e-tests/games.spec.ts
+++ b/client/e2e-tests/games.spec.ts
@@ -1,129 +1,133 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, type Response } from '@playwright/test';
 
 test.describe('Game Listing and Navigation', () => {
   test('should display games with titles on index page', async ({ page }) => {
-    await page.goto('/');
-    
-    // Wait for the games to load using a more specific locator
-    const gamesGrid = page.getByTestId('games-grid');
-    await expect(gamesGrid).toBeVisible();
-    
-    // Check that games are displayed
-    const gameCards = page.getByTestId('game-card');
-    
-    // Wait for at least one game card to be visible
-    await expect(gameCards.first()).toBeVisible();
-    
-    // Check that we have at least one game
-    expect(await gameCards.count()).toBeGreaterThan(0);
-    
-    // Check that each game card has a title
-    await expect(gameCards.first().getByTestId('game-title')).toBeVisible();
-    
-    // Verify that game titles are not empty
-    await expect(gameCards.first().getByTestId('game-title')).not.toBeEmpty();
+    await test.step('Navigate to homepage', async () => {
+      await page.goto('/');
+    });
+
+    await test.step('Verify games grid is visible', async () => {
+      const gamesGrid = page.getByTestId('games-grid');
+      await expect(gamesGrid).toBeVisible();
+    });
+
+    await test.step('Verify game cards are displayed', async () => {
+      const gameCards = page.getByTestId('game-card');
+      await expect(gameCards.first()).toBeVisible();
+      expect(await gameCards.count()).toBeGreaterThan(0);
+    });
+
+    await test.step('Verify game cards have titles with content', async () => {
+      const gameCards = page.getByTestId('game-card');
+      await expect(gameCards.first().getByTestId('game-title')).toBeVisible();
+      await expect(gameCards.first().getByTestId('game-title')).not.toBeEmpty();
+    });
   });
 
   test('should navigate to correct game details page when clicking on a game', async ({ page }) => {
-    await page.goto('/');
-    
-    // Wait for games to load
-    const gamesGrid = page.getByTestId('games-grid');
-    await expect(gamesGrid).toBeVisible();
-    
-    // Get the first game card and its data attributes
-    const firstGameCard = page.getByTestId('game-card').first();
-    const gameId = await firstGameCard.getAttribute('data-game-id');
-    const gameTitle = await firstGameCard.getAttribute('data-game-title');
-    
-    // Click on the first game
-    await firstGameCard.click();
-    
-    // Verify we're on the correct game details page
-    await expect(page).toHaveURL(`/game/${gameId}`);
-    
-    // Verify the game details page loads
-    await expect(page.getByTestId('game-details')).toBeVisible();
-    
-    // Verify the title matches what we clicked on
-    if (gameTitle) {
-      await expect(page.getByTestId('game-details-title')).toHaveText(gameTitle);
-    }
+    let gameId: string | null;
+    let gameTitle: string | null;
+
+    await test.step('Navigate to homepage and wait for games to load', async () => {
+      await page.goto('/');
+      const gamesGrid = page.getByTestId('games-grid');
+      await expect(gamesGrid).toBeVisible();
+    });
+
+    await test.step('Get first game information and click it', async () => {
+      const firstGameCard = page.getByTestId('game-card').first();
+      gameId = await firstGameCard.getAttribute('data-game-id');
+      gameTitle = await firstGameCard.getAttribute('data-game-title');
+      await firstGameCard.click();
+    });
+
+    await test.step('Verify navigation to game details page', async () => {
+      await expect(page).toHaveURL(`/game/${gameId}`);
+      await expect(page.getByTestId('game-details')).toBeVisible();
+    });
+
+    await test.step('Verify game title matches clicked game', async () => {
+      if (gameTitle) {
+        await expect(page.getByTestId('game-details-title')).toHaveText(gameTitle);
+      }
+    });
   });
 
   test('should display game details with all required information', async ({ page }) => {
-    // Navigate to a specific game (we'll use game ID 1 as an example)
-    await page.goto('/game/1');
-    
-    // Wait for game details to load
-    await expect(page.getByTestId('game-details')).toBeVisible();
-    
-    // Check that the game title is present and not empty
-    const gameTitle = page.getByTestId('game-details-title');
-    await expect(gameTitle).toBeVisible();
-    await expect(gameTitle).not.toBeEmpty();
-    
-    // Check that the game description is present and not empty
-    const gameDescription = page.getByTestId('game-details-description');
-    await expect(gameDescription).toBeVisible();
-    await expect(gameDescription).not.toBeEmpty();
-    
-    // Check that either publisher or category (or both) are present
-    const publisherExists = await page.getByTestId('game-details-publisher').isVisible();
-    const categoryExists = await page.getByTestId('game-details-category').isVisible();
-    expect(publisherExists || categoryExists).toBeTruthy();
-    
-    // If publisher exists, check it has content
-    if (publisherExists) {
-      await expect(page.getByTestId('game-details-publisher')).not.toBeEmpty();
-    }
-    
-    // If category exists, check it has content
-    if (categoryExists) {
-      await expect(page.getByTestId('game-details-category')).not.toBeEmpty();
-    }
+    await test.step('Navigate to specific game details page', async () => {
+      await page.goto('/game/1');
+      await expect(page.getByTestId('game-details')).toBeVisible();
+    });
+
+    await test.step('Verify game title is displayed', async () => {
+      const gameTitle = page.getByTestId('game-details-title');
+      await expect(gameTitle).toBeVisible();
+      await expect(gameTitle).not.toBeEmpty();
+    });
+
+    await test.step('Verify game description is displayed', async () => {
+      const gameDescription = page.getByTestId('game-details-description');
+      await expect(gameDescription).toBeVisible();
+      await expect(gameDescription).not.toBeEmpty();
+    });
+
+    await test.step('Verify publisher or category information is present', async () => {
+      const publisherExists = await page.getByTestId('game-details-publisher').isVisible();
+      const categoryExists = await page.getByTestId('game-details-category').isVisible();
+      expect(publisherExists || categoryExists).toBeTruthy();
+
+      if (publisherExists) {
+        await expect(page.getByTestId('game-details-publisher')).not.toBeEmpty();
+      }
+
+      if (categoryExists) {
+        await expect(page.getByTestId('game-details-category')).not.toBeEmpty();
+      }
+    });
   });
 
   test('should display a button to back the game', async ({ page }) => {
-    await page.goto('/game/1');
-    
-    // Wait for game details to load
-    await expect(page.getByTestId('game-details')).toBeVisible();
-    
-    // Check that the back game button is present
-    const backButton = page.getByTestId('back-game-button');
-    await expect(backButton).toBeVisible();
-    await expect(backButton).toContainText('Support This Game');
-    
-    // Verify the button is clickable
-    await expect(backButton).toBeEnabled();
+    await test.step('Navigate to game details page', async () => {
+      await page.goto('/game/1');
+      await expect(page.getByTestId('game-details')).toBeVisible();
+    });
+
+    await test.step('Verify back game button is visible and enabled', async () => {
+      const backButton = page.getByTestId('back-game-button');
+      await expect(backButton).toBeVisible();
+      await expect(backButton).toContainText('Support This Game');
+      await expect(backButton).toBeEnabled();
+    });
   });
 
   test('should be able to navigate back to home from game details', async ({ page }) => {
-    await page.goto('/game/1');
-    
-    // Wait for the page to load
-    await expect(page.getByTestId('game-details')).toBeVisible();
-    
-    // Find and click the back to all games link using a more semantic locator
-    const backLink = page.getByRole('link', { name: /back to all games/i });
-    await expect(backLink).toBeVisible();
-    await backLink.click();
-    
-    // Verify we're back on the home page
-    await expect(page).toHaveURL('/');
-    await expect(page.getByTestId('games-grid')).toBeVisible();
+    await test.step('Navigate to game details page', async () => {
+      await page.goto('/game/1');
+      await expect(page.getByTestId('game-details')).toBeVisible();
+    });
+
+    await test.step('Click back to all games link', async () => {
+      const backLink = page.getByRole('link', { name: /back to all games/i });
+      await expect(backLink).toBeVisible();
+      await backLink.click();
+    });
+
+    await test.step('Verify navigation back to homepage', async () => {
+      await expect(page).toHaveURL('/');
+      await expect(page.getByTestId('games-grid')).toBeVisible();
+    });
   });
 
   test('should handle navigation to non-existent game gracefully', async ({ page }) => {
-    // Navigate to a game that doesn't exist
-    const response = await page.goto('/game/99999');
-    
-    // Check the response status or ensure the page loads without crashing
-    expect(response?.status()).toBeLessThan(500);
-    
-    // The page should either show an error or handle it gracefully
-    // We expect the page to not crash and still have a valid title
-    await expect(page).toHaveTitle(/Game Details - Tailspin Toys/);
+    let response: Response | null;
+
+    await test.step('Navigate to non-existent game', async () => {
+      response = await page.goto('/game/99999');
+    });
+
+    await test.step('Verify page handles error gracefully', async () => {
+      expect(response?.status()).toBeLessThan(500);
+      await expect(page).toHaveTitle(/Game Details - Tailspin Toys/);
+    });
   });
-});
+});
\ No newline at end of file
diff --git a/client/src/components/EmptyState.svelte b/client/src/components/EmptyState.svelte
new file mode 100644
index 0000000..98dc1b6
--- /dev/null
+++ b/client/src/components/EmptyState.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    let { message }: { message: string } = $props();
+</script>
+
+<div class="text-center py-12 bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700">
+    <p class="text-slate-300">{message}</p>
+</div>
diff --git a/client/src/components/ErrorMessage.svelte b/client/src/components/ErrorMessage.svelte
new file mode 100644
index 0000000..f146f44
--- /dev/null
+++ b/client/src/components/ErrorMessage.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    let { error }: { error: string } = $props();
+</script>
+
+<div class="text-center py-12 bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700">
+    <p class="text-red-400">{error}</p>
+</div>
diff --git a/client/src/components/GameCard.svelte b/client/src/components/GameCard.svelte
new file mode 100644
index 0000000..240c6df
--- /dev/null
+++ b/client/src/components/GameCard.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+    interface Game {
+        id: number;
+        title: string;
+        description: string;
+        publisher_name?: string;
+        category_name?: string;
+    }
+
+    let { game }: { game: Game } = $props();
+</script>
+
+<a 
+    href={`/game/${game.id}`} 
+    class="group block bg-slate-800/60 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg border border-slate-700/50 hover:border-blue-500/50 hover:shadow-blue-500/10 hover:shadow-xl transition-all duration-300 hover:translate-y-[-6px]"
+    data-testid="game-card"
+    data-game-id={game.id}
+    data-game-title={game.title}
+>
+    <div class="p-6 relative">
+        <div class="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-purple-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+        <div class="relative z-10">
+            <h3 class="text-xl font-semibold text-slate-100 mb-2 group-hover:text-blue-400 transition-colors" data-testid="game-title">{game.title}</h3>
+            
+            {#if game.category_name || game.publisher_name}
+                <div class="flex gap-2 mb-3">
+                    {#if game.category_name}
+                        <span class="text-xs font-medium px-2.5 py-0.5 rounded bg-blue-900/60 text-blue-300" data-testid="game-category">
+                            {game.category_name}
+                        </span>
+                    {/if}
+                    {#if game.publisher_name}
+                        <span class="text-xs font-medium px-2.5 py-0.5 rounded bg-purple-900/60 text-purple-300" data-testid="game-publisher">
+                            {game.publisher_name}
+                        </span>
+                    {/if}
+                </div>
+            {/if}
+            
+            <p class="text-slate-400 mb-4 text-sm line-clamp-2" data-testid="game-description">{game.description}</p>
+            
+            <div class="mt-4 text-sm text-blue-400 font-medium flex items-center">
+                <span>View details</span>
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 transform transition-transform duration-300 group-hover:translate-x-2" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+                </svg>
+            </div>
+        </div>
+    </div>
+</a>
diff --git a/client/src/components/GameDetails.svelte b/client/src/components/GameDetails.svelte
index f494abe..8eeed08 100644
--- a/client/src/components/GameDetails.svelte
+++ b/client/src/components/GameDetails.svelte
@@ -16,13 +16,11 @@
         starRating: number | null;
     }
 
-    // Accept either a game object or a gameId
-    export let game: Game | undefined = undefined;
-    export let gameId = 0;
+    let { game = undefined, gameId = 0 }: { game?: Game, gameId?: number } = $props();
     
-    let loading = true;
-    let error: string | null = null;
-    let gameData: Game | null = null;
+    let loading = $state(true);
+    let error = $state<string | null>(null);
+    let gameData = $state<Game | null>(null);
     
     onMount(async () => {
         // If game object is provided directly, use it
@@ -52,7 +50,6 @@
         }
     });
 
-    // Function to render stars based on rating
     function renderStarRating(rating: number | null): string {
         if (rating === null) return "Not yet rated";
         
diff --git a/client/src/components/GameList.svelte b/client/src/components/GameList.svelte
index 5913ac1..aa152f6 100644
--- a/client/src/components/GameList.svelte
+++ b/client/src/components/GameList.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
     import { onMount } from "svelte";
+    import GameCard from "./GameCard.svelte";
+    import LoadingSkeleton from "./LoadingSkeleton.svelte";
+    import ErrorMessage from "./ErrorMessage.svelte";
+    import EmptyState from "./EmptyState.svelte";
 
     interface Game {
         id: number;
@@ -9,9 +13,9 @@
         category_name?: string;
     }
 
-    export let games: Game[] = [];
-    let loading = true;
-    let error: string | null = null;
+    let { games = $bindable([]) }: { games?: Game[] } = $props();
+    let loading = $state(true);
+    let error = $state<string | null>(null);
 
     const fetchGames = async () => {
         loading = true;
@@ -38,75 +42,15 @@
     <h2 class="text-2xl font-medium mb-6 text-slate-100">Featured Games</h2>
     
     {#if loading}
-        <!-- loading animation -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-            {#each Array(6) as _, i}
-                <div class="bg-slate-800/60 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg border border-slate-700/50">
-                    <div class="p-6">
-                        <div class="animate-pulse">
-                            <div class="h-6 bg-slate-700 rounded w-3/4 mb-3"></div>
-                            <div class="h-4 bg-slate-700 rounded w-1/2 mb-4"></div>
-                            <div class="h-3 bg-slate-700 rounded w-full mb-3"></div>
-                            <div class="h-3 bg-slate-700 rounded w-5/6 mb-4"></div>
-                            <div class="h-2 bg-slate-700 rounded-full w-full mb-2"></div>
-                            <div class="h-4 bg-slate-700 rounded w-1/4 mt-4"></div>
-                        </div>
-                    </div>
-                </div>
-            {/each}
-        </div>
+        <LoadingSkeleton count={6} />
     {:else if error}
-        <!-- error display -->
-        <div class="text-center py-12 bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700">
-            <p class="text-red-400">{error}</p>
-        </div>
+        <ErrorMessage error={error} />
     {:else if games.length === 0}
-        <!-- no games found -->
-        <div class="text-center py-12 bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700">
-            <p class="text-slate-300">No games available at the moment.</p>
-        </div>
+        <EmptyState message="No games available at the moment." />
     {:else}
-        <!-- game list -->
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" data-testid="games-grid">
             {#each games as game (game.id)}
-                <a 
-                    href={`/game/${game.id}`} 
-                    class="group block bg-slate-800/60 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg border border-slate-700/50 hover:border-blue-500/50 hover:shadow-blue-500/10 hover:shadow-xl transition-all duration-300 hover:translate-y-[-6px]"
-                    data-testid="game-card"
-                    data-game-id={game.id}
-                    data-game-title={game.title}
-                >
-                    <div class="p-6 relative">
-                        <div class="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-purple-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                        <div class="relative z-10">
-                            <h3 class="text-xl font-semibold text-slate-100 mb-2 group-hover:text-blue-400 transition-colors" data-testid="game-title">{game.title}</h3>
-                            
-                            {#if game.category_name || game.publisher_name}
-                                <div class="flex gap-2 mb-3">
-                                    {#if game.category_name}
-                                        <span class="text-xs font-medium px-2.5 py-0.5 rounded bg-blue-900/60 text-blue-300" data-testid="game-category">
-                                            {game.category_name}
-                                        </span>
-                                    {/if}
-                                    {#if game.publisher_name}
-                                        <span class="text-xs font-medium px-2.5 py-0.5 rounded bg-purple-900/60 text-purple-300" data-testid="game-publisher">
-                                            {game.publisher_name}
-                                        </span>
-                                    {/if}
-                                </div>
-                            {/if}
-                            
-                            <p class="text-slate-400 mb-4 text-sm line-clamp-2" data-testid="game-description">{game.description}</p>
-                            
-                            <div class="mt-4 text-sm text-blue-400 font-medium flex items-center">
-                                <span>View details</span>
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 transform transition-transform duration-300 group-hover:translate-x-2" viewBox="0 0 20 20" fill="currentColor">
-                                    <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
-                                </svg>
-                            </div>
-                        </div>
-                    </div>
-                </a>
+                <GameCard {game} />
             {/each}
         </div>
     {/if}
diff --git a/client/src/components/LoadingSkeleton.svelte b/client/src/components/LoadingSkeleton.svelte
new file mode 100644
index 0000000..bf865b5
--- /dev/null
+++ b/client/src/components/LoadingSkeleton.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    let { count = 6 }: { count?: number } = $props();
+</script>
+
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+    {#each Array(count) as _, i}
+        <div class="bg-slate-800/60 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg border border-slate-700/50">
+            <div class="p-6">
+                <div class="animate-pulse">
+                    <div class="h-6 bg-slate-700 rounded w-3/4 mb-3"></div>
+                    <div class="h-4 bg-slate-700 rounded w-1/2 mb-4"></div>
+                    <div class="h-3 bg-slate-700 rounded w-full mb-3"></div>
+                    <div class="h-3 bg-slate-700 rounded w-5/6 mb-4"></div>
+                    <div class="h-2 bg-slate-700 rounded-full w-full mb-2"></div>
+                    <div class="h-4 bg-slate-700 rounded w-1/4 mt-4"></div>
+                </div>
+            </div>
+        </div>
+    {/each}
+</div>
diff --git a/docs/images/copilot-agent-mode-model.png b/docs/images/copilot-agent-mode-model.png
deleted file mode 100644
index 086a87c..0000000
Binary files a/docs/images/copilot-agent-mode-model.png and /dev/null differ
diff --git a/docs/images/copilot-chat-activation.png b/docs/images/copilot-chat-activation.png
deleted file mode 100644
index a737e6e..0000000
Binary files a/docs/images/copilot-chat-activation.png and /dev/null differ
diff --git a/docs/images/copilot-instructions-references.png b/docs/images/copilot-instructions-references.png
deleted file mode 100644
index 3e178cf..0000000
Binary files a/docs/images/copilot-instructions-references.png and /dev/null differ
diff --git a/docs/images/create-issue-assign-copilot.png b/docs/images/create-issue-assign-copilot.png
deleted file mode 100644
index 64fc180..0000000
Binary files a/docs/images/create-issue-assign-copilot.png and /dev/null differ
diff --git a/docs/images/ex4-issue-assign.png b/docs/images/ex4-issue-assign.png
deleted file mode 100644
index dfc894e..0000000
Binary files a/docs/images/ex4-issue-assign.png and /dev/null differ
diff --git a/server/tests/test_games.py b/server/tests/test_games.py
index a70a64d..0b007d7 100644
--- a/server/tests/test_games.py
+++ b/server/tests/test_games.py
@@ -1,6 +1,6 @@
 import unittest
 import json
-from typing import Dict, List, Any, Optional
+from typing import Dict, Any
 from flask import Flask, Response
 from models import Game, Publisher, Category, db
 from routes.games import games_bp
@@ -168,5 +168,30 @@ def test_get_game_by_id_not_found(self) -> None:
         self.assertEqual(response.status_code, 404)
         self.assertEqual(data['error'], "Game not found")
 
+    def test_get_games_empty_database(self) -> None:
+        """Test retrieval of games when database is empty"""
+        # Clear all games from the database
+        with self.app.app_context():
+            db.session.query(Game).delete()
+            db.session.commit()
+        
+        # Act
+        response = self.client.get(self.GAMES_API_PATH)
+        data = self._get_response_data(response)
+        
+        # Assert
+        self.assertEqual(response.status_code, 200)
+        self.assertIsInstance(data, list)
+        self.assertEqual(len(data), 0)
+
+    def test_get_game_by_invalid_id_type(self) -> None:
+        """Test retrieval of a game with invalid ID type"""
+        # Act
+        response = self.client.get(f'{self.GAMES_API_PATH}/invalid-id')
+        
+        # Assert
+        # Flask should return 404 for routes that don't match the <int:id> pattern
+        self.assertEqual(response.status_code, 404)
+
 if __name__ == '__main__':
     unittest.main()
\ No newline at end of file
diff --git a/server/tests/test_models.py b/server/tests/test_models.py
new file mode 100644
index 0000000..0082746
--- /dev/null
+++ b/server/tests/test_models.py
@@ -0,0 +1,149 @@
+import unittest
+from typing import Dict, Any
+from flask import Flask
+from models import Game, Publisher, Category, db
+
+class TestModels(unittest.TestCase):
+    """Test suite for model validations"""
+    
+    # Test data
+    TEST_DATA: Dict[str, Any] = {
+        "valid_publisher": {"name": "Test Publisher", "description": "A great publisher for testing"},
+        "valid_category": {"name": "Strategy", "description": "Strategic games for testing"},
+        "valid_game": {
+            "title": "Test Game",
+            "description": "An exciting test game with lots of features",
+            "star_rating": 4.5
+        }
+    }
+
+    def setUp(self) -> None:
+        """Set up test database"""
+        # Create a fresh Flask app for testing
+        self.app = Flask(__name__)
+        self.app.config['TESTING'] = True
+        self.app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///:memory:'
+        self.app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+        
+        # Initialize in-memory database for testing
+        db.init_app(self.app)
+        
+        # Create tables
+        with self.app.app_context():
+            db.create_all()
+
+    def tearDown(self) -> None:
+        """Clean up test database and ensure proper connection closure"""
+        with self.app.app_context():
+            db.session.remove()
+            db.drop_all()
+            db.engine.dispose()
+
+    def test_game_title_too_short(self) -> None:
+        """Test that game title validation rejects titles that are too short"""
+        with self.app.app_context():
+            # Create required publisher and category
+            publisher = Publisher(**self.TEST_DATA["valid_publisher"])
+            category = Category(**self.TEST_DATA["valid_category"])
+            db.session.add_all([publisher, category])
+            db.session.commit()
+            
+            # Attempt to create game with title that's too short
+            with self.assertRaises(ValueError) as context:
+                game = Game(
+                    title="X",  # Only 1 character
+                    description=self.TEST_DATA["valid_game"]["description"],
+                    publisher=publisher,
+                    category=category,
+                    star_rating=4.0
+                )
+                db.session.add(game)
+                db.session.commit()
+            
+            self.assertIn("Game title must be at least 2 characters", str(context.exception))
+
+    def test_game_description_too_short(self) -> None:
+        """Test that game description validation rejects descriptions that are too short"""
+        with self.app.app_context():
+            # Create required publisher and category
+            publisher = Publisher(**self.TEST_DATA["valid_publisher"])
+            category = Category(**self.TEST_DATA["valid_category"])
+            db.session.add_all([publisher, category])
+            db.session.commit()
+            
+            # Attempt to create game with description that's too short
+            with self.assertRaises(ValueError) as context:
+                game = Game(
+                    title=self.TEST_DATA["valid_game"]["title"],
+                    description="Too short",  # Only 9 characters
+                    publisher=publisher,
+                    category=category,
+                    star_rating=4.0
+                )
+                db.session.add(game)
+                db.session.commit()
+            
+            self.assertIn("Description must be at least 10 characters", str(context.exception))
+
+    def test_valid_game_creation(self) -> None:
+        """Test that a valid game can be created successfully"""
+        with self.app.app_context():
+            # Create required publisher and category
+            publisher = Publisher(**self.TEST_DATA["valid_publisher"])
+            category = Category(**self.TEST_DATA["valid_category"])
+            db.session.add_all([publisher, category])
+            db.session.commit()
+            
+            # Create valid game
+            game = Game(
+                title=self.TEST_DATA["valid_game"]["title"],
+                description=self.TEST_DATA["valid_game"]["description"],
+                publisher=publisher,
+                category=category,
+                star_rating=self.TEST_DATA["valid_game"]["star_rating"]
+            )
+            db.session.add(game)
+            db.session.commit()
+            
+            # Verify game was created
+            self.assertIsNotNone(game.id)
+            self.assertEqual(game.title, self.TEST_DATA["valid_game"]["title"])
+            self.assertEqual(game.description, self.TEST_DATA["valid_game"]["description"])
+            self.assertEqual(game.star_rating, self.TEST_DATA["valid_game"]["star_rating"])
+
+    def test_publisher_name_too_short(self) -> None:
+        """Test that publisher name validation rejects names that are too short"""
+        with self.app.app_context():
+            # Attempt to create publisher with name that's too short
+            with self.assertRaises(ValueError) as context:
+                publisher = Publisher(name="X", description=self.TEST_DATA["valid_publisher"]["description"])
+                db.session.add(publisher)
+                db.session.commit()
+            
+            self.assertIn("Publisher name must be at least 2 characters", str(context.exception))
+
+    def test_category_name_too_short(self) -> None:
+        """Test that category name validation rejects names that are too short"""
+        with self.app.app_context():
+            # Attempt to create category with name that's too short
+            with self.assertRaises(ValueError) as context:
+                category = Category(name="X", description=self.TEST_DATA["valid_category"]["description"])
+                db.session.add(category)
+                db.session.commit()
+            
+            self.assertIn("Category name must be at least 2 characters", str(context.exception))
+
+    def test_description_none_allowed(self) -> None:
+        """Test that None descriptions are allowed for optional fields"""
+        with self.app.app_context():
+            # Create publisher without description
+            publisher = Publisher(name=self.TEST_DATA["valid_publisher"]["name"], description=None)
+            db.session.add(publisher)
+            db.session.commit()
+            
+            # Verify publisher was created with None description
+            self.assertIsNotNone(publisher.id)
+            self.assertIsNone(publisher.description)
+
+if __name__ == '__main__':
+    unittest.main()
diff --git a/docs/0-prereqs.md b/workshop-content/0-prereqs.md
similarity index 54%
rename from docs/0-prereqs.md
rename to workshop-content/0-prereqs.md
index 09ade71..0b76b95 100644
--- a/docs/0-prereqs.md
+++ b/workshop-content/0-prereqs.md
@@ -1,6 +1,6 @@
 # Exercise 0: Prerequisites
 
-Before we get started on the lab, there's a few tasks we need to complete to get everything ready. We need to get a copy of the repository which includes the code, then spin up a [codespace][codespaces] to use to create our code.
+Before you get started on the lab, there's a few tasks you need to complete to get everything ready. You need to get a copy of the repository which includes the code, then spin up a [codespace][codespaces] to use to create your code.
 
 ## Setting up the Lab Repository
 
@@ -9,39 +9,39 @@ To create a copy of the repository for the code you'll create an instance from t
 1. In a new browser window, navigate to the GitHub repository for this lab: `https://github.com/github-samples/agents-in-sdlc`.
 2. Create your own copy of the repository by selecting the **Use this template** button on the lab repository page. Then select **Create a new repository**.
 
-    ![Use this template button](images/use-template.png)
+    ![Use this template button](images/ex0-use-template.png)
 
 3. If you are completing the workshop as part of an event being led by GitHub or Microsoft, follow the instructions provided by the mentors. Otherwise, you can create the new repository in an organization where you have access to Copilot coding agent and can assign issues to Copilot.
 
-    ![Input the repository template settings](images/repository-template-settings.png)
+    ![Input the repository template settings](images/ex0-repository-settings.png)
 
 4. Make a note of the repository path you created (**organization-or-user-name/repository-name**), as you will be referring to this later in the lab.
 
 ## Creating a codespace
 
-Next up, we will be using a codespace to complete the lab exercises. [GitHub Codespaces][codespaces] are a cloud-based development environment that allows you to write, run, and debug code directly in your browser. It provides a fully-featured IDE with support for multiple programming languages, extensions, and tools.
+Next up, you'll be using a codespace to complete the lab exercises. [GitHub Codespaces][codespaces] are a cloud-based development environment that allows you to write, run, and debug code directly in your browser. It provides a fully-featured IDE with support for multiple programming languages, extensions, and tools.
 
 1. Navigate to your newly created repository.
 2. Select the green **Code** button.
 
-    ![Select the Code button](images/code-button.png)
+    ![Select the Code button](images/ex0-code-button.png)
 
 3. Select the **Codespaces** tab and select the **+** button to create a new Codespace.
 
-    ![Create a new codespace](images/create-codespace.png)
+    ![Create a new codespace](images/ex0-create-codespace.png)
 
-The creation of the codespace will take several minutes, although it's still far quicker than having to manually install all the services! That said, we can use this time to take advantage of our ability to assign tasks to GitHub Copilot which it can perform asynchronously, which we'll turn our attention to next!
+The creation of the codespace will take several minutes, although it's still far quicker than having to manually install all the services! That said, you can use this time to explore other features of GitHub Copilot, which we'll turn your attention to next!
 
 > [!IMPORTANT]
-> We will return to the codespace in a future exercise. For the time being, leave it open in a tab in your browser.
+> You'll return to the codespace in a future exercise. For the time being, leave it open in a tab in your browser.
 
 ## Summary
 
-Congratulations, you have created a copy of the lab repository! You also began the creation process of your codespace, which you'll use when you begin writing code. We're going to return back to this after the next lesson, so don't worry.
+Congratulations, you have created a copy of the lab repository! You also began the creation process of your codespace, which you'll use when you begin writing code.
 
 ## Next step
 
-Since we've got a few minutes, let's get Copilot working on some tasks asynchronously for us! We can do this by [creating issues and assigning them to Copilot coding agent](./1-copilot-coding-agent.md).
+Let's explore how you can use Model Context Protocol (MCP) to interact with external services! You can do this by [setting up the backlog with Copilot agent mode and GitHub's MCP Server](./1-mcp.md).
 
 [codespaces]: https://github.com/features/codespaces
 [template-repository]: https://docs.github.com/repositories/creating-and-managing-repositories/creating-a-template-repository
diff --git a/docs/2-mcp.md b/workshop-content/1-mcp.md
similarity index 81%
rename from docs/2-mcp.md
rename to workshop-content/1-mcp.md
index aa3c58b..44893e9 100644
--- a/docs/2-mcp.md
+++ b/workshop-content/1-mcp.md
@@ -1,6 +1,6 @@
-# Exercise 2 - Setting up the backlog with Copilot agent mode and GitHub's MCP Server
+# Exercise 1 - Setting up the backlog with Copilot agent mode and GitHub's MCP Server
 
-| [← Previous lesson: GitHub Copilot coding agent][previous-lesson] | [Next lesson: Custom instructions →][next-lesson] |
+| [← Prerequisites][previous-lesson] | [Next lesson: Custom instructions →][next-lesson] |
 |:--|--:|
 
 There's more to writing code than just writing code. Issues need to be filed, external services need to be called, and information needs to be gathered. Typically this involves interacting with external tools, which can break a developer's flow. Through the power of Model Context Protocol (MCP), you can access all of this functionality right from Copilot!
@@ -9,7 +9,7 @@ There's more to writing code than just writing code. Issues need to be filed, ex
 
 You are a part-time developer for Tailspin Toys - a crowdfunding platform for board games with a developer theme. You've been assigned various tasks to introduce new functionality to the website. Being a good team member, you want to file issues to track your work. To help future you, you've decided to enlist the help of Copilot. You will set up your backlog of work for the rest of the lab, using GitHub Copilot Chat agent mode and the GitHub Model Context Protocol (MCP) server to create the issues for you. 
 
-To achieve this, you will:
+In this exercise, you will:
 
 - use Model Context Protocol (MCP), which provides access to external tools and capabilities.
 - set up the GitHub MCP server in your repository.
@@ -25,27 +25,28 @@ Agent mode in GitHub Copilot Chat transforms Copilot into an AI agent that can p
 
 These tools and resources are accessed through an MCP server, which acts as a bridge between the AI agent and the external tools and services. The MCP server is responsible for managing the communication between the AI agent and the external tools (such as existing APIs or local tools like NPM packages). Each MCP server represents a different set of tools and resources that the AI agent can access.
 
-![Diagram showing the inner works of agent mode and how it interacts with context, LLM and tools - including tools contributed by MCP servers and VS Code extensions](images/mcp-diagram.png)
+![Diagram showing the inner works of agent mode and how it interacts with context, LLM and tools - including tools contributed by MCP servers and VS Code extensions](images/ex1-mcp-diagram.png)
 
-Popular existing MCP servers include:
+A couple of popular existing MCP servers are:
 
 - **[GitHub MCP Server][github-mcp-server]**: This server provides access to a set of APIs for managing your GitHub repositories. It allows the AI agent to perform actions such as creating new repositories, updating existing ones, and managing issues and pull requests.
 - **[Playwright MCP Server][playwright-mcp-server]**: This server provides browser automation capabilities using Playwright. It allows the AI agent to perform actions such as navigating to web pages, filling out forms, and clicking buttons.
-- **Additional reference servers**: There are many other MCP servers available that provide access to different tools and resources. GitHub hosts an [MCP registry][mcp-registry], listing including reference, third-party, and community implementations. 
+
+There are many other MCP servers available that provide access to different tools and resources. GitHub hosts an [MCP registry][mcp-registry] to enhance discoverability and contributions to the ecosystem. 
 
 > [!IMPORTANT]
 > With regard to security, treat MCP servers as you would any other dependency in your project. Before using an MCP server, carefully review its source code, verify the publisher, and consider the security implications. Only use MCP servers that you trust and be cautious about granting access to sensitive resources or operations.
 
 ## Ensure your codespace is ready
 
-In a [prior exercise][prereqs-lesson] you launched the codespace you'll use for the remainder of the coding exercises in this lab. Let's put the final touches on it before we begin using it.
+In a [prior exercise][prereqs-lesson] you launched the codespace you'll use for the remainder of the coding exercises in this lab. Let's put the final touches on it before you begin using it.
 
-The setup process for the codespace installed and setup many [VS Code extensions][vscode-extensions]. As with any software, updates may be needed. When your codespace is created we'll need to ensure everything is up-to-date.
+The setup process for the codespace installed and setup many [VS Code extensions][vscode-extensions]. As with any software, updates may be needed. When your codespace is created you'll need to ensure everything is up-to-date.
 
 1. Return to the tab where you started your codespace. If you closed the tab, return to your repository, select **Code** > **Codespaces** and then the name of the codespace.
 2. Select **Extensions** on the workbench on the left side of your codespace.
 
-    ![Screenshot of the extensions window with multiple extensions showing either Update or Reload Window buttons](images/extensions-updates.png)
+    ![Screenshot of the extensions window with multiple extensions showing either Update or Reload Window buttons](images/ex1-extensions-updates.png)
 
 3. Select **Update** on any extensions with an **Update** button. Repeat as necessary.
 4. Select **Reload Window** on any extensions with a **Reload Window** button to reload the codespace.
@@ -61,28 +62,27 @@ To access GitHub Copilot Chat agent mode, you need to have the GitHub Copilot Ch
 Once you have the extension installed, you may need to authenticate with your GitHub account to enable it.
 
 1. Return to your codespace.
-2. Select the **Copilot Chat** icon at the top of your codespace.
+2. If you don't already see Copilot Chat on the right side of your editor, select the **Copilot Chat** icon at the top of your codespace.
 3. Type a message like "Hello world" in the Copilot Chat window and press enter. This should activate Copilot Chat.
 4. Alternatively, if you are not authenticated you will be prompted to sign in to your GitHub account. Follow the instructions to authenticate.
 
-    ![Example of Copilot Chat authentication prompt](images/copilot-authentication.png)
+    ![Example of Copilot Chat authentication prompt](images/ex1-copilot-authentication.png)
 
 5. After authentication, you should see the Copilot Chat window appear.
-
 6. Switch to agent mode by selecting the dropdown in the Copilot Chat window and selecting **Agent**.
 
-    ![Example of switching to agent mode](images/copilot-agent-mode-dropdown.png)
+    ![Example of switching to agent mode](images/shared-agent-mode-dropdown.png)
 
-7. Set the model to **Claude Sonnet 4**.
+7. Set the model to **Claude Sonnet 4.5**.
 
-    ![Example of selecting the Claude Sonnet 4 model](images/copilot-agent-mode-model.png)
+    ![Example of selecting the Claude Sonnet 4.5 model](images/ex1-select-model.png)
 
 > [!IMPORTANT]
-> The authors of this lab are not indicating a preference towards one model or another. When building this lab, we used Claude Sonnet 4, and as such are including that in the instructions. The hope is the code suggestions you receive will be relatively consistent to ensure a good experience. However, because LLMs are probabilistic, you may notice the suggestions received differ from what is indicated in the lab. This is perfectly normal and expected.
+> The authors of this workshop are not indicating a preference towards one model or another. When building this workshop, we used Claude Sonnet 4.5, and as such are including that in the instructions. The hope is the code suggestions you receive will be relatively consistent to ensure a good experience. However, because LLMs are probabilistic, you may notice the suggestions received differ from what is indicated in the workshop. This is perfectly normal and expected.
 
-8. The chat pane should update to indicate that you are now in agent mode. You should see a tools icon on the same line as the mode and model, which you utilized earlier, showing that we can configure tools for GitHub Copilot to use.
+8. The chat pane should update to indicate that you are now in agent mode. You should see a tools icon on the same line as the mode and model, which you utilized earlier, showing that you can configure tools for GitHub Copilot to use.
 
-Typically, the number of tools available will be set to 0 when setting up a new project, as we have not configured any MCP servers yet. But to help you get started, we have created a **.vscode/mcp.json** file with an example configuration for the [GitHub MCP server][github-mcp-server]. Let's go and explore that next.
+Typically, the number of tools available will be set to 0 when setting up a new project, as you have not configured any MCP servers yet. But to help you get started, the project has a **.vscode/mcp.json** file with an example configuration for the [GitHub MCP server][github-mcp-server]. Let's go and explore that next.
 
 ## Setting up the GitHub MCP server
 
@@ -102,7 +102,7 @@ The **.vscode/mcp.json** file is used to configure the MCP servers that are avai
     }
     ```
 
-This configuration provides GitHub Copilot access to several additional tools so that it can interact with GitHub repositories, issues, pull requests, and more. This particular configuration uses the [remote GitHub MCP server][remote-github-mcp-server]. By using this approach, we don't need to worry about running the MCP server locally (and the associated management, like keeping it up to date), and we can authenticate to the remote server using OAuth 2.0 instead of a personal access token (PAT).
+This configuration provides GitHub Copilot access to several additional tools so that it can interact with GitHub repositories, issues, pull requests, and more. This particular configuration uses the [remote GitHub MCP server][remote-github-mcp-server]. By using this approach, you don't need to worry about running the MCP server locally (and the associated management, like keeping it up to date), and you can authenticate to the remote server using OAuth 2.0 instead of a personal access token (PAT).
 
 The MCP server configuration is defined in the **servers** section of the **mcp.json** file. Each MCP server is defined by a unique name (in this case, github) and its type (in this case, **http**). When using local MCP servers, the type may be **stdio** and have a **command** and **args** field to specify how to start the MCP server. You can find out more about the configuration format in the [VS Code documentation][vscode-mcp-config]. In some configurations (not for the remote GitHub MCP server with OAuth), you may also see an **inputs** section. This defines any inputs (like sensitive tokens) that the MCP server may require. You can read more about the configuration properties in the [VS Code documentation][vscode-mcp-config]
 
@@ -113,19 +113,19 @@ To utilize an MCP server it needs to be "started". This will allow GitHub Copilo
 1. Inside VS Code, open **.vscode/mcp.json**.
 2. To start the GitHub MCP server, select **Start** above the GitHub server.
 
-    ![The start button above the GitHub MCP server entry](images/ex2-start-mcp.png)
+    ![The start button above the GitHub MCP server entry](images/ex1-start-mcp-server.png)
 
 3. You should see a popup asking you to authenticate to GitHub.
 
-    ![A popup showing that the GitHub MCP server wants to authenticate to GitHub](images/ex2-mcp-auth-popup.png)
+    ![A popup showing that the GitHub MCP server wants to authenticate to GitHub](images/ex1-mcp-auth-popup.png)
 
 4. Select **Continue** on the user account that you're using for this lab.
 
-    ![A popup showing the user account selection for GitHub authentication](images/ex2-mcp-select-account.png)
+    ![A popup showing the user account selection for GitHub authentication](images/ex1-mcp-select-account.png)
 
 5. If the page appears, select **Authorize visual-studio-code** to allow the GitHub MCP server to login as your selected user account. Once complete, the page should say "You can now close the window.".
 
-    ![A popup showing the authorization for visual-studio-code app](images/ex2-mcp-auth-vscode.png)
+    ![A popup showing the authorization for visual-studio-code app](images/ex1-mcp-authorize-vscode.png)
 
 6. After navigating back to the GitHub Codespace, you should see that the GitHub MCP server has started. You can check this in two places:
     - The line in **.vscode/mcp.json** which previously said start should now present several options, and show a number of tools available. 
@@ -137,9 +137,8 @@ That's it! You can now use Copilot Chat in agent mode to create issues, manage p
 
 Now that you have set up the GitHub MCP server, you can use Copilot Agent mode to create a backlog of tasks for use in the rest of the lab.
 
-1. Return to the Copilot Chat pane. Ensure **Agent** is selected for the mode and **Claude Sonnet 4** is selected for the model.
-
-2. Type or paste the following prompt to create the issues we'll be working on in the lab:
+1. Return to the Copilot Chat pane. Ensure **Agent** is selected for the mode and **Claude Sonnet 4.5** is selected for the model.
+2. Type or paste the following prompt to create the issues you'll be working on in the lab:
 
     ```markdown
     In my GitHub repo, create GitHub issues for our Tailspin Toys backlog. Each issue should include:
@@ -157,7 +156,7 @@ Now that you have set up the GitHub MCP server, you can use Copilot Agent mode t
 3. Press <kbd>enter</kbd> or select the **Send** button to send the prompt to Copilot.
 4. GitHub Copilot should process the request and respond with a dialog box asking you to confirm the creation of the issues.
 
-    ![Example of Copilot Chat dialog box asking for confirmation to run the create issue command](images/create-issue-dialog.png)
+    ![Example of Copilot Chat dialog box asking for confirmation to run the create issue command](images/ex1-create-issue-dialog.png)
 
 > [!IMPORTANT]
 > Remember, AI can make mistakes, so make sure to review the issues before confirming.
@@ -166,11 +165,11 @@ Now that you have set up the GitHub MCP server, you can use Copilot Agent mode t
 6. Ensure the details in the **owner** and **repo**, **title** and **body** of the issue look correct. You can make any desired edits by double clicking the body and updating the content with the correct information.
 7. After reviewing the generated content, select **Continue** to create the issue.
 
-    ![Example of the expanded dialog box showing the GitHub Issue that will be created](images/create-issue-review.png)
+    ![Example of the expanded dialog box showing the GitHub Issue that will be created](images/ex1-create-issue-review.png)
 
 8. Repeat steps 4-6 for the remainder of the issues. Alternatively, if you are comfortable with Copilot automatically creating the issues you can select the down-arrow next to **Continue** and select **Allow in this session** to allow Copilot to create the issues for this session (the current chat).
 
-    ![Example of allowing Copilot to automatically create issues](images/create-issue-allow.png)
+    ![Example of allowing Copilot to automatically create issues](images/ex1-create-issue-allow.png)
 
 > [!IMPORTANT]
 > Ensure you are comfortable with Copilot automatically performing tasks on your behalf before you selecting **Allow in this session** or a similar option.
@@ -178,15 +177,15 @@ Now that you have set up the GitHub MCP server, you can use Copilot Agent mode t
 9. In a separate browser tab, navigate to your GitHub repository and select the issues tab.
 10. You should see a list of issues that have been created by Copilot. Each issue should include a clear title and a checkbox list of acceptance criteria.
 
-You should notice that the issues are fairly detailed. This is where we benefit from the power of Large Language Models (LLMs) and Model Context Protocol (MCP), as it has been able to create a clear initial issue description.
+You should notice that the issues are fairly detailed. This is where you benefit from the power of Large Language Models (LLMs) and Model Context Protocol (MCP), as it has been able to create a clear initial issue description.
 
-![Example of issues created in GitHub](images/github-issues-created.png)
+![Example of issues created in GitHub](images/ex1-github-issues-created.png)
 
 ## Summary and next steps
 
 Congratulations, you have created issues on GitHub using Copilot Chat and MCP!
 
-To recap, in this exercise we:
+To recap, in this exercise you:
 
 - used Model Context Protocol (MCP), which provides access to external tools and capabilities.
 - set up the GitHub MCP server in your repository.
@@ -215,11 +214,11 @@ Notice that the setup process is similar to the GitHub MCP server, but you do no
 
 ---
 
-| [← Previous lesson: GitHub Copilot coding agent][previous-lesson] | [Next lesson: Custom instructions →][next-lesson] |
+| [← Prerequisites][previous-lesson] | [Next lesson: Custom instructions →][next-lesson] |
 |:--|--:|
 
-[previous-lesson]: ./1-copilot-coding-agent.md
-[next-lesson]: ./3-custom-instructions.md
+[previous-lesson]: ./0-prereqs.md
+[next-lesson]: ./2-custom-instructions.md
 [prereqs-lesson]: ./0-prereqs.md
 [mcp-blog-post]: https://github.blog/ai-and-ml/llms/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it/
 [github-mcp-server]: https://github.com/github/github-mcp-server
@@ -228,4 +227,4 @@ Notice that the setup process is similar to the GitHub MCP server, but you do no
 [vscode-extensions]: https://code.visualstudio.com/docs/configure/extensions/extension-marketplace
 [copilot-chat-extension]: https://marketplace.visualstudio.com/items?itemName=GitHub.copilot
 [remote-github-mcp-server]: https://github.blog/changelog/2025-06-12-remote-github-mcp-server-is-now-available-in-public-preview/
-[vscode-mcp-config]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_configuration-format
\ No newline at end of file
+[vscode-mcp-config]: https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_configuration-format
diff --git a/docs/3-custom-instructions.md b/workshop-content/2-custom-instructions.md
similarity index 62%
rename from docs/3-custom-instructions.md
rename to workshop-content/2-custom-instructions.md
index 2b4150e..c3d5ad5 100644
--- a/docs/3-custom-instructions.md
+++ b/workshop-content/2-custom-instructions.md
@@ -1,9 +1,9 @@
-# Exercise 3 - Providing context to Copilot with instruction files
+# Exercise 2 - Providing context to Copilot with instruction files
 
 | [← Previous lesson: Model Context Protocol (MCP)][previous-lesson] | [Next lesson: Copilot agent mode →][next-lesson] |
 |:--|--:|
 
-Context is key across many aspects of life, and when working with generative AI. If you're performing a task which needs to be completed a particular way, or if a piece of background information is important, we want to ensure Copilot has access to that information. We can use [instruction files][instruction-files] to provide guidance so that Copilot not only understands what we want it to do but also how we want it to be done.
+Context is key across many aspects of life, and when working with generative AI. If you're performing a task which needs to be completed a particular way, or if a piece of background information is important, you want to ensure Copilot has access to that information. You can use [instruction files][instruction-files] to provide guidance so that Copilot not only understands what you want it to do but also how you want it to be done.
 
 In this exercise, you will learn how to:
 
@@ -11,8 +11,8 @@ In this exercise, you will learn how to:
 - provide path instruction files to guide Copilot for repetitive or templated tasks on specific types of files.
 - implement both repository-wide instructions and task-specific instructions.
 
-> [!NOTE]
-> There are other types of files which can be used to provide context or guidance to Copilot currently in preview. This workshop currently focused on generally available features.
+> [!IMPORTANT]
+> Note that the code generated may diverge from some of the standards you set. AI tools like Copilot are non-deterministic, and may not always provide the same result. The other files in the codebase do not contain docstrings or comment headers, which could lead Copilot in another direction. Consistency is key, so making sure that your code follows the established patterns is important. You can always follow-up in chat and ask Copilot to follow your coding standards, which will help guide it in the right direction.
 
 ## Scenario
 
@@ -27,7 +27,7 @@ Through the use of instruction files you'll ensure Copilot has the right informa
 
 ## Before you begin
 
-We're going to be making some code changes, so we should follow our usual practice of creating a new branch to work in. This will allow us to make changes without affecting the main branch until we're ready.
+You're going to be making some code changes, so you should follow the usual practice of creating a new branch to work in. This will allow you to make changes without affecting the main branch until you're ready.
 
 1. Return to your codespace from the previous exercise.
 2. Open a new terminal window inside your codespace by selecting <kbd>Ctl</kbd>+<kbd>\`</kbd>.
@@ -44,23 +44,43 @@ Custom instructions allow you to provide context and preferences to Copilot chat
 There are two types of instructions files:
 
 - **.github/copilot-instructions.md**, a single instruction file sent to Copilot for **every** chat prompt for the repository. This file should contain project-level information, context which is relevant for most chat requests sent to Copilot. This could include the tech stack being used, an overview of what's being built and best practices, and other global guidance for Copilot.
-- **\*.instructions.md** files can be created for specific tasks or file types. You can use **.instructions.md** files to provide guidelines for particular languages (like Python or TypeScript), or for tasks like creating a React component or a new instance of a repository pattern.
+- **\*.instructions.md** files can be created for specific tasks or file types. You can use **\*.instructions.md** files to provide guidelines for particular languages (like Python or TypeScript), or for tasks like creating a React component or a new set of unit tests.
 
 > [!NOTE]
 > When working in your IDE, instructions files are only used for code generation in Copilot Chat, and not used for code completions or next edit suggestions.
 >
-> Copilot coding agent will utilize both repository and path instructions files when generating code.
+> Copilot coding agent will utilize both repository level and \*.instructions with `applyTo` header matter when generating code.
+
+## Best practices for managing instructions files
+
+A full conversation about creating instructions files is beyond the scope of the workshop. However, the examples provided in the sample project provide a representative example of how to approach their management. At a high level:
+
+- Keep instructions in **copilot-instructions.md** focused on project-level guidance, such as a description of what's being built, the structure of the project, and global coding standards.
+- Use **\*.instructions.md** files to provide specific instructions for file types (unit tests, React components, API endpoints), or for specific tasks.
+- Use natural language in your instructions files. Keep guidance clear. Provide examples of how code should (and shouldn't) look.
+
+There isn't one specific way to create instructions files, just as there isn't one specific way to use AI. You will find through experimentation what works best for your project. The guidance provided here and the [resources](#resources) below should help you get started.
+
+> [!TIP]
+> Every project using GitHub Copilot should have a robust collection of instructions files to provide context and best guide code generation. As you explore the instructions files in the project, you may notice there are ones for numerous types of files and tasks, including [UI updates](../.github/instructions/ui.instructions.md) and [Astro](../.github/instructions/astro.instructions.md). The investment made in instructions files will greatly enhance the quality of code suggestion from Copilot, ensuring it better matches the style and requirements your organization has.
+> 
+> You can even have Copilot aid in generating instructions files by selecting the gear icon for **Configure Chat** in Copilot chat and selecting **Generate Agent Instructions**.
+> 
+> ![Screenshot of option in GitHub Copilot chat with configure chat highlighted and generate agent instructions highlighted](./images/ex2-generate-instructions.png)
 
 ## Use GitHub Copilot Chat before updating custom instructions
 
-To see the impact of custom instructions, we will start by sending a prompt with the current version of the files. We'll then make some updates, send the same prompt again, and note the difference.
+To see the impact of custom instructions, you'll start by sending a prompt with the current version of the files. You'll then make some updates, send the same prompt again, and note the difference.
 
 1. Return to your codespace.
-2. Close any open files in your codespace from the previous exercises. This will ensure Copilot has the context we want it to have.
+2. Close any open files in your codespace from the previous exercises. This will ensure Copilot has the context you want it to have.
 3. Open `server/routes/publishers.py`, an empty file.
 4. If **Copilot chat** is not already open, open it by selecting the Copilot icon towards the top of your codespace.
 5. Create a new chat session by typing `/clear` into the chat window and selecting <kbd>Enter</kbd> (or <kbd>return</kbd> on a Mac).
 6. Select **Ask** from the modes dropdown.
+
+   ![Chat mode selection dialog with Ask mode highlighted](./images/ex2-select-chat-mode.png)
+
 7. Send the following prompt to create a new endpoint to return all publishers:
 
    ```plaintext
@@ -68,25 +88,25 @@ To see the impact of custom instructions, we will start by sending a prompt with
    ```
 
 8. Copilot explores the project to learn how best to implement the code, and generates a list of suggestions, which may include code for `publishers.py`, `app.py`, and tests to ensure the new code runs correctly.
-9.  Explore the code, noticing the generated code includes [type hints][python-type-hints] because, as we'll see, our custom instructions includes the directive to include them.
+9.  Explore the code, noticing the generated code includes [type hints][python-type-hints] because, as you'll see, the custom instructions includes the directive to include them.
 10. Notice the generated code **is missing** either a docstring or a comment header - or both!
 
 > [!IMPORTANT]
-> As highlighted previously, GitHub Copilot and LLM tools are probabilistic, not deterministic. As a result, the exact code generated may vary, and there's even a chance it'll abide by our rules without us spelling it out! But to aid consistency in code we should always document anything we want to ensure Copilot should understand about how we want our code generated.
+> As highlighted previously, GitHub Copilot and LLM tools are probabilistic, not deterministic. As a result, the exact code generated may vary, and there's even a chance it'll abide by your rules without you spelling it out! But to aid consistency in code you should always document anything you want to ensure Copilot should understand about how you want your code generated.
 
-## Add repository standards to copilot-instructions.md
+## Add new repository standards to copilot-instructions.md
 
 As highlighted previously, `copilot-instructions.md` is designed to provide project-level information to Copilot. Let's ensure repository coding standards are documented to improve code suggestions from Copilot chat.
 
 1. Return to your codespace.
 2. Open `.github/copilot-instructions.md`.
-3. Explore the file, noting the brief description of the project and sections for **Code standards**, **Scripts** and **GitHub Actions Workflows**. These are applicable to any interactions we'd have with Copilot, are robust, and provide clear guidance on what we're doing and how we want to accomplish it.
-4. Locate the **Code formatting requirements** section, which should be around line 23. Note how it contains a note to use type hints. That's why we saw those in the code generated previously.
-5. Add the following lines of markdown right below the note about type hints to instruct Copilot to add comment headers to files and docstrings (which should be near line 18):
+3. Explore the file, noting the brief description of the project and sections for **Code standards**, **Scripts** and **GitHub Actions Workflows**. These are applicable to any interactions you'd have with Copilot, are robust, and provide clear guidance on what you're doing and how you want to accomplish it.
+4. Locate the **Code formatting requirements** section, which should be near line 27. Note how it contains a note to use type hints. That's why you saw those in the code generated previously.
+5. Add the following lines of markdown right below the note about type hints to instruct Copilot to add comment headers to files and docstrings (which should be near line 27):
 
    ```markdown
-   - Every function should have docstrings or the language equivalent
-   - Before imports or any code, add a comment block that explains the purpose of the file.
+   - Every function should have docstrings or the language equivalent.
+   - Before imports or any code, add a comment block to the file that explains its purpose.
    ```
 
 6. Close **copilot-instructions.md**.
@@ -118,19 +138,22 @@ As highlighted previously, `copilot-instructions.md` is designed to provide proj
    """
    ```
 
-12. Also note how the existing code isn't updated, but of course we could ask Copilot to perform that operation if we so desired!
-13. **Don't implement the suggested changes**, as we will be doing that in the next section.
+12. Notice the generated code now includes a docstring as well as a comment block at the top!
+13. Also note how the existing code isn't updated, but of course you could ask Copilot to perform that operation if you so desired!
+14. **Don't implement the suggested changes**, as you'll be doing that in the next section.
 
 > [!NOTE]
 > If you accepted the changes, you can always select the **Undo** button towards the top right of the Copilot chat window.
 
 From this section, you explored how the custom instructions file has provided Copilot with the context it needs to generate code that follows the established guidelines.
 
-## Instruction files for tasks
+## Instructions for specific tasks or files
 
-Coding is often repetitive, with developers performing similar tasks on a regular basis. Copilot is wonderful for allowing you to offload these types of tasks. But these types of tasks, like adding an endpoint, creating a component, or adding a new service pattern implementation often require a particular template or structure to be followed. Instruction files allow you to provide specific requirements for these types of tasks. They can be added manually when using Copilot Chat, or can have an **applyTo:** tag added to the top of the file to have Copilot automatically use them for specific files.
+Coding is often repetitive, with developers performing similar tasks on a regular basis. Copilot is wonderful for allowing you to offload the mundane, like adding endpoints, generating tests, or building a new component. But all code has a set of requirements, and often require a particular template or structure to be followed. **\*.instructions.md** files allow you to provide tailored guidance for these types of tasks and files. They can be added manually when using Copilot Chat, or can have an `applyTo:` tag added to the top of the file to have Copilot automatically use them for specific files.
 
-We want to create a new endpoint to list all publishers, and to follow the same pattern we used for the existing [games endpoints][games-endpoints], and to create tests which follow the same pattern as the existing [games endpoints tests][games-tests]. An instruction file has already been created; let's explore it and see the difference in code it generates.
+## Explore a task-specific custom instructions file
+
+You want to create a new endpoint to list all publishers, and to follow the same pattern used for the existing [games endpoints][games-endpoints], and to create tests which follow the same pattern as the existing [games endpoints tests][games-tests]. An instruction file has already been created; let's explore it and see the difference in code it generates.
 
 1. Open `.github/instructions/python-tests.instructions.md`.
 2. Note the `applyTo:` section at the top, which contains a filter for all files in the `server/tests` directory which start with `test_` and have a `.py` extension. Whenever Copilot Chat interacts with a file which matches this pattern it will automatically use the guidance provided in this file.
@@ -140,12 +163,14 @@ We want to create a new endpoint to list all publishers, and to follow the same
 
    - an overview of requirements, including that tests must be created, and endpoints are created in Flask using blueprints.
    - a link to another the previously mentioned `python-tests.instructions.md` file.
-   - links to two existing files which follow the patterns we want - both the games blueprint and tests. Notice how these are setup as normal markdown links, allowing an instruction file to incorporate additional files for context.
+   - links to two existing files which follow the patterns you want - both the games blueprint and tests. Notice how these are setup as normal markdown links, allowing an instruction file to incorporate additional files for context.
 
 6. Return to `server/routes/publishers.py` to ensure focus is set correctly.
 7. Return to Copilot Chat and select **New Chat** to start a new session.
 8. Select **Edit** from the mode dropdown, which will allow Copilot to update multiple files.
 
+   ![Copilot Chat mode selector with Edit chosen and highlighted](./images/ex2-select-edit-mode.png)
+
 > [!NOTE]
 > If you have any issues running the tests in this part of the exercise, please undo your changes and retry from the above step using **Agent** mode instead.
 
@@ -158,7 +183,7 @@ We want to create a new endpoint to list all publishers, and to follow the same
 
 12.  Select **flask-endpoint .github/instructions** to add the instruction file to the context.
 
-   ![Screenshot showing the instruction file being added into Copilot Chat](images/copilot-add-instructions-file.png)
+   ![Screenshot showing the instruction file being added into Copilot Chat](images/ex2-add-instructions-file.png)
 
 13. Send the same prompt as before to generate the desired endpoint:
 
@@ -171,7 +196,7 @@ We want to create a new endpoint to list all publishers, and to follow the same
 
 14. Note the **References** section and how it uses the **flask-endpoint.instructions.md** file to provide context. If you use instructions files with Copilot agent mode, you will notice that Copilot explores and reads the files referenced in the instructions file.
 
-   ![Screenshot of the references section, showing the included instructions file](./images/copilot-instructions-references.png)
+   ![Screenshot of the references section, showing the included instructions file](./images/ex2-copilot-instructions-references.png)
 
 15. Copilot generates the files. Notice how it generates updates across multiple files, like **publishers.py** and **test_publishers.py**
 
@@ -190,7 +215,7 @@ We want to create a new endpoint to list all publishers, and to follow the same
 20. Stage the changes by selecting the **+** icon in the **Source Control** panel.
 21. Generate a commit message using the **Sparkle** button.
 
-    ![Screenshot of the Source Control panel showing the changes made](images/source-control-changes.png)
+    ![Screenshot of the Source Control panel showing the changes made](images/ex2-source-control-changes.png)
 
 22. Commit the changes to your repository by selecting **Commit**.
 
@@ -207,20 +232,23 @@ Next we'll use [agent mode to add functionality to the site][next-lesson].
 ## Resources
 
 - [Instruction files for GitHub Copilot customization][instruction-files]
+- [5 tips for writing better custom instructions for Copilot][copilot-instructions-five-tips]
 - [Best practices for creating custom instructions][instructions-best-practices]
 - [Personal custom instructions for GitHub Copilot][personal-instructions]
+- [Awesome Copilot - a collection of instructions files and other resources][awesome-copilot]
 
 ---
 
 | [← Previous lesson: Model Context Protocol (MCP)][previous-lesson] | [Next lesson: Copilot agent mode →][next-lesson] |
 |:--|--:|
 
-[previous-lesson]: ./2-mcp.md
-[next-lesson]: ./4-copilot-agent-mode-vscode.md
+[previous-lesson]: ./1-mcp.md
+[next-lesson]: ./3-copilot-agent-mode-vscode.md
 [instruction-files]: https://code.visualstudio.com/docs/copilot/copilot-customization
 [python-type-hints]: https://docs.python.org/3/library/typing.html
 [games-endpoints]: ../server/routes/games.py
-[games-tests]: ../server/tests/test_routes/test_games.py
-[instructions-best-practices]: https://docs.github.com/en/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository
-[personal-instructions]: https://docs.github.com/en/copilot/customizing-copilot/adding-personal-custom-instructions-for-github-copilot
-
+[games-tests]: ../server/tests/test_games.py
+[instructions-best-practices]: https://docs.github.com/enterprise-cloud@latest/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks#adding-custom-instructions-to-your-repository
+[personal-instructions]: https://docs.github.com/copilot/customizing-copilot/adding-personal-custom-instructions-for-github-copilot
+[copilot-instructions-five-tips]: https://github.blog/ai-and-ml/github-copilot/5-tips-for-writing-better-custom-instructions-for-copilot/
+[awesome-copilot]: https://github.com/github/awesome-copilot
diff --git a/docs/4-copilot-agent-mode-vscode.md b/workshop-content/3-copilot-agent-mode-vscode.md
similarity index 63%
rename from docs/4-copilot-agent-mode-vscode.md
rename to workshop-content/3-copilot-agent-mode-vscode.md
index 313917f..42f18b3 100644
--- a/docs/4-copilot-agent-mode-vscode.md
+++ b/workshop-content/3-copilot-agent-mode-vscode.md
@@ -1,21 +1,21 @@
-# Exercise 4 - Adding new functionality with Copilot Agent Mode
+# Exercise 3 - Adding new functionality with Copilot Agent Mode
 
-| [← Previous lesson: Custom instructions][previous-lesson] | [Next lesson: Reviewing coding agent →][next-lesson] |
+| [← Previous lesson: Custom instructions][previous-lesson] | [Next lesson: GitHub Copilot coding agent →][next-lesson] |
 |:--|--:|
 
 Even the simplest of updates to an application typically require updates to multiple files and operations to be performed like running tests. As a developer your flow typically involves tracking down all the necessary files, making the changes, running the tests, debugging, figuring out which file was missed, making another update... The list goes on and on.
 
 This is where Copilot Agent Mode comes into play.
 
-Copilot Agent Mode is built to act more autonomously in your IDE. It behaves in a similar fashion to a developer, starting by exploring the existing project structure, performing the necessary updates, running tasks like tests, and automatically fixing any discovered mistakes. Let's explore how we can use Agent Mode to introduce new functionality to our site.
+Copilot Agent Mode is built to act more autonomously in your IDE. It behaves in a similar fashion to a developer, starting by exploring the existing project structure, performing the necessary updates, running tasks like tests, and automatically fixing any discovered mistakes. Let's explore how you can use Agent Mode to introduce new functionality to your site.
 
 > [!NOTE]
 > While the names are similar, agent mode and coding agent are built for two different types of experiences. Agent mode performs its tasks in your IDE, allowing for quick feedback cycles and interaction. Coding agent is designed as a peer programmer, working asynchronously like a member of the team, interacting with you via issues and pull requests.
 
 In this exercise, you will learn how:
 
-- GitHub Copilot Agent Mode can implement new features across both backend and frontend codebases.
 - Copilot Agent Mode can explore your project, identify relevant files, and make coordinated changes.
+- GitHub Copilot Agent Mode can implement new features across both backend and frontend codebases.
 - to review changes and tests generated by Copilot Agent Mode before merging into your codebase.
 
 ## Scenario
@@ -24,15 +24,15 @@ As the list of games grows, you want to allow users to filter by category. This
 
 ## Running the Tailspin Toys website
 
-Before we make any changes, let's explore the Tailspin Toys website to understand its current functionality. 
+Before you make any changes, let's explore the Tailspin Toys website to understand its current functionality. 
 
 The website is a crowdfunding platform for board games with a developer theme. It allows users to list games and display details about them. The website has two main components: the front-end (written in Svelte) and the backend (written in Python).
 
 ### Starting the website
 
-To make running the website easier, we have provided a script that will start both the front-end and back-end servers. You can run this script in your GitHub Codespace to start the website with the following instructions:
+To make running the website easier, a script has been provided that will start both the front-end and back-end servers. You can run this script in your GitHub Codespace to start the website with the following instructions:
 
-1. Return to your codespace. We'll continue working in your current branch.
+1. Return to your codespace. You'll continue working in your current branch.
 2. Open a new terminal window inside your codespace by selecting <kbd>Ctl</kbd> + <kbd>\`</kbd>.
 3. Run the following script to start the website:
 
@@ -48,7 +48,7 @@ To make running the website easier, we have provided a script that will start bo
    ```
 
 > [!NOTE]
-> If a dialog box opens prompting you to open a browser window for http://localhost:5100 close it by selecting the **x**.
+> If a dialog box opens prompting you to open a browser window for `http://localhost:5100` close it by selecting the **x**.
 
 4. Open the website by using <kbd>Ctrl</kbd>-**Click** (or <kbd>Cmd</kbd>-**Click** on a Mac) on the client address `http://localhost:4321` in the terminal.
 
@@ -70,26 +70,46 @@ The initial implementation of the website is functional, but we want to enhance
 2. Open **Copilot Chat**.
 3. Create a new chat session by selecting the **New Chat** button, which will remove any previous context.
 4. Ensure **Agent** is selected from the list of modes.
-5. Select **Claude Sonnet 4** from the list of available models.
+5. Select **Claude Sonnet 4.5** from the list of available models.
+
+> [!IMPORTANT]
+> The authors of this lab are not indicating a preference towards one model or another. When building this lab, we used Claude Sonnet 4.5, and as such are including that in the instructions. The hope is the code suggestions you receive will be relatively consistent to ensure a good experience. However, because LLMs are probabilistic, you may notice the suggestions received differ from what is indicated in the lab. This is perfectly normal and expected.
+
+6. Open the GitHub Copilot Chat, if it is not already open.
+7. Switch to **Agent** mode, if you are not already in agent mode.
+8. Select **Claude Sonnet 4.5** from the list of available models.
 
 > [!IMPORTANT]
-> The authors of this lab are not indicating a preference towards one model or another. When building this lab, we used Claude Sonnet 4, and as such are including that in the instructions. The hope is the code suggestions you receive will be relatively consistent to ensure a good experience. However, because LLMs are probabilistic, you may notice the suggestions received differ from what is indicated in the lab. This is perfectly normal and expected.
+> The authors of this lab are not indicating a preference towards one model or another. When building this lab, we used Claude Sonnet 4.5, and as such are including that in the instructions. The hope is the code suggestions you receive will be relatively consistent to ensure a good experience. However, because LLMs are probabilistic, you may notice the suggestions received differ from what is indicated in the lab. This is perfectly normal and expected.
+
+> [!NOTE]
+> Because of the probabilistic nature of LLMs, Copilot may utilize a different MCP command, but should still be able to complete the task.
 
-1. Ask Copilot about the backlog of issues by sending the following prompt to Copilot:
+8. Ask Copilot about the backlog of issues by sending the following prompt to Copilot:
 
    ```plaintext
    Please show me the backlog of items from my GitHub repository. Help me prioritize them based on those which will be most useful to the user.
    ```
+9. Select **Continue** to run the command to list all issues.
+10. Review the generated list of issues.
 
-2. Notice GitHub Copilot (likely) identifies `list_issues` or `search_issues` as the MCP command to run to access the right information.
+Notice how Copilot has even prioritized the items for you, based on the ones that it thinks will be most useful to the user.
 
-> [!NOTE]
-> Because of the probabilistic nature of LLMs, Copilot may utilize a different MCP command, but should still be able to complete the task.
+## Review instructions files
 
-7. Select **Continue** to run the command to list all issues.
-8. Review the generated list of issues.
+Before kicking off the agent to generate the code, it's a good time to review the instructions file you'll use to provide Copilot context for its work. You're going to take advantage of the [user interface (UI)](../.github/instructions/ui.instructions.md) file, which contains context on how to approach adding functionality to the website.
 
-Notice how Copilot has even prioritized the items for us, based on the ones that it thinks will be most useful to the user.
+1. In your codespace, navigate to **.github/instructions/ui.instructions.md**.
+2. Take note of the overall guidance on how to approach adding functionality. This includes:
+   - An overview of the architecture.
+   - Principles for component design, testability and accessibility.
+   - Links to specific instructions files for various file types, including:
+     - Astro
+     - Svelte
+     - Tailwind CSS
+
+> [!TIP]
+> Instructions files allow you to reference both other instructions files and files in your project. The paths are relative to the location of the instructions file. This allows for reuse, breaking down complex instructions into smaller more manageable chunks, and providing examples and templates.
 
 ## Implement the filtering functionality
 
@@ -99,62 +119,62 @@ To implement filtering, no less than three separate updates will need to be made
 - A new set of tests for the new endpoint
 - Updates to the UI to introduce the functionality
 
-In addition, the tests need to run (and pass) before we merge everything into our Codebase. Copilot Agent Mode can perform these tasks for us! Let's add the functionality.
+In addition, the tests need to run (and pass) before you merge everything into your codebase. Copilot Agent Mode can perform these tasks for you! Let's add the functionality.
 
 1. You can continue in the current conversation with Copilot, or start a new one by selecting **New Chat**.
-2. Select **Add Context**, **Instructions**, and **flask-endpoint .github/instructions**  as the instructions file.
+2. Select **Add Context**, **Instructions**, and **ui** as the instructions file.
 
-   ![Screenshot showing an example of selecting the instructions file](images/copilot-add-instructions-file.png)
-
-> [!NOTE]
-> Even though Copilot agent mode may have discovered this file on its own, if you're aware of an important piece of information, like a **.instructions.md** file, then absolutely add it to Copilot's context. This helps set Copilot (and you) up for success.
+   ![Screenshot showing an example of selecting the UI instructions file](images/ex3-select-instructions-file.png)
 
 3. Ensure **Agent** mode is still selected.
-4. Ensure **Claude Sonnet 4** is still selected for the model.
-5. Prompt Copilot to implement the functionality based on the issue we created earlier by using the following prompt:
+
+   ![Screenshot of Copilot Chat mode selection with Agent highlighted](./images/shared-agent-mode-dropdown.png)
+
+4. Ensure **Claude Sonnet 4.5** is still selected for the model.
+5. Prompt Copilot to implement the functionality based on the issue you created earlier by using the following prompt:
 
    ```plaintext
-   Please update the site to include filtering by publisher and category based on the requirements from the related GitHub issue in the backlog. The server is already running, so you do not need to start it up.
+   Please update the site to include filtering by publisher and category based on the requirements from the related GitHub issue in the backlog. Ensure all tests are passing before completion. The server is already running, so you do not need to start it up.
    ```
 
 6. Watch as Copilot begins by exploring the project, locating the files associated with the desired functionality. You should see it finding both the API and UI definitions, as well as the tests. It then begins modifying the files and running the tests.
 
-   ![Screenshot showing Copilot exploring the project files](images/copilot-agent-mode-explores.png)
+   ![Screenshot showing Copilot exploring the project files](images/ex3-agent-mode-explores.png)
 
 > [!NOTE]
 > You will notice that Copilot will perform several tasks, like exploring the project, modifying files, and running tests. It may take a few minutes depending on the complexity of the task and the codebase. During that process, you may notice **Keep** and **Undo**  buttons appear in the code editor. When Copilot is finished, you will have a **Keep** or **Undo** for all of the changes, so you do not need to select them while work is in progress.
 
-6. As prompted by Copilot, select **Continue** to run the tests.
+7. As prompted by Copilot, select **Continue** to run the tests.
 
-   ![Screenshot showing a dialog in the Copilot Chat pane asking the user to confirm they are happy to run tests](images/copilot-agent-mode-run-tests.png)
+   ![Screenshot showing a dialog in the Copilot Chat pane asking the user to confirm they are happy to run tests](images/ex3-agent-mode-run-tests.png)
 
-7. You may see some tests fail throughout the process, and that's okay! Copilot may work back and forth between code generation and tests until it completes the task and doesn't detect any errors.
+8. You may experience some pauses and even see some tests fail throughout the process. That's okay! Copilot works back and forth between code generation and tests until it completes the task and doesn't detect any errors.
 
-   ![Screenshot showing a complete Chat session with Copilot Agent Mode](images/copilot-agent-mode-proposed-changes.png)
+   ![Screenshot showing a complete Chat session with Copilot Agent Mode](images/ex3-agent-mode-proposed-changes.png)
 
-8. Explore the generated code for any potential issues.
+9. Explore the generated code for any potential issues.
 
 > [!IMPORTANT]
 > Remember, it's always important to review the code that Copilot or any AI tools  generate.
 
-9.  Return to the browser with the website running. Explore the new functionality!
-10. Once you've confirmed everything works and reviewed the code, select **Keep** in the Copilot Chat window.
+10. Return to the browser with the website running. Explore the new functionality!
+11. Once you've confirmed everything works and reviewed the code, select **Keep** in the Copilot Chat window.
 
-## Publish the branch
+## Publish the branch and create a pull request
 
-With our changes created locally we're ready to create a pull request (PR) to allow for our team to review our suggested changes and work through our DevOps process. The first step in that process is to publish the branch. Let's take care of that first.
+With your changes created locally you're ready to create a pull request (PR) to allow for your team to review your suggested changes and work through your DevOps process. The first step in that process is to publish the branch. Let's take care of that first.
 
 1. Navigate to the **Source Control** panel in the Codespace and review the changes made by Copilot.
 2. Stage the changes by selecting the **+** icon.
 3. Generate a commit message using the **Sparkle** button.
 
-   ![Screenshot of the Source Control panel showing the changes made](images/source-control-changes-agent-mode.png)
+   ![Screenshot of the Source Control panel showing the changes made](images/ex3-source-control-changes.png)
 
 4. Select **Publish** to push the branch to your repository.
 
 ## Create the pull request
 
-There are several ways to create a pull request, including through github.com and the GitHub command-line interface (CLI). But since we're already working with GitHub Copilot, let's let it create the PR for us! We can have it find the relevant issue and create the PR with an association to the located issue. 
+There are several ways to create a pull request, including through github.com and the GitHub command-line interface (CLI). But since you're already working with GitHub Copilot, let's let it create the PR for you! You can have it find the relevant issue and create the PR with an association to the located issue. 
 
 1. Navigate to the Copilot Chat panel and select **New Chat** to start a new session.
 2. Ask Copilot to create a PR for you:
@@ -181,7 +201,7 @@ Now let's [return to our coding agent][next-lesson] to see how well it did with
 
 As the list of games grows there will be a need for paging to be enabled. Using the skills you learned in this exercise, prompt Copilot to update the site to implement paging. Some considerations for the code include:
 
-- follow the existing best practices, including using the existing (or creating a new) prompt file.
+- follow the existing best practices, including using the existing instructions files.
 - consider how you want paging implemented, if you want to allow the user to select the page size or for it to be hard-coded.
 - as you create the prompt ensure you provide Copilot with the necessary guidance to create the implementation as you desire.
 - you may need to iterate with GitHub Copilot, asking for changes and providing context. This is the normal flow when working with Copilot!
@@ -194,11 +214,11 @@ As the list of games grows there will be a need for paging to be enabled. Using
 
 ---
 
-| [← Previous lesson: Custom instructions][previous-lesson] | [Next lesson: Reviewing coding agent →][next-lesson] |
+| [← Previous lesson: Custom instructions][previous-lesson] | [Next lesson: GitHub Copilot coding agent →][next-lesson] |
 |:--|--:|
 
-[previous-lesson]: ./3-custom-instructions.md
-[next-lesson]: ./5-reviewing-coding-agent.md
+[previous-lesson]: ./2-custom-instructions.md
+[next-lesson]: ./4-copilot-coding-agent.md
 [coding-agent-101]: https://github.blog/ai-and-ml/github-copilot/agent-mode-101-all-about-github-copilots-powerful-mode/
 [choose-mode]: https://github.blog/ai-and-ml/github-copilot/copilot-ask-edit-and-agent-modes-what-they-do-and-when-to-use-them/
 [vs-code-agent-mode]: https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode
diff --git a/docs/1-copilot-coding-agent.md b/workshop-content/4-copilot-coding-agent.md
similarity index 62%
rename from docs/1-copilot-coding-agent.md
rename to workshop-content/4-copilot-coding-agent.md
index 9611cd4..d8853f3 100644
--- a/docs/1-copilot-coding-agent.md
+++ b/workshop-content/4-copilot-coding-agent.md
@@ -1,9 +1,9 @@
-# Exercise 1 - GitHub Copilot coding agent
+# Exercise 4 - GitHub Copilot coding agent
 
-| [← Prerequisites][previous-lesson] | [Next lesson: MCP servers →][next-lesson] |
+| [← Previous lesson: Copilot agent mode][previous-lesson] | [Next lesson: Reviewing coding agent →][next-lesson] |
 |:--|--:|
 
-There are likely very few, if any, organizations who don't struggle with tech debt. This could be unresolved security issues, legacy code requiring updates, or feature requests which have languished on the backlog because we just didn't have the time to implement them. GitHub Copilot's coding agent is built to perform tasks such as updating code and adding functionality, all in an autonomous fashion. Once the agent completes its work, it generates a draft PR ready for a human developer to review. This allows offloading of tedious tasks and an acceleration of the development process, and frees developers to focus on larger picture items.
+There are likely very few, if any, organizations who don't struggle with tech debt. This could be unresolved security issues, legacy code requiring updates, or feature requests which have languished on the backlog because there just wasn't the time to implement them. GitHub Copilot's coding agent is built to perform tasks such as updating code and adding functionality, all in an autonomous fashion. Once the agent completes its work, it generates a draft PR ready for a human developer to review. This allows offloading of tedious tasks and an acceleration of the development process, and frees developers to focus on larger picture items.
 
 You'll explore the following with Copilot coding agent:
 
@@ -14,21 +14,21 @@ You'll explore the following with Copilot coding agent:
 
 ## Scenarios
 
-Tailspin Toys already has some tech debt they'd like to address. The contractors initially hired to create the first version of the site left the documentation in an unideal state - and by that we mean it's completely lacking. As a first step, they'd like to see docstrings or the equivalent added to all functions in the application.
+Tailspin Toys has some tech debt they'd like to address. The contractors initially hired to create the first version of the site left the documentation in an unideal state - and by that you'll notice it's completely lacking. As a first step, they'd like to see docstrings or the equivalent added to all functions in the application.
 
-Additionally, the design team is ready to get to work on building the UX for managing games. They don't need a full implementation yet, but they at least need some endpoints they can use for testing. Specifically, they need endpoints for the games API which will allow them to create, update and delete games. This is currently a blocker, but we have other issues which are of higher priority at the moment.
+Additionally, the design team is ready to get to work on building the UX for managing games. They don't need a full implementation yet, but they at least need some endpoints they can use for testing. Specifically, they need endpoints for the games API which will allow them to create, update and delete games. This is currently a blocker, but there are other issues which are of higher priority at the moment.
 
 These are both examples of tasks which can quickly find themselves deprioritized, and are great to assign to Copilot coding agent. Copilot coding agent can then work on them asynchronously, allowing the developer to focus on other tasks, then return to review Copilot's work and ensure everything is as expected.
 
 ## Introducing GitHub Copilot coding agent
 
-[GitHub Copilot coding agent][coding-agent-overview] can perform tasks in the background, much in the same way a human developer would. And, just like with working with a human developer, this is done by [assigning a GitHub issue to Copilot][assign-issue]. Once assigned, Copilot will create a draft pull request to track its progress, setup an environment, and begin working on the task. You can dig into Copilot's session while it's still in flight or after its completed. Once its ready for you to review the proposed solution, it'll tag you in the pull request!
+[GitHub Copilot coding agent][coding-agent-overview] can perform tasks in the background, much in the same way a human developer would. And, just like with working with a human developer, this can be done in multiple ways, including [assigning a GitHub issue to Copilot][assign-issue]. Once assigned, Copilot will create a draft pull request to track its progress, setup an environment, and begin working on the task. You can dig into Copilot's session while it's still in flight or after its completed. Once its ready for you to review the proposed solution, it'll tag you in the pull request!
 
 ## The importance of well-scoped instructions
 
-While it can often feel like it, there is no magic in GitHub Copilot. There are no magic solutions available, where you can with just a couple of sentences snap your fingers and let AI perform the entire task for you. In fact, even seemingly straight-forward operations can often have fair amount of complexity when we peel back the layers.
+While it can often feel like it, there is no magic in GitHub Copilot. There are no magic solutions available, where you can with just a couple of sentences snap your fingers and let AI perform the entire task for you. In fact, even seemingly straight-forward operations can often have fair amount of complexity when you peel back the layers.
 
-As a result, we want to [be mindful about how we approach assigning tasks to Copilot coding agent][coding-agent-best-practices]. Working with Copilot as an AI pair programmer is typically the best approach. Approach tasks, big and small, following the same strategy you would without Copilot - work in stages, learn, experiment, and adapt accordingly.
+As a result, you want to [be mindful about how you approach assigning tasks to Copilot coding agent][coding-agent-best-practices]. Working with Copilot as an AI pair programmer is typically the best approach. Approach tasks, big and small, following the same strategy you would without Copilot - work in stages, learn, experiment, and adapt accordingly.
 
 As always, the fundamentals of software development do not change with the addition of generative AI.
 
@@ -36,7 +36,7 @@ As always, the fundamentals of software development do not change with the addit
 
 Creating code, regardless of who's involved, typically requires a specific environment and some setup scripts to be run to ensure everything is in a good state. This holds true when assigning tasks to Copilot, which is performing tasks in a similar fashion to a SWE.
 
-Coding agent uses [GitHub Actions][github-actions] for its environment when doing its work. You can customize this environment by creating a [special setup workflow][setup-workflow], configured in the **.github/workflows/copilot-setup-steps.yml** file, to run before it gets to work. This enables it to have access to the required development tools and dependencies. We pre-configured this ahead of the lab to help the lab flow and allow this learning opportunity. It makes sure that Copilot had access to Python, Node.JS, and the required dependencies for the client and server:
+Coding agent uses [GitHub Actions][github-actions] for its environment when doing its work. You can customize this environment by creating a [special setup workflow][setup-workflow], configured in the **.github/workflows/copilot-setup-steps.yml** file, to run before it gets to work. This enables it to have access to the required development tools and dependencies. This has been pre-configured ahead of the lab to help the lab flow and allow this learning opportunity. It makes sure that Copilot had access to Python, Node.JS, and the required dependencies for the client and server:
 
 ```yaml
 name: "Copilot Setup Steps"
@@ -85,11 +85,11 @@ jobs:
 It looks like any other GitHub workflow file, but it has a few key points:
 
 - It contains a single job called **copilot-setup-steps**. This job is executed in GitHub Actions before Copilot starts working on the pull request.
-- We've also added a **workflow_dispatch** trigger, which allows you to run the workflow manually from the Actions tab of your repository. This is useful for testing that the workflow runs successfully instead of waiting for Copilot to run it.
+- Notice the **workflow_dispatch** trigger, which allows you to run the workflow manually from the Actions tab of your repository. This is useful for testing that the workflow runs successfully instead of waiting for Copilot to run it.
 
-## Improving code documentation
+## Adding documentation
 
-While every developer and organization understands the importance of documentation, most projects have either outdated information or lack it altogether. This is the type of tech debt which often goes unaddressed, slowing productivity and making it more difficult to maintain the codebase or bring new developers into the team. Fortunately, Copilot shines at creating documentation, and this is a perfect issue to assign to Copilot coding agent. It'll work in the background to generate the necessary documentation. In a future exercise we'll return to review its work.
+While everyone understands the importance of documentation, most projects have either outdated information or lack it altogether. This is the type of tech debt which often goes unaddressed, slowing productivity and making it more difficult to maintain the codebase or bring new developers into the team. Fortunately, Copilot shines at creating documentation, and this is a perfect issue to assign to Copilot coding agent. It'll work in the background to generate the necessary documentation. In a future exercise you'll return to review its work.
 
 1. Navigate to your repository on github.com in a new browser tab.
 2. Select the **Issues** tab.
@@ -103,32 +103,31 @@ While every developer and organization understands the importance of documentati
     ```
 
 7. Select **Create** to create the issue.
-8. On the right side, select **Assignees** to open the searchbox for contributors to the repository.
-9. Select **Copilot** to assign the issue to Copilot.
+8. On the right side, select **Assign to Copilot** to open the assignment dialog.
 
-  ![Assigning Copilot to an issue](images/ex4-issue-assign.png)
+  ![Assigning Copilot to an issue](images/shared-assign-copilot.png)
 
-10. Click somewhere else on the page to close the assignment window. Shortly after, you should see a set of 👀 on the issue description, indicating Copilot is on the job!
+9. Select **Assign**.
 
-  ![Copilot uses the eyes emoji to indicate it's working on the issue](images/ex4-issue-eyes.png)
+  ![Copilot assignment details](images/ex4-assign-copilot-details.png)
 
-11. Select the **Pull Requests** tab.
-12. Open the newly generated pull request (PR), which will be titled something similar to **[WIP]: Code lacks documentation**.
-13. After a few minutes, you should see that Copilot has created a todo list.
+10. Select the **Pull Requests** tab.
+11. Open the newly generated pull request (PR), which will be titled something similar to **[WIP]: Code lacks documentation**. If a new PR doesn't appear on the list, wait for a moment or two and refresh the browser window.
+12. After a few minutes, you should see that Copilot has created a todo list.
 
 > [!NOTE]
 > It make take several minutes for the todo list from Copilot to appear in the PR. Copilot is creating its environment (running the workflow highlighted previously), analyzing the project, and determining the best approach to tackling the problem.
 
-14.  Review the list and the tasks it's going to complete.
-15.   Scroll down the pull request timeline, and you should see an update that Copilot has started working on the issue.
-16.   Select the **View session** button.
+13. Review the list and the tasks it's going to complete.
+14. Scroll down the pull request timeline, and you should see an update that Copilot has started working on the issue.
+15. Select the **View session** button.
 
   ![Copilot session view](images/ex4-view-session.png)
 
 > [!IMPORTANT]
 > You may need to refresh the window to see the updated indicator.
 
-17. Notice that you can scroll through the live session, and how Copilot is solving the problem. That includes exploring the code and understanding the state, how Copilot pauses to think and decide on the appropriate plan and also creating code.
+16. Notice that you can scroll through the live session, and how Copilot is solving the problem. That includes exploring the code and understanding the state, how Copilot pauses to think and decide on the appropriate plan and also creating code.
 
 This will likely take several minutes. One of the primary goals of Copilot coding agent is to allow it to perform tasks asynchronously, freeing us to focus on other tasks. We're going to take advantage of that very feature by both assigning another task to Copilot coding agent, then turning our attention to writing some code to add features to our application.
 
@@ -152,34 +151,37 @@ As has been highlighted, one of the great advantages of GitHub Copilot coding ag
    - Before creating the PR, ensure all tests pass
    ```
 
-7. Note the level of guidance being provided to Copilot to help set everyone up for success. While Copilot could infer many of the points we added to the request, it helps to add them in explicitly. This limits the assumptions which need to be made, driving better code generation.
-8. Scroll towards the bottom of the dialog box to locate the **Assignee** button.
-9. Select **Assignee** to open the dialog box to select assignees.
-10. Select **Copilot** from the list.
+7. Select **Create** to create the issue.
+8. On the right side, select **Assign to Copilot** to open the assignment dialog.
 
-    ![Create issue and assign Copilot coding agent](images/create-issue-assign-copilot.png)
+  ![Assigning Copilot to an issue](images/shared-assign-copilot.png)
 
-11. Select **Create** to save the issue.
-12. The newly created issue should now open.
+9. Select **Assign**.
 
 Shortly after, you should see a set of 👀 on the first comment in the issue, indicating Copilot is on the job!
 
-![Copilot uses the eyes emoji to indicate it's working on the issue](images/ex4-issue-eyes.png)
+![Copilot uses the eyes emoji to indicate it's working on the issue](images/ex4-issue-eyes-emoji.png)
+
+9. Select **Assign** to assign the issue to Copilot coding agent.
+
+Copilot is now diligently working on your second request! Copilot coding agent works in a similar fashion to a SWE, so you don't need to actively monitor it, but instead review once it's completed. Let's turn your attention to writing code and adding other features.
+
+## Summary and next steps
 
-Copilot is now diligently working on your second request! Copilot coding agent works in a similar fashion to a SWE, so we don't need to actively monitor it, but instead review once it's completed. Let's turn our attention to writing code and adding other features.
+With coding agent working diligently in the background, you can now turn your attention to your next lesson, [creating and using custom agents][next-lesson]. [Copilot coding agent can also use MCP servers][coding-agent-mcp], and has custom instructions available to it, which you explored in earlier modules.
 
 ## Summary and next steps
 
 This lesson explored [GitHub Copilot coding agent][copilot-agents], your AI peer programmer. With coding agent you can assign issues to Copilot to perform asynchronously. You can use Copilot to address tech debt, create new features, or aid in migrating code from one framework to another.
 
-You explored the these concepts:
+You explored these concepts:
 
 - customizing the environment for generating code.
 - ensuring operations are performed securely.
 - the importance of clearly scoped issues.
 - assigning issues to Copilot.
 
-With coding agent working diligently in the background, we can now turn our attention to our next lesson, [using MCP servers to interact with external services][next-lesson]. [Copilot coding agent can also use MCP servers][coding-agent-mcp], but we're going to switch back to our Codespace and try use MCP with Copilot agent mode.
+With coding agent working diligently in the background, we can now turn our attention to our next lesson, [creating and using custom agents][next-lesson]. [Copilot coding agent can also use MCP servers][coding-agent-mcp], and has custom instructions available to it, which we explored in earlier modules.
 
 ## Resources
 
@@ -189,7 +191,7 @@ With coding agent working diligently in the background, we can now turn our atte
 
 ---
 
-| [← Prerequisites][previous-lesson] | [Next lesson: MCP servers →][next-lesson] |
+| [← Previous lesson: Copilot agent mode][previous-lesson] | [Next lesson: Custom agents →][next-lesson] |
 |:--|--:|
 
 [coding-agent-overview]: https://docs.github.com/copilot/using-github-copilot/coding-agent/about-assigning-tasks-to-copilot#overview-of-copilot-coding-agent
@@ -199,5 +201,5 @@ With coding agent working diligently in the background, we can now turn our atte
 [copilot-agents]: https://docs.github.com/copilot/using-github-copilot/coding-agent/about-assigning-tasks-to-copilot
 [coding-agent-best-practices]: https://docs.github.com/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks
 [github-actions]: https://docs.github.com/actions
-[next-lesson]: ./2-mcp.md
-[previous-lesson]: ./0-prereqs.md
+[next-lesson]: ./5-custom-agents.md
+[previous-lesson]: ./3-copilot-agent-mode-vscode.md
diff --git a/workshop-content/5-custom-agents.md b/workshop-content/5-custom-agents.md
new file mode 100644
index 0000000..edbc454
--- /dev/null
+++ b/workshop-content/5-custom-agents.md
@@ -0,0 +1,94 @@
+# Exercise 5 - Custom agents
+
+| [← Previous lesson: GitHub Copilot coding agent][previous-lesson] | [Next lesson: Managing agents →][next-lesson] |
+|:--|--:|
+
+[Custom agents][custom-agents] in GitHub Copilot allow you to create specialized AI assistants tailored to specific tasks or domains within your development workflow. By defining agents through markdown files in the `.github/agents` folder of your repository, you can provide Copilot with focused instructions, best practices, coding patterns, and domain-specific knowledge that guide it to perform particular types of work more effectively. This allows teams to codify their expertise and standards into reusable agents. You might create an accessibility agent that ensures [WCAG][wcag] compliance, a security agent that follows secure coding practices, or a testing agent that maintains consistent test patterns—enabling developers to leverage these specialized capabilities on-demand for faster, more consistent implementations.
+
+You'll explore the following with custom agents:
+
+- how to create a custom agent.
+- assigning a task to a custom agent.
+
+## Scenario
+
+Tailspin Toys is committed to ensuring their crowdfunding platform is accessible to all users, regardless of their visual abilities or preferences. Recent user feedback has highlighted that some users find the current dark theme difficult to read due to insufficient contrast between text and background colors. To address this accessibility concern, the design team has requested the implementation of a high-contrast mode that users can toggle on and off.
+
+Because accessibility is critical, you want to ensure this is implemented as quickly as possible. You're going to utilize a custom agent to generate the functionality.
+
+## Custom agents
+
+Custom agents are defined by markdown files in the **.github/agents** folder of your project. The markdown files will contain guidance for Copilot on how best to perform at task.
+
+## Reviewing the accessibility custom agent
+
+A custom agent has already been created for you for accessibility. Let's review the contents to understand how it will guide Copilot.
+
+1. Return to your codespace.
+2. Open **.github/agents/accessibility.md**.
+3. Note the header section with the name and description of the agent.
+
+> [!IMPORTANT]
+> This section is required for custom agents.
+
+4. From there, scan and review the next sections which highlight:
+    - Core responsibilities when generating code for an accessible website.
+    - Best practices for accessibility.
+    - Code examples for HTML, CSS and JavaScript.
+    - A list of common pitfalls and mistakes.
+
+> [!NOTE]
+> There is no "best markdown" for a custom agent. As with anything in AI, you will want to test and explore to determine what works best for your environments and scenarios.
+
+## Create and assign an issue
+
+Mission control is the central location for working with all agents for your environment. You can assign tasks to Copilot coding agent, monitor tasks, and even redirect and provide additional guidance. Let's start by assigning a task to create the high contrast mode to Copilot.
+
+1. Navigate to your repository.
+2. Select the issues tab.
+3. Select **New issue** to open the new issue dialog.
+4. Select **Blank issue** to create the new issue.
+5. Set the **Title** to `Add high contrast mode to website`.
+6. Set the **Description** to:
+   
+    ```plaintext
+    We need a high contrast mode for the site. There should be a toggle for high contrast which the user can set. It should store the setting in local storage on the browser.
+    ```
+
+7. Select **Create** to create the issue.
+8. On the right side, select **Assign to Copilot** to open the assignment dialog.
+9.  Select **Accessibility agent** from the list of custom agents.
+
+  ![Screenshot of coding agent assignment, with custom agent and accessibility highlighted](./images/ex5-select-custom-agent.png)
+
+10. Select **Assign**.
+11. Copilot gets to work on the task in the background!
+
+## Summary and next steps
+
+This lesson explored [custom agents][custom-agents] in GitHub Copilot, specialized AI assistants tailored to specific tasks and domains. With custom agents you can codify your team's expertise and standards into reusable agents that guide Copilot to perform particular types of work more effectively.
+
+You explored these concepts:
+
+- how to create a custom agent.
+- assigning a task to a custom agent.
+
+With Copilot working on implementing the high contrast mode, we can now turn our attention to our next lesson, [using Copilot HQ to monitor and guide agent sessions][next-lesson]. Custom agents help ensure that Copilot follows your organization's best practices and domain-specific requirements, enabling faster and more consistent implementations across your team.
+
+## Resources
+
+- [Custom agents][custom-agents]
+- [Preparing to use custom agents in your organization][org-custom-agents]
+- [Preparing to use custom agents in your enterprise][enterprise-custom-agents]
+
+---
+
+| [← Previous lesson: GitHub Copilot coding agent][previous-lesson] | [Next lesson: Managing agents →][next-lesson] |
+|:--|--:|
+
+[custom-agents]: https://docs.github.com/copilot/concepts/agents/coding-agent/about-custom-agents
+[wcag]: https://www.w3.org/WAI/standards-guidelines/wcag/
+[org-custom-agents]: https://docs.github.com/copilot/how-tos/administer-copilot/manage-for-organization/prepare-for-custom-agents
+[enterprise-custom-agents]: https://docs.github.com/copilot/how-tos/administer-copilot/manage-for-enterprise/manage-agents/prepare-for-custom-agents
+[next-lesson]: ./6-managing-agents.md
+[previous-lesson]: ./4-copilot-coding-agent.md
diff --git a/workshop-content/6-managing-agents.md b/workshop-content/6-managing-agents.md
new file mode 100644
index 0000000..126351a
--- /dev/null
+++ b/workshop-content/6-managing-agents.md
@@ -0,0 +1,92 @@
+# Exercise 6 - Monitoring and managing agents
+
+| [← Previous lesson: Custom agents][previous-lesson] | [Next lesson: Iterating on Copilot's work →][next-lesson] |
+|:--|--:|
+
+In the last couple of exercises you asked Copilot coding agent to take on three separate tasks focused on improving the user experience and adding functionality. While coding agent is built to operate asynchronously and autonomously, the ability to monitor these tasks is still important.
+
+There are numerous tools available to you to manage tasks assigned to coding agent, including [the agents page][agents-page] on GitHub.com. From this mission control you can see all agent tasks with open pull requests (PRs). You can explore the operations performed, and even steer an in-progress session to help guide it.
+
+In this lesson you will:
+
+- explore the agents page to monitor coding agent tasks.
+- steer an in-flight session to request additional functionality.
+
+## Scenario
+
+After assigning the agent to create a high-contrast mode, the team realized it would be a good time to add a light mode as well. Since work was already being done to update the style of the site and add toggle functionality, it seemed logical to include this functionality. You want to steer the agent's work to ensure it adds a light mode as well as high contrast.
+
+## Review Copilot coding agent tasks
+
+Let's see the current status of all tasks assigned to Copilot coding agent.
+
+1. Navigate to agents page at [https://github.com/copilot/agents](https://github.com/copilot/agents).
+2. Note the list of tasks, both on the main pane and on the left pane. You should see the list of the tasks you've assigned to Copilot, including:
+    - Updating documentation for your codebase.
+    - Generating APIs for modifying products.
+    - Adding a high contrast mode for the website.
+3. Select one of the running tasks. Review the tasks which have been performed by Copilot. These can include:
+    - Checking out the code from the repository.
+    - Creating the environment for Copilot to work.
+    - Setting up MCP servers.
+    - Performing various steps to complete the assigned task.
+
+> [!NOTE]
+> The exact steps listed will vary depending on the state of Copilot's work and the approach it took.
+
+4. Also note the pull request (PR) pane which appears on the right side. This allows you to see the PR and files changed for additional monitoring.
+
+## Steering coding agent
+
+Now that you've seen the tasks which are active, let's request Copilot include the light mode toggle while it works on the high-contrast mode.
+
+1. Select the session which refers to adding a high contrast mode. The exact title will vary depending on the name Copilot uses and the current state of work.
+
+    ![Accessibility session in mission control](images/ex6-accessibility-session.png)
+
+2. Watch the session for a few of minutes, until it indicates it's completed the setup and begun its work. You'll know this has happened when you start seeing messages similar to the ones below.
+3. In the **Steer active session while Copilot is working** dialog, add the following prompt:
+
+    ```
+    While we are working on a high contrast mode, let's also add a light mode. There should be a switch for this mode as well where users can select their desired display mode.
+    ```
+
+    ![Screenshot of the coding agent task in the agents page with the steer active session while copilot is working dialogue highlighted](./images/ex6-steer-coding-agent-task.png)
+
+4. Press <kbd>Enter</kbd> to send the prompt.
+5. Notice how Copilot acknowledges the prompt and includes it in its flow.
+
+## Let Copilot do its work
+
+Just like before, Copilot will get to work on the updated task! It will incorporate the new request into its flow after it completes the particular step it's working on when you sent the message.
+
+As before, this will take several minutes, so it's a good time to pause and reflect on everything you've learned and explored thus far.
+
+## Summary and next steps
+
+This lesson explored the Copilot agents page, your central hub for monitoring and guiding GitHub Copilot coding agent tasks. With this mission control you can track all active and completed tasks, review the work being performed, and even redirect in-flight tasks to adjust scope or provide additional guidance.
+
+You explored these concepts:
+
+- explored Copilot HQ and the agents page to monitor coding agent tasks.
+- redirected an in-flight session to request additional functionality.
+
+With Copilot completing its work on the accessibility features, we can now turn our attention to our next lesson, [iterating on the pull requests Copilot created][next-lesson]. Mission control provides visibility into agent work and enables dynamic collaboration with coding agents as they work on tasks.
+
+## Resources
+
+- [Copilot HQ agents page][agents-page]
+- [Custom agents][custom-agents]
+
+---
+
+| [← Previous lesson: Custom agents][previous-lesson] | [Next lesson: Iterating on coding agent's work →][next-lesson] |
+|:--|--:|
+
+[agents-page]: https://github.blog/changelog/2025-10-28-a-agents-page-to-assign-steer-and-track-copilot-coding-agent-tasks
+[custom-agents]: https://docs.github.com/copilot/concepts/agents/coding-agent/about-custom-agents
+[next-lesson]: 
+---
+
+[next-lesson]: ./7-iterating-copilot-work.md
+[previous-lesson]: ./5-custom-agents.md
diff --git a/docs/5-reviewing-coding-agent.md b/workshop-content/7-iterating-copilot-work.md
similarity index 68%
rename from docs/5-reviewing-coding-agent.md
rename to workshop-content/7-iterating-copilot-work.md
index eb88920..96acd7d 100644
--- a/docs/5-reviewing-coding-agent.md
+++ b/workshop-content/7-iterating-copilot-work.md
@@ -1,13 +1,13 @@
-# Exercise 5: Review GitHub Copilot coding agent's work
+# Exercise 7: Iterating on GitHub Copilot's work
 
-| [← Adding new functionality with Copilot Agent Mode][previous-lesson] |
-|:----:|
+| [← Previous lesson: Mission control][previous-lesson] |
+|:--|
 
-When we first started this lab we assigned a couple of issues to GitHub Copilot coding agent. We asked it to add documentation to our code, and generate few endpoints for another team to iterate on. Let's explore the code changes it suggested and, if necessary, provide feedback to Copilot to improve its work.
+Throughout this lab you've assigned several issues to GitHub Copilot coding agent. You asked it to add documentation to your code, generate endpoints for the design team to iterate on, and implement accessibility features including high-contrast and light mode toggles. Let's explore the code changes it suggested and, if necessary, provide feedback to Copilot to improve its work.
 
 ## Scenario
 
-As has been highlighted numerous times, the fundamentals of software design and DevOps do not change with the addition of generative AI. We always want to review the code generated, and work through our normal DevOps process. With that in mind, let's review the suggestions from GitHub Copilot for creating the documentation and new endpoints before we turn on review for the rest of our team.
+As has been highlighted numerous times, the fundamentals of software design and DevOps do not change with the addition of generative AI. We always want to review the code generated, and work through our normal DevOps process. With that in mind, let's review the suggestions from GitHub Copilot for creating the documentation, new endpoints, and accessibility features before we turn on review for the rest of our team.
 
 ## Security and GitHub Copilot coding agent
 
@@ -20,7 +20,7 @@ Because Copilot coding agent performs its tasks asynchronously and without super
 
 ## Reviewing the generated documentation
 
-Let's start by exploring the first pull request (PR) generated by GitHub Copilot coding agent - adding documentation to our code. We'll perform this task by utilizing the standard PR interface in GitHub.com.
+Let's start by exploring the first pull request (PR) generated by GitHub Copilot coding agent - adding documentation to your code. You'll perform this task by utilizing the standard PR interface in GitHub.com.
 
 > [!NOTE]
 > When you explore the PR you may notice a warning about GitHub Copilot being blocked by a firewall. This **is expected**, as Copilot has limited access to external resources by default, including calls to external MCP servers. If you wish, you can [customize or disable the firewall for Copilot coding agent][agent-firewall].
@@ -34,14 +34,14 @@ Let's start by exploring the first pull request (PR) generated by GitHub Copilot
 
 4. Once the pull request is ready, select the **Files changed** tab and review the changes.
 
-    ![Files changed tab](images/pr-files-changed.png)
+    ![Files changed tab](images/shared-pr-files-changed.png)
 
 5. Explore the newly updated code, which includes the newly created docstrings and other documentation. The exact changes will vary.
 6. Once you've reviewed the updates and everything looks good, navigate back to the **Conversation** tab and scroll down.
 7. You should see an indicator that some workflows are waiting for approval.
 8. Click on the **Approve and run workflows** button to allow the workflows to run.
 
-    ![Approve and run workflows](images/ex4-approve-and-run.png)
+    ![Approve and run workflows](images/shared-approve-workflows.png)
 
 9. You should see the workflows get queued in the checks section of the pull request. All being well, you should see that the workflows pass for both the backend and frontend. This may take a few minutes to complete.
 
@@ -57,14 +57,14 @@ Working with Copilot on a pull request is not just a one-way street. You can als
 2. Select **View Session** to watch Copilot perform its work. Notice how Copilot starts a new session to make the updates.
 3. You can select **Back to pull request** to return to the pull request.
 
-    ![Back to pull request](images/ex4-back-to-pr.png)
+    ![Back to pull request](images/ex7-back-to-pr.png)
 
 4. Once Copilot has completed the changes, you should see a new commit in the pull request.
 5. Select the **Files changed** tab to review the changes.
 
 Feel free to continue iterating until you are happy. Once happy, you can convert the PR to ready from a draft, and merge it into the main branch.
 
-![Convert PR to ready](images/ex4-ready-for-review.png)
+![Convert PR to ready](images/ex7-ready-for-review.png)
 
 ## Review the new endpoints
 
@@ -78,7 +78,7 @@ Let's return to the PR Copilot generated for resolving our issue about adding en
 6. You should see an indicator that some workflows are waiting for approval.
 7. Click on the **Approve and run workflows** button to allow the workflows to run.
 
-    ![Approve and run workflows](images/ex4-approve-and-run.png)
+    ![Approve and run workflows](images/shared-approve-workflows.png)
 
 8. You should see the workflows get queued in the checks section of the pull request. All being well, you should see that the workflows pass for both the backend and frontend. This may take a few minutes to complete.
 9. **Optional:** You could even switch to this branch in your Codespace to perform a manual test of the new endpoints. Navigate to your Codespace, open the terminal, and run the following commands (replace **<branch-name>** with the name of the branch Copilot created, e.g. **copilot/fix-8**.):
@@ -88,13 +88,50 @@ Let's return to the PR Copilot generated for resolving our issue about adding en
     git checkout <branch-name>
     ```
    
-Copilot has created the new endpoints! Just as before, you can work iteratively with Copilot coding agent to request updates. For example, you might want to request Copilot centralizes the error handling to reduce duplication, or ensuring comments and docstrings are added (remember - this was assigned **before** we made the updates to our custom instructions!) Just like before, you can make these requests by adding a new comment on the **Conversation** tab, which Copilot will see and kickoff a new session.
+Copilot has created the new endpoints! Just as before, you can work iteratively with Copilot coding agent to request updates. For example, you might want to request Copilot centralizes the error handling to reduce duplication, or ensuring comments and docstrings are added (remember - this was assigned **before** you made the updates to your custom instructions!) Just like before, you can make these requests by adding a new comment on the **Conversation** tab, which Copilot will see and kickoff a new session.
+
+## Review the accessibility features
+
+Finally, let's review the accessibility features that were implemented using the custom accessibility agent. This PR should include both the high-contrast mode you assigned in Exercise 5, and the light mode that was requested in mission control in Exercise 6.
+
+1. Return to your repository in GitHub.com.
+2. Select the **Pull Requests** tab.
+3. Select the PR which has a title similar to **Add high contrast mode to website** or something more robust.
+
+> [!NOTE]
+> If Copilot is still working on the task, the issue will contain the **[WIP]** flag. If so, wait for Copilot to complete the work. This may take a few minutes.
+
+4. Select the **Files changed** tab to review the code it generated.
+5. Review the implementation, paying particular attention to:
+   - The toggle UI components for switching between modes
+   - The use of local storage to persist user preferences
+   - The CSS or styling changes for high-contrast and light modes
+   - The accessibility attributes (ARIA labels, keyboard navigation, etc.)
+   - Any JavaScript/TypeScript code that manages the mode switching
+
+6. Once you've reviewed the updates and everything looks good, navigate back to the **Conversation** tab and scroll down.
+7. You should see an indicator that some workflows are waiting for approval.
+8. Click on the **Approve and run workflows** button to allow the workflows to run.
+
+    ![Approve and run workflows](images/shared-approve-workflows.png)
+
+9. You should see the workflows get queued in the checks section of the pull request. All being well, you should see that the workflows pass for both the backend and frontend. This may take a few minutes to complete.
+10. **Optional:** You could switch to this branch in your Codespace to manually test the accessibility features. Navigate to your Codespace, open the terminal, and run the following commands (replace **<branch-name>** with the name of the branch Copilot created):
+
+    ```bash
+    git fetch origin
+    git checkout <branch-name>
+    ```
+
+    Then start the application and test the high-contrast and light mode toggles in your browser to ensure they work as expected and persist across page reloads.
+
+Notice how the custom accessibility agent helped guide Copilot to implement these features following accessibility best practices. If you see any accessibility concerns or improvements, you can tag **@copilot** in a comment to request updates, just like you did with the previous PRs.
 
 ## Optional Exercise - Explore the agent's capabilities with more issues
 
 Having access to a peer programmer who is able to explore our codebase and make changes asynchronously is powerful, allowing us to reach a first iteration across tasks quickly, allowing us to review and guide, or take over and continue coding in the editor.
 
-You have made great progress through the lab, and we're approaching the end. However, we encourage you to create some additional issues in your GitHub repository and use Copilot to solve those. Some ideas include:
+You have made great progress through the lab, and you're approaching the end. However, you're encouraged to create some additional issues in your GitHub repository and use Copilot to solve those. Some ideas include:
 
 - Create a backer interest form on the game details page
 - Implement pagination on the game listing endpoint
@@ -122,8 +159,8 @@ This is just the beginning, and we can't wait to see how you use Copilot to help
 
 ---
 
-| [← Adding new functionality with Copilot Agent Mode][previous-lesson] |
-|:----:|
+| [← Previous lesson: Managing agents][previous-lesson] |
+|:--|
 
 [github-copilot]: https://github.com/features/copilot
 [coding-agent-overview]: https://docs.github.com/copilot/using-github-copilot/coding-agent/about-assigning-tasks-to-copilot#overview-of-copilot-coding-agent
@@ -133,4 +170,4 @@ This is just the beginning, and we can't wait to see how you use Copilot to help
 [coding-agent-best-practices]: https://docs.github.com/copilot/using-github-copilot/coding-agent/best-practices-for-using-copilot-to-work-on-tasks
 [agent-firewall]: https://docs.github.com/copilot/customizing-copilot/customizing-or-disabling-the-firewall-for-copilot-coding-agent
 
-[previous-lesson]: ./4-copilot-agent-mode-vscode.md
+[previous-lesson]: ./6-managing-agents.md
diff --git a/docs/README.md b/workshop-content/README.md
similarity index 53%
rename from docs/README.md
rename to workshop-content/README.md
index f38549e..480e4d9 100644
--- a/docs/README.md
+++ b/workshop-content/README.md
@@ -9,18 +9,22 @@ The recent additions to the capabilities of GitHub Copilot provide powerful tool
 >
 > If something appears broken or isn't running correctly, please ask a mentor!
 
-The labs will walk you through the most common workloads with the agent capabilities of GitHub Copilot.
+These labs will walk you through the most common workloads with the agent capabilities of GitHub Copilot.
 
 0. [Setup the environment](./0-prereqs.md).
-1. [Assign issues to GitHub Copilot coding agent](./1-copilot-coding-agent.md) to allow Copilot to work on tasks asynchronously.
-2. [Configure and interact with external services](./2-mcp.md) through Model Context Protocol (MCP).
-3. [Provide context to Copilot](./3-custom-instructions.md) through the use of custom instructions, prompt files, and chat participants.
-4. [Complete a site-wide update](./4-copilot-agent-mode-vscode.md) with the help of Copilot agent mode.
-5. [Review Copilot coding agent's work](./5-reviewing-coding-agent.md) to ensure everything looks good!
+1. [Configure and interact with external services](./1-mcp.md) through Model Context Protocol (MCP).
+2. [Provide context to Copilot](./2-custom-instructions.md) through the use of custom instructions, prompt files, and chat participants.
+3. [Complete a site-wide update](./3-copilot-agent-mode-vscode.md) with the help of Copilot agent mode.
+4. [Assign issues to GitHub Copilot coding agent](./4-copilot-coding-agent.md) to allow Copilot to work on tasks asynchronously.
+5. [Create and use custom agents](./5-custom-agents.md) to provide specialized guidance for specific tasks.
+6. [Manage agents](./6-managing-agents.md) to control who has access to your agents and how they're used.
+7. [Iterate on Copilot's work](./7-iterating-copilot-work.md) to refine and improve the generated code.
+
+## Conclusion
 
 ## Scenario
 
-The lab envisions you as a new developer for Tailspin Toys, a fictional company who provides crowdfunding for boardgames with a DevOps theme - a huge market! You are tasked with creating issues to document the desired updates to the application and DevOps flow, then implementing the ability to filter games by both category and publisher. You'll work iteratively, exploring both the site and Copilot's capabilities, to complete the tasks.
+You are a new developer for Tailspin Toys, a fictional company who provides crowdfunding for boardgames with a DevOps theme - a huge market! You are tasked with creating issues to document the desired updates to the application and DevOps flow, then implementing the ability to filter games by both category and publisher. You'll work iteratively, exploring both the site and Copilot's capabilities, to complete the tasks.
 
 ## Get started
 
diff --git a/docs/images/code-button.png b/workshop-content/images/ex0-code-button.png
similarity index 100%
rename from docs/images/code-button.png
rename to workshop-content/images/ex0-code-button.png
diff --git a/docs/images/create-codespace.png b/workshop-content/images/ex0-create-codespace.png
similarity index 100%
rename from docs/images/create-codespace.png
rename to workshop-content/images/ex0-create-codespace.png
diff --git a/docs/images/repository-template-settings.png b/workshop-content/images/ex0-repository-settings.png
similarity index 100%
rename from docs/images/repository-template-settings.png
rename to workshop-content/images/ex0-repository-settings.png
diff --git a/docs/images/use-template.png b/workshop-content/images/ex0-use-template.png
similarity index 100%
rename from docs/images/use-template.png
rename to workshop-content/images/ex0-use-template.png
diff --git a/docs/images/copilot-authentication.png b/workshop-content/images/ex1-copilot-authentication.png
similarity index 100%
rename from docs/images/copilot-authentication.png
rename to workshop-content/images/ex1-copilot-authentication.png
diff --git a/docs/images/create-issue-allow.png b/workshop-content/images/ex1-create-issue-allow.png
similarity index 100%
rename from docs/images/create-issue-allow.png
rename to workshop-content/images/ex1-create-issue-allow.png
diff --git a/docs/images/create-issue-dialog.png b/workshop-content/images/ex1-create-issue-dialog.png
similarity index 100%
rename from docs/images/create-issue-dialog.png
rename to workshop-content/images/ex1-create-issue-dialog.png
diff --git a/docs/images/create-issue-review.png b/workshop-content/images/ex1-create-issue-review.png
similarity index 100%
rename from docs/images/create-issue-review.png
rename to workshop-content/images/ex1-create-issue-review.png
diff --git a/docs/images/extensions-updates.png b/workshop-content/images/ex1-extensions-updates.png
similarity index 100%
rename from docs/images/extensions-updates.png
rename to workshop-content/images/ex1-extensions-updates.png
diff --git a/docs/images/github-issues-created.png b/workshop-content/images/ex1-github-issues-created.png
similarity index 100%
rename from docs/images/github-issues-created.png
rename to workshop-content/images/ex1-github-issues-created.png
diff --git a/docs/images/ex2-mcp-auth-popup.png b/workshop-content/images/ex1-mcp-auth-popup.png
similarity index 100%
rename from docs/images/ex2-mcp-auth-popup.png
rename to workshop-content/images/ex1-mcp-auth-popup.png
diff --git a/docs/images/ex2-mcp-auth-vscode.png b/workshop-content/images/ex1-mcp-authorize-vscode.png
similarity index 100%
rename from docs/images/ex2-mcp-auth-vscode.png
rename to workshop-content/images/ex1-mcp-authorize-vscode.png
diff --git a/docs/images/mcp-diagram.png b/workshop-content/images/ex1-mcp-diagram.png
similarity index 100%
rename from docs/images/mcp-diagram.png
rename to workshop-content/images/ex1-mcp-diagram.png
diff --git a/docs/images/ex2-mcp-select-account.png b/workshop-content/images/ex1-mcp-select-account.png
similarity index 100%
rename from docs/images/ex2-mcp-select-account.png
rename to workshop-content/images/ex1-mcp-select-account.png
diff --git a/workshop-content/images/ex1-select-model.png b/workshop-content/images/ex1-select-model.png
new file mode 100644
index 0000000..5493a71
Binary files /dev/null and b/workshop-content/images/ex1-select-model.png differ
diff --git a/docs/images/ex2-start-mcp.png b/workshop-content/images/ex1-start-mcp-server.png
similarity index 100%
rename from docs/images/ex2-start-mcp.png
rename to workshop-content/images/ex1-start-mcp-server.png
diff --git a/workshop-content/images/ex2-add-instructions-file.png b/workshop-content/images/ex2-add-instructions-file.png
new file mode 100644
index 0000000..0df231f
Binary files /dev/null and b/workshop-content/images/ex2-add-instructions-file.png differ
diff --git a/workshop-content/images/ex2-copilot-instructions-references.png b/workshop-content/images/ex2-copilot-instructions-references.png
new file mode 100644
index 0000000..7920476
Binary files /dev/null and b/workshop-content/images/ex2-copilot-instructions-references.png differ
diff --git a/workshop-content/images/ex2-generate-instructions.png b/workshop-content/images/ex2-generate-instructions.png
new file mode 100644
index 0000000..13000a4
Binary files /dev/null and b/workshop-content/images/ex2-generate-instructions.png differ
diff --git a/workshop-content/images/ex2-select-chat-mode.png b/workshop-content/images/ex2-select-chat-mode.png
new file mode 100644
index 0000000..362b571
Binary files /dev/null and b/workshop-content/images/ex2-select-chat-mode.png differ
diff --git a/workshop-content/images/ex2-select-edit-mode.png b/workshop-content/images/ex2-select-edit-mode.png
new file mode 100644
index 0000000..c35c449
Binary files /dev/null and b/workshop-content/images/ex2-select-edit-mode.png differ
diff --git a/docs/images/source-control-changes.png b/workshop-content/images/ex2-source-control-changes.png
similarity index 100%
rename from docs/images/source-control-changes.png
rename to workshop-content/images/ex2-source-control-changes.png
diff --git a/docs/images/copilot-agent-mode-explores.png b/workshop-content/images/ex3-agent-mode-explores.png
similarity index 100%
rename from docs/images/copilot-agent-mode-explores.png
rename to workshop-content/images/ex3-agent-mode-explores.png
diff --git a/docs/images/copilot-agent-mode-proposed-changes.png b/workshop-content/images/ex3-agent-mode-proposed-changes.png
similarity index 100%
rename from docs/images/copilot-agent-mode-proposed-changes.png
rename to workshop-content/images/ex3-agent-mode-proposed-changes.png
diff --git a/docs/images/copilot-agent-mode-run-tests.png b/workshop-content/images/ex3-agent-mode-run-tests.png
similarity index 100%
rename from docs/images/copilot-agent-mode-run-tests.png
rename to workshop-content/images/ex3-agent-mode-run-tests.png
diff --git a/workshop-content/images/ex3-select-instructions-file.png b/workshop-content/images/ex3-select-instructions-file.png
new file mode 100644
index 0000000..3510732
Binary files /dev/null and b/workshop-content/images/ex3-select-instructions-file.png differ
diff --git a/docs/images/source-control-changes-agent-mode.png b/workshop-content/images/ex3-source-control-changes.png
similarity index 100%
rename from docs/images/source-control-changes-agent-mode.png
rename to workshop-content/images/ex3-source-control-changes.png
diff --git a/workshop-content/images/ex4-assign-copilot-details.png b/workshop-content/images/ex4-assign-copilot-details.png
new file mode 100644
index 0000000..fc77d3c
Binary files /dev/null and b/workshop-content/images/ex4-assign-copilot-details.png differ
diff --git a/docs/images/ex4-issue-eyes.png b/workshop-content/images/ex4-issue-eyes-emoji.png
similarity index 100%
rename from docs/images/ex4-issue-eyes.png
rename to workshop-content/images/ex4-issue-eyes-emoji.png
diff --git a/docs/images/ex4-view-session.png b/workshop-content/images/ex4-view-session.png
similarity index 100%
rename from docs/images/ex4-view-session.png
rename to workshop-content/images/ex4-view-session.png
diff --git a/workshop-content/images/ex5-select-custom-agent.png b/workshop-content/images/ex5-select-custom-agent.png
new file mode 100644
index 0000000..8de3186
Binary files /dev/null and b/workshop-content/images/ex5-select-custom-agent.png differ
diff --git a/workshop-content/images/ex6-accessibility-session.png b/workshop-content/images/ex6-accessibility-session.png
new file mode 100644
index 0000000..e1444dc
Binary files /dev/null and b/workshop-content/images/ex6-accessibility-session.png differ
diff --git a/workshop-content/images/ex6-steer-coding-agent-task.png b/workshop-content/images/ex6-steer-coding-agent-task.png
new file mode 100644
index 0000000..b32ef39
Binary files /dev/null and b/workshop-content/images/ex6-steer-coding-agent-task.png differ
diff --git a/docs/images/ex4-back-to-pr.png b/workshop-content/images/ex7-back-to-pr.png
similarity index 100%
rename from docs/images/ex4-back-to-pr.png
rename to workshop-content/images/ex7-back-to-pr.png
diff --git a/docs/images/ex4-ready-for-review.png b/workshop-content/images/ex7-ready-for-review.png
similarity index 100%
rename from docs/images/ex4-ready-for-review.png
rename to workshop-content/images/ex7-ready-for-review.png
diff --git a/docs/images/copilot-add-instructions-file.png b/workshop-content/images/shared-add-instructions-file.png
similarity index 100%
rename from docs/images/copilot-add-instructions-file.png
rename to workshop-content/images/shared-add-instructions-file.png
diff --git a/docs/images/copilot-agent-mode-dropdown.png b/workshop-content/images/shared-agent-mode-dropdown.png
similarity index 100%
rename from docs/images/copilot-agent-mode-dropdown.png
rename to workshop-content/images/shared-agent-mode-dropdown.png
diff --git a/docs/images/ex4-approve-and-run.png b/workshop-content/images/shared-approve-workflows.png
similarity index 100%
rename from docs/images/ex4-approve-and-run.png
rename to workshop-content/images/shared-approve-workflows.png
diff --git a/workshop-content/images/shared-assign-copilot.png b/workshop-content/images/shared-assign-copilot.png
new file mode 100644
index 0000000..140db5d
Binary files /dev/null and b/workshop-content/images/shared-assign-copilot.png differ
diff --git a/docs/images/pr-files-changed.png b/workshop-content/images/shared-pr-files-changed.png
similarity index 100%
rename from docs/images/pr-files-changed.png
rename to workshop-content/images/shared-pr-files-changed.png
