diff --git a/client/src/components/forms/MemberForm/index.tsx b/client/src/components/forms/MemberForm/index.tsx
index e7b04777a33d1d35de004970122de134c2b883b1..c4cc2286540e21ed26e18a81343274bc68d3854e 100644
--- a/client/src/components/forms/MemberForm/index.tsx
+++ b/client/src/components/forms/MemberForm/index.tsx
@@ -17,6 +17,10 @@ interface Props {
     setRoles: (state: any) => void
 }
 
+/**
+ * This component implements a form that allows the user to add a new member to an existing team. The
+ * team is given in the property.
+ */
 export default function MemberForm({ roles, team, setRoles }: Props) {
     const [error, setError] = useState('');
     const [role, setRole] = useState<string>();
diff --git a/client/src/components/forms/ProjectForm/index.tsx b/client/src/components/forms/ProjectForm/index.tsx
index cee5a1b4b6d0c86f0edb0b4a07dcd419e6139196..69341ae742a6dffbe955be065ca559cd1a9d6794 100644
--- a/client/src/components/forms/ProjectForm/index.tsx
+++ b/client/src/components/forms/ProjectForm/index.tsx
@@ -27,6 +27,13 @@ interface Props {
     ) => void;
 }
 
+/**
+ * Validate that the given name is acceptable as a project name. Project names must
+ * be non-empty.
+ * 
+ * @param name The name to validate
+ * @returns An error message or null
+ */
 function validateName(name: string): string | null {
     if (name.length > 0) {
         return null;
@@ -35,6 +42,13 @@ function validateName(name: string): string | null {
     }
 }
 
+/**
+ * Validate that the given text is acceptable as a project description. Project descriptions
+ * must be non-empty.
+ * 
+ * @param text The text to validate
+ * @returns An error message or null
+ */
 function validateText(text: string): string | null {
     if (text.length > 0) {
         return null;
@@ -43,6 +57,13 @@ function validateText(text: string): string | null {
     }
 }
 
+/**
+ * Validate that the given string is acceptable as a project color. Project colors must
+ * be non-empty. The selection method in the form avoid wrong colors.
+ * 
+ * @param color The color to validate
+ * @returns An error message or null
+ */
 function validateColor(color: string): string | null {
     if (color.length > 0) {
         return null;
@@ -51,6 +72,13 @@ function validateColor(color: string): string | null {
     }
 }
 
+/**
+ * Validate that the given array of strings is acceptable as a project team list. A project
+ * must be owned by at least one team.
+ * 
+ * @param teams The teams array to validate
+ * @returns An error message or null
+ */
 function validateTeams(teams: string[]): string | null {
     if (teams.length > 0) {
         return null;
@@ -59,6 +87,11 @@ function validateTeams(teams: string[]): string | null {
     }
 }
 
+/**
+ * This component implements a form for editing information on a project. When the data is
+ * submitted, the onSubmit function is called with the values the user input as parameters. If the
+ * project property is not set, this will show the create form, otherwise the edit form.
+ */
 export default function ProjectForm({ project, onSubmit }: Props) {
     const [name, setName] = useState(project?.name);
     const [text, setText] = useState(project?.text);
diff --git a/client/src/components/forms/RegisterForm/index.tsx b/client/src/components/forms/RegisterForm/index.tsx
index 17dcbfa95a77ce340e04af9d9b5d7fe40f101f1f..7728e2bb06e0e9308710ed88b2977526ce49a290 100644
--- a/client/src/components/forms/RegisterForm/index.tsx
+++ b/client/src/components/forms/RegisterForm/index.tsx
@@ -15,7 +15,7 @@ import '../form.scss';
  * already exist in the system.
  * 
  * @param username The username input to validate
- * @returns A promise resolving to a error message
+ * @returns A promise resolving to an error message or null
  */
 async function validateUsername(username: string) {
     if (username?.length < 3) {
@@ -32,7 +32,7 @@ async function validateUsername(username: string) {
  * 6 or more characters long.
  * 
  * @param password The password to validate
- * @returns A promise resolving to a error message
+ * @returns An error message or null
  */
 function validatePassword(password: string) {
     if (password?.length < 6) {
@@ -47,7 +47,7 @@ function validatePassword(password: string) {
  * 
  * @param password The first password
  * @param password2 The second password
- * @returns A promise resolving to a error message
+ * @returns An error message or null
  */
 function validateRepeatPassword(password: string, password2: string) {
     if (password !== password2) {
diff --git a/client/src/components/forms/RequirementsForm/index.tsx b/client/src/components/forms/RequirementsForm/index.tsx
index 90b65dd00eb740ece64eb36bbd90bc6df5f8c92e..385ef6bda85d6bb5c5783235a9fa09bffcf9ae13 100644
--- a/client/src/components/forms/RequirementsForm/index.tsx
+++ b/client/src/components/forms/RequirementsForm/index.tsx
@@ -19,6 +19,10 @@ interface Props {
     onDelete: (req: string) => any
 }
 
+/**
+ * This component implements a form for editing the requirements of a task. This form is used in the
+ * task form. It allows delegation and addition of requirements ot the task.
+ */
 export default function RequirementsForm({ roles, requirements, onNew, onDelete }: Props) {
     const [possibleRoles, setPossibleRoles] = useState<PossibleRole[]>([]);
     const [addNew, setAddNew] = useState(false);
diff --git a/client/src/components/forms/RoleForm/RoleChangeForm.tsx b/client/src/components/forms/RoleForm/RoleChangeForm.tsx
index 0d874fcea69c46b3819c57961d4a4113a57e5bcb..6628cb0b92dde522f87175aa6568ed99a3e68077 100644
--- a/client/src/components/forms/RoleForm/RoleChangeForm.tsx
+++ b/client/src/components/forms/RoleForm/RoleChangeForm.tsx
@@ -16,6 +16,10 @@ interface Props {
     setAllRoles: (state: any) => void
 }
 
+/**
+ * This component implements a form for selecting a new form for a member. It also has a button to
+ * allow adding a new role and buttons to allow editing a roles name.
+ */
 export default function RoleForm({ roles, setEdit, member, team, setResult, setAllRoles }: Props) {
     const [currentRole, setRole] = useState(member?.role.id);
     const [error, setError] = useState('');
diff --git a/client/src/components/forms/RoleForm/RoleEditForm.tsx b/client/src/components/forms/RoleForm/RoleEditForm.tsx
index 7512d8ca96c1fae0596406991240829a174a38fa..b9c940041a9c38c4834cf85c357ee4a099ca258d 100644
--- a/client/src/components/forms/RoleForm/RoleEditForm.tsx
+++ b/client/src/components/forms/RoleForm/RoleEditForm.tsx
@@ -21,6 +21,10 @@ export function validateName(name: string): string | null {
     return 'The name is required';
 }
 
+/**
+ * This component implements a form for adding a new role or editing the name of an existing role.
+ * This form is used by the RoleForm.
+ */
 export default function RoleEditForm({ role, team, setEdit, setAllRoles }: Props) {
     const [name, setName] = useState(role?.name ?? '');
     const [error, setError] = useState('');
diff --git a/client/src/components/forms/RoleForm/index.tsx b/client/src/components/forms/RoleForm/index.tsx
index 198b5b7fd645a0c4a7e820f104597281943af98d..ffece3324c4830cbafecf90c0847bc64dca60453 100644
--- a/client/src/components/forms/RoleForm/index.tsx
+++ b/client/src/components/forms/RoleForm/index.tsx
@@ -17,6 +17,11 @@ interface Props {
     setRoles: (state: any) => void
 }
 
+/**
+ * This component implements a form for changing the role of a team member. This form is used in the
+ * member list of the teams page and in the MemberForm. This forma also allows adding new roles or
+ * editing existing ones.
+ */
 export default function RoleForm({ roles, team, member, setResult, setRoles }: Props) {
     const [edit, setEdit] = useState<TeamRole | null>(null);
     return (
diff --git a/client/src/components/forms/TaskForm/index.tsx b/client/src/components/forms/TaskForm/index.tsx
index 5de3fd176da3a7890f9982d4267a65dea7c06b83..0ea8e7f0ed84206ad2796eabffa9efc0e43a041e 100644
--- a/client/src/components/forms/TaskForm/index.tsx
+++ b/client/src/components/forms/TaskForm/index.tsx
@@ -35,6 +35,13 @@ interface Props {
     project: Project;
 }
 
+/**
+ * Validate that the given name is acceptable as a task name. Task names must
+ * be non-empty.
+ * 
+ * @param name The name to validate
+ * @returns An error message or null
+ */
 function validateName(name: string): string | null {
     if (name.length > 0) {
         return null;
@@ -43,6 +50,13 @@ function validateName(name: string): string | null {
     }
 }
 
+/**
+ * Validate that the given text is acceptable as a task description. Task
+ * descriptions must be non-empty.
+ * 
+ * @param text The text to validate
+ * @returns An error message or null
+ */
 function validateText(text: string): string | null {
     if (text.length > 0) {
         return null;
@@ -51,6 +65,13 @@ function validateText(text: string): string | null {
     }
 }
 
+/**
+ * Validate that the given string is acceptable as a task icon. Task icons
+ * must be non-empty.
+ * 
+ * @param icon The icon to validate
+ * @returns An error message or null
+ */
 function validateIcon(icon: string): string | null {
     if (icon.length > 0) {
         return null;
@@ -59,6 +80,13 @@ function validateIcon(icon: string): string | null {
     }
 }
 
+/**
+ * Validate that the given string is acceptable as a task priority. Task priorities
+ * must be non-empty.
+ * 
+ * @param priority The priority to validate
+ * @returns An error message or null
+ */
 function validatePriority(priority: string): string | null {
     if (priority.length > 0) {
         return null;
@@ -77,6 +105,10 @@ export interface PossibleMember {
     label: string;
 }
 
+/**
+ * This component implements a form for editing information of a task. If the task property is set,
+ * the form will be for editing an existing task, otherwise for creating a new one.
+ */
 export default function TaskForm({ task, onSubmit, project }: Props) {
     const [name, setName] = useState(task?.name);
     const [text, setText] = useState(task?.text);
diff --git a/client/src/components/forms/TeamForm/index.tsx b/client/src/components/forms/TeamForm/index.tsx
index 0bb2ad69e034711e85e51e42227d39cf57e3e7b8..1ef61fae94fe94778fd31cf7d0676f6d048dd679 100644
--- a/client/src/components/forms/TeamForm/index.tsx
+++ b/client/src/components/forms/TeamForm/index.tsx
@@ -22,6 +22,11 @@ export function validateName(name: string): string | null {
     return 'The name is required';
 }
 
+/**
+ * This component implements a form for editing a tasks data. Since a task only consists of a name,
+ * this is only a simple TextInput with two buttons. If the team property is set, the form will be
+ * for updating an existing team, otherwise for creating a new one.
+ */
 export default function TeamForm({ onSubmit, onBack, team }: Props) {
     const [name, setName] = useState(team?.name ?? '');
 
diff --git a/client/src/components/forms/UserForm/index.tsx b/client/src/components/forms/UserForm/index.tsx
index c03fd75d655ef32f150fddc420a29347a7a0fd71..d748ea007e5c3413be010d2dc08fd901cb69c19f 100644
--- a/client/src/components/forms/UserForm/index.tsx
+++ b/client/src/components/forms/UserForm/index.tsx
@@ -21,6 +21,13 @@ interface Props {
 
 const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg']
 
+/**
+ * Validate that the given string is acceptable as a user email. User emails
+ * must match a certain format.
+ * 
+ * @param email The email to validate
+ * @returns An error message or null
+ */
 function validateEmail(email?: string): string | null {
     if (email && email.length > 0) {
         if (email.match('^[^\\s]+@[^\\s]+$')) {
@@ -33,6 +40,13 @@ function validateEmail(email?: string): string | null {
     }
 }
 
+/**
+ * Validate that the given File is acceptable as a user image. User images
+ * must have a image mime type.
+ * 
+ * @param avatar The avatar to validate
+ * @returns An error message or null
+ */
 function validateAvatar(avatar?: File): string | null {
     if (avatar) {
         if (validTypes.find((type) => type === avatar.type)) {
@@ -45,6 +59,10 @@ function validateAvatar(avatar?: File): string | null {
     }
 }
 
+/**
+ * This component implements a form for editing a users information. This form contains fields to
+ * input a users real name and email, as well as a field for uploading a user image.
+ */
 export default function UserForm({ user, onSubmit }: Props) {
     const [name, setName] = useState(user.realname);
     const [email, setEmail] = useState(user.email);