diff --git a/my-app/src/presenters/PrerequisitePresenter.jsx b/my-app/src/presenters/PrerequisitePresenter.jsx
index 427abc4..be515f0 100644
--- a/my-app/src/presenters/PrerequisitePresenter.jsx
+++ b/my-app/src/presenters/PrerequisitePresenter.jsx
@@ -489,7 +489,6 @@ export const PrerequisitePresenter = observer((props) => {
                         courses_taken.push(local[i]?.id)
                     }
                 }
-                //console.log(local);
                 let eligible = generateTree(courses_taken, copy);
                 if (eligible) {
                     root["style"]["backgroundColor"] = "lightgreen";
diff --git a/my-app/src/views/Components/CoursePagePopup.jsx b/my-app/src/views/Components/CoursePagePopup.jsx
index 8ec390c..0619866 100644
--- a/my-app/src/views/Components/CoursePagePopup.jsx
+++ b/my-app/src/views/Components/CoursePagePopup.jsx
@@ -2,6 +2,9 @@ import React, { useEffect, useRef, useState } from 'react';
 import RatingComponent from "./RatingComponent.jsx";
 import { model } from "../../model.js";
 
+/**
+ * Handles the popup for a specific course page.
+ */
 
 function CoursePagePopup({
 	favouriteCourses,
diff --git a/my-app/src/views/Components/FavouriteDropdown.jsx b/my-app/src/views/Components/FavouriteDropdown.jsx
index d594546..805f5e0 100644
--- a/my-app/src/views/Components/FavouriteDropdown.jsx
+++ b/my-app/src/views/Components/FavouriteDropdown.jsx
@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 import { observer } from "mobx-react-lite";
 
+/**
+ * Shows the dropdown menu to see the favourite flagged courses.
+ */
 const FavouritesDropdown = observer((props) => {
     const [copied, setCopied] = useState(false);
 
diff --git a/my-app/src/views/Components/RatingComponent.jsx b/my-app/src/views/Components/RatingComponent.jsx
index c3c093c..2340561 100644
--- a/my-app/src/views/Components/RatingComponent.jsx
+++ b/my-app/src/views/Components/RatingComponent.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import StarComponent from "./StarComponent.jsx";
-
+/**
+ * Component that handles reviews in the form of stars. StarComponent is used for the actual stars.
+ */
 const RatingComponent = ({ value = 0, onChange, readOnly = false, className = "" }) => {
     const handleRating = (starIndex, isLeftHalf) => {
         if (readOnly) return;
diff --git a/my-app/src/views/Components/SideBarComponents/ButtonGroupField.jsx b/my-app/src/views/Components/SideBarComponents/ButtonGroupField.jsx
index b1fb75a..9be97c9 100644
--- a/my-app/src/views/Components/SideBarComponents/ButtonGroupField.jsx
+++ b/my-app/src/views/Components/SideBarComponents/ButtonGroupField.jsx
@@ -1,6 +1,12 @@
 import { useEffect, useState } from "react";
 import ToolTip from './ToolTip';
 
+/**
+ * The ButtonGroupField is used as a selector for the period.
+ * Used by the SidebarView.
+ * @param {*} props 
+ * @returns 
+ */
 export default function ButtonGroupField(props) {
   
   const [activeIndex, setActiveIndex] = useState(0);
diff --git a/my-app/src/views/Components/SideBarComponents/CollapsibleCheckboxes.jsx b/my-app/src/views/Components/SideBarComponents/CollapsibleCheckboxes.jsx
index 674453c..2cc7aee 100644
--- a/my-app/src/views/Components/SideBarComponents/CollapsibleCheckboxes.jsx
+++ b/my-app/src/views/Components/SideBarComponents/CollapsibleCheckboxes.jsx
@@ -2,6 +2,11 @@ import React, { useState, useRef } from "react";
 import FilterEnableCheckbox from "./FilterEnableCheckbox";
 import Tooltip from "./ToolTip";
 
+/**
+ * Used by the SidebarView for filtering things with checkboxes.
+ * @param {*} props 
+ * @returns 
+ */
 const CollapsibleCheckboxes = (props) => {
   const [expanded, setExpanded] = useState([]);
   const [filterEnabled, setFilterEnabled] = useState(props.filterEnable);
diff --git a/my-app/src/views/Components/SideBarComponents/CourseTranscriptList.jsx b/my-app/src/views/Components/SideBarComponents/CourseTranscriptList.jsx
index b86bea3..0fa1549 100644
--- a/my-app/src/views/Components/SideBarComponents/CourseTranscriptList.jsx
+++ b/my-app/src/views/Components/SideBarComponents/CourseTranscriptList.jsx
@@ -1,5 +1,8 @@
 import { useState, forwardRef } from "react";
-
+/**
+ * Shows a list of taken courses after uploading a transcript of records. 
+ * Used by the SidebarView.
+ */
 const CourseTranscriptList = forwardRef((props,ref) => {
     let local = [];
     if (localStorage.getItem("completedCourses"))
diff --git a/my-app/src/views/Components/SideBarComponents/DropDownField.jsx b/my-app/src/views/Components/SideBarComponents/DropDownField.jsx
index 883d8f8..f5484e4 100644
--- a/my-app/src/views/Components/SideBarComponents/DropDownField.jsx
+++ b/my-app/src/views/Components/SideBarComponents/DropDownField.jsx
@@ -3,6 +3,12 @@ import { useRef, useEffect } from "react";
 import FilterEnableCheckbox from "./FilterEnableCheckbox";
 import Tooltip from "./ToolTip";
 
+/**
+ * Used for selecting the level of a course. 
+ * See SidebarView for more.
+ * @param {*} props 
+ * @returns 
+ */
 export default function DropDownField(props) {
 
 
diff --git a/my-app/src/views/Components/SideBarComponents/FilterEnableCheckbox.jsx b/my-app/src/views/Components/SideBarComponents/FilterEnableCheckbox.jsx
index d211298..015208a 100644
--- a/my-app/src/views/Components/SideBarComponents/FilterEnableCheckbox.jsx
+++ b/my-app/src/views/Components/SideBarComponents/FilterEnableCheckbox.jsx
@@ -1,5 +1,9 @@
 import React, { forwardRef } from "react";
 
+/**
+ * A basic checkbox to enable the filters. 
+ * Used in the SidebarView.
+ */
 const FilterEnableCheckbox = forwardRef(({ initialValue, onToggle }, ref) => {
     return (
         <div className='mr-3'>
diff --git a/my-app/src/views/Components/SideBarComponents/MultipleChoiceButtons.jsx b/my-app/src/views/Components/SideBarComponents/MultipleChoiceButtons.jsx
index 1d2d992..dae8f75 100644
--- a/my-app/src/views/Components/SideBarComponents/MultipleChoiceButtons.jsx
+++ b/my-app/src/views/Components/SideBarComponents/MultipleChoiceButtons.jsx
@@ -3,6 +3,11 @@ import { useRef, useEffect } from "react";
 import FilterEnableCheckbox from "./FilterEnableCheckbox";
 import Tooltip from "./ToolTip";
 
+/**
+ * A multiple choice selector used to select the period in the SidebarView.
+ * @param {} props 
+ * @returns 
+ */
 export default function MultipleChoiceButtons(props) {
     const [filterEnabled, setFilterEnabled] = useState(props.filterEnable);
     const [selectedItems, setSelectedItems] = useState(props.initialValues || []);
diff --git a/my-app/src/views/Components/SideBarComponents/SliderField.jsx b/my-app/src/views/Components/SideBarComponents/SliderField.jsx
index d2a0965..82ccd65 100644
--- a/my-app/src/views/Components/SideBarComponents/SliderField.jsx
+++ b/my-app/src/views/Components/SideBarComponents/SliderField.jsx
@@ -2,6 +2,12 @@ import React, { useState, useRef, useEffect, useMemo } from "react";
 import FilterEnableCheckbox from "./FilterEnableCheckbox";
 import Tooltip from "./ToolTip";
 
+
+/**
+ * A slider component used to select the credits in the SidebarView.
+ * @param {} props 
+ * @returns 
+ */
 export default function UploadField(props) {
     let paramFieldType = "slider";
 
diff --git a/my-app/src/views/Components/SideBarComponents/ToggleField.jsx b/my-app/src/views/Components/SideBarComponents/ToggleField.jsx
index e9e4f0d..78709a0 100644
--- a/my-app/src/views/Components/SideBarComponents/ToggleField.jsx
+++ b/my-app/src/views/Components/SideBarComponents/ToggleField.jsx
@@ -2,6 +2,11 @@ import React, { useState, useRef } from "react";
 import FilterEnableCheckbox from "./FilterEnableCheckbox";
 import Tooltip from "./ToolTip";
 
+/**
+ * Basic Toggle field used in the SidebarView to select courses in English or Swedish.
+ * @param {} props 
+ * @returns 
+ */
 export default function ToggleField(props) {
 
     let paramFieldType = "toggle";
diff --git a/my-app/src/views/Components/SideBarComponents/UploadField.jsx b/my-app/src/views/Components/SideBarComponents/UploadField.jsx
index 0fd0634..ee91630 100644
--- a/my-app/src/views/Components/SideBarComponents/UploadField.jsx
+++ b/my-app/src/views/Components/SideBarComponents/UploadField.jsx
@@ -6,6 +6,11 @@ import ButtonGroupField from './ButtonGroupField';
 import ToolTip from './ToolTip';
 import UploadGif from "../../../assets/upload.gif";
 
+
+/**
+ * Shows a field to upload a file with. Used in SearchbarView.
+ * @param {*} props 
+ */
 export default function UploadField(props) {
 
     const [isDragging, setIsDragging] = useState(false);
diff --git a/my-app/src/views/Components/StarComponent.jsx b/my-app/src/views/Components/StarComponent.jsx
index bf4b591..33fb0ab 100644
--- a/my-app/src/views/Components/StarComponent.jsx
+++ b/my-app/src/views/Components/StarComponent.jsx
@@ -1,5 +1,8 @@
 import React from 'react';
 
+/**
+ * Allows to rate things from 0 to 5 stars.
+ */
 const StarComponent = ({ index, rating, onRatingChange, onHover, readOnly = false }) => {
     const handleLeftClick = () => {
         if (!readOnly) onRatingChange(index, true);
diff --git a/my-app/src/views/ListView.jsx b/my-app/src/views/ListView.jsx
index 46ee524..33a1868 100644
--- a/my-app/src/views/ListView.jsx
+++ b/my-app/src/views/ListView.jsx
@@ -3,7 +3,6 @@ import { DotPulse, Quantum } from 'ldrs/react';
 import 'ldrs/react/Quantum.css';
 import InfiniteScroll from 'react-infinite-scroll-component';
 
-// Add this helper function at the top of your component
 const highlightText = (text, query) => {
     if (!query || !text) return text;
     
@@ -14,6 +13,11 @@ const highlightText = (text, query) => {
     return text.replace(regex, '<u>$1</u>');
 };
 
+/**
+ * The view displays the courses that match a certain query, filtering etc.
+ * @param {*} props 
+ * @returns 
+ */
 function ListView(props) {
     const [displayedCourses, setDisplayedCourses] = useState([]);
     const [hasMore, setHasMore] = useState(true);
diff --git a/my-app/src/views/PrerequisiteTreeView.jsx b/my-app/src/views/PrerequisiteTreeView.jsx
index cd6f626..4428773 100644
--- a/my-app/src/views/PrerequisiteTreeView.jsx
+++ b/my-app/src/views/PrerequisiteTreeView.jsx
@@ -2,6 +2,10 @@ import React from "react";
 import ReactFlow, { MiniMap, Controls, Background } from "reactflow";
 import "reactflow/dist/style.css";
 
+/**
+ * Displays a ReactFlow window, that is used in the context of a prerequisite tree.
+ * @param {} props 
+ */
 
 // redundent file functionality exist in PrerequisitePresenter.jsx
 
diff --git a/my-app/src/views/ReviewView.jsx b/my-app/src/views/ReviewView.jsx
index 45539d4..2e5585b 100644
--- a/my-app/src/views/ReviewView.jsx
+++ b/my-app/src/views/ReviewView.jsx
@@ -1,6 +1,11 @@
 import React, { useState, useRef, useEffect } from "react";
 import RatingComponent from "../views/Components/RatingComponent.jsx";
 
+/**
+ * Displays the user an interface to give a review for a specified course. Invoked by the ReviewPresenter.
+ * @param {*} props 
+ * @returns 
+ */
 export function ReviewView(props) {
   const grades = ["A", "B", "C", "D", "E", "F"];
   const difficulties = ["Very Easy", "Easy", "Medium", "Hard", "Very Hard"];
diff --git a/my-app/src/views/SearchbarView.jsx b/my-app/src/views/SearchbarView.jsx
index 84e11f7..adeb5f4 100644
--- a/my-app/src/views/SearchbarView.jsx
+++ b/my-app/src/views/SearchbarView.jsx
@@ -3,6 +3,10 @@ import { getAuth, signInWithPopup, signOut, GoogleAuthProvider } from "firebase/
 import project_logo from "../assets/project_icon.png";
 import FavouritesDropdown from "./Components/FavouriteDropdown.jsx";
 
+/**
+ * Displays a searchbar, which accepts user input, e.g. a course id.
+ * @param {*} props 
+ */
 export function SearchbarView(props) {
 //   const [searchQuery, setSearchQuery] = useState("");
   const [user, setUser] = useState(null);
diff --git a/my-app/src/views/SidebarView.jsx b/my-app/src/views/SidebarView.jsx
index d453887..39a85ee 100644
--- a/my-app/src/views/SidebarView.jsx
+++ b/my-app/src/views/SidebarView.jsx
@@ -11,8 +11,7 @@ import MultipleChoiceButtons from './Components/SideBarComponents/MultipleChoice
 /**
  * Represents the sidebar and consists of an upload field, dropdown field, toggle fields, sliders, etc. 
  * It shows the filters and settings for the search. The view is invoked by the SidebarPresenter.
- * @param {*} props 
- * @returns 
+ * @param {*} props
  */
 function SidebarView(props) {
     return (