diff --git a/docs/learn/lesson-1.mdx b/docs/learn/lesson-1.mdx
index c7a185a..1d8adb6 100644
--- a/docs/learn/lesson-1.mdx
+++ b/docs/learn/lesson-1.mdx
@@ -105,7 +105,7 @@ onClick={() => {
 ```
 
 **The complete `Button` component with the new `onClick` handler will look like this:**
-```jsx title="src/pages/Home.jsx" showLineNumbers=293
+```jsx title="src/pages/Home.jsx" showLineNumbers=309
 <Button
   type="button"
   className="bg-primary hover:bg-primary-darker width-full"
diff --git a/docs/learn/lesson-2.mdx b/docs/learn/lesson-2.mdx
index 03fb874..defd750 100644
--- a/docs/learn/lesson-2.mdx
+++ b/docs/learn/lesson-2.mdx
@@ -48,7 +48,7 @@ These components work together to create accessible, well-structured forms that
 
 **Add the `FormGroup`, `Label`, and `DatePicker` input within the `Form` component:**
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=272
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=287
 // diff-add-start
 <Form onSubmit={handleSubmit} large>
   <FormGroup>
@@ -65,7 +65,7 @@ These components work together to create accessible, well-structured forms that
       name="tripDate"
       defaultValue={formData.tripDate}
       onChange={handleDateChange}
-      aria-describedby="tripDateHint"
+      aria-describedby="tripDate-hint"
       required
     />
     <span id="tripDateHint" className="usa-sr-only">
@@ -82,7 +82,7 @@ Let's look at two key aspects of how React manages state with this form:
 
 1. **Initial State with `defaultValue`**:
 
-   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=289
+   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=303
    defaultValue={formData.tripDate}
    ```
 
@@ -102,14 +102,14 @@ Let's look at two key aspects of how React manages state with this form:
 
 2. **Updating State with `onChange`**:
 
-   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=290
+   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=304
    onChange = { handleDateChange };
    ```
 
    - The `onChange` attribute is a required prop for controlled inputs. It is called whenever the input's value changes (on every keystroke or selection). Without this handler, React would revert the input to its original value after each change.
    - When a user selects a date, the `handleDateChange` function is called
 
-   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=149
+   ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=162
    const handleDateChange = (value) => {
      setFormData((prevData) => ({ ...prevData, tripDate: value || "" }));
    };
@@ -148,7 +148,7 @@ import {
 
 Let's add the `TimePicker` input below the `DatePicker` form group:
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=315
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=325
 // diff-add-start
 <FormGroup>
   <Label htmlFor="startTime" className="input-time-label" requiredMarker>
@@ -162,9 +162,9 @@ Let's add the `TimePicker` input below the `DatePicker` form group:
     minTime="00:00"
     maxTime="23:45"
     step={15}
-    aria-describedby="startTimeHint"
+    aria-describedby="start-time-hint"
   />
-  <span id="startTimeHint" className="usa-sr-only">
+  <span id="start-time-hint" className="usa-sr-only">
     Please enter or select the time you started fishing.
   </span>
 </FormGroup>
@@ -209,7 +209,7 @@ import {
 
 Add the following code below the `TimePicker` form group:
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=352
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=362
 // diff-add-start
 <FormGroup>
   <Label htmlFor="startWeather" requiredMarker>
@@ -220,14 +220,14 @@ Add the following code below the `TimePicker` form group:
     name="startWeather"
     value={formData.startWeather}
     onChange={handleInputChange}
-    aria-describedby="startWeatherHint"
+    aria-describedby="start-weather-hint"
   >
     <option value="">-Select-</option>
     <option value="Sunny">Sunny</option>
     <option value="Cloudy">Cloudy</option>
     <option value="Rainy">Rainy</option>
   </Select>
-  <span id="startWeatherHint" className="usa-sr-only">
+  <span id="start-weather-hint" className="usa-sr-only">
     Please select the weather conditions at the start of your fishing trip.
   </span>
 </FormGroup>
@@ -240,7 +240,7 @@ Add the following code below the `TimePicker` form group:
 - `onChange={handleInputChange}` uses the standard input handler (already present) because the `Select` component behaves like a standard HTML select element in this regard.
 - We define the available weather options using standard HTML `<option>` tags within the `Select` component. The first option has an empty `value` to represent the default, unselected state.
 
-The complete **Form** will look like this:
+The complete **Form** will look like this: 
 
 ```jsx title="src/pages/StartTrip.jsx" showLineNumbers=272
 // diff-add-start
@@ -259,10 +259,10 @@ The complete **Form** will look like this:
       name="tripDate"
       defaultValue={formData.tripDate}
       onChange={handleDateChange}
-      aria-describedby="tripDateHint"
+      aria-describedby="trip-date-hint"
       required
     />
-    <span id="tripDateHint" className="usa-sr-only">
+    <span id="trip-date-hint" className="usa-sr-only">
       Please enter or select the date of your fishing trip.
     </span>
   </FormGroup>
@@ -278,9 +278,9 @@ The complete **Form** will look like this:
       minTime="00:00"
       maxTime="23:45"
       step={15}
-      aria-describedby="startTimeHint"
+      aria-describedby="start-time-hint"
     />
-    <span id="startTimeHint" className="usa-sr-only">
+    <span id="start-time-hint" className="usa-sr-only">
       Please enter or select the time you started fishing.
     </span>
   </FormGroup>
@@ -293,18 +293,18 @@ The complete **Form** will look like this:
       name="startWeather"
       value={formData.startWeather}
       onChange={handleInputChange}
-      aria-describedby="startWeatherHint"
+      aria-describedby="start-weather-hint"
     >
       <option value="">-Select-</option>
       <option value="Sunny">Sunny</option>
       <option value="Cloudy">Cloudy</option>
       <option value="Rainy">Rainy</option>
     </Select>
-    <span id="startWeatherHint" className="usa-sr-only">
+    <span id="start-weather-hint" className="usa-sr-only">
       Please select the weather conditions at the start of your fishing trip.
     </span>
   </FormGroup>
-</Form>;
+</Form>
 // diff-add-end
 ```
 
@@ -316,7 +316,7 @@ Before we learn how to save data to storage in the next lesson, let's first see
 
 Open `src/pages/StartTrip.jsx` and locate the `handleSubmit` function. Replace the existing submission logic with the following code that will log the form data to the console:
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=191
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=214
 if (Object.keys(newErrors).length === 0) {
   //diff-add-start
   console.log("Form Data:", {
@@ -324,7 +324,7 @@ if (Object.keys(newErrors).length === 0) {
     startWeather: formData.startWeather,
     startTime: formData.startTime,
     status: "in-progress",
-    step: 2,
+    step: 2
   });
   //diff-add-end
 }
diff --git a/docs/learn/lesson-3.mdx b/docs/learn/lesson-3.mdx
index 412148c..9f8d740 100644
--- a/docs/learn/lesson-3.mdx
+++ b/docs/learn/lesson-3.mdx
@@ -77,7 +77,7 @@ This schema ensures data consistency and provides validation when we create or u
 
 To save data, we first need to access the appropriate RADFish store and collection within our `handleSubmit` function.
 
-```jsx title="src/pages/StartTrip.jsx" showLineNumbers=202
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=203
 try {
   //diff-add-start
   const tripStore = app.stores["trip"];
diff --git a/docs/learn/lesson-4.mdx b/docs/learn/lesson-4.mdx
index d8f8828..f4e6712 100644
--- a/docs/learn/lesson-4.mdx
+++ b/docs/learn/lesson-4.mdx
@@ -12,7 +12,7 @@ RADFish organizes different types of data into separate **collections**. While o
 
 Open `src/index.jsx` and locate the `collections` section within the trip store. **You'll need to add the Catch collection schema after the Form collection as shown in the highlighted lines below:**
 
-```jsx title="src/index.jsx" showLineNumbers=60
+```jsx title="src/index.jsx" showLineNumbers=66
         },
       },
       // diff-add-start
@@ -91,8 +91,7 @@ First, we need to access the RADFish Catch collection within our form submission
 
 Open `src/pages/CatchLog.jsx` and locate the `handleAddCatch` function. Find the comment `// Create record in RADFish/IndexedDB` and replace it with the following code:
 
-```jsx title="src/pages/CatchLog.jsx" showLineNumbers=247
-// Create record in RADFish/IndexedDB
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=265
 // diff-add-start
 await Catch.create(newCatchData);
 // diff-add-end
@@ -111,7 +110,7 @@ After successfully saving to IndexedDB, we need to update React's component stat
 
 In the same `handleAddCatch` function, below the `await Catch.create(newCatchData)`, add the following code:
 
-```jsx title="src/pages/CatchLog.jsx" showLineNumbers=250
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=269
 // diff-add-start
 setCatches(prev => [newCatchData, ...prev]);
 // diff-add-end
@@ -133,8 +132,7 @@ This triggers React's re-rendering process, immediately updating the "Recorded C
 
 The complete `handleAddCatch` function also handles form cleanup after successful submission. Here's how the full process works:
 
-```jsx title="src/pages/CatchLog.jsx" showLineNumbers=252
-// Reset the form
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=272
 setCurrentCatch({ species: "", weight: "", length: "", latitude: "", longitude: "", time: "" });
 setCatchTimeKey(prevKey => prevKey + 1); // Reset TimePicker
 setSubmitted(false); // Reset submission status
diff --git a/docs/learn/lesson-5.mdx b/docs/learn/lesson-5.mdx
index 2c759e6..57a7d69 100644
--- a/docs/learn/lesson-5.mdx
+++ b/docs/learn/lesson-5.mdx
@@ -1,308 +1,454 @@
 # Lesson 5: Form Validation
 
-In this lesson, we will implement form validation for all three steps of the trip logging process (Start Trip, Catch Log, and End Trip). This ensures that users provide necessary information in the correct format before proceeding. We'll add validation logic and display error messages using the USWDS `ErrorMessage` component.
+In this lesson, we will implement comprehensive form validation across all three steps of the trip logging process (Start Trip, Catch Log, and End Trip). This ensures users provide accurate, complete information before proceeding to each subsequent step. We'll add validation logic using React state management and display user-friendly error messages using USWDS `ErrorMessage` components.
 
-## Step 1: Set validation errors in Start Trip
+## Step 1: Understanding Form Validation in RADFish Applications
 
-We need to store the validation results in the component's state so we can use them to display error messages.
+Before implementing validation, let's understand the validation patterns used in RADFish applications and how they integrate with React state management.
 
-Open `src/pages/StartTrip.jsx`. Locate the `/* Step 1: Set validation errors */` comment and replace it with the following code:
+### 1.1: Validation Architecture
 
-```jsx
-// filepath: src/pages/StartTrip.jsx
-    const newErrors = validateForm();
-    setErrors(newErrors);
-```
+Form validation in RADFish applications follows a consistent pattern across all form components:
 
-This code calls the `validateForm` function (which we'll enhance later) and updates the `errors` state with the returned error object.
+1. **Validation Functions**: Pure functions that check field values against business rules
+2. **Error State Management**: React state to store and display validation errors
+3. **Submission Prevention**: Block navigation/submission when validation fails
+4. **User Experience**: Clear, accessible error messages using USWDS components
 
-## Step 2: Display Trip Date Error in Start Trip
+### 1.2: Validation Types
 
-Now, let's display an error message if the Trip Date is invalid.
+Our trip logging application uses several validation types:
 
-Open `src/pages/StartTrip.jsx`. Locate the `/* Step 2: Display Trip Date Error */` comment and replace it with the following code:
+- **Required Field Validation**: Ensures essential fields are not empty
+- **Data Type Validation**: Validates numbers, coordinates, and other specific formats
+- **Range Validation**: Ensures numeric values fall within acceptable bounds
+- **Business Logic Validation**: Custom rules specific to fishing trip data
 
-```jsx
-// filepath: src/pages/StartTrip.jsx
-              <ErrorMessage id="tripDate-error-message">
-                {(submitted && errors.tripDate) || "\u00A0"} {/* Non-breaking space for layout */}
-              </ErrorMessage>
-```
+**Key Validation Concepts:**
 
-This uses the `ErrorMessage` component from `@trussworks/react-uswds`. It conditionally renders the error message stored in `errors.tripDate` only if the form has been `submitted` and an error exists for that field. The `\u00A0` (non-breaking space) ensures the layout doesn't shift when there's no error.
+- **Client-Side Validation**: Immediate feedback without server round-trips
+- **Accessible Error Messages**: Screen reader compatible with proper ARIA attributes
+- **Form State Management**: Coordinating validation with React's controlled components
+- **Progressive Enhancement**: Validation works even if JavaScript fails
 
-## Step 3: Display Start Time Error in Start Trip
+## Step 2: Start Trip Form Validation
 
-Similarly, display an error for the Start Time.
+Let's begin by implementing validation for the Start Trip form, which collects the trip date, start time, and weather conditions.
 
-Open `src/pages/StartTrip.jsx`. Locate the `/* Step 3: Display Start Time Error */` comment and replace it with the following code:
+### 2.1: Set Validation Error State
 
-```jsx
-// filepath: src/pages/StartTrip.jsx
-              <ErrorMessage id="startTime-error-message">
-                {(submitted && errors.startTime) || "\u00A0"}
-              </ErrorMessage>
+The Start Trip form uses React state to store validation errors. When the form is submitted, we need to validate all fields and update the error state.
+
+Open `src/pages/StartTrip.jsx` and locate the `handleSubmit` function.
+
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=190
+const newErrors = validateForm();
+  const handleSubmit = async (e) => {
+    e.preventDefault(); // Prevent default browser form submission
+    setSubmitted(true); // Mark form as submitted to show errors
+
+    //diff-add-start
+    const newErrors = validateForm();
+    setErrors(newErrors);
+    //diff-add-end
 ```
 
-This adds the error message display for the `startTime` field.
+**Explanation:**
 
-## Step 4: Display Weather Error in Start Trip
+- `validateForm()`: Calls the validation function that checks all form fields
+- `setErrors(newErrors)`: Updates React state with the validation results
+- The form only proceeds if `Object.keys(newErrors).length === 0`
 
-Finally, add the error display for the Weather field.
+### 2.2: Required Field Validation Logic
 
-Open `src/pages/StartTrip.jsx`. Locate the `/* Step 4: Display Weather Error */` comment and replace it with the following code:
+The Start Trip form validates three required fields using a standardized validation helper:
 
-```jsx
-// filepath: src/pages/StartTrip.jsx
-              <ErrorMessage id="weather-error-message">
-                {(submitted && errors.weather) || "\u00A0"}
-              </ErrorMessage>
-```
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=166
+const validateRequired = (value, fieldName) => {
+  if (!value || String(value).trim() === "") {
+    return `${fieldName} is required`;
+  }
+  return null;
+};
 
-This completes the error message display for the Start Trip form.
+// Validates all fields in the form
+const validateForm = () => {
+  const newErrors = {};
 
-## Step 5: Set validation errors for new catch in Catch Log
+  const dateError = validateRequired(formData.tripDate, FIELD_DATE);
+  if (dateError) newErrors.tripDate = dateError;
 
-In the Catch Log page, we need to validate the *new* catch form before adding it.
+  const weatherError = validateRequired(formData.weather, FIELD_WEATHER);
+  if (weatherError) newErrors.weather = weatherError;
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 5: Set validation errors for new catch */` comment and replace it with the following code:
+  const timeError = validateRequired(formData.startTime, FIELD_START_TIME);
+  if (timeError) newErrors.startTime = timeError;
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-    const formErrors = validateForm();
-    setErrors(formErrors);
+  return newErrors;
+};
 ```
 
-This updates the `errors` state specifically for the *new catch* form based on the results of `validateForm`.
+**Understanding the Validation Pattern:**
+
+- **Helper Function**: `validateRequired()` provides reusable validation logic
+- **Field Constants**: `FIELD_DATE`, `FIELD_WEATHER`, etc. ensure consistent error messages
+- **Error Object**: Returned object maps field names to error messages
+- **Null Returns**: Valid fields return `null` to indicate no errors
+
+### 2.3: Display Error Messages
+
+The Start Trip form displays validation errors using USWDS `ErrorMessage` components. Each form field has an associated error display:
+
+```jsx title="src/pages/StartTrip.jsx" showLineNumbers=274
+//diff-remove-start
+<FormGroup>
+//diff-remove-end
+//diff-add-start
+<FormGroup error={submitted && errors.tripDate}>
+//diff-add-end
+  <Label
+    htmlFor="tripDate"
+    //diff-add-start
+    error={submitted && errors.tripDate}
+    //diff-add-end
+    hint=" mm/dd/yyyy"
+    requiredMarker
+  >
+    Date
+  </Label>
+  <DatePicker
+    id="tripDate"
+    name="tripDate"
+    defaultValue={formData.tripDate}
+    onChange={handleDateChange}
+    //diff-add-start
+    validationStatus={submitted && errors.tripDate ? "error" : undefined}
+    //diff-add-end
+    aria-describedby="trip-date-hint trip-date-error-message"
+    required
+  />
+  <span id="trip-date-hint" className="usa-sr-only">
+    Please enter or select the date of your fishing trip.
+  </span>
+  //diff-add-start
+  {submitted && errors.tripDate && (
+         <ErrorMessage id="trip-date-error-message" className="font-sans-2xs">
+      {errors.tripDate}
+    </ErrorMessage>
+  )}
+  //diff-add-end
+</FormGroup>
+```
 
-## Step 6: Display Species Error in Catch Log (New Catch)
+**Understanding the Error Display Pattern:**
 
-Display the error message for the Species field in the new catch form.
+The diff shows the transformation from a basic form group to a fully validated one:
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 6: Display Species Error */` comment and replace it with the following code:
+- **FormGroup Error State**: `error={submitted && errors.tripDate}` applies USWDS error styling to the entire form group
+- **Label Error Integration**: `error={submitted && errors.tripDate}` on the Label component provides visual error indication
+- **Input Validation Status**: `validationStatus={submitted && errors.tripDate ? "error" : undefined}` adds error styling to the DatePicker
+- **ARIA Accessibility**: `aria-describedby="trip-date-hint trip-date-error-message"` links the input to both hint text and error messages
+- **Conditional Error Messages**: `{submitted && errors.tripDate && (...)}` only displays errors after form submission
+- **Consistent ID Naming**: `id="trip-date-error-message"` follows a consistent kebab-case pattern for error message identification
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                <ErrorMessage id="species-error-message">
-                  {(submitted && errors.species) || "\u00A0"}
-                </ErrorMessage>
-```
+This pattern ensures errors are visually prominent, accessible to screen readers, and only appear when users attempt to submit invalid data.
 
-## Step 7: Display Weight Error in Catch Log (New Catch)
+## Step 3: Catch Log Form Validation
 
-Display the error message for the Weight field in the new catch form.
+The Catch Log page presents a more complex validation scenario with both a "new catch" form and a list of existing catches that can be edited.
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 7: Display Weight Error */` comment and replace it with the following code:
+### 3.1: New Catch Validation
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                    <ErrorMessage id="weight-error-message">
-                      {(submitted && errors.weight) || "\u00A0"}
-                    </ErrorMessage>
-```
+The "Add Catch" form validates species, weight, length, time, and optional coordinates before adding to the list.
 
-## Step 8: Display Length Error in Catch Log (New Catch)
+Open `src/pages/CatchLog.jsx` and locate the `handleAddCatch` function. Observe how validation is implemented:
 
-Display the error message for the Length field in the new catch form.
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=213
+const handleAddCatch = async (e) => {
+  e.preventDefault();
+  setSubmitted(true);
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 8: Display Length Error */` comment and replace it with the following code:
+  //diff-add-start
+  const formErrors = validateForm();
+  setErrors(formErrors);
+  //diff-add-end
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                    <ErrorMessage id="length-error-message">
-                      {(submitted && errors.length) || "\u00A0"}
-                    </ErrorMessage>
+  // Proceed only if no errors and tripId exists
+  if (Object.keys(formErrors).length === 0 && tripId) {
+    // Save catch and update UI
+  }
+};
 ```
 
-## Step 9: Display Time Error in Catch Log (New Catch)
+**Complex Validation Rules:**
+
+The Catch Log uses multiple validation types beyond simple required field checks:
+
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=42
+const validateNumberRange = (value, min, max, fieldName, allowZero = true) => {
+  if (value === "" || value === null || value === undefined) return null;
+  const numValue = Number(value);
+  if (isNaN(numValue)) return `${fieldName} must be a valid number`;
+  if (!allowZero && numValue <= min)
+    return `${fieldName} must be greater than ${min}`;
+  if (allowZero && numValue < min)
+    return `${fieldName} must be at least ${min}`;
+  if (numValue > max) {
+    const minOperator = allowZero ? ">=" : ">";
+    return `${fieldName} must be ${minOperator} ${min} and <= ${max}`;
+  }
+  return null;
+};
+
+const validateLatitude = (value) => {
+  if (value === "" || value === null || value === undefined) return null;
+  const numValue = Number(value);
+  if (isNaN(numValue)) return `${FIELD_LATITUDE} must be a valid number`;
+  if (numValue < -90 || numValue > 90)
+    return `${FIELD_LATITUDE} must be between -90 and 90`;
+  return null;
+};
+```
 
-Display the error message for the Time field in the new catch form.
+**Advanced Validation Features:**
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 9: Display Time Error */` comment and replace it with the following code:
+- **Range Validation**: Weight (0-1000 lbs) and length (0-500 inches) must be within realistic bounds
+- **Coordinate Validation**: Latitude (-90 to 90) and longitude (-180 to 180) follow geographic standards
+- **Optional Field Handling**: Coordinates are validated only if values are provided
+- **Type Coercion**: Automatic conversion from string inputs to numbers
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                <ErrorMessage id="time-error-message">
-                  {(submitted && errors.time) || "\u00A0"}
-                </ErrorMessage>
-```
+### 3.2: Recorded Catches Validation
 
-## Step 10: Display Latitude Error in Catch Log (New Catch)
+Before navigating to the End Trip page, all catches in the "Recorded Catches" list must be validated:
 
-Display the error message for the Latitude field (optional field, but validation applies if entered).
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=287
+const handleSubmit = async (e) => {
+  e.preventDefault();
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 10: Display Latitude Error */` comment and replace it with the following code:
+  //diff-add-start
+  const recordedErrors = validateRecordedCatches();
+  setRecordedCatchErrors(recordedErrors);
+  //diff-add-end
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                    <ErrorMessage id="latitude-error-message">
-                      {(submitted && errors.latitude) || "\u00A0"}
-                    </ErrorMessage>
+  // Only proceed if there are no errors in the recorded catches list
+  if (Object.keys(recordedErrors).length === 0) {
+    // Navigate to EndTrip page
+    navigate(`/end`, { state: { tripId: tripId } });
+  }
+};
 ```
 
-## Step 11: Display Longitude Error in Catch Log (New Catch)
-
-Display the error message for the Longitude field (optional field, but validation applies if entered).
-
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 11: Display Longitude Error */` comment and replace it with the following code:
+**Multi-Record Validation:**
+
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=202
+const validateRecordedCatches = () => {
+  const allErrors = {};
+  catches.forEach((catchItem, index) => {
+    const catchErrors = {};
+    // Validate each catch using the same rules as new catches
+    catchErrors.species = validateRequired(catchItem.species, FIELD_SPECIES);
+    catchErrors.weight = validateRequired(catchItem.weight, FIELD_WEIGHT);
+    // ... additional validations
+
+    // Only store errors if they exist
+    const filteredCatchErrors = Object.entries(catchErrors).reduce(
+      (acc, [key, value]) => {
+        if (value) acc[key] = value;
+        return acc;
+      },
+      {},
+    );
+
+    if (Object.keys(filteredCatchErrors).length > 0) {
+      allErrors[index] = filteredCatchErrors;
+    }
+  });
+  return allErrors;
+};
+```
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                    <ErrorMessage id="longitude-error-message">
-                      {(submitted && errors.longitude) || "\u00A0"}
-                    </ErrorMessage>
+### 3.3: Error Display for Recorded Catches
+
+The recorded catches list displays errors with index-specific identifiers:
+
+```jsx title="src/pages/CatchLog.jsx" showLineNumbers=562
+catches.map((catchItem, index) => {
+  const catchErrors = recordedCatchErrors[index] || {};
+
+  return (
+    <div key={catchItem.id || index}>
+      //diff-remove-start
+      <FormGroup>
+      //diff-remove-end
+      //diff-add-start
+      <FormGroup error={!!catchErrors.species}>
+      //diff-add-end
+        <Label
+          htmlFor={`recorded-species-${index}`}
+          //diff-add-start
+          error={!!catchErrors.species}
+          //diff-add-end
+        >
+          Species
+          <span className="text-secondary-vivid margin-left-05">*</span>
+        </Label>
+        <Select
+          id={`recorded-species-${index}`}
+          //diff-add-start
+          validationStatus={catchErrors.species ? "error" : undefined}
+          aria-describedby={`species-hint recorded-species-${index}-error-message`}
+          //diff-add-end
+          // ... other props
+        >
+          {/* options */}
+        </Select>
+        <span id="species-hint" className="usa-sr-only">
+          Please select the species of the catch.
+        </span>
+        //diff-add-start
+        {catchErrors.species && (
+          <ErrorMessage id={`recorded-species-${index}-error-message`}>
+            {catchErrors.species}
+          </ErrorMessage>
+        )}
+        //diff-add-end
+      </FormGroup>
+    </div>
+  );
+})
 ```
 
-## Step 12: Set validation errors for recorded catches in Catch Log
+## Step 4: Apply Validation to End Trip (Practice Exercise)
 
-Before navigating to the next step (End Trip), we must validate *all* the catches already recorded in the list.
+Now it's your turn! Apply the validation patterns you've learned to the End Trip form. This form needs validation for the trip's end time and weather conditions before allowing users to review their complete trip data.
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 12: Set validation errors for recorded catches */` comment and replace it with the following code:
+However, before we can add validation, we need to complete the End Trip form implementation since it's currently missing the required fields and components.
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-    const recordedErrors = validateRecordedCatches();
-    setRecordedCatchErrors(recordedErrors);
-```
+### 4.1: Update the Data Model
 
-This calls a separate validation function (`validateRecordedCatches`) and stores the errors in the `recordedCatchErrors` state, which is structured to hold errors per catch item index.
+First, you need to enable the `endTime` and `endWeather` fields in the data model.
 
-## Step 13: Display Recorded Species Error in Catch Log (List)
+Your task is to add the `endTime` and `endWeather` fields to the trip model.
 
-Now, we'll add error displays within the list of recorded catches. This is slightly different as we need to access errors based on the catch's index.
+:::info Hint
+Models are defined in `src/index.jsx`.
+:::
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 13: Display Recorded Species Error */` comment and replace it with the following code:
+### 4.2: Import Required Components
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                            {catchErrors.species && (
-                              <ErrorMessage id={`recorded-species-${index}-error-message`}>
-                                {catchErrors.species}
-                              </ErrorMessage>
-                            )}
-```
+Open `src/pages/EndTrip.jsx` and add the missing component imports.
 
-Here, `catchErrors` is an object containing validation errors for the *current* catch item being rendered in the loop (at `index`). We conditionally render the `ErrorMessage` only if `catchErrors.species` exists.
+**Your task:** Add the necessary imports at the top of the file.
 
-## Step 14: Display Recorded Weight Error in Catch Log (List)
+**Components you'll need:**
+:::info Hint  
+Look at `src/pages/StartTrip.jsx` to see what components are needed for:
 
-Add the error display for Weight in the recorded catches list.
+- Time input field
+- Weather dropdown
+- Error message display
+  :::
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 14: Display Recorded Weight Error */` comment and replace it with the following code:
+### 4.3: Add Form Fields to the Component
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                                {catchErrors.weight && (
-                                  <ErrorMessage id={`recorded-weight-${index}-error-message`}>
-                                    {catchErrors.weight}
-                                  </ErrorMessage>
-                                )}
-```
+The End Trip form currently only has navigation buttons. You need to add the actual form fields.
 
-## Step 15: Display Recorded Length Error in Catch Log (List)
+**Fields to add:**
 
-Add the error display for Length in the recorded catches list.
+1. **End Time field** - similar to the startTime field in Start Trip
+2. **End Weather field** - similar to the weather field in Start Trip
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 15: Display Recorded Length Error */` comment and replace it with the following code:
+:::info Hint
+You'll need:
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                                {catchErrors.length && (
-                                  <ErrorMessage id={`recorded-length-${index}-error-message`}>
-                                    {catchErrors.length}
-                                  </ErrorMessage>
-                                )}
-```
+- FormGroup with proper error state
+- Label with required marker and error state
+- Input component with validation status
+- Conditional ErrorMessage component
+  :::
 
-## Step 16: Display Recorded Time Error in Catch Log (List)
+### 4.4: Add Form State Management
 
-Add the error display for Time in the recorded catches list.
+You'll need to add state management for the form data and handle changes.
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 16: Display Recorded Time Error */` comment and replace it with the following code:
+:::info Hint
+You'll need to add the following:
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                            {catchErrors.time && (
-                              <ErrorMessage id={`recorded-time-${index}-error-message`}>
-                                {catchErrors.time}
-                              </ErrorMessage>
-                            )}
-```
+- formData state for storing field values
+- handleTimeChange function for time picker
+- handleSelectChange function for dropdowns
+- Form initialization from database/localStorage
+  :::
 
-## Step 17: Display Recorded Latitude Error in Catch Log (List)
+### 4.5: Implement Validation Logic
 
-Add the error display for Latitude in the recorded catches list.
+Finally, add the validation patterns you learned from the previous forms.
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 17: Display Recorded Latitude Error */` comment and replace it with the following code:
+**For validation functions:**
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                                {catchErrors.latitude && (
-                                  <ErrorMessage id={`recorded-latitude-${index}-error-message`}>
-                                    {catchErrors.latitude}
-                                  </ErrorMessage>
-                                )}
-```
+:::info Hint
+- Copy the validateRequired helper from `src/pages/StartTrip.jsx`
+- Add validateForm function that checks both endTime and endWeather
+- Use the same field constants pattern (FIELD_END_TIME, FIELD_END_WEATHER)
+:::
 
-## Step 18: Display Recorded Longitude Error in Catch Log (List)
+**For setting validation errors:**
 
-Add the error display for Longitude in the recorded catches list.
+:::info Hint
+- Use the same pattern as Start Trip
+- const newErrors = validateForm();
+:::
 
-Open `src/pages/CatchLog.jsx`. Locate the `/* Step 18: Display Recorded Longitude Error */` comment and replace it with the following code:
+**For displaying error messages:**
 
-```jsx
-// filepath: src/pages/CatchLog.jsx
-                                {catchErrors.longitude && (
-                                  <ErrorMessage id={`recorded-longitude-${index}-error-message`}>
-                                    {catchErrors.longitude}
-                                  </ErrorMessage>
-                                )}
-```
+:::info Hint
+- Follow the same pattern as previous forms
+- Remember to:
+  - Add error prop to FormGroup
+  - Add error prop to Label
+  - Add validationStatus to the input component
+  - Add conditional ErrorMessage component
+  - Use proper aria-describedby for accessibility
+:::
 
-## Step 19: Set validation errors in End Trip
+## Step 5: Testing Complete Validation Flow
 
-Move to the final form step. We need to set the validation errors when submitting the End Trip form.
+Test the validation system with both invalid and valid data to ensure it works correctly:
 
-Open `src/pages/EndTrip.jsx`. Locate the `/* Step 19: Set validation errors */` comment and replace it with the following code:
+### 5.1: Complete Validation Test
 
-```jsx
-// filepath: src/pages/EndTrip.jsx
-    const newErrors = validateForm();
-    setErrors(newErrors);
-```
+1. **Start Trip (`/start`)**:
 
-## Step 20: Display End Time Error in End Trip
+   - Try submitting empty form → verify error messages appear
+   - Fill fields correctly → proceeds to Catch Log
 
-Display the error message for the End Time field.
+2. **Catch Log (`/catch`)**:
 
-Open `src/pages/EndTrip.jsx`. Locate the `/* Step 20: Display End Time Error */` comment and replace it with the following code:
+   - Try "Add Catch" with empty fields → verify validation errors
+   - Test invalid coordinates (latitude > 90) → verify range validation
+   - Add valid catches → try "Next" with invalid recorded catches → verify list validation
+   - Ensure all catches are valid → proceeds to End Trip
 
-```jsx
-// filepath: src/pages/EndTrip.jsx
-              <ErrorMessage id="endTime-error-message">
-                {(submitted && errors.endTime) || "\u00A0"}
-              </ErrorMessage>
-```
+3. **End Trip (`/end`)**:
+   - Try submitting without end time/weather → verify validation blocks navigation
+   - Fill fields correctly → proceeds to Review page
 
-## Step 21: Display End Weather Error in End Trip
+**Expected Results:**
 
-Display the error message for the End Weather field.
+- ✅ Errors appear only after submission attempts
+- ✅ Invalid data blocks navigation between steps
+- ✅ Error styling applied consistently across all forms
+- ✅ Valid data clears errors and allows progression
 
-Open `src/pages/EndTrip.jsx`. Locate the `/* Step 21: Display End Weather Error */` comment and replace it with the following code:
+## Conclusion
 
-```jsx
-// filepath: src/pages/EndTrip.jsx
-              <ErrorMessage id="endWeather-error-message">
-                {(submitted && errors.endWeather) || "\u00A0"}
-              </ErrorMessage>
-```
+You have successfully implemented comprehensive form validation across all three steps of the trip logging process!
 
-# Conclusion
+**Key Benefits:**
 
-You have now implemented validation logic and error message displays across all three form steps (Start Trip, Catch Log, End Trip). This involves:
-*   Defining validation rules (required fields, number ranges, coordinates).
-*   Storing validation results in the component state (`errors` and `recordedCatchErrors`).
-*   Conditionally displaying `ErrorMessage` components based on the submission status and validation results.
-*   Preventing navigation to the next step if validation fails.
+- **Data quality**: Ensures complete, accurate trip information
+- **User experience**: Clear guidance when data doesn't meet requirements
+- **Accessibility**: Screen reader compatible with proper labeling
+- **Progressive enhancement**: Validation works even if JavaScript fails
 
-This makes the application more robust by guiding the user to provide complete and correct data. In the next lesson, we'll focus on reviewing the collected data before final submission.
+In the next lesson, we'll implement the review page where users can see all their trip data before final submission.