diff --git a/client/src/App.tsx b/client/src/App.tsx
index fab142f7a194f228910f50af3968452b39c179b6..8ab75ad02c1c58787fb3236161695bbeeeb59c5d 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -9,6 +9,7 @@ import { ThemeProvider } from 'styled-components'
 import Main from './Main'
 import { Wrapper } from './styled'
 
+/** Create a theme for the application with the colors specified by customer */
 const theme = createMuiTheme({
   palette: {
     primary: {
diff --git a/client/src/pages/login/components/AdminLogin.test.tsx b/client/src/pages/login/components/AdminLogin.test.tsx
index 3be87593f4e58698597d39fe6d3ac91a77ac133a..06d81259ae021696995c6454178cbe29dc5dec86 100644
--- a/client/src/pages/login/components/AdminLogin.test.tsx
+++ b/client/src/pages/login/components/AdminLogin.test.tsx
@@ -4,6 +4,8 @@ import { Provider } from 'react-redux'
 import store from '../../../store'
 import AdminLogin from './AdminLogin'
 
+/** Test AdminLogin */
+
 it('renders admin login', () => {
   render(
     <Provider store={store}>
diff --git a/client/src/pages/login/components/AdminLogin.tsx b/client/src/pages/login/components/AdminLogin.tsx
index c33f338da69a6d2f0d1733a6d5bb777461cdefe4..e4c383bbf830ccc9d968d846d1cb2b0d77d13e2e 100644
--- a/client/src/pages/login/components/AdminLogin.tsx
+++ b/client/src/pages/login/components/AdminLogin.tsx
@@ -20,6 +20,7 @@ interface formError {
   message: string
 }
 
+/** Form logic with some requirements and constraints */
 const accountSchema: Yup.SchemaOf<AccountLoginFormModel> = Yup.object({
   model: Yup.object()
     .shape({
@@ -42,6 +43,8 @@ const AdminLogin: React.FC = () => {
     }
     setLoading(UILoading)
   }, [UIErrors, UILoading])
+
+  /** dispatch with the entered values */
   const handleAccountSubmit = (values: AccountLoginFormModel, actions: FormikHelpers<AccountLoginFormModel>) => {
     dispatch(loginUser(values.model, history))
   }
@@ -50,6 +53,8 @@ const AdminLogin: React.FC = () => {
   const accountInitialValues: AccountLoginFormModel = {
     model: { email: '', password: '' },
   }
+
+  /** Render the form */
   return (
     <Formik initialValues={accountInitialValues} validationSchema={accountSchema} onSubmit={handleAccountSubmit}>
       {(formik) => (
diff --git a/client/src/pages/login/components/CompetitionLogin.test.tsx b/client/src/pages/login/components/CompetitionLogin.test.tsx
index 862880bc5006288dc76b022dc9ec171c607b13d5..5adbb7eb1f6ce179837d9f7ad3d319db47e4fd67 100644
--- a/client/src/pages/login/components/CompetitionLogin.test.tsx
+++ b/client/src/pages/login/components/CompetitionLogin.test.tsx
@@ -4,6 +4,8 @@ import { Provider } from 'react-redux'
 import store from '../../../store'
 import CompetitionLogin from './CompetitionLogin'
 
+/** Test CompetitionLogin */
+
 it('renders competition login', () => {
   render(
     <Provider store={store}>
diff --git a/client/src/pages/views/OperatorViewPage.tsx b/client/src/pages/views/OperatorViewPage.tsx
index 21fd43df7e111bbf9c9313bd941aa5ea66a87e0d..130240c20fcff7ee742347c06b38b0424232fbb9 100644
--- a/client/src/pages/views/OperatorViewPage.tsx
+++ b/client/src/pages/views/OperatorViewPage.tsx
@@ -122,6 +122,7 @@ const OperatorViewPage: React.FC = () => {
     endCompetition()
   }
 
+  /** Handles the closing of popup*/
   const handleClose = () => {
     setOpen(false)
     setOpenCode(false)
@@ -133,17 +134,20 @@ const OperatorViewPage: React.FC = () => {
     setOpen(true)
   }
 
+  /** Handles opening the code popup */
   const handleOpenCodes = async () => {
     await getCodes()
     setOpenCode(true)
   }
 
+  /** Function that runs when the operator closes the competition */
   const endCompetition = () => {
     setOpen(false)
     socketEndPresentation()
     dispatch(logoutCompetition('Operator'))
   }
 
+  /** Retrives the codes from the server */
   const getCodes = async () => {
     await axios
       .get(`/api/competitions/${activeId}/codes`)
@@ -179,6 +183,7 @@ const OperatorViewPage: React.FC = () => {
     return typeName
   }
 
+  /** Starting the timer */
   const handleStartTimer = () => {
     if (!slideTimer) return
 
@@ -186,11 +191,13 @@ const OperatorViewPage: React.FC = () => {
     else socketSync({ timer: { ...timer, enabled: false } })
   }
 
+  /** Function that runs when operator presses the next slide button */
   const handleSetNextSlide = () => {
     if (activeSlideOrder !== undefined)
       socketSync({ slide_order: activeSlideOrder + 1, timer: { value: null, enabled: false } })
   }
 
+  /** Function that runs when operator presses the previous slide button */
   const handleSetPrevSlide = () => {
     if (activeSlideOrder !== undefined)
       socketSync({ slide_order: activeSlideOrder - 1, timer: { value: null, enabled: false } })
@@ -205,7 +212,7 @@ const OperatorViewPage: React.FC = () => {
           </DialogTitle>
         </Center>
         <DialogContent>
-          {/* <DialogContentText>Här visas tävlingskoderna till den valda tävlingen.</DialogContentText> */}
+          {/** competition codes popup */}
           {codes &&
             codes.map((code) => (
               <ListItem key={code.id} style={{ display: 'flex' }}>
@@ -246,6 +253,8 @@ const OperatorViewPage: React.FC = () => {
           </Button>
         </DialogActions>
       </Dialog>
+
+      {/* Verify exit popup */}
       <OperatorHeader color="primary" position="fixed">
         <Tooltip title="Avsluta tävling" arrow>
           <OperatorQuitButton onClick={handleVerifyExit} variant="contained" color="secondary">
@@ -279,12 +288,16 @@ const OperatorViewPage: React.FC = () => {
         </OperatorHeaderItem>
       </OperatorHeader>
       {<div style={{ minHeight: 64 }} />}
+
+      {/* Show the correct slide */}
       <OperatorContent>
         <OperatorInnerContent>
           {activeViewTypeId && <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />}
         </OperatorInnerContent>
       </OperatorContent>
       {<div style={{ minHeight: 128 }} />}
+
+      {/* Show the operator buttons */}
       <OperatorFooter position="fixed">
         <Tooltip title="Föregående sida" arrow>
           <div>
@@ -332,6 +345,7 @@ const OperatorViewPage: React.FC = () => {
         </Tooltip>
       </OperatorFooter>
 
+      {/* Show the user that they have joined the competition */}
       <Snackbar
         open={successMessageOpen && Boolean(competitionName)}
         autoHideDuration={4000}