diff --git a/index.html b/index.html
index 530bc337f539a063e71e5a3e1f79d32597b92ed1..1aaf5d7e44031c4f6ae0e6e9874698a12a164845 100644
--- a/index.html
+++ b/index.html
@@ -45,9 +45,7 @@
           </p>
         </footer>
 
-
-  
-    </nav>
+      </nav>
   </div>
 
 
diff --git a/src/bezier/BezierDemo.ts b/src/bezier/BezierDemo.ts
index b2b4905d16a9a3f7c9c5f2fc50af47ea736a8d97..2b1b78c5014417181f82c597b9a12a362c088ddc 100644
--- a/src/bezier/BezierDemo.ts
+++ b/src/bezier/BezierDemo.ts
@@ -3,6 +3,10 @@ import { UI } from "../uitls/UI";
 
 import { Curve2d } from './Curve2d';
 
+
+/**
+ * Prepares the scene for the demo.
+ */
 export function bezierDemo(render: RenderManager, ui: UI) {
     const curve = new Curve2d();
     curve.objects().forEach(obj => { render.add(obj); });
diff --git a/src/init.ts b/src/init.ts
index f0c79c7d5752259c6c533ffd781e3e6959941189..547bad5a0f38b6b857906471aadbb38633e026be 100644
--- a/src/init.ts
+++ b/src/init.ts
@@ -1,15 +1,21 @@
 import * as RotCube from "./ambient/RotatingCube"
 import * as Main from "./main"
 
-
+/**
+ * Initializes the application. Sets specifically the link actions to 
+ * "load" the canvas.
+ */
 function init() {
+    // elements where to modify hidden class 
     const sceneElement = document.querySelector(".scene") as HTMLAnchorElement;
     const mainElement = document.querySelector(".main") as HTMLAnchorElement;
 
+    // set the link actions
     const bezierLink = document.querySelector("#bezier") as HTMLAnchorElement;
     const quaternionLink = document.querySelector("#quaternion") as HTMLAnchorElement;
     const simulationLink = document.querySelector("#simulation") as HTMLAnchorElement;
 
+    // actions to be performed when the link is clicked
     bezierLink.addEventListener("click", () => {
         sceneElement.classList.remove("hidden");
         mainElement.classList.add("hidden");
@@ -28,11 +34,9 @@ function init() {
         // TODO: add simulation
     });
 
-
+    // start animation
     RotCube.init();
     RotCube.render();
 }
 
 init();
-
-export { };
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 824547cba33a0b21f7f438b5932c808ddf7bb0f9..bc571aa70262bbf886535f278ce6267d8bc8b81b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,11 +4,20 @@ import { UI } from "./uitls/UI";
 import { bezierDemo } from "./bezier/BezierDemo";
 import { quaternionDemo } from "./quaternion/QuaternionDemo";
 
+
+/**
+ * function to initialize the application with.
+ * It is called in demos with the appropriate parameter to start rendering.
+ */
 export const examples : {[key: string]: (render: RenderManager, ui: UI) => void}  = {
     "bezier": bezierDemo,
     "quaternion": quaternionDemo
 };
 
+
+/**
+ * function to start scene rendering.
+ */
 export function demos(d:  (render: RenderManager, ui: UI) => void) {
 
     console.log("demos");
diff --git a/src/quaternion/QuaternionDemo.ts b/src/quaternion/QuaternionDemo.ts
index d63194a1cff3007c1ec788ddd2d8622ea547933d..0c1eed622d54e124f75c314baa8fcf8583503f6d 100644
--- a/src/quaternion/QuaternionDemo.ts
+++ b/src/quaternion/QuaternionDemo.ts
@@ -5,6 +5,10 @@ import { AmbientLight, GridHelper, Mesh, MeshLambertMaterial, PointLight } from
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { RotationObject } from "./RotationObject";
 
+
+/**
+ * Prepares the scene for the demo.
+ */
 export function quaternionDemo(render: RenderManager, ui: UI) {
 
     const rot = new RotationObject();
diff --git a/src/style.css b/src/style.css
index 5f489db055f6a4452e32eafb52e33a102fb14aac..910f2375a6355d169a24c76625a368a82584b00f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -5,20 +5,10 @@
   font-family: 'Poppins', sans-serif;
 }
 
-.main.hidden {
-  display: none;
-}
-
-.scene.hidden {
-  display: none;
-}
-
-.return {
-  position: absolute;
-  top: 1em;
-  left: 1em;
-  background: #fff;
-  z-index: 1;
+canvas {
+  left: 0;
+  top: 0;
+  position: fixed;
 }
 
 header {
@@ -40,6 +30,22 @@ footer {
   align-items: center;
 }
 
+.main.hidden {
+  display: none;
+}
+
+.scene.hidden {
+  display: none;
+}
+
+.return {
+  position: absolute;
+  top: 1em;
+  left: 1em;
+  background: #fff;
+  z-index: 1;
+}
+
 .welcome {
   position: relative;
   top: 25vh;
@@ -64,13 +70,6 @@ nav {
   /* z-index: 1; */
 }
 
-.title-nav {
-  position: absolute;
-  color: white;
-  bottom: 0;
-  left: 12%;
-}
-
 nav ul {
   position: absolute;
   left: 12%;
@@ -83,6 +82,13 @@ nav ul {
 
 }
 
+.title-nav {
+  position: absolute;
+  color: white;
+  bottom: 0;
+  left: 12%;
+}
+
 .nav-link {
   position: relative;
   color: #CBCFD3;
@@ -105,43 +111,3 @@ nav ul {
   font-weight: bold;
 }
 
-.menu-close {
-  position: absolute;
-  top: 45vh;
-  left: 2%;
-  width: 2rem;
-  height: 1rem;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-}
-
-.menu-close:hover {
-  opacity: 0.6;
-}
-
-.menu-close span {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 70%;
-  height: 2px;
-  background-color: white;
-}
-
-.menu-close span:nth-child(1) {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.menu-close span:nth-child(2) {
-  transform: translate(-50%, -50%) rotate(-45deg);
-}
-
-
-canvas {
-  left: 0;
-  top: 0;
-  position: fixed;
-}
\ No newline at end of file