diff --git a/APIkit.js b/APIkit.js
index 740b4ab1f30fbec57da064fcd78eff935faca20a..a99c700e6836fdab2fdf19c91a8a3cd7e82f6e2e 100644
--- a/APIkit.js
+++ b/APIkit.js
@@ -1,6 +1,13 @@
 import axios from "axios";
 
-// Create axios client, pre-configured with baseURL
+/**
+ * An instance of axios which is used everytime a network request is needed. 
+ * @baseURL where the request should be sent to. 
+ * @timeout how long the system will try to perform the request. 
+ * @headers what type of data is accepted. 
+ * 
+ * @return the instance. 
+ */
 let APIKit = axios.create({
   baseURL: "http://192.168.0.30:5000",
   timeout: 60000,
diff --git a/App.js b/App.js
index c23ec439f3ca207b900f0d064e6a6b4efc48adfc..9739e73486676ad879921df0db1eb6dee7cfc7ca 100644
--- a/App.js
+++ b/App.js
@@ -9,10 +9,26 @@ import theme from "./assets/themes/Theme";
 import RootStackScreen from "./navigation/RootStackScreen";
 import Toast from "react-native-toast-message";
 
+/**
+ * The application. 
+ * 
+ * @store - used for redux and the state store. 
+ * @theme - used for theming and the look of the application (react native paper)
+ * @authContext - the first way of handling the state of the user. Still in use to switch the stack based on the users
+ *                log in state. Should be replaced by redux. 
+ * @userToken - used for handling the user state.
+ * @Toast - used for the toast messages to be visible on all screens when used. 
+ * 
+ * @returns the application. 
+ */
 export default function App() {
   const [isLoading, setIsLoading] = React.useState(true);
   const [userToken, setUserToken] = React.useState(null);
 
+  /**
+   * An early version of handling state in the application, to see if a user is logged in or not. 
+   * Should be replaced by redux in the future. 
+   */
   const authContext = React.useMemo(() => {
     return {
       signInApp: () => {
diff --git a/assets/themes/Theme.js b/assets/themes/Theme.js
index de5471deb592e704ef1ab1b69d16e2e8e3914f2f..2357b5fa089e003a93fdb8d73ced1fa405fb667d 100644
--- a/assets/themes/Theme.js
+++ b/assets/themes/Theme.js
@@ -1,6 +1,9 @@
-import React from "react";
 import { DefaultTheme } from "react-native-paper";
 
+/**
+ * Defines the overall theme of the application. See https://callstack.github.io/react-native-paper/theming.html for more documentation. 
+ */
+
 const theme = {
   ...DefaultTheme,
   roundness: 2,
diff --git a/components/AccountData.js b/components/AccountData.js
index 4ac66cd4e49e270575728102477a729ed8abbb43..ccfd121b76ed4c0e9abbc9288bcd62d8c95c23a4 100644
--- a/components/AccountData.js
+++ b/components/AccountData.js
@@ -1,6 +1,17 @@
 import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 
+/**
+ * This component simply shows a user's data. This is used in the ChangeNameScreen component and
+ * the ChangeEmailScreen component. 
+ * 
+ * @param {String} props.currentLabel - bolded text to show label for current <something>
+ * @param {String} props.current - text to show current data
+ * @param {String} props.newLabel - text to show label for new <something>
+ * 
+ * @returns the component
+ */
+
 const AccountData = (props) => {
   return (
     <View style={styles.container}>
diff --git a/components/CustomActivityIndicator.js b/components/CustomActivityIndicator.js
index cdc300efdd509ef92c6efd86583084e7148228cb..8d87231a4c798a68520a7cdfde7457ec133ee77f 100644
--- a/components/CustomActivityIndicator.js
+++ b/components/CustomActivityIndicator.js
@@ -2,6 +2,20 @@ import React from 'react'
 import { StyleSheet, View, Modal, Text } from 'react-native'
 import { Colors, ActivityIndicator } from "react-native-paper";
 
+/**
+ * This component is used in screens where there are newtwork requests. This can be done better in the
+ * future, but its purpose is to prevent the user from aborting their task until they have received a response, 
+ * and to prevent them from spamming a request. It is also used to visualize that the server is working. 
+ * 
+ * @param {Boolean} props.visible - this is the prop that makes the indicator visible or not. 
+ * @param {Object} props.style - the style can be passed down to this component to customize it. 
+ * @param {String} props.text - optional feature where a text can be passed to the component to
+ *                              indicate that it is processing something. Currently only used when
+ *                              image processing, since it takes some time. 
+ * 
+ * @returns the component
+ */
+
 const CustomActivityIndicator = (props) => {
     return (
         <Modal transparent={true} animationType="none" visible={props.visible}>
diff --git a/components/CustomButton.js b/components/CustomButton.js
index 98f06b201dbcb1d15048227b322854091e46b199..1d2caf78fe40221d8d432a69830e2e69391fa015 100644
--- a/components/CustomButton.js
+++ b/components/CustomButton.js
@@ -2,6 +2,20 @@ import * as React from "react";
 import { Button } from "react-native-paper";
 import { StyleSheet } from "react-native";
 
+/**
+ * A customizable component, that renders a button styled by the react native paper library. 
+ * 
+ * @param {Object} props.style - (Optional) can override the default style of the button where necessary, like size and position
+ * @param {String} props.color - (Optional) color of the button
+ * @param {IconSource} props.icon - (Optional) Icon to display for the button
+ * @param {String} props.mode - Mode/emphasis of the button. The modes outlined and contained have mostly been used.
+ * @param {Function} props.onPress - function that is run when the button the pressed (gets passed down from the mother component in this case)
+ * @param {Boolean} props.disabled - Whether the button is disabled. 
+ * @param {String} props.title - The text on the button
+ * 
+ * @returns the component
+ */
+
 const CustomButton = (props) => (
   <Button
     style={{ ...styles.button, ...props.style }}
diff --git a/components/CustomCamera.js b/components/CustomCamera.js
index 6f1339846679d5ee817786b42a1506f9821bf646..46d5b77f76ba9f14f4d7db5ac91f282881340e6e 100644
--- a/components/CustomCamera.js
+++ b/components/CustomCamera.js
@@ -8,6 +8,14 @@ import {
 import { Camera } from "expo-camera";
 import { IconButton } from "react-native-paper";
 
+/**
+ * This component renders the built-in camera in the application. It is from the expo-camera library. 
+ * 
+ * @param {*} props 
+ * 
+ * @returns the component
+ */
+
 export default function customCamera(props) {
   const [camera, setCamera] = useState(null);
   const [type, setType] = useState(Camera.Constants.Type.back);
diff --git a/components/CustomDialog.js b/components/CustomDialog.js
index d25661ea2a92cd37feeb9a99a2b2706fc37ad040..ffa651a8a2343655e37d19a44b612722e5acc3a3 100644
--- a/components/CustomDialog.js
+++ b/components/CustomDialog.js
@@ -6,6 +6,20 @@ import CustomActivityIndicator from "./CustomActivityIndicator";
 import { toast500, toastError } from "../constants/toasts";
 import CustomRadioButtonGroup from "./CustomRadioButtonGroup";
 
+/**
+ * This component renders a dialog, where the user can choose between different options. In this case, it is used for managing user privileges. 
+ * 
+ * @param {String} props.email - the email of the user that is currently being viewed
+ * @param {String} props.id - the ID of the user that is currently being viewed
+ * @param {Boolean} props.admin - false/true if admin or not
+ * @param {Boolean} props.accepted - false/true if the user is accepted or not
+ * @param {Function} props.onCancel - dismisses the dialog
+ * @param {Function} props.getUsers - to update the user-list after changes are submitted
+ * @param {Function} props.showFeedback - triggers the toast message when changes are submitted
+ * 
+ * @returns the component
+ */
+
 const CustomDialog = (props) => {
   const [value, setValue] = React.useState(null);
   const [showIndicator, setShowIndicator] = useState(false);
diff --git a/components/CustomDropDown.js b/components/CustomDropDown.js
index a0407c95a90c3e9a598b09ea5b68e15322c37021..ee8970af022f175323eb61bf46b2d172a4589a1f 100644
--- a/components/CustomDropDown.js
+++ b/components/CustomDropDown.js
@@ -1,6 +1,19 @@
 import React, { useState } from "react";
 import DropDownPicker from "react-native-dropdown-picker";
 
+/**
+ * The component that renders a dropdown menu. The react native dropdown picker library is used, more 
+ * documentation on https://hossein-zare.github.io/react-native-dropdown-picker-website/ (looks like this doc is updated 
+ * since we used it, might need to update the component to the latest version)
+ * 
+ * @param {String} props.defaultValue - the default value for the dropdown, in some cases null
+ * @param {Array/List} props.myItems - list of items in the dropdown
+ * @param {Function} props.sendDataToParent - a bit of a janky way to send data back to the mother component, 
+ *                                            should consider to look into bind in the future. 
+ * 
+ * @returns the component
+ */
+
 const CustomDropDown = (props) => {
   const [value, setValue] = useState(props.defaultValue);
   const [items, setItems] = useState(props.myItems);
diff --git a/components/CustomHeader.js b/components/CustomHeader.js
index 8a64a49903048c2a0b62caf898d9c05310674b63..34b42f5724d449cb4809e59e5a361984543c6eb4 100644
--- a/components/CustomHeader.js
+++ b/components/CustomHeader.js
@@ -1,6 +1,16 @@
 import * as React from "react";
 import { Appbar } from "react-native-paper";
 
+/**
+ * The header component that shows in top of the screens
+ * 
+ * @param {StackNavigator} navigation - keeps track of where we are in the stack, used to go back to the previous screen
+ * @param {*} previous - checks if there are a previous screen in the stack, and renders a back button if there are
+ * @param {*} scene - can extract the options and data of the navigation
+ * 
+ * @returns the component
+ */
+
 const CustomHeader = ({ navigation, previous, scene }) => {
   const { options } = scene.descriptor;
   const title =
diff --git a/components/CustomImagePicker.js b/components/CustomImagePicker.js
index 2868ee011cf43af5ffe9e76b453c414dc3ba9c97..7805b19dfa2229f7ee50c4e639bad6ce8c53d79a 100644
--- a/components/CustomImagePicker.js
+++ b/components/CustomImagePicker.js
@@ -1,7 +1,16 @@
 import React, { useEffect } from "react";
 import { View, Platform } from "react-native";
 import * as ImagePicker from "expo-image-picker";
-import { IconButton, Colors } from "react-native-paper";
+import { IconButton } from "react-native-paper";
+
+/**
+ * This renders a component that makes the user able to upload an image from their own library. Expo image picker is
+ * the library used, more documentation there 
+ * 
+ * @param {Function} props.setImageUri function that sets the uri for the image. 
+ * 
+ * @returns the component
+ */
 
 const CustomImagePicker = (props) => {
 
diff --git a/components/CustomRadioButtonGroup.js b/components/CustomRadioButtonGroup.js
index 41ee68c987fd731298483eb9489eab582deb87d9..2d35df8abcf887e0fec0ea0a70074d79328d6c77 100644
--- a/components/CustomRadioButtonGroup.js
+++ b/components/CustomRadioButtonGroup.js
@@ -2,6 +2,18 @@ import React, { useState }  from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { RadioButton } from "react-native-paper";
 
+/**
+ * This component renders a customizable radiobutton group. It is used for sex selection (RegisterSalamanderScreen and
+ * ChangeSalamanderScreen), and for managing users (CustomDialog component). 
+ * 
+ * @param {String} props.default - the default selection. Can be set, but is null in most cases. 
+ * @param {Object} values - Contains six data entries, three for the labels and three for the values. 
+ * @param {Function} sendDataToParent - a bit of a janky way to send data back to the mother component, 
+ *                                      should consider to look into bind in the future. 
+ * 
+ * @returns the component. 
+ */
+
 const CustomRadioButtonGroup = (props) => {
 
     const [value, setValue] = useState(props.default);
diff --git a/components/CustomTouchableOpacity.js b/components/CustomTouchableOpacity.js
index 2268a674c5cb5f3a0375d4724fa8feda9963d398..03d8bccb347515517b0f6a8cbca4602229971acd 100644
--- a/components/CustomTouchableOpacity.js
+++ b/components/CustomTouchableOpacity.js
@@ -2,6 +2,17 @@ import React from "react";
 import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
 import { Icon } from "react-native-elements";
 
+/**
+ * This component renders the style used in the ProfileScreen, and makes each entry have the same touchable opacity look. 
+ * 
+ * @param {Function} props.onPress - function that is called when the component is clicked on. 
+ * @param {String} props.title - the text that is visible on the component. 
+ * @param {Object} props.style - (OPTIONAL) customizable style for the component. 
+ * @param {IconSource} props.icon - (OPTIONAL) displays an icon on the component. 
+ * 
+ * @returns the component. 
+ */
+
 const CustomTouchableOpacity = (props) => {
   return (
     <TouchableOpacity style={styles.touchable} onPress={props.onPress}>
diff --git a/components/EditUserHeader.js b/components/EditUserHeader.js
index 397460f65979a37476d933a6063fa67850055896..02bfd36c0d689487914410f12fab84469baa7d69 100644
--- a/components/EditUserHeader.js
+++ b/components/EditUserHeader.js
@@ -2,6 +2,15 @@ import React from "react";
 import { StyleSheet } from "react-native";
 import { Appbar } from "react-native-paper";
 
+/**
+ * This component is almost the same as the CustomHeader, except for not having the back-button option. 
+ * These components can most probably be merged in a way. 
+ * 
+ * @param {*} scene - can extract the options and data of the navigation
+ * 
+ * @returns the component
+ */
+
 const EditUserHeader = ({ scene }) => {
   const { options } = scene.descriptor;
   const title =
diff --git a/components/ImagePreview.js b/components/ImagePreview.js
index 141006b1767f4736d054662af93d60de9b7fcb1a..03a390ad45c5d755abe87d72b53c0bef367dac10 100644
--- a/components/ImagePreview.js
+++ b/components/ImagePreview.js
@@ -6,6 +6,14 @@ import {
 } from "react-native";
 import ImageViewer from "react-native-image-zoom-viewer";
 
+/**
+ * This component displays an image through a modal, used for displaying the salamanders. 
+ * This component can be refactored/improved in the future. 
+ * 
+ * @param {Function} props.setModalVisible - sets the modal visible
+ * @returns 
+ */
+
 export default function imagePreview(props) {
   const [image, setImage] = useState(null);
 
diff --git a/components/ManageSalamanderCard.js b/components/ManageSalamanderCard.js
index 862a808d7ff813ba296ec308a1fdf27b0c950eff..93f3b8bef4bc5bc0e6fe0c38f477a88ad7ebecbc 100644
--- a/components/ManageSalamanderCard.js
+++ b/components/ManageSalamanderCard.js
@@ -3,6 +3,20 @@ import { StyleSheet, View, TouchableOpacity } from "react-native";
 import { Card, Paragraph } from "react-native-paper";
 import { Icon } from "react-native-elements";
 
+/**
+ * This component styles the salamander entry cards that are fetched when getting all salamanders from one location
+ * in the ManageSalamandersScreen. 
+ * 
+ * @param {Function} props.navigateToSalamanderOverview(...) - navigates to the correct screen when clicked on
+ * @param {String} props.title - contains the ID, is also passed to the salamanderOverviewScreen
+ * @param {Integer} props.individual - number of images for a salamander. 
+ * @param {String} props.species - what species the salamander is
+ * @param {String} props.sex - what sex the salamander is
+ * @param {Date} props.date - the date the last saved image is taken. 
+ * 
+ * @returns the component
+ */
+
 const ManageSalamanderCard = (props) => {
   return (
     <TouchableOpacity
diff --git a/components/ManageUser.js b/components/ManageUser.js
index 86b0980861b4917289c24274e1b963a99e7b6778..c5ff7b4952ce0d10021e634928737b873a36f866 100644
--- a/components/ManageUser.js
+++ b/components/ManageUser.js
@@ -5,6 +5,21 @@ import CustomButton from "./CustomButton";
 import CustomDialog from "./CustomDialog";
 import { toastSuccess } from "../constants/toasts";
 
+/**
+ * This component renders a user with a "edit user" button, and is used in a list. The CustomDialog component is triggered when a user clicks
+ * on this button. 
+ * 
+ * @param {String} props.email - the email of the user 
+ * @param {Integer} props.id - the ID of the user 
+ * @param {Boolean} props.admin - false/true if admin or not
+ * @param {Boolean} props.accepted - false/true if the user is accepted or not
+ * @param {Function} props.onCancel - dismisses the dialog
+ * @param {Function} props.getUsers - to update the user-list after changes are submitted
+ * @param {Function} props.showFeedback - triggers the toast message when changes are submitted
+ * 
+ * @returns the component. 
+ */
+
 const ManageUser = (props) => {
   const [visible, setVisible] = React.useState(false);
 
diff --git a/components/MatchResponse.js b/components/MatchResponse.js
index ed3386b82482c33f8023f8ab530d7543639b4e06..f8597267ce8484eba9dd613a600f8c211950c331 100644
--- a/components/MatchResponse.js
+++ b/components/MatchResponse.js
@@ -2,6 +2,21 @@ import * as React from "react";
 import { View, StyleSheet } from "react-native";
 import { Button, Paragraph, Dialog, Portal, Text } from "react-native-paper";
 
+/**
+ * This is the component that displays the information after a user has tried to match a salamander.
+ * It is a modal/portal, that appear when the user has tried to register a salamander. It is used in
+ * both the RegisterSalamanderScreen and the ChangeSalamanderScreen (Whenever there a match process is performed)
+ * 
+ * @param {String} props.responseColor - background color. green color for match and white for no match
+ * @param {Boolean} props.visible - if the component should be visible or not
+ * @param {Function} props.onCancel - redirects the user to the next screen
+ * @param {String} props.responseMatch - The title (Match/No match)
+ * @param {String} props.responseText - The text received from the server
+ * @param {Integer} props.id - the id of the salamander
+ * 
+ * @returns the component.
+ */
+
 const MatchResponse = (props) => {
   return (
     <View>
diff --git a/components/PendingUser.js b/components/PendingUser.js
index cc3bd46228d265efde49b4d04bbbc388188dc607..5b8275b8aad3a2d577380e7ae9865a30c9923cb4 100644
--- a/components/PendingUser.js
+++ b/components/PendingUser.js
@@ -5,6 +5,17 @@ import { IconButton, Colors } from "react-native-paper";
 import APIKit from "../APIkit";
 import { toast500, toastError, toastSuccess } from "../constants/toasts";
 
+/**
+ * The component that renders the users in the PendingUsersScreen. Consists of the users email, 
+ * a button for accepting the user and a button for denying access to the user. 
+ * 
+ * @param {Function} props.getPendingUsers - updates the list after a user has been accepted/denied
+ * @param {String} props.email - the email of the user
+ * @param {Integer} props.id - the ID of the user 
+ *  
+ * @returns the component
+ */
+
 const PendingUser = (props) => {
   const acceptUser = (email, id) => {
     let bodyFormData = new FormData();
diff --git a/components/SalamanderData.js b/components/SalamanderData.js
index 22c37a324139ae57314f851f86605dfc2c70ddc4..8d69f1a6acb3fe2e8777983b010192ae68f67d1c 100644
--- a/components/SalamanderData.js
+++ b/components/SalamanderData.js
@@ -2,6 +2,17 @@ import React from "react";
 import { StyleSheet, Text } from "react-native";
 import { Card, Paragraph } from "react-native-paper";
 
+/**
+ * This components shows salamader data in a card in the SalamanderOverviewScreen. 
+ * 
+ * @param {Integer} props.id - the ID of the salamander 
+ * @param {String} props.location - the location of the salamander 
+ * @param {String} props.sex - the sex of the salamander
+ * @param {String} props.species - the species of the salamander
+ * 
+ * @returns the component
+ */
+
 const SalamanderData = (props) => {
   return (
     <Card style={styles.card}>
diff --git a/constants/context.js b/constants/context.js
index c0dec1a43be4b3eae7a6692c673e1c448f76c74e..f94152962e940e8093b8542f8658b2b2fb8f4969 100644
--- a/constants/context.js
+++ b/constants/context.js
@@ -1,3 +1,8 @@
 import React from "react";
 
+/**
+ * Used for remembering if the user is logged in or not. It was a early way of doing it, it might be better to
+ * stick with using redux instead to handle which screens should be visible based on user status. 
+ */
+
 export const AuthContext = React.createContext();
diff --git a/constants/inputRequirements.js b/constants/inputRequirements.js
index bf0061cfce3e0de9c2c3c36e47335ad2bbbd10d5..e6a63660ba1ed90e5e6f6ed0f3cbc38592ac9250 100644
--- a/constants/inputRequirements.js
+++ b/constants/inputRequirements.js
@@ -1,3 +1,8 @@
+
+/**
+ * These constants are used for the restrictions and regexes throughout the application
+ */
+
 export const NAME_MAX_LENGTH = 40;
 export const NUMBER_MAX_LENGTH = 15;
 export const LOCATION_NUMBER_MAX_LENGTH = 4;
diff --git a/constants/toasts.js b/constants/toasts.js
index 71cc476e22c354e08c01716977f9fa1de9dde98d..d700fcccb188e48801fdd8beb0e27581c4a4118a 100644
--- a/constants/toasts.js
+++ b/constants/toasts.js
@@ -1,6 +1,16 @@
-import React from 'react'
+/**
+ * This file includes various toasts the user can get. More documentation on this: https://www.npmjs.com/package/react-native-toast-message
+ */
+
 import Toast from "react-native-toast-message";
 
+/**
+ * Shows a toast/response message to the user that everything went well (statuscode 200). 
+ * 
+ * @param {String} pos - position of the toast
+ * @param {Integer} time - how long the toast should be visible
+ * @param {String} message - displays information to the user. 
+ */
 export const toastSuccess = (pos, time, message) => {
     Toast.show({
         type: "success",
@@ -11,6 +21,13 @@ export const toastSuccess = (pos, time, message) => {
       });
 }
 
+/**
+ * Shows a toast/response message to the user that something went wrong (statuscode 4XX). 
+ * 
+ * @param {String} pos - position of the toast
+ * @param {Integer} time - how long the toast should be visible
+ * @param {String} message - displays information to the user. 
+ */
 export const toastError = (pos, time, message) => {
     Toast.show({
         type: "error",
@@ -21,6 +38,13 @@ export const toastError = (pos, time, message) => {
       });
 }
 
+/**
+ * Shows a toast/response message that provides information to the user. 
+ * 
+ * @param {String} pos - position of the toast
+ * @param {Integer} time - how long the toast should be visible
+ * @param {String} message - displays information to the user. 
+ */
 export const toastInfo = (pos, time, message) => {
     Toast.show({
         type: "info",
@@ -31,6 +55,11 @@ export const toastInfo = (pos, time, message) => {
       });
 }
 
+/**
+ * Will be displayed if the server is not responding/it failed before reaching the server. 
+ * 
+ * @param {Integer} statusCode - will provide different messages based on numerous status codes. 
+ */
 export const toast500 = (statusCode) => {
 
     let errorText = ""; 
diff --git a/navigation/AuthStackScreen.js b/navigation/AuthStackScreen.js
index 9cfaea74fe0e9f720719626d471b35fd70d1f889..dc08403a296811cab7aa8a878d901bba453632eb 100644
--- a/navigation/AuthStackScreen.js
+++ b/navigation/AuthStackScreen.js
@@ -6,6 +6,11 @@ import SignUpScreen from "../screens/SignUpScreen";
 
 const AuthStack = createStackNavigator();
 
+/**
+ * A stack navigator that contains the authentication screens. 
+ * 
+ * @returns the component
+ */
 const AuthStackScreen = () => (
   <AuthStack.Navigator
     screenOptions={{
diff --git a/navigation/ModalStackScreen.js b/navigation/ModalStackScreen.js
index f17e44bdc40d21d6664919129ad1369457a74f57..e35fdd02eee850125fdf9ee015bf9ca2cf12b97c 100644
--- a/navigation/ModalStackScreen.js
+++ b/navigation/ModalStackScreen.js
@@ -17,6 +17,11 @@ import { EditLocationScreen } from "../screens/home/EditLocationScreen";
 
 const ModalStack = createStackNavigator();
 
+/**
+ * A stack navigator which contains all screens that is a modal. It if fairly large, and could be organized in a better way?
+ * 
+ * @returns the component
+ */
 const ModalStackScreen = () => (
   <ModalStack.Navigator
     screenOptions={{
diff --git a/navigation/RootStackScreen.js b/navigation/RootStackScreen.js
index ec43944a9dea764757ed291ae3823c7a7345b9d1..2ba631baeb9c809111ebf317d9ed0ae1edef5c76 100644
--- a/navigation/RootStackScreen.js
+++ b/navigation/RootStackScreen.js
@@ -7,6 +7,13 @@ import ModalStackScreen from "./ModalStackScreen";
 
 const RootStack = createStackNavigator();
 
+/**
+ * A stack navigator that contains the three navigator screens TabsScreen, AuthstackScreen and ModalStackScreen.
+ * 
+ * @param {String} usertoken - will display the app screens if there are a usertoken, displays the authstack screens if there are none. 
+ * 
+ * @returns the component
+ */
 const RootStackScreen = ({ userToken }) => (
   <RootStack.Navigator headerMode="none" mode="modal">
     {userToken ? (
diff --git a/navigation/TabsScreen.js b/navigation/TabsScreen.js
index baac5f032a92a5efe6b229d72b6df012f9bdba61..56f003e67016ed365dbcb746569459932229a6f8 100644
--- a/navigation/TabsScreen.js
+++ b/navigation/TabsScreen.js
@@ -14,6 +14,12 @@ const HomeStack = createStackNavigator();
 const CameraStack = createStackNavigator();
 const ProfileStack = createStackNavigator();
 
+/**
+ * The TabsScreen consists of three stack navigator screens, home, camera and profile. 
+ * 
+ * @returns the component
+ */
+
 const ProfileStackScreen = () => (
   <ProfileStack.Navigator
     initialRouteName="Profile"
diff --git a/redux/actionConstants.js b/redux/actionConstants.js
index 35661833611ca430961985ed08a642bfa6065f13..e69315589be72b564d55212e2b836202c7aea420 100644
--- a/redux/actionConstants.js
+++ b/redux/actionConstants.js
@@ -1,3 +1,5 @@
+// All actions used in redux
+
 export const USER_LOGIN = 'DO_LOGIN';
 export const USER_LOGOUT = 'DO_LOGOUT';
 export const ON_ERROR = 'ON_ERROR';
diff --git a/screens/SignInScreen.js b/screens/SignInScreen.js
index c5f538ec8d1c4e11c47f4719ddfe9280691da0f4..18a3abd32a4c85b8068c9f6dce82f680640fb34b 100644
--- a/screens/SignInScreen.js
+++ b/screens/SignInScreen.js
@@ -19,6 +19,13 @@ import { Button } from "react-native-paper";
 import CustomActivityIndicator from "../components/CustomActivityIndicator";
 import { NAME_MAX_LENGTH } from "../constants/inputRequirements";
 
+/**
+ * This component renders the screen where the user can sign in. The actual sign in process is done in a user action through redux. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _SignInScreen = (props) => {
   const { onUserLogin } = props;
 
diff --git a/screens/SignUpScreen.js b/screens/SignUpScreen.js
index be2a42e0e91fa57e2652e37c3916a3494fd4ee2c..03b266a5d6107603ef03ed93bb982b628674cf01 100644
--- a/screens/SignUpScreen.js
+++ b/screens/SignUpScreen.js
@@ -24,6 +24,14 @@ import APIKit from "../APIkit";
 import CustomActivityIndicator from "../components/CustomActivityIndicator";
 import { toast500, toastError, toastSuccess } from "../constants/toasts";
 
+/**
+ * This component renders the screen where the user can create a new user. They will be navigated to the sign in screen when the user is
+ * created, and has to wait for an administrator to grant them access to use the application. 
+ * 
+ * @param {*} navigation - extracted from props, used for navigation
+ * 
+ * @returns the component. 
+ */
 const SignUpScreen = ({ navigation }) => {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
diff --git a/screens/VerifyPasswordScreen.js b/screens/VerifyPasswordScreen.js
index 0d7a2e8ad1c5b35e0c4eadabda980494bc23e8e7..06e1cd0484dad56eade252290c90e86d8a401b1b 100644
--- a/screens/VerifyPasswordScreen.js
+++ b/screens/VerifyPasswordScreen.js
@@ -12,6 +12,15 @@ import APIKit from "../APIkit";
 import CustomActivityIndicator from "../components/CustomActivityIndicator";
 import { toast500, toastError } from "../constants/toasts";
 
+/**
+ * This component renders the screen where the user needs to re-authenticate to get access to a critical feature. 
+ * 
+ * @param {*} route - extracted from props, used to get data from the previous screen. In this case, to know which screen should be 
+ *                    navigated to next. 
+ * @param {*} navigation - extracted from props, used for navigation. 
+ *  
+ * @returns the component. 
+ */
 const VerifyPasswordScreen = ({ route, navigation }) => {
   const { nextNavigation } = route.params;
 
diff --git a/screens/admin/ChangeSalamanderScreen.js b/screens/admin/ChangeSalamanderScreen.js
index 58fca85f54e9334e1b715c8d104cc365d6415372..356bebf365e52a0ea7f0ee2a5a4ed5ca219df361 100644
--- a/screens/admin/ChangeSalamanderScreen.js
+++ b/screens/admin/ChangeSalamanderScreen.js
@@ -41,6 +41,18 @@ const species = [
 const sexValues = {firstValue:"female", secondValue:"male", thirdValue:"juvenile", 
 firstText:"Female", secondText:"Male", thirdText:"Juvenile"};
 
+/**
+ * This component renders the ChangeSalamanderScreen in the application. In this screen, and administrator can edit an individual entry of one salamander. 
+ * The admin can edit location, species, sex, weight and length. If the user edits either location, species or sex, the salamander will be rematched
+ * by the server, and will either get a match and adapt this salamanders ID, or no match, and a new salamander will be made with a new ID. 
+ * 
+ * This is the largest component, and it might be possible to refactor it, and make it shorter. 
+ * 
+ * @param {*} props - the userReducer, which contains the state of the user, is extracted from redux, as well as the updateSalamanderList. 
+ *                    Like all the other components, props.navigation is used to navigate to screens. 
+ * 
+ * @returns the component
+ */
 const _ChangeSalamanderScreen = (props) => {
   const { userReducer, updateSalamanderList } = props;
   const { locationList } = userReducer;
diff --git a/screens/admin/ManageSalamandersScreen.js b/screens/admin/ManageSalamandersScreen.js
index 8d2be20bdacd1903042b1efecd22b4d384ecfef0..d893faf987cddc9f0574ba352c34cf0ab6becb33 100644
--- a/screens/admin/ManageSalamandersScreen.js
+++ b/screens/admin/ManageSalamandersScreen.js
@@ -20,6 +20,14 @@ import APIKit from "../../APIkit";
 import CustomActivityIndicator from "../../components/CustomActivityIndicator";
 import { toastError, toast500 } from "../../constants/toasts";
 
+/**
+ * This component renders the screen where an administrator can fetch salamanders from a given location, and look at metadata. 
+ * It consists of a flatlist that renders cards that contains all salamanders at one location. See ManageSalamanderCard for more details. 
+ * 
+ * @param {*} props used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _ManageSalamandersScreen = (props) => {
   const { userReducer, updateSalamanderList, removeSalamanderList } = props;
   const { locationList, salamanderList } = userReducer;
@@ -31,7 +39,7 @@ const _ManageSalamandersScreen = (props) => {
     setLocationValue(value);
   };
 
-  // for navigation to work on android
+  // To make the back-button on android behave correctly and not go to the VerifyPasswordScreen
   React.useEffect(() => {
     const unsubscribe = props.navigation.addListener("focus", () => {
       if (locationValue) {
diff --git a/screens/admin/ManageUsersScreen.js b/screens/admin/ManageUsersScreen.js
index adc0b8d5bc56c4d5a361e3c1038f0dda45a1693d..ca94a03c1dd62208cc1978f5360a2837cfd91114 100644
--- a/screens/admin/ManageUsersScreen.js
+++ b/screens/admin/ManageUsersScreen.js
@@ -8,6 +8,16 @@ import ManageUser from "../../components/ManageUser";
 import { toastError, toast500 } from "../../constants/toasts";
 import { Colors } from "react-native-paper"
 
+/**
+ * This component renders the screen where an administrator can manage accepted users in the system. To access this screen, 
+ * The admin has to re-authenticate, as it is about handling sensitive data. The admin can revoke users access, 
+ * make users admin or remove admin privileges. It consists of a list containing users in the system, displaying their emails and an edit button. 
+ * See ManageUser for more details. 
+ * 
+ * @param {*} navigation - extracted from props, used for navigating to other screens. 
+ *  
+ * @returns the component. 
+ */
 const ManageUsersScreen = ({ navigation }) => {
   const [users, setUsers] = useState([]);
   const [showIndicator, setShowIndicator] = useState(false);
@@ -39,7 +49,7 @@ const ManageUsersScreen = ({ navigation }) => {
       });
   };
 
-  // for navigation on android to work
+  // To make the back-button on android behave correctly, and not go to the VerifyPasswordScreen
   useEffect(() => {
     getUsers();
     navigation.addListener('beforeRemove', (e) => {
diff --git a/screens/admin/PendingUsersScreen.js b/screens/admin/PendingUsersScreen.js
index 984c1b9050ddb98f6054246b4953c89e0186ce0d..5d8b39db3d8c02a8fcdbbea2a8409a2e36b62899 100644
--- a/screens/admin/PendingUsersScreen.js
+++ b/screens/admin/PendingUsersScreen.js
@@ -14,6 +14,18 @@ import PendingUser from "../../components/PendingUser";
 import { toast500, toastError } from "../../constants/toasts";
 import { Colors } from "react-native-paper"
  
+/**
+ * This component renders the screen where an administrator can look at pending user, who are waiting for access to the system. 
+ * To access this screen, The admin has to re-authenticate, as it is about handling sensitive data.
+ * The admin can either accept or deny a user. If the admin denies a users access, the user will be deleted from the system, and has to make a new account
+ * at a later date. If the admin accepts a user, the user will gain access to all non-administrative features. The user can now be seen in manageUsersScreen. 
+ * It consists of a list containing pending users in the system, displaying their emails and a button for denying access and a button for granting access. 
+ * See ManageUser for more details. 
+ * 
+ * @param {*} navigation - extracted from props, used for navigating to other screens. 
+ * 
+ * @returns the component.
+ */
 const PendingUsersScreen = ({ navigation }) => {
   const [pendingUsers, setPendingUsers] = useState([]);
   const [showIndicator, setShowIndicator] = useState(false);
diff --git a/screens/admin/SalamanderOverviewScreen.js b/screens/admin/SalamanderOverviewScreen.js
index 6146092e4d822ba37b8f5160d8afa7ee8600a364..17c768556c0ef24662efc63b5df101b8e051c0e5 100644
--- a/screens/admin/SalamanderOverviewScreen.js
+++ b/screens/admin/SalamanderOverviewScreen.js
@@ -20,6 +20,16 @@ import { toast500, toastError } from "../../constants/toasts";
 
 const deviceWidth = Dimensions.get("window").width;
 
+/**
+ * This component renders the SalamanderOverviewScreen. This is the screen an administrator will be navigated to if they click on one of the 
+ * cards in the ManageSalamandersScreen. Here, an overview of the salamander is shown, all images taken of the salamander, and metadata of the entry. 
+ * If the admin wants to change one of the entries, they can choose one of the images/entries to edit it. They will then be navigated to the ChangeSalamanderScreen. 
+ * 
+ * @param {*} navigation - extracted from props, used for navigating to other screens. 
+ * @param {*} route - extracted from props, used for getting data from the last screen. 
+ * 
+ * @returns the component. 
+ */
 const SalamanderOverviewScreen = ({ navigation, route }) => {
   const { salamanderData, getSalamanders } = route.params;
 
@@ -115,7 +125,6 @@ const SalamanderOverviewScreen = ({ navigation, route }) => {
               <ImageViewer
                 enableSwipeDown={true}
                 onCancel={() => setPreviewMode(false)}
-                // onCancel={() => setPreviewMode(false)}
                 imageUrls={images}
               />
             </Modal>
diff --git a/screens/camera/CameraScreen.js b/screens/camera/CameraScreen.js
index dfea32f4402e7cfa83bef38c63179e1aa993ed0a..0ebb2d2d5969123737f6ccf49f43e6fe6b3a518c 100644
--- a/screens/camera/CameraScreen.js
+++ b/screens/camera/CameraScreen.js
@@ -23,6 +23,15 @@ import { toast500, toastError } from "../../constants/toasts";
 
 const deviceWidth = Dimensions.get("window").width;
 
+/**
+ * This component renders the camera screen. This screen consists of an image picker, which makes the user able to upload images from their phones
+ * library. It also consists of a built-in camera, where the user can take a photo while in the application. The user might need to grant premission for 
+ * the app to be able to use the camera. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component
+ */
 const _CameraScreen = (props) => {
 
   const [isCameraMode, setShowCamera] = useState(false);
diff --git a/screens/camera/RegisterSalamanderScreen.js b/screens/camera/RegisterSalamanderScreen.js
index c106d6a3b842d51947948f60ebf22cf02d945e6d..16291ce360b9b054eef7668ada4542ebb3905d63 100644
--- a/screens/camera/RegisterSalamanderScreen.js
+++ b/screens/camera/RegisterSalamanderScreen.js
@@ -36,6 +36,16 @@ const species = [
 const sexValues = {firstValue:"female", secondValue:"male", thirdValue:"juvenile", 
 firstText:"Female", secondText:"Male", thirdText:"Juvenile"};
 
+/**
+ * This component renders the screen where the user can register a new salamander entry. When the user has provided all mandatory data, 
+ * the salamander will be matched agaist the other registered salamander with the same data (location, species, sex). If there is a match, 
+ * a green popup screen will show, providing information about which salamander it was matched with. If there was no match, a white poput will show, 
+ * and a new salamander will be registered in the database with a new ID. 
+ * 
+ * @param {*} props - used for redux, navigation and route to get data from the previous screen.
+ * 
+ * @returns the component.
+ */
 const _RegisterSalamanderScreen = (props) => {
   const { salamanderSex, salamanderSpecies, image } = props.route.params;
   const { userReducer, updateLocations, addLastLocation } = props;
diff --git a/screens/home/EditLocationScreen.js b/screens/home/EditLocationScreen.js
index e590c9901ebd44c61ebed8cb20a07cc1933b5d4e..f6b9513c6605bc91298bd3622cc9ba4252f8fee0 100644
--- a/screens/home/EditLocationScreen.js
+++ b/screens/home/EditLocationScreen.js
@@ -24,6 +24,14 @@ import {
 } from "../../constants/inputRequirements";
 import { toast500, toastError, toastSuccess } from "../../constants/toasts";
 
+/**
+ * This component renders the screen where a user can edit an existing location. The user can either edit the name, the radius or, if there
+ * are no salamanders at the given location, delete the location from the system. 
+ * 
+ * @param {*} props - used for redux, navigation and route to get data from the previous screen.
+ *  
+ * @returns the component
+ */
 const _EditLocationScreen = (props) => {
   const { locationId, locationName, locationRadius } = props.route.params;
 
diff --git a/screens/home/HomeScreen.js b/screens/home/HomeScreen.js
index 9c3c77f86d7da243369d8f902e00c017c413f452..a9616bf9008be429072936de48bef11eb7405e4f 100644
--- a/screens/home/HomeScreen.js
+++ b/screens/home/HomeScreen.js
@@ -8,6 +8,15 @@ import { connect } from "react-redux";
 import { FAB } from "react-native-paper";
 import CustomActivityIndicator from "../../components/CustomActivityIndicator";
 
+/**
+ * This component renders the home screen. This screen consists primarily of a map, and the user can either register a new location or edit an
+ * existing one from this screen. The user can also see all registered locations, and if they have given permission to the app to use their location, 
+ * their current location will be shown on the map. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _HomeScreen = (props) => {
   const { userReducer, updateLocations } = props;
 
diff --git a/screens/home/RegisterLocationScreen.js b/screens/home/RegisterLocationScreen.js
index 63708d9a269375bce3c17beaf4b80e1a6bf86e1e..1a19f09f7580936346e96cc46d86e296cca9709d 100644
--- a/screens/home/RegisterLocationScreen.js
+++ b/screens/home/RegisterLocationScreen.js
@@ -24,6 +24,14 @@ import {
 } from "../../constants/inputRequirements";
 import { toast500, toastError, toastSuccess } from "../../constants/toasts";
 
+/**
+ * This component renders the screen where a user can register a new location. The user will have to provide a name and a radius for the 
+ * new location. When the location is approved, the user will be taken back to the home screen. 
+ * 
+ * @param {*} props - used for redux, navigation and route to get data from the previous screen.
+ * 
+ * @returns the component. 
+ */
 const _RegisterLocationScreen = (props) => {
   const { longitude, latitude } = props.route.params;
 
diff --git a/screens/profile/ChangeEmailScreen.js b/screens/profile/ChangeEmailScreen.js
index d39354a328a08c29bcd199f89b14ea6852420dd8..1ab90230a31083012f780467e50d32b8334c89d0 100644
--- a/screens/profile/ChangeEmailScreen.js
+++ b/screens/profile/ChangeEmailScreen.js
@@ -24,6 +24,14 @@ import {
   toast500
 } from "../../constants/toasts"; 
 
+/**
+ * This component renders the screen where a user can change their email. To do this, the user has to re-authenicate due to it being a critical 
+ * feature. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _ChangeEmailScreen = (props) => {
   const { userReducer, onEditEmail } = props;
   const [email, setEmail] = useState("");
@@ -32,7 +40,7 @@ const _ChangeEmailScreen = (props) => {
 
   const { user } = userReducer;
 
-  // for navigation to work on android
+  // To make the back-button on android behave correctly and not go to the VerifyPasswordScreen
   useEffect(() => {
     props.navigation.addListener('beforeRemove', (e) => {
       e.preventDefault();
diff --git a/screens/profile/ChangeNameScreen.js b/screens/profile/ChangeNameScreen.js
index 5d34dde4b2792dbfb4910a3d7abdefc207fa414c..d94be6f5b00d76b54b1a71658a4382685d8408ea 100644
--- a/screens/profile/ChangeNameScreen.js
+++ b/screens/profile/ChangeNameScreen.js
@@ -21,6 +21,14 @@ import {
   toast500
 } from "../../constants/toasts"; 
 
+/**
+ * This component renders the screen where a user can change their name in the system. The name is simply for aesthetic reasons, and is not used for 
+ * anything other than being shown to the user. Can be used in future releases. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _ChangeNameScreen = (props) => {
   const { userReducer, onEditName } = props;
 
diff --git a/screens/profile/ChangePasswordScreen.js b/screens/profile/ChangePasswordScreen.js
index bb47aeb78e2956c7ff9c236302d63437e14ab8a7..d82389b676de8ab0dfe626e281539518b5fd733f 100644
--- a/screens/profile/ChangePasswordScreen.js
+++ b/screens/profile/ChangePasswordScreen.js
@@ -20,6 +20,14 @@ import {
   toast500
 } from "../../constants/toasts"; 
 
+/**
+ * This component renders the screen where a user can change their password. The user needs to re-authenticate to access this
+ * feature, due to it being critical. 
+ * 
+ * @param {*} navigation - extracted from props and used for navigation. 
+ *  
+ * @returns the component. 
+ */
 const ChangePasswordScreen = ({ navigation }) => {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
diff --git a/screens/profile/DeleteAccountScreen.js b/screens/profile/DeleteAccountScreen.js
index f14324ad95b33dfdaff209244aa102af11f09169..2f1441689780fd126847f5f8f62a7d05d3e4aba5 100644
--- a/screens/profile/DeleteAccountScreen.js
+++ b/screens/profile/DeleteAccountScreen.js
@@ -12,6 +12,14 @@ import {
   toast500
 } from "../../constants/toasts";
 
+/**
+ * This component renders the screen where the user can delete their account from the system. The user needs to re-authenticate
+ * to access this feature, due to it being critical. To delete their account, they have to confirm the decision.
+ * 
+ * @param {*} props - used for redux and navigation.
+ * 
+ * @returns the component. 
+ */
 const _DeleteAccountScreen = (props) => {
   const { signOutApp } = React.useContext(AuthContext);
 
diff --git a/screens/profile/ProfileScreen.js b/screens/profile/ProfileScreen.js
index 1509e976c74fca457e7ac1185732fbfee82cd21c..b67d8b32e93dd9f9e404822b1340cba037fdb441 100644
--- a/screens/profile/ProfileScreen.js
+++ b/screens/profile/ProfileScreen.js
@@ -7,6 +7,15 @@ import CustomTouchableOpacity from "../../components/CustomTouchableOpacity";
 import { AuthContext } from "../../constants/context";
 import { onUserSignOut } from "../../redux/actions/UserActions";
 
+/**
+ * This component renders the profile screen where the user can access all features regarding data in the system. Some features are
+ * restricted to role, and some featuers require re-authentication to get access. The user can also log out of the application through
+ * this screen. 
+ * 
+ * @param {*} props - used for redux and navigation. 
+ * 
+ * @returns the component. 
+ */
 const _ProfileScreen = (props) => {
   const { userReducer, onUserSignOut } = props;