diff --git a/frontend/www/exercise.html b/frontend/www/exercise.html
index 741bca077b7962809c16c5db83a223f062ffb49b..c2c15b47cdad5ecb66cdf4433bc5ac7389ec077b 100644
--- a/frontend/www/exercise.html
+++ b/frontend/www/exercise.html
@@ -1,54 +1,101 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Exercise</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
+      crossorigin="anonymous"
+    />
 
-    <script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="styles/style.css">
+    <script
+      src="https://kit.fontawesome.com/0ce6c392ca.js"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="styles/style.css" />
     <script src="scripts/navbar.js" type="text/javascript" defer></script>
-</head>
-    <body>
-        <navbar-el></navbar-el>
+  </head>
+  <body>
+    <navbar-el></navbar-el>
 
-        <div class="container">
-            <div class="row">
-                <div class="col-lg">
-                    <h3 class="mt-3">View/Edit Exercise</h3>
-                </div>
-            </div>
-        <form class="row g-3" id="form-exercise">
-            <div class="col-lg-6 ">
-                <label for="inputName" class="form-label">Name</label>
-                <input type="text" class="form-control" id="inputName" name="name" readonly>
-            </div>
-            <div class="col-lg-6"></div>
-            <div class="col-lg-6">
-                <label for="inputDescription" class="form-label">Description</label>
-                <textarea class="form-control" id="inputDescription" name="description" readonly></textarea>
-            </div>
-            <div class="col-lg-6"></div>
-            <div class="col-lg-6">
-                <label for="inputUnit" class="form-label">Unit</label>
-                <input type="text" class="form-control" id="inputUnit" name="unit" readonly>
-            </div>
-            <div class="col-lg-6"></div>
-            <div class="col-lg-6">
-                <input type="button" class="btn btn-primary hide" id="btn-ok-exercise" value="  OK  ">
-                <input type="button" class="btn btn-primary" id="btn-edit-exercise" value=" Edit ">
-                <input type="button" class="btn btn-secondary hide" id="btn-cancel-exercise" value="Cancel">
-                <input type="button" class="btn btn-danger float-end hide" id="btn-delete-exercise" value="Delete">
-            </div>
-            <div class="col-lg-6">
-
-            </div>
-        </form>
+    <div class="container">
+      <div class="row">
+        <div class="col-lg">
+          <h3 class="mt-3">View/Edit Exercise</h3>
+        </div>
+      </div>
+      <form class="row g-3" id="form-exercise">
+        <div class="col-lg-6 ">
+          <label for="inputName" class="form-label">Name</label>
+          <input
+            type="text"
+            class="form-control"
+            id="inputName"
+            name="name"
+            readonly
+          />
+        </div>
+        <div class="col-lg-6"></div>
+        <div class="col-lg-6">
+          <label for="inputDescription" class="form-label">Description</label>
+          <textarea
+            class="form-control"
+            id="inputDescription"
+            name="description"
+            readonly
+          ></textarea>
+        </div>
+        <div class="col-lg-6"></div>
+        <div class="col-lg-6">
+          <label for="inputUnit" class="form-label">Unit</label>
+          <input
+            type="text"
+            class="form-control"
+            id="inputUnit"
+            name="unit"
+            readonly
+          />
+        </div>
+        <div class="col-lg-6"></div>
+        <div class="col-lg-6">
+          <input
+            type="button"
+            class="btn btn-primary hide"
+            id="btn-ok-exercise"
+            value="  OK  "
+          />
+          <input
+            type="button"
+            class="btn btn-primary"
+            id="btn-edit-exercise"
+            value=" Edit "
+          />
+          <input
+            type="button"
+            class="btn btn-secondary hide"
+            id="btn-cancel-exercise"
+            value="Cancel"
+          />
+          <input
+            type="button"
+            class="btn btn-danger float-end hide"
+            id="btn-delete-exercise"
+            value="Delete"
+          />
         </div>
-        <script src="scripts/defaults.js"></script>
-        <script src="scripts/scripts.js"></script>
-        <script src="scripts/exercise.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
-    </body>
-</html>
\ No newline at end of file
+        <div class="col-lg-6"></div>
+      </form>
+    </div>
+    <script src="scripts/defaults.js"></script>
+    <script src="scripts/scripts.js"></script>
+    <script src="scripts/exercise.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/frontend/www/login.html b/frontend/www/login.html
index 1d798730665bbe58bf30295c29e04a4fa01e00fc..6e16e4b77e093eb0b9a9dde73ef814b8788bb7d2 100644
--- a/frontend/www/login.html
+++ b/frontend/www/login.html
@@ -1,48 +1,86 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Login</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
+      crossorigin="anonymous"
+    />
 
-    <script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="styles/style.css">
+    <script
+      src="https://kit.fontawesome.com/0ce6c392ca.js"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="styles/style.css" />
     <script src="scripts/navbar.js" type="text/javascript" defer></script>
-</head>
-<body>
+  </head>
+  <body>
     <navbar-el></navbar-el>
 
-    <div class="container">       
-        <div class="card mt-3 border-0">
+    <div class="container">
+      <div class="card mt-3 border-0">
         <article class="card-body mx-auto">
-            <h4 class="card-title mt-3 text-center">Log In</h4>
-            <form id="form-login">
+          <h4 class="card-title mt-3 text-center">Log In</h4>
+          <form id="form-login">
             <div class="input-group mb-2">
-                <span class="input-group-text"> <i class="fas fa-user"></i> </span>
-                <input name="username" class="form-control" placeholder="User name" type="text" required>
-            </div> <!-- form-group// -->
+              <span class="input-group-text">
+                <i class="fas fa-user"></i>
+              </span>
+              <input
+                name="username"
+                class="form-control"
+                placeholder="User name"
+                type="text"
+                required
+              />
+            </div>
+            <!-- form-group// -->
             <div class="input-group mb-2">
-                <span class="input-group-text"> <i class="fas fa-lock"></i> </span>
-                <input class="form-control" name="password" placeholder="Password" type="password" required>
-            </div> <!-- form-group// -->    
+              <span class="input-group-text">
+                <i class="fas fa-lock"></i>
+              </span>
+              <input
+                class="form-control"
+                name="password"
+                placeholder="Password"
+                type="password"
+                required
+              />
+            </div>
+            <!-- form-group// -->
             <div class="input-group mb-2">
-                <label class="checkbox" style="border: none;">
-                    <input type="checkbox" value="rememberMe" id="rememberMe"> Remember me
-                </label>
-            </div> <!-- form-group// -->          
+              <label class="checkbox" style="border: none;">
+                <input type="checkbox" value="rememberMe" id="rememberMe" />
+                Remember me
+              </label>
+            </div>
+            <!-- form-group// -->
             <div class="d-grid">
-                <input type="button" class="btn btn-primary" id="btn-login" value=" Log in  ">
-            </div> <!-- form-group// -->
-        </form>
+              <input
+                type="button"
+                class="btn btn-primary"
+                id="btn-login"
+                value=" Log in  "
+              />
+            </div>
+            <!-- form-group// -->
+          </form>
         </article>
-        </div> <!-- card.// -->
-        
-        </div> 
+      </div>
+      <!-- card.// -->
+    </div>
 
     <script src="scripts/defaults.js"></script>
     <script src="scripts/scripts.js"></script>
     <script src="scripts/login.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
-</body>
-</html>
\ No newline at end of file
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/frontend/www/logout.html b/frontend/www/logout.html
index e45927cb7b372b1230fd01bb00ddb5fbdb3b6d53..dde3930524e360cef658ce2c6a5c855a007fa1bb 100644
--- a/frontend/www/logout.html
+++ b/frontend/www/logout.html
@@ -1,18 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Logout</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
+      crossorigin="anonymous"
+    />
 
-    <script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="styles/style.css">
-</head>
-<body>
+    <script
+      src="https://kit.fontawesome.com/0ce6c392ca.js"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="styles/style.css" />
+  </head>
+  <body>
     <script src="scripts/defaults.js"></script>
     <script src="scripts/scripts.js"></script>
     <script src="scripts/logout.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
-</body>
-</html>
\ No newline at end of file
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/frontend/www/mycoach.html b/frontend/www/mycoach.html
index f4989e112c4679793f5269d92e7fbb37fd787993..3ee81f84897b975c1e5cdd04ac260875996a63d2 100644
--- a/frontend/www/mycoach.html
+++ b/frontend/www/mycoach.html
@@ -1,87 +1,121 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>My Coach</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
-    <script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="styles/style.css">
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://kit.fontawesome.com/0ce6c392ca.js"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="styles/style.css" />
     <script src="scripts/navbar.js" type="text/javascript" defer></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <navbar-el></navbar-el>
 
     <div class="container">
-        <div class="row">
-            <div class="col-lg text-center">
-                <h3 class="mt-5">Coach & Files</h3>
-                <p>On this page you can view/change your current coach as well as view the files your coaches (present
-                    and previous)
-                    have uploaded.
-                </p>
-            </div>
+      <div class="row">
+        <div class="col-lg text-center">
+          <h3 class="mt-5">Coach & Files</h3>
+          <p>
+            On this page you can view/change your current coach as well as view
+            the files your coaches (present and previous) have uploaded.
+          </p>
         </div>
-        <form id="form-coach" class="row">
-            <div class="col-lg-6 mb-3">
-                <label for="input-coach" class="form-label">Coach</label>
-                <input type="text" class="form-control mb-1" placeholder="User ID" id="input-coach" name="coach"
-                    readonly>
-                <input type="button" class="btn btn-primary" id="button-edit-coach" value="Edit">
-                <input type="button" class="btn btn-primary hide" id="button-set-coach" value=" OK ">
-                <input type="button" class="btn btn-secondary hide" id="button-cancel-coach" value="Cancel">
-            </div>
-            <div id="offers-div" class="col-lg-6 mb-3">
-                <label for="list-offers" class="form-label">Offers</label>
-                <ul class="list-group" id="list-offers">
-
-                </ul>
-            </div>
-        </form>
-        <div class="row">
-            <div id="list-files-div" class="col">
-                <label for="list-tab" class="form-label">Files</label>
-            </div>
+      </div>
+      <form id="form-coach" class="row">
+        <div class="col-lg-6 mb-3">
+          <label for="input-coach" class="form-label">Coach</label>
+          <input
+            type="text"
+            class="form-control mb-1"
+            placeholder="User ID"
+            id="input-coach"
+            name="coach"
+            readonly
+          />
+          <input
+            type="button"
+            class="btn btn-primary"
+            id="button-edit-coach"
+            value="Edit"
+          />
+          <input
+            type="button"
+            class="btn btn-primary hide"
+            id="button-set-coach"
+            value=" OK "
+          />
+          <input
+            type="button"
+            class="btn btn-secondary hide"
+            id="button-cancel-coach"
+            value="Cancel"
+          />
+        </div>
+        <div id="offers-div" class="col-lg-6 mb-3">
+          <label for="list-offers" class="form-label">Offers</label>
+          <ul class="list-group" id="list-offers"></ul>
+        </div>
+      </form>
+      <div class="row">
+        <div id="list-files-div" class="col">
+          <label for="list-tab" class="form-label">Files</label>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-3">
+          <div class="list-group" id="list-tab" role="tablist"></div>
         </div>
-        <div class="row">
-            <div class="col-3">
-                <div class="list-group" id="list-tab" role="tablist"></div>
-            </div>
-            <div class="col-3">
-                <div class="tab-content" id="nav-tabContent"></div>
-            </div>
-            <div class="col-6"></div>
+        <div class="col-3">
+          <div class="tab-content" id="nav-tabContent"></div>
         </div>
+        <div class="col-6"></div>
+      </div>
     </div>
 
     <template id="template-owner-tab">
-        <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#list-tab" role="tab"></a>
+      <a
+        class="list-group-item list-group-item-action"
+        data-bs-toggle="list"
+        href="#list-tab"
+        role="tab"
+      ></a>
     </template>
 
     <template id="template-files">
-        <div class="tab-pane fade" role="tabpanel"></div>
+      <div class="tab-pane fade" role="tabpanel"></div>
     </template>
 
     <template id="template-file">
-        <a class="me-2 link-block" href="#"></a>
+      <a class="me-2 link-block" href="#"></a>
     </template>
 
     <template id="template-offer">
-        <li class="list-group-item">
-            <span></span>
-            <div class="btn-group ms-4" role="group">
-                <button type="button" class="btn btn-success">Accept</button>
-                <button type="button" class="btn btn-danger">Decline</button>
-              </div>
-    </template>
-
+      <li class="list-group-item">
+        <span></span>
+        <div class="btn-group ms-4" role="group">
+          <button type="button" class="btn btn-success">Accept</button>
+          <button type="button" class="btn btn-danger">Decline</button>
+        </div>
+      </li></template
+    >
 
     <script src="scripts/defaults.js"></script>
     <script src="scripts/scripts.js"></script>
     <script src="scripts/mycoach.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
-</body>
-
-</html>
\ No newline at end of file
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/frontend/www/register.html b/frontend/www/register.html
index 0140dcc01aac2c227d7558cb557954d29d0100fa..59fecd7fffa4feee641abb4522c60069388c1fab 100644
--- a/frontend/www/register.html
+++ b/frontend/www/register.html
@@ -1,72 +1,149 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Register</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
-    <script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="styles/style.css">
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://kit.fontawesome.com/0ce6c392ca.js"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="styles/style.css" />
     <script src="scripts/navbar.js" type="text/javascript" defer></script>
-</head>
+  </head>
 
-<body>
+  <body>
     <navbar-el></navbar-el>
 
     <!-- Adapted from https://bootsnipp.com/snippets/z8699 START -->
     <div class="container">
-        <div class="card mt-3 border-0">
-            <article class="card-body mx-auto">
-                <h4 class="card-title mt-3 text-center">Create Account</h4>
-                <p class="text-center">Get started with your free account</p>
-                <form id="form-register-user">
-                    <div class="input-group mb-2">
-                        <span class="input-group-text"> <i class="fas fa-user"></i> </span>
-                        <input name="username" class="form-control" placeholder="User name" type="text" required>
-                    </div> <!-- form-group// -->
-                    <div class="input-group mb-2">
-                        <span class="input-group-text"> <i class="fas fa-envelope"></i> </span>
-                        <input name="email" class="form-control" placeholder="Email address" type="email" required>
-                    </div>
-                    <div class="input-group mb-2">
-                        <span class="input-group-text"> <i class="fas fa-lock"></i> </span>
-                        <input class="form-control" name="password" placeholder="Create password" type="password"
-                            required>
-                    </div> <!-- form-group// -->
-                    <div class="input-group mb-2">
-                        <span class="input-group-text"> <i class="fas fa-lock"></i> </span>
-                        <input class="form-control" name="password1" placeholder="Repeat password" type="password"
-                            required>
-                    </div> <!-- form-group// -->
-                    <div class="input-group mb-2">
-                        <span class="input-group-text"> <i class="fas fa-mobile"></i> </span>
-                        <input class="form-control" name="phone_number" placeholder="Phone number" type="text"
-                            required>
-                    </div> <!-- form-group// -->
-                    <div class="input-group mb-2">
-                        <span class="input-group-text"> <i class="fas fa-globe"></i> </span>
-                        <input class="form-control" name="country" placeholder="Country" type="text"
-                            required>
-                    </div> <!-- form-group// -->
-                    <div class="input-group mb-2">
-                        <span class="input-group-text"> <i class="fas fa-building"></i> </span>
-                        <input class="form-control" name="city" placeholder="City" type="text"
-                            required>
-                    </div> <!-- form-group// -->
-                    <div class="input-group mb-2">
-                        <span class="input-group-text"> <i class="fas  fa-hotel"></i> </span>
-                        <input class="form-control" name="street_address" placeholder="Street address" type="text"
-                            required>
-                    </div> <!-- form-group// -->
-                    <div class="d-grid">
-                        <input type="button" class="btn btn-primary" id="btn-create-account"
-                            value=" Create Account  ">
-                    </div> <!-- form-group// -->
-                </form>
-            </article>
-        </div> <!-- card.// -->
-
+      <div class="card mt-3 border-0">
+        <article class="card-body mx-auto">
+          <h4 class="card-title mt-3 text-center">Create Account</h4>
+          <p class="text-center">Get started with your free account</p>
+          <form id="form-register-user">
+            <div class="input-group mb-2">
+              <span class="input-group-text">
+                <i class="fas fa-user"></i>
+              </span>
+              <input
+                name="username"
+                class="form-control"
+                placeholder="User name"
+                type="text"
+                required
+              />
+            </div>
+            <!-- form-group// -->
+            <div class="input-group mb-2">
+              <span class="input-group-text">
+                <i class="fas fa-envelope"></i>
+              </span>
+              <input
+                name="email"
+                class="form-control"
+                placeholder="Email address"
+                type="email"
+                required
+              />
+            </div>
+            <div class="input-group mb-2">
+              <span class="input-group-text">
+                <i class="fas fa-lock"></i>
+              </span>
+              <input
+                class="form-control"
+                name="password"
+                placeholder="Create password"
+                type="password"
+                required
+              />
+            </div>
+            <!-- form-group// -->
+            <div class="input-group mb-2">
+              <span class="input-group-text">
+                <i class="fas fa-lock"></i>
+              </span>
+              <input
+                class="form-control"
+                name="password1"
+                placeholder="Repeat password"
+                type="password"
+                required
+              />
+            </div>
+            <!-- form-group// -->
+            <div class="input-group mb-2">
+              <span class="input-group-text">
+                <i class="fas fa-mobile"></i>
+              </span>
+              <input
+                class="form-control"
+                name="phone_number"
+                placeholder="Phone number"
+                type="text"
+                required
+              />
+            </div>
+            <!-- form-group// -->
+            <div class="input-group mb-2">
+              <span class="input-group-text">
+                <i class="fas fa-globe"></i>
+              </span>
+              <input
+                class="form-control"
+                name="country"
+                placeholder="Country"
+                type="text"
+                required
+              />
+            </div>
+            <!-- form-group// -->
+            <div class="input-group mb-2">
+              <span class="input-group-text">
+                <i class="fas fa-building"></i>
+              </span>
+              <input
+                class="form-control"
+                name="city"
+                placeholder="City"
+                type="text"
+                required
+              />
+            </div>
+            <!-- form-group// -->
+            <div class="input-group mb-2">
+              <span class="input-group-text">
+                <i class="fas  fa-hotel"></i>
+              </span>
+              <input
+                class="form-control"
+                name="street_address"
+                placeholder="Street address"
+                type="text"
+                required
+              />
+            </div>
+            <!-- form-group// -->
+            <div class="d-grid">
+              <input
+                type="button"
+                class="btn btn-primary"
+                id="btn-create-account"
+                value=" Create Account  "
+              />
+            </div>
+            <!-- form-group// -->
+          </form>
+        </article>
+      </div>
+      <!-- card.// -->
     </div>
     <!--container end.//-->
     <!-- Adapted from https://bootsnipp.com/snippets/z8699 END -->
@@ -74,7 +151,10 @@
     <script src="scripts/defaults.js"></script>
     <script src="scripts/scripts.js"></script>
     <script src="scripts/register.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
-</body>
-
-</html>
\ No newline at end of file
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/frontend/www/scripts/navbar.js b/frontend/www/scripts/navbar.js
index d906f613e77b06fe961e37151d1eea6f5668b48a..a0580a6ce2de4fa22e5e1ed6c0004acac1cfe6ca 100644
--- a/frontend/www/scripts/navbar.js
+++ b/frontend/www/scripts/navbar.js
@@ -1,10 +1,10 @@
 class NavBar extends HTMLElement {
-    constructor() {
-        super();
-    }
+  constructor() {
+    super();
+  }
 
-    connectedCallback() {
-        this.innerHTML = `
+  connectedCallback() {
+    this.innerHTML = `
         <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container-fluid">
             <a class="navbar-brand fw-bold ms-5 me-3" href="#">SecFit</a>
@@ -18,6 +18,7 @@ class NavBar extends HTMLElement {
                 <a class="nav-link hide" id="nav-exercises" href="exercises.html">Exercises</a>
                 <a class="nav-link hide" id="nav-mycoach" href="mycoach.html">Coach</a>
                 <a class="nav-link hide" id="nav-myathletes" href="myathletes.html">Athletes</a>
+                <a class="nav-link hide" id="nav-statistics" href="statistics.html">Statistics</a>
                 <hr>
             </div>
             <div class="my-2 my-lg-0 me-5">
@@ -29,9 +30,7 @@ class NavBar extends HTMLElement {
         </div>
         </nav>
         `;
-
-        
-    }
+  }
 }
 
-customElements.define('navbar-el', NavBar);
\ No newline at end of file
+customElements.define("navbar-el", NavBar);
diff --git a/frontend/www/scripts/scripts.js b/frontend/www/scripts/scripts.js
index 8c550009c43a70acc44ecd56c4434faa318c1c69..4d62e415e43ce831fc17c9fdab1935ec53753d7d 100644
--- a/frontend/www/scripts/scripts.js
+++ b/frontend/www/scripts/scripts.js
@@ -5,23 +5,28 @@ function makeNavLinkActive(id) {
 }
 
 function isUserAuthenticated() {
-  return (getCookieValue("access") != null) || (getCookieValue("refresh") != null);
+  return getCookieValue("access") != null || getCookieValue("refresh") != null;
 }
 
 function updateNavBar() {
   let nav = document.querySelector("nav");
 
   // Emphasize link to current page
-  if (window.location.pathname == "/" || window.location.pathname == "/index.html") {
+  if (
+    window.location.pathname == "/" ||
+    window.location.pathname == "/index.html"
+  ) {
     makeNavLinkActive("nav-index");
   } else if (window.location.pathname == "/workouts.html") {
     makeNavLinkActive("nav-workouts");
   } else if (window.location.pathname == "/exercises.html") {
     makeNavLinkActive("nav-exercises");
   } else if (window.location.pathname == "/mycoach.html") {
-    makeNavLinkActive("nav-mycoach")
+    makeNavLinkActive("nav-mycoach");
   } else if (window.location.pathname == "/myathletes.html") {
     makeNavLinkActive("nav-myathletes");
+  } else if (window.location.pathname == "/statistics.html") {
+    makeNavLinkActive("nav-statistics");
   }
 
   if (isUserAuthenticated()) {
@@ -32,15 +37,14 @@ function updateNavBar() {
     document.querySelector('a[href="mycoach.html"').classList.remove("hide");
     document.querySelector('a[href="exercises.html"').classList.remove("hide");
     document.querySelector('a[href="myathletes.html"').classList.remove("hide");
+    document.querySelector('a[href="statistics.html"').classList.remove("hide");
   } else {
     document.getElementById("btn-login-nav").classList.remove("hide");
     document.getElementById("btn-register").classList.remove("hide");
   }
-
 }
 
-
-function setCookie(name, value, maxage, path="") {
+function setCookie(name, value, maxage, path = "") {
   document.cookie = `${name}=${value}; max-age=${maxage}; path=${path}`;
 }
 
@@ -50,7 +54,9 @@ function deleteCookie(name) {
 
 function getCookieValue(name) {
   let cookieValue = null;
-  let cookieByName = document.cookie.split("; ").find(row => row.startsWith(name));
+  let cookieByName = document.cookie
+    .split("; ")
+    .find(row => row.startsWith(name));
 
   if (cookieByName) {
     cookieValue = cookieByName.split("=")[1];
@@ -59,7 +65,12 @@ function getCookieValue(name) {
   return cookieValue;
 }
 
-async function sendRequest(method, url, body, contentType="application/json; charset=UTF-8") {
+async function sendRequest(
+  method,
+  url,
+  body,
+  contentType = "application/json; charset=UTF-8"
+) {
   if (body && contentType.includes("json")) {
     body = JSON.stringify(body);
   }
@@ -67,16 +78,19 @@ async function sendRequest(method, url, body, contentType="application/json; cha
   let myHeaders = new Headers();
 
   if (contentType) myHeaders.set("Content-Type", contentType);
-  if (getCookieValue("access")) myHeaders.set("Authorization", "Bearer " + getCookieValue("access"));
-  let myInit = {headers: myHeaders, method: method, body: body};
+  if (getCookieValue("access"))
+    myHeaders.set("Authorization", "Bearer " + getCookieValue("access"));
+  let myInit = { headers: myHeaders, method: method, body: body };
   let myRequest = new Request(url, myInit);
 
   let response = await fetch(myRequest);
   if (response.status == 401 && getCookieValue("refresh")) {
     // access token not accepted. getting refresh token
-    myHeaders = new Headers({"Content-Type": "application/json; charset=UTF-8"});
-    let tokenBody = JSON.stringify({"refresh": getCookieValue("refresh")});
-    myInit = {headers: myHeaders, method: "POST", body: tokenBody};
+    myHeaders = new Headers({
+      "Content-Type": "application/json; charset=UTF-8"
+    });
+    let tokenBody = JSON.stringify({ refresh: getCookieValue("refresh") });
+    myInit = { headers: myHeaders, method: "POST", body: tokenBody };
     myRequest = new Request(`${HOST}/api/token/refresh/`, myInit);
     response = await fetch(myRequest);
 
@@ -85,13 +99,15 @@ async function sendRequest(method, url, body, contentType="application/json; cha
       let data = await response.json();
       setCookie("access", data.access, 86400, "/");
 
-        let myHeaders = new Headers({"Authorization": "Bearer " + getCookieValue("access"),
-                               "Content-Type": contentType});
-        let myInit = {headers: myHeaders, method: method, body: body};
-        let myRequest = new Request(url, myInit);
-        response = await fetch(myRequest);
+      let myHeaders = new Headers({
+        Authorization: "Bearer " + getCookieValue("access"),
+        "Content-Type": contentType
+      });
+      let myInit = { headers: myHeaders, method: method, body: body };
+      let myRequest = new Request(url, myInit);
+      response = await fetch(myRequest);
 
-        if (!response.ok) window.location.replace("logout.html");
+      if (!response.ok) window.location.replace("logout.html");
     }
   }
 
@@ -103,46 +119,45 @@ function setReadOnly(readOnly, selector) {
   let formData = new FormData(form);
 
   for (let key of formData.keys()) {
-      let selector = `input[name="${key}"], textarea[name="${key}"]`;
-      for (let input of form.querySelectorAll(selector)) {
-
-      if (!readOnly && input.hasAttribute("readonly"))
-      {
+    let selector = `input[name="${key}"], textarea[name="${key}"]`;
+    for (let input of form.querySelectorAll(selector)) {
+      if (!readOnly && input.hasAttribute("readonly")) {
         input.readOnly = false;
-      }
-      else if (readOnly && !input.hasAttribute("readonly")) {
+      } else if (readOnly && !input.hasAttribute("readonly")) {
         input.readOnly = true;
       }
     }
 
     selector = `input[type="file"], select[name="${key}`;
     for (let input of form.querySelectorAll(selector)) {
-      if ((!readOnly && input.hasAttribute("disabled")))
-      {
+      if (!readOnly && input.hasAttribute("disabled")) {
         input.disabled = false;
-      }
-      else if (readOnly && !input.hasAttribute("disabled")) {
+      } else if (readOnly && !input.hasAttribute("disabled")) {
         input.disabled = true;
-      } 
+      }
     }
   }
 
-  for (let input of document.querySelectorAll("input:disabled, select:disabled")) {
-    if ((!readOnly && input.hasAttribute("disabled")) ||
-        (readOnly && !input.hasAttribute("disabled"))) {
-        input.disabled = !input.disabled;
-    } 
+  for (let input of document.querySelectorAll(
+    "input:disabled, select:disabled"
+  )) {
+    if (
+      (!readOnly && input.hasAttribute("disabled")) ||
+      (readOnly && !input.hasAttribute("disabled"))
+    ) {
+      input.disabled = !input.disabled;
+    }
   }
 }
 
 async function getCurrentUser() {
   let user = null;
-  let response = await sendRequest("GET", `${HOST}/api/users/?user=current`)
+  let response = await sendRequest("GET", `${HOST}/api/users/?user=current`);
   if (!response.ok) {
-      console.log("COULD NOT RETRIEVE CURRENTLY LOGGED IN USER");
+    console.log("COULD NOT RETRIEVE CURRENTLY LOGGED IN USER");
   } else {
-      let data = await response.json();
-      user = data.results[0];
+    let data = await response.json();
+    user = data.results[0];
   }
 
   return user;
@@ -150,9 +165,9 @@ async function getCurrentUser() {
 
 function createAlert(header, data) {
   let alertDiv = document.createElement("div");
-  alertDiv.className = "alert alert-warning alert-dismissible fade show"
+  alertDiv.className = "alert alert-warning alert-dismissible fade show";
   alertDiv.setAttribute("role", "alert");
-  
+
   let strong = document.createElement("strong");
   strong.innerText = header;
   alertDiv.appendChild(strong);
@@ -187,8 +202,6 @@ function createAlert(header, data) {
   alertDiv.appendChild(ul);
 
   return alertDiv;
-
 }
 
 window.addEventListener("DOMContentLoaded", updateNavBar);
-
diff --git a/frontend/www/scripts/statistics.js b/frontend/www/scripts/statistics.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/frontend/www/statistics.html b/frontend/www/statistics.html
new file mode 100644
index 0000000000000000000000000000000000000000..3f42b7cabed206688640818eb4469b4b9c7a02ab
--- /dev/null
+++ b/frontend/www/statistics.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Statistics</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
+      crossorigin="anonymous"
+    />
+
+    <script
+      src="https://kit.fontawesome.com/0ce6c392ca.js"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="styles/style.css" />
+    <script src="scripts/navbar.js" type="text/javascript" defer></script>
+  </head>
+  <body>
+    <navbar-el></navbar-el>
+    <div class="container">
+      <div class="row">
+        <div class="col-lg text-center">
+          <h3 class="mt-5">Statistics</h3>
+          <p>
+            Here you can access your workout statistics for different time
+            periods.
+          </p>
+        </div>
+      </div>
+      <div class="row"></div>
+      <div
+        class="list-group list-group-vertical d-inline-flex mt-2"
+        id="list-tab"
+        role="tablist"
+      >
+        <a
+          class="list-group-item list-group-item-action active"
+          id="list-statistics-week"
+          data-bs-toggle="list"
+          href="#list-statistics-week"
+          role="tab"
+          aria-controls="week"
+        >
+          Week</a
+        >
+        <a
+          class="list-group-item list-group-item-action"
+          id="list-statistics-month"
+          data-bs-toggle="list"
+          href="#list-statistics-month"
+          role="tab"
+          aria-controls="month"
+        >
+          Month</a
+        >
+        <a
+          class="list-group-item list-group-item-action"
+          id="list-statistics-year"
+          data-bs-toggle="list"
+          href="#list-statistics-year"
+          role="tab"
+          aria-controls="year"
+        >
+          Year</a
+        >
+      </div>
+    </div>
+    <script src="scripts/defaults.js"></script>
+    <script src="scripts/scripts.js"></script>
+    <script src="scripts/statistics.js"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/frontend/www/workout.html b/frontend/www/workout.html
index 73747232adaea6ef4944cdd0fbec8693ca6b4a76..b3f6bbc7a1bb957d7b3cba58a683b9e4d4033345 100644
--- a/frontend/www/workout.html
+++ b/frontend/www/workout.html
@@ -1,43 +1,74 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Workout</title>
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
+      crossorigin="anonymous"
+    />
 
-    <script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="styles/style.css">
+    <script
+      src="https://kit.fontawesome.com/0ce6c392ca.js"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="styles/style.css" />
     <script src="scripts/navbar.js" type="text/javascript" defer></script>
-</head>
-<body>
-  <navbar-el></navbar-el>
+  </head>
+  <body>
+    <navbar-el></navbar-el>
 
     <div class="container">
-        <div class="row">
-            <div class="col-lg">
-                <h3 class="mt-3">View/Edit Workout</h3>
-            </div>
+      <div class="row">
+        <div class="col-lg">
+          <h3 class="mt-3">View/Edit Workout</h3>
         </div>
-    <form class="row g-3 mb-4" id="form-workout">
+      </div>
+      <form class="row g-3 mb-4" id="form-workout">
         <div class="col-lg-6 ">
           <label for="inputName" class="form-label">Name</label>
-          <input type="text" class="form-control" id="inputName" name="name" readonly>
+          <input
+            type="text"
+            class="form-control"
+            id="inputName"
+            name="name"
+            readonly
+          />
         </div>
         <div class="col-lg-6"></div>
         <div class="col-lg-6">
           <label for="inputDateTime" class="form-label">Date/Time</label>
-          <input type="datetime-local" class="form-control" id="inputDateTime" name="date" readonly>
+          <input
+            type="datetime-local"
+            class="form-control"
+            id="inputDateTime"
+            name="date"
+            readonly
+          />
         </div>
         <div class="col-lg-6"></div>
         <div class="col-lg-6">
-            <label for="inputOwner" class="form-label">Owner</label>
-            <input type="text" class="form-control" id="inputOwner" name="owner_username" readonly>
+          <label for="inputOwner" class="form-label">Owner</label>
+          <input
+            type="text"
+            class="form-control"
+            id="inputOwner"
+            name="owner_username"
+            readonly
+          />
         </div>
         <div class="col-lg-6">
           <label for="inputVisibility" class="form-label">Visibility</label>
-          <select id="inputVisibility" class="form-select" name="visibility" disabled>
+          <select
+            id="inputVisibility"
+            class="form-select"
+            name="visibility"
+            disabled
+          >
             <option value="PU">Public</option>
             <option value="CO">Coach</option>
             <option value="PR">Private</option>
@@ -45,59 +76,106 @@
         </div>
         <div class="col-lg-6">
           <label for="inputNotes" class="form-label">Notes</label>
-          <textarea class="form-control" id="inputNotes" name="notes" readonly></textarea>
+          <textarea
+            class="form-control"
+            id="inputNotes"
+            name="notes"
+            readonly
+          ></textarea>
         </div>
         <div class="col-lg-6"></div>
         <div class="col-lg-6">
           <div class="input-group">
-              <input type="file" class="form-control" id="customFile" name="files" multiple disabled>
-          </div>
-          <div id="uploaded-files" class="ms-1 mt-2">            
+            <input
+              type="file"
+              class="form-control"
+              id="customFile"
+              name="files"
+              multiple
+              disabled
+            />
           </div>
+          <div id="uploaded-files" class="ms-1 mt-2"></div>
         </div>
+        <div class="col-lg-6"></div>
         <div class="col-lg-6">
-        </div>
-        <div class="col-lg-6">
-          <input type="button" class="btn btn-primary hide" id="btn-ok-workout" value="  OK  ">
-          <input type="button" class="btn btn-primary hide" id="btn-edit-workout" value=" Edit ">
-          <input type="button" class="btn btn-secondary hide" id="btn-cancel-workout" value="Cancel">
-          <input type="button" class="btn btn-danger float-end hide" id="btn-delete-workout" value="Delete">
+          <input
+            type="button"
+            class="btn btn-primary hide"
+            id="btn-ok-workout"
+            value="  OK  "
+          />
+          <input
+            type="button"
+            class="btn btn-primary hide"
+            id="btn-edit-workout"
+            value=" Edit "
+          />
+          <input
+            type="button"
+            class="btn btn-secondary hide"
+            id="btn-cancel-workout"
+            value="Cancel"
+          />
+          <input
+            type="button"
+            class="btn btn-danger float-end hide"
+            id="btn-delete-workout"
+            value="Delete"
+          />
         </div>
         <div class="col-lg-6"></div>
         <div class="col-lg-12">
-            <h3 class="mt-3">Exercises</h3>
-        </div>
-        <div id="div-exercises" class="col-lg-12">
+          <h3 class="mt-3">Exercises</h3>
         </div>
+        <div id="div-exercises" class="col-lg-12"></div>
         <div class="col-lg-6">
-          <input type="button" class="btn btn-primary hide" id="btn-add-exercise" value="Add exercise">
-          <input type="button" class="btn btn-danger hide" id="btn-remove-exercise" value="Remove exercise">
+          <input
+            type="button"
+            class="btn btn-primary hide"
+            id="btn-add-exercise"
+            value="Add exercise"
+          />
+          <input
+            type="button"
+            class="btn btn-danger hide"
+            id="btn-remove-exercise"
+            value="Remove exercise"
+          />
         </div>
         <div class="col-lg-6"></div>
-
       </form>
       <div class="row bootstrap snippets bootdeys" id="div-comment-row">
-              <div class="col-md-8 col-sm-12">
-                  <div class="comment-wrapper">
-                      <div class="card">
-                          <div class="card-header bg-primary text-light">
-                              Comment panel
-                          </div>
-                          <div class="card-body">
-                              <textarea class="form-control" id="comment-area" placeholder="write a comment..." rows="3"></textarea>
-                              <br>
-                              <button type="button" id="post-comment" class="btn btn-info pull-right">Post</button>
-                              <div class="clearfix"></div>
-                              <hr>
-                              <ul id="comment-list" class="list-unstyled">
-                              </ul>
-                          </div>
-                      </div>
-                  </div>
-          
+        <div class="col-md-8 col-sm-12">
+          <div class="comment-wrapper">
+            <div class="card">
+              <div class="card-header bg-primary text-light">
+                Comment panel
+              </div>
+              <div class="card-body">
+                <textarea
+                  class="form-control"
+                  id="comment-area"
+                  placeholder="write a comment..."
+                  rows="3"
+                ></textarea>
+                <br />
+                <button
+                  type="button"
+                  id="post-comment"
+                  class="btn btn-info pull-right"
+                >
+                  Post
+                </button>
+                <div class="clearfix"></div>
+                <hr />
+                <ul id="comment-list" class="list-unstyled"></ul>
               </div>
+            </div>
           </div>
-          </div> 
+        </div>
+      </div>
+    </div>
 
     <template id="template-exercise">
       <div class="row div-exercise-container g-3 mb-3">
@@ -105,25 +183,28 @@
         <div class="col-lg-6"></div>
         <div class="col-lg-6">
           <label class="form-label exercise-type">Type</label>
-          <select class="form-select" name="type">
-          </select>
+          <select class="form-select" name="type"> </select>
         </div>
         <div class="col-lg-6"></div>
         <div class="col-lg-3">
           <label class="form-label exercise-sets">Sets</label>
-          <input type="number" class="form-control" name="sets">
+          <input type="number" class="form-control" name="sets" />
         </div>
         <div class="col-lg-3">
           <label class="form-label exercise-number">Number</label>
-          <input type="number" class="form-control" name="number">
+          <input type="number" class="form-control" name="number" />
         </div>
         <div class="col-lg-6"></div>
       </div>
     </template>
-    
+
     <script src="scripts/defaults.js"></script>
     <script src="scripts/scripts.js"></script>
     <script src="scripts/workout.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
+      crossorigin="anonymous"
+    ></script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/frontend/www/workouts.html b/frontend/www/workouts.html
index b34439d55031d7f029647d8a425669b795d8fde0..cee18778de349ab5537290d5a771e86775bd8159 100644
--- a/frontend/www/workouts.html
+++ b/frontend/www/workouts.html
@@ -1,63 +1,134 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Workouts</title>
-    <link rel="stylesheet" href="styles/style.css">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <link rel="stylesheet" href="styles/style.css" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
+      crossorigin="anonymous"
+    />
 
-    <script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
+    <script
+      src="https://kit.fontawesome.com/0ce6c392ca.js"
+      crossorigin="anonymous"
+    ></script>
     <script src="scripts/navbar.js" type="text/javascript" defer></script>
-</head>
-<body>
+  </head>
+  <body>
     <navbar-el></navbar-el>
 
     <div class="container">
-        <div class="row">
-            <div class="col-lg text-center">
-                <h3 class="mt-5">View Workouts</h3>
-                <p>Here you can view workouts completed by you, your athletes, 
-                    or the public. Click on a workout to view its details.</p>
-                <input type="button" class="btn btn-success" id="btn-create-workout" value="Log new workout">
-            </div>
+      <div class="row">
+        <div class="col-lg text-center">
+          <h3 class="mt-5">View Workouts</h3>
+          <p>
+            Here you can view workouts completed by you, your athletes, or the
+            public. Click on a workout to view its details.
+          </p>
+          <input
+            type="button"
+            class="btn btn-success"
+            id="btn-create-workout"
+            value="Log new workout"
+          />
         </div>
-        <div class="row">
-            <div class="col-lg text-center">
-                <div class="list-group list-group-horizontal d-inline-flex mt-2" id="list-tab" role="tablist">
-                  <a class="list-group-item list-group-item-action active" id="list-all-workouts-list" data-bs-toggle="list" href="#list-all-workouts" role="tab" aria-controls="all">All Workouts</a>
-                  <a class="list-group-item list-group-item-action" id="list-my-workouts-list" data-bs-toggle="list" href="#list-my-workouts" role="tab" aria-controls="my">My Workouts</a>
-                  <a class="list-group-item list-group-item-action" id="list-athlete-workouts-list" data-bs-toggle="list" href="#list-athlete-workouts" role="tab" aria-controls="athlete">Athlete Workouts</a>
-                  <a class="list-group-item list-group-item-action" id="list-public-workouts-list" data-bs-toggle="list" href="#list-public-workouts" role="tab" aria-controls="public">Public Workouts</a>
-                </div>
-                <div class="mt-1">Sort by: <a href="?ordering=date">Date</a> <a href="?ordering=owner">Owner</a> <a href="?ordering=name">Name</a>
-                    <br>Currently sorting by: <span id="current-sort"></span>
-                </div>
-                <div class="list-group mt-1" id="div-content"></div>
-              </div>
+      </div>
+      <div class="row">
+        <div class="col-lg text-center">
+          <div
+            class="list-group list-group-horizontal d-inline-flex mt-2"
+            id="list-tab"
+            role="tablist"
+          >
+            <a
+              class="list-group-item list-group-item-action active"
+              id="list-all-workouts-list"
+              data-bs-toggle="list"
+              href="#list-all-workouts"
+              role="tab"
+              aria-controls="all"
+              >All Workouts</a
+            >
+            <a
+              class="list-group-item list-group-item-action"
+              id="list-my-workouts-list"
+              data-bs-toggle="list"
+              href="#list-my-workouts"
+              role="tab"
+              aria-controls="my"
+              >My Workouts</a
+            >
+            <a
+              class="list-group-item list-group-item-action"
+              id="list-athlete-workouts-list"
+              data-bs-toggle="list"
+              href="#list-athlete-workouts"
+              role="tab"
+              aria-controls="athlete"
+              >Athlete Workouts</a
+            >
+            <a
+              class="list-group-item list-group-item-action"
+              id="list-public-workouts-list"
+              data-bs-toggle="list"
+              href="#list-public-workouts"
+              role="tab"
+              aria-controls="public"
+              >Public Workouts</a
+            >
+          </div>
+          <div class="mt-1">
+            Sort by: <a href="?ordering=date">Date</a>
+            <a href="?ordering=owner">Owner</a>
+            <a href="?ordering=name">Name</a> <br />Currently sorting by:
+            <span id="current-sort"></span>
+          </div>
+          <div class="list-group mt-1" id="div-content"></div>
         </div>
-
+      </div>
     </div>
 
     <template id="template-workout">
-        <a class="list-group-item list-group-item-action flex-column align-items-start my-1 workout">
-            <div class="d-flex w-100 justify-content-between align-items-center">
-                <h5 class="mb-1"></h5>
-            </div>
-            <div class="d-flex">
-                <table class="mb-1 text-start">
-                    <tr><td>Date:</td><td></td></tr>
-                    <tr><td>Time:</td><td></td></tr>
-                    <tr><td>Owner:</td><td></td></tr>
-                    <tr><td>Exercises:</td><td></td></tr>
-                </table>       
-            </div>
-        </a>
+      <a
+        class="list-group-item list-group-item-action flex-column align-items-start my-1 workout"
+      >
+        <div class="d-flex w-100 justify-content-between align-items-center">
+          <h5 class="mb-1"></h5>
+        </div>
+        <div class="d-flex">
+          <table class="mb-1 text-start">
+            <tr>
+              <td>Date:</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>Time:</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>Owner:</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>Exercises:</td>
+              <td></td>
+            </tr>
+          </table>
+        </div>
+      </a>
     </template>
 
     <script src="scripts/defaults.js"></script>
     <script src="scripts/scripts.js"></script>
     <script src="scripts/workouts.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
-</body>
-</html>
\ No newline at end of file
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>