diff --git a/dashboard/final-example/app/ui/invoices/create-form.tsx b/dashboard/final-example/app/ui/invoices/create-form.tsx
index 4056179..e0106b6 100644
--- a/dashboard/final-example/app/ui/invoices/create-form.tsx
+++ b/dashboard/final-example/app/ui/invoices/create-form.tsx
@@ -10,10 +10,14 @@ import {
 } from '@heroicons/react/24/outline';
 import { Button } from '../button';
 import { createInvoice } from '@/app/lib/actions';
+import { experimental_useFormState as useFormState } from 'react-dom';
 
 export default function Form({ customers }: { customers: CustomerField[] }) {
+  const initialState = { message: null, errors: [] };
+  const [state, dispatch] = useFormState(createInvoice, initialState);
+
   return (
-    <form>
+    <form action={dispatch}>
       <div className="rounded-md bg-gray-50 p-4 md:p-6">
         {/* Customer Name */}
         <div className="mb-4">
diff --git a/dashboard/final-example/app/ui/invoices/table.tsx b/dashboard/final-example/app/ui/invoices/table.tsx
index 1fa3f8c..0255185 100644
--- a/dashboard/final-example/app/ui/invoices/table.tsx
+++ b/dashboard/final-example/app/ui/invoices/table.tsx
@@ -31,6 +31,7 @@ export default async function InvoicesTable({
                         className="mr-2 rounded-full"
                         width={28}
                         height={28}
+                        alt={`${invoice.name}'s profile picture`}
                       />
                       <p>{invoice.name}</p>
                     </div>
@@ -89,6 +90,7 @@ export default async function InvoicesTable({
                         className="rounded-full"
                         width={28}
                         height={28}
+                        alt={`${invoice.name}'s profile picture`}
                       />
                       <p>{invoice.name}</p>
                     </div>