diff --git a/src/__generated__/apiSchema.d.ts b/src/__generated__/apiSchema.d.ts
index 1d10ad5..f330ab9 100644
--- a/src/__generated__/apiSchema.d.ts
+++ b/src/__generated__/apiSchema.d.ts
@@ -43,6 +43,14 @@ declare namespace Components {
             name: string;
             created: string; // date-time
         }
+        export interface CaseDocumentWithTask {
+            id: number;
+            case: number;
+            document: string; // uri
+            name: string;
+            created: string; // date-time
+            case_user_task_id?: string | null;
+        }
         export interface CaseEvent {
             id: number;
             event_values: {
@@ -70,6 +78,9 @@ declare namespace Components {
             homeowner_association: CaseHomeownerAssociation;
             created: string; // date-time
         }
+        export interface CaseStateType {
+            name: string;
+        }
         export interface CaseUserTask {
             id: number;
             task_id: string; // uuid
@@ -90,6 +101,7 @@ declare namespace Components {
             name: string;
             case: number;
             homeowner_association: string;
+            created: string; // date-time
         }
         export interface CaseWorkflow {
             id: number;
@@ -101,6 +113,9 @@ declare namespace Components {
             data?: null;
             tasks: CaseUserTask[];
             completed?: boolean;
+            state: {
+                name: string;
+            };
         }
         export interface Contact {
             fullname: string;
@@ -322,6 +337,12 @@ declare namespace Paths {
             }
         }
     }
+    namespace GenericTasksCompleteFileTaskCreate {
+        export type RequestBody = Components.Schemas.CaseDocumentWithTask;
+        namespace Responses {
+            export type $200 = Components.Schemas.CaseDocumentWithTask;
+        }
+    }
     namespace HomeownerAssociationCasesRetrieve {
         namespace Parameters {
             export type Id = number;
diff --git a/src/app/pages/CaseDetailsPage/Workflows/Workflows.tsx b/src/app/pages/CaseDetailsPage/Workflows/Workflows.tsx
index 0ca7460..cf80fe5 100644
--- a/src/app/pages/CaseDetailsPage/Workflows/Workflows.tsx
+++ b/src/app/pages/CaseDetailsPage/Workflows/Workflows.tsx
@@ -1,9 +1,9 @@
+import { Heading } from "@amsterdam/design-system-react"
+import { styled } from "styled-components"
 import { useWorkflows } from "app/state/rest"
 import { Table, SmallSkeleton } from "app/components"
-import { styled } from "styled-components"
 import getColumns from "./columns"
 
-
 type Props = {
   caseId: Components.Schemas.Case["id"]
 }
@@ -19,29 +19,31 @@ const TableWrapper = styled.div`
 
 export const Workflows: React.FC<Props> = ({ caseId }) => {
   const [data, { isBusy }] = useWorkflows(caseId)
-  const workflows = data ?? []
+  const workflows = data ?? ([] as Components.Schemas.CaseWorkflow[])
   const columns = getColumns(caseId)
 
   if (isBusy) {
-    return <SmallSkeleton height={ 4 } />
+    return <SmallSkeleton height={4} />
   }
   return (
     <Wrapper>
-      { workflows?.length > 0 ? (
-        workflows.map(({ id, tasks = [] }) => (
-          <TableWrapper key={ `${ id }` }>
+      {workflows?.length > 0 ? (
+        workflows.map(({ id, state, tasks = [] }) => (
+          <TableWrapper key={`${ id }`}>
+            {state?.name ? <Heading level={4}>{state.name}</Heading> : <></>}
             <Table
-              columns={ columns }             
-              data={ tasks }
-              pagination={ false }
+              columns={columns}
+              data={tasks}
+              pagination={false}
               emptyPlaceholder="Geen taken beschikbaar."
             />
           </TableWrapper>
         ))
-      ) : <></>}
+      ) : (
+        <></>
+      )}
     </Wrapper>
   )
 }
 
 export default Workflows
-    
\ No newline at end of file