diff --git a/client/src/components/ui/AssigneeList/index.tsx b/client/src/components/ui/AssigneeList/index.tsx
index 4c5dafbfd8e33027f50f138e701f971169c6b2bd..79a1f8744ba130f86ddfbd0b492421868bdaad42 100644
--- a/client/src/components/ui/AssigneeList/index.tsx
+++ b/client/src/components/ui/AssigneeList/index.tsx
@@ -11,6 +11,11 @@ interface Props {
     max: number
 }
 
+/**
+ * This component displays the avatars of the list of users. It will only display a maximum number
+ * of images given in the max property. This component will also add a tooltip to the avatars, that
+ * display the users real name or username if no real name is given.
+ */
 export default function AssigneeList({ assignees, max }: Props) {
     let shownAssignees = assignees, overhead = 0;
     if (assignees.length > max) {
diff --git a/client/src/components/ui/Avatar/index.tsx b/client/src/components/ui/Avatar/index.tsx
index 23b30320ef4211fcbb369af1baa89c97d2910291..04285c407c4f04e379385d637874eee867f1fd56 100644
--- a/client/src/components/ui/Avatar/index.tsx
+++ b/client/src/components/ui/Avatar/index.tsx
@@ -9,6 +9,13 @@ interface Props {
     user?: User;
 }
 
+/**
+ * This helper function extracts the initials of the users real name or username to be used in the
+ * Avatar component. If no user is given, a question mark will be returned.
+ *
+ * @param user The user to get the initials from
+ * @returns The initials of the user
+ */
 function getUserInitials(user?: User): string {
     if (user) {
         if (user.realname) {
@@ -26,6 +33,11 @@ function getUserInitials(user?: User): string {
     }
 }
 
+/**
+ * This component displays the avatar image for the given user. If the user has not set a image,
+ * this component will display the initials of the real name of the user, or if that is not present,
+ * it will display the first character of the username.
+ */
 export default function Avatar({ user }: Props) {
     const [error, setError] = useState(false);
     const avatarSrc = user && getUserImageUri(user.id);
diff --git a/client/src/components/ui/Button/index.tsx b/client/src/components/ui/Button/index.tsx
index 50c5053c72448f331da852db8d93ca39ff92c92c..74ed8d7c01be5251b956720e8bcb5bccb94ea64a 100644
--- a/client/src/components/ui/Button/index.tsx
+++ b/client/src/components/ui/Button/index.tsx
@@ -10,6 +10,11 @@ interface Props {
     onClick?: MouseEventHandler;
 }
 
+/**
+ * This component implements a simple button. The type and onClick, as well as the className
+ * property will be given on to the underlying html button element, while the children will be
+ * display inside said button.
+ */
 export default function Button({children, type, className, onClick}: Props) {
     return (
         <button className={"button " + (className || '')} type={type} onClick={onClick}>
diff --git a/client/src/components/ui/Callout/index.tsx b/client/src/components/ui/Callout/index.tsx
index 419bd28c52cbee2cb3640d1c66a4eaad1cb6c866..5fc81317867c59e0f28c84ff5fac6b317bc260c4 100644
--- a/client/src/components/ui/Callout/index.tsx
+++ b/client/src/components/ui/Callout/index.tsx
@@ -5,6 +5,10 @@ interface Props {
     message: string;
 }
 
+/**
+ * This component implements a simple callout field. This component is mainly used for its styling.
+ * The message property will be displayed inside the callout container.
+ */
 export default function Callout({ message }: Props) {
     return (
         <div className="callout-container">
diff --git a/client/src/components/ui/Checkbox/index.tsx b/client/src/components/ui/Checkbox/index.tsx
index b8efb12a87318196443dda4dba1b40d2fda7a87b..16a3d95f7fa0a2bcb4db9ace31caeff0fa8ac39e 100644
--- a/client/src/components/ui/Checkbox/index.tsx
+++ b/client/src/components/ui/Checkbox/index.tsx
@@ -7,6 +7,11 @@ interface Props {
     onChange: (value: boolean) => any;
 }
 
+/**
+ * This component implements a simple checkbox with a label. The checkbox is checked if the checked
+ * property is true. If the onChange callback is called, the parent component should handle the
+ * change of the checked property.
+ */
 export default function Checkbox({ label, checked, onChange }: Props) {
     return (
         <label htmlFor={label} className="checkbox-item" key={label}>
diff --git a/client/src/components/ui/CheckboxGroup/index.tsx b/client/src/components/ui/CheckboxGroup/index.tsx
index 1d1f9c7f77fa52a116590a7e0db4e300ac20bfcc..803a98416fa0e8b3081d5e7750a4fd03593b8749 100644
--- a/client/src/components/ui/CheckboxGroup/index.tsx
+++ b/client/src/components/ui/CheckboxGroup/index.tsx
@@ -12,6 +12,11 @@ interface Props {
     setChosen: Function
 }
 
+/**
+ * This component allows the user to select a set of items from a list of choices. The input is done
+ * using checkboxes, each one corresponding to a different choice. The setChosen called is called if
+ * the selection changes, and the chosen property should be set accordingly by the parent component.
+ */
 export default function CheckboxGroup({ choices, chosen, setChosen }: Props) {
     return (
         <div className="checkbox-group">
diff --git a/client/src/components/ui/Comment/index.tsx b/client/src/components/ui/Comment/index.tsx
index bb8f0c7b3629681002eaee38bc2eb89b05a4c6f9..a2b8c6950d656b5d355c3bfb80ae289ae6386bf9 100644
--- a/client/src/components/ui/Comment/index.tsx
+++ b/client/src/components/ui/Comment/index.tsx
@@ -17,6 +17,11 @@ export interface CommentProps {
     onError?: () => any;
 }
 
+/**
+ * This component displays information on the given comment. If an error happens in the component
+ * the onError callback will be called. If the displayed comment was created by the logged in user,
+ * the component also gives the ability to edit the comment.
+ */
 export default function Comment({ comment: initialComment, onError }: CommentProps) {
     const [comment, setComment] = useState(initialComment);
     const [user, setUser] = useState<User>();
diff --git a/client/src/components/ui/Completion/index.tsx b/client/src/components/ui/Completion/index.tsx
index 40f15ef486b07635192065c4e81395620d09e540..922fb5b6a88c9ac0ded82b1877023ba3ffb79ccf 100644
--- a/client/src/components/ui/Completion/index.tsx
+++ b/client/src/components/ui/Completion/index.tsx
@@ -11,6 +11,13 @@ export interface CompletionProps {
     color: string;
 }
 
+/**
+ * Parse the given API completion data into the properties required for use with this component. This
+ * means getting the correct color for the status and calculating the percentage.
+ *
+ * @param completion The API completion result
+ * @returns The properties to give to the component
+ */
 export function parseCompletion(completion: ApiCompletion): CompletionProps[] {
     const allAmount = completion.sum ?? 1;
     return [
@@ -37,6 +44,11 @@ export function parseCompletion(completion: ApiCompletion): CompletionProps[] {
     ] 
 }
 
+/**
+ * This element is a completion item display for use in the CompletionGrid component. The component
+ * will display a completion with the given number of percent in the given color and show the given
+ * label property.
+ */
 export default function Completion({ label, percent, color }: CompletionProps) {
     return (
         <div className="completion">
diff --git a/client/src/components/ui/DetailBox/index.tsx b/client/src/components/ui/DetailBox/index.tsx
index b4c81c88c942e06681eea818c08b3a6d5dc75171..781b52bbcb3f7746dfc5323cc2e1ea47a237c26b 100644
--- a/client/src/components/ui/DetailBox/index.tsx
+++ b/client/src/components/ui/DetailBox/index.tsx
@@ -8,6 +8,10 @@ export interface DetailProps {
     label?: string,
 }
 
+/**
+ * This is a detail bod for use in the detail grid. The box will display information, the given icon
+ * and the given title. The information can either be a number or a label.
+ */
 export default function DetailBox({ number, icon, title, label }: DetailProps) {
     return (
         <div className="detail-box">
diff --git a/client/src/components/ui/EditableTag/index.tsx b/client/src/components/ui/EditableTag/index.tsx
index 70b200d70c0d9ca31e362c1e9bf2776088b70035..a2eda4aeb897d15c6c0146d7f5bc08540ea6c921 100644
--- a/client/src/components/ui/EditableTag/index.tsx
+++ b/client/src/components/ui/EditableTag/index.tsx
@@ -1,7 +1,7 @@
 
 import { useEffect, useState } from 'react';
-import Tag from '../Tag';
 
+import Tag from 'components/ui/Tag';
 import './tag.scss';
 
 interface Props<Tag> {
@@ -12,6 +12,11 @@ interface Props<Tag> {
     onChange: (value: Tag) => any;
 }
 
+/**
+ * This component shows a simple tag, and allows the user to edit it by clicking the tag and
+ * selecting from the opening dropdown selection. All options for the tag should be given in the
+ * possible property and the onChange function should change the displayed values.
+ */
 export default function EditableTag<Tag extends string>({ label, icon, color, possible, onChange }: Props<Tag>) {
     const [open, setOpen] = useState(false)
 
diff --git a/client/src/components/ui/ErrorScreen/index.tsx b/client/src/components/ui/ErrorScreen/index.tsx
index f0ec556122beb8fcff6aecc860ff7f05caa5d02b..db8c5c16964526d65a5179ddfa60e7cefec85385 100644
--- a/client/src/components/ui/ErrorScreen/index.tsx
+++ b/client/src/components/ui/ErrorScreen/index.tsx
@@ -6,6 +6,10 @@ interface Props {
     onGoHome?: () => any;
 }
 
+/**
+ * This component shows a simple error message and gives the user the option to reload or go to the
+ * landing page. This component should be used more often in places where data can fail to load.
+ */
 export default function ErrorScreen({ onReload, onGoHome }: Props) {
     return (
         <div className="error-screen">
diff --git a/client/src/components/ui/LoadingScreen/index.tsx b/client/src/components/ui/LoadingScreen/index.tsx
index e8f79733db1a84caac8b301c94ffb44ff236e696..5c105a1a5f3c67a65f87e36c2963a9e4a1e45fde 100644
--- a/client/src/components/ui/LoadingScreen/index.tsx
+++ b/client/src/components/ui/LoadingScreen/index.tsx
@@ -1,6 +1,10 @@
 
 import './loading-screen.scss';
 
+/**
+ * This component implements a simple loading animation. Id does not have to be started and is
+ * visible as soon as the component is displayed.
+ */
 export default function LoadingScreen() {
     return (
         <div className="loading-screen">