diff --git a/_dev/src/ts/pages/HomePage.ts b/_dev/src/ts/pages/HomePage.ts
index ddd1d5ace..257d6e7b4 100644
--- a/_dev/src/ts/pages/HomePage.ts
+++ b/_dev/src/ts/pages/HomePage.ts
@@ -37,13 +37,13 @@ export default class HomePage extends PageAbstract {
     }
   };
 
-  private handleSubmit = (event: Event) => {
+  private handleSubmit = async (event: Event) => {
     event.preventDefault();
     const routeToSubmit = this.form?.dataset.routeToSubmit;
 
     if (routeToSubmit) {
       const formData = new FormData(this.form);
-      api.post(routeToSubmit, formData);
+      await api.post(routeToSubmit, formData);
     }
   };
 
diff --git a/_dev/src/ts/pages/PageAbstract.ts b/_dev/src/ts/pages/PageAbstract.ts
index 65f40f177..546e64a6b 100644
--- a/_dev/src/ts/pages/PageAbstract.ts
+++ b/_dev/src/ts/pages/PageAbstract.ts
@@ -1,4 +1,19 @@
+/**
+ * @abstract
+ * @description Base abstract class defining the structure for page components, requiring implementation of lifecycle methods for mounting and destruction.
+ */
 export default abstract class PageAbstract {
+  /**
+   * @abstract
+   * @description Method to initialize and mount the page component. Should be implemented by subclasses to set up event listeners, render content, etc.
+   * @returns {void}
+   */
   abstract mount(): void;
+
+  /**
+   * @abstract
+   * @description Method to clean up and perform necessary teardown operations before the page component is destroyed. Should be implemented by subclasses to remove event listeners, clear timers, etc.
+   * @returns {void}
+   */
   abstract beforeDestroy(): void;
 }
diff --git a/_dev/src/ts/pages/UpdatePageVersionChoice.ts b/_dev/src/ts/pages/UpdatePageVersionChoice.ts
index 3efdb5a82..891d4c38f 100644
--- a/_dev/src/ts/pages/UpdatePageVersionChoice.ts
+++ b/_dev/src/ts/pages/UpdatePageVersionChoice.ts
@@ -35,9 +35,9 @@ export default class UpdatePageVersionChoice extends UpdatePage {
     });
   };
 
-  private sendForm = (routeToSend: string) => {
+  private sendForm = async (routeToSend: string) => {
     const formData = new FormData(this.form!);
-    api.post(routeToSend, formData);
+    await api.post(routeToSend, formData);
   };
 
   private addListenerToCheckRequirementsAgainButtons = () => {
@@ -61,7 +61,7 @@ export default class UpdatePageVersionChoice extends UpdatePage {
     }
   };
 
-  private saveForm = () => {
+  private saveForm = async () => {
     const routeToSave = this.form!.dataset.routeToSave;
 
     if (!routeToSave) {
@@ -82,7 +82,7 @@ export default class UpdatePageVersionChoice extends UpdatePage {
       currentInputCheck.removeAttribute('data-requirements-are-ok');
       this.toggleNextButton();
       currentInputCheck.classList.add(this.radioLoadingClass);
-      this.sendForm(routeToSave);
+      await this.sendForm(routeToSave);
     }
   };
 
diff --git a/_dev/src/ts/routing/RouteHandler.ts b/_dev/src/ts/routing/RouteHandler.ts
index 097631f4f..4c3719c7b 100644
--- a/_dev/src/ts/routing/RouteHandler.ts
+++ b/_dev/src/ts/routing/RouteHandler.ts
@@ -1,38 +1,72 @@
 import api from '../api/RequestHandler';
 
 export default class RouteHandler {
+  /**
+   * @constructor
+   * @description Initializes the RouteHandler by setting the current route to 'home-page'
+   *              if no route is present. Sets up an event listener for the 'popstate' event
+   *              to handle route changes.
+   */
   constructor() {
     if (!this.getCurrentRoute()) {
       this.setNewRoute('home-page');
     }
-    window.addEventListener('popstate', () => this.handleRouteChange());
+    window.addEventListener('popstate', () => this.#handleRouteChange());
   }
 
-  private getCurrentUrl(): URL {
+  /**
+   * @private
+   * @returns {URL} The current URL object.
+   * @description Retrieves the current URL of the window.
+   */
+  #getCurrentUrl(): URL {
     return new URL(window.location.href);
   }
 
-  private getQueryParams(): URLSearchParams {
-    return this.getCurrentUrl().searchParams;
+  /**
+   * @private
+   * @returns {URLSearchParams} The URLSearchParams object containing the query parameters.
+   * @description Retrieves the query parameters from the current URL.
+   */
+  #getQueryParams(): URLSearchParams {
+    return this.#getCurrentUrl().searchParams;
   }
 
+  /**
+   * @public
+   * @returns {string | null} The current route name, or null if not found.
+   * @description Gets the current route from the query parameters.
+   */
   public getCurrentRoute(): string | null {
-    return this.getQueryParams().get('route');
+    return this.#getQueryParams().get('route');
   }
 
+  /**
+   * @public
+   * @param {string} newRoute - The new route name to set.
+   * @description Sets a new route by updating the query parameters and pushing the new URL
+   *              to the browser's history.
+   */
   public setNewRoute(newRoute: string): void {
-    const queryParams = this.getQueryParams();
+    const queryParams = this.#getQueryParams();
     queryParams.set('route', newRoute);
 
-    const newUrl = `${this.getCurrentUrl().pathname}?${queryParams.toString()}`;
+    const newUrl = `${this.#getCurrentUrl().pathname}?${queryParams.toString()}`;
 
     window.history.pushState(null, '', newUrl);
   }
 
-  private handleRouteChange() {
+  /**
+   * @private
+   * @async
+   * @returns {Promise<void>} A promise that resolves when the request is complete.
+   * @description Handles changes to the route by sending a POST request to the new route.
+   *              If the new route is not null, it makes a request using the api module.
+   */
+  async #handleRouteChange() {
     const newRoute = this.getCurrentRoute();
     if (newRoute !== null) {
-      api.post(newRoute, new FormData(), true);
+      await api.post(newRoute, new FormData(), true);
     }
   }
 }
diff --git a/_dev/src/ts/routing/ScriptHandler.ts b/_dev/src/ts/routing/ScriptHandler.ts
index 99a2358c1..9566f8b5e 100644
--- a/_dev/src/ts/routing/ScriptHandler.ts
+++ b/_dev/src/ts/routing/ScriptHandler.ts
@@ -61,7 +61,8 @@ export default class ScriptHandler {
    * @public
    * @param {string} newRoute - The name of the route to load his associated script.
    * @returns void
-   * @description Updates the currently loaded route script by destroying the current page instance and loading a new one based on the provided route name.
+   * @description Updates the currently loaded route script by destroying the current
+   *              page instance and loading a new one based on the provided route name.
    */
   public updateRouteScript(newRoute: string) {
     this.#currentScript?.beforeDestroy();
diff --git a/_dev/src/ts/utils/Hydration.ts b/_dev/src/ts/utils/Hydration.ts
index bf67243b6..4a8d870a6 100644
--- a/_dev/src/ts/utils/Hydration.ts
+++ b/_dev/src/ts/utils/Hydration.ts
@@ -2,9 +2,27 @@ import { ApiResponseHydration } from '../types/apiTypes';
 import { routeHandler, scriptHandler } from '../autoUpgrade';
 
 export default class Hydration {
-  public static hydrationEventName = 'hydrate';
-  public hydrationEvent = new Event(Hydration.hydrationEventName);
+  /**
+   * @public
+   * @static
+   * @type {string}
+   * @description The name of the hydration event.
+   */
+  public static hydrationEventName: string = 'hydrate';
 
+  /**
+   * @public
+   * @type {Event}
+   * @description The hydration event instance.
+   */
+  public hydrationEvent: Event = new Event(Hydration.hydrationEventName);
+
+  /**
+   * @public
+   * @param {ApiResponseHydration} data - The data containing new content and routing information.
+   * @param {boolean} [fromPopState=false] - Indicates if the hydration is triggered from a popstate event.
+   * @description Hydrates the specified element with new content and updates the route if necessary.
+   */
   public hydrate(data: ApiResponseHydration, fromPopState?: boolean) {
     const elementToUpdate = document.getElementById(data.parent_to_update);
 
diff --git a/_dev/src/ts/utils/Stepper.ts b/_dev/src/ts/utils/Stepper.ts
index fb4179f64..e22cc6391 100644
--- a/_dev/src/ts/utils/Stepper.ts
+++ b/_dev/src/ts/utils/Stepper.ts
@@ -9,6 +9,11 @@ export default class Stepper {
   private doneClass = `${this.baseClass}--done`;
   private normalClass = `${this.baseClass}--normal`;
 
+  /**
+   * @constructor
+   * @throws Will throw an error if the stepper or its steps are not found in the DOM.
+   * @description Initializes the Stepper by finding the parent element in the DOM and setting up the steps.
+   */
   constructor() {
     const stepper = document.getElementById(
       window.AutoUpgradeVariables.stepper_parent_id
@@ -39,6 +44,11 @@ export default class Stepper {
     });
   }
 
+  /**
+   * @public
+   * @param {string} currentStep - The code of the current step to be set.
+   * @description Sets the current step in the stepper and updates the classes for each step accordingly.
+   */
   public setCurrentStep = (currentStep: string) => {
     let isBeforeCurrentStep = true;