diff --git a/src/App.tsx b/src/App.tsx
index 6456792..730caa5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,7 +4,7 @@
  * Provided under the MIT License. See License file for details.
  */
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { useState, useEffect, useRef, useContext, useReducer, ReactElement } from 'react'
+import React, { useState, useEffect, useRef, useContext, useReducer, ReactElement, LazyExoticComponent } from 'react'
 import Dropdown from 'react-bootstrap/Dropdown'
 import { DotType, CornerSquareType, CornerDotType, ShapeType, ErrorCorrectionLevel } from '@liquid-js/qr-code-styling'
 import { AppContext } from './Context'
@@ -24,11 +24,12 @@ import EventForm from './Components/Forms/Event'
 import { adWebsiteUrl, basicOptions, defaultBrand, embeddedLogos, initialOptions } from './configuration'
 
 type Tab = {
+  /** The label of the tab. */
   label: 'URL' | 'Text' | 'E-mail' | 'VCard' | 'Place' | 'WiFi' | 'SMS' | 'Phone' | 'Event'
   Component: () => ReactElement
 }
 
-// Active tabs
+/** Active tabs */
 const tabs: Tab[] = [
   {
     label: 'URL',
@@ -69,18 +70,30 @@ const tabs: Tab[] = [
 ]
 
 export interface Options {
-  shape?: ShapeType
-  size?: number
-  removeBrand?: boolean
-  image?: string
-  imageMargin?: number
-  mainShape?: DotType
-  shapeColor?: string
-  squareShape?: CornerSquareType
-  squareColor?: string
-  cornersDotShape?: CornerDotType
-  cornersDotColor?: string
-  errorCorrectionLevel?: ErrorCorrectionLevel
+  /** The shape of the QR code (square or circle) */
+  shape?: ShapeType;
+  /** The size of the QR code for exporting */
+  size?: number;
+  /** If true, there is no logo in the center */
+  removeBrand?: boolean;
+  /** The logo to be placed in the center (see embeddedLogos for the available options) */
+  image?: string;
+  /** The margin around the logo */
+  imageMargin?: number;
+  /** The shape of the main dots (dot, randomDot, rounded, extraRounded, verticalLine, horizontalLine, classy, classyRounded, square, smallSquare, diamond) */
+  mainShape?: DotType;
+  /** The color of the main dots */
+  shapeColor?: string;
+  /** The shape of the 3 corner zones (dot, square, heart, extraRounded, classy, outpoint, inpoint) */
+  squareShape?: CornerSquareType;
+  /** The color of the 3 corner zones */
+  squareColor?: string;
+  /** The shape of the dots in the 3 corner zones (dot, square, heart, extraRounded, classy, outpoint, inpoint) */
+  cornersDotShape?: CornerDotType;
+  /** The color of the dots in the 3 corner zones */
+  cornersDotColor?: string;
+  /** The error correction level (L, M, Q, H) */
+  errorCorrectionLevel?: ErrorCorrectionLevel;
 }
 
 
@@ -140,7 +153,7 @@ function App(): ReactElement {
    * @param {string} path - The path of the internal logo image.
    * @return {() => void} A function that sets the options with the new internal logo image path.
    */
-  const handleInternalLogo = (path: string) => () => {
+  const handleInternalLogo = (path: string): () => void => () => {
     setOptions((prev) => ({
       ...prev,
       image: path
@@ -421,7 +434,7 @@ function App(): ReactElement {
                 </a>
                 .
               </p>
-              <Tabs className='mt-5' tabs={tabs} type='pills' />
+              <Tabs className='mt-5' tabs={tabs as any} type='pills' />
             </div>
           </div>
         </div>
@@ -627,7 +640,7 @@ function App(): ReactElement {
                     </Dropdown.Toggle>
                     <Dropdown.Menu>
                       {embeddedLogos.map((logo) => (
-                        <Dropdown.Item onClick={handleInternalLogo(logo.path)}>
+                        <Dropdown.Item key={logo.path} onClick={handleInternalLogo(logo.path)}>
                           <img
                             src={logo.path}
                             width='30'
diff --git a/src/Components/Tabs.tsx b/src/Components/Tabs.tsx
index 2c91752..6c606f2 100644
--- a/src/Components/Tabs.tsx
+++ b/src/Components/Tabs.tsx
@@ -9,7 +9,7 @@ declare type TabsProps = {
   className?: string
   tabs: {
     label: string
-    Component: (T: { index: number }) => JSX.Element
+    Component: (T: { index: number }) => ReactElement
   }[]
   orientation?: 'horizontal' | 'vertical'
   type?: 'tabs' | 'pills'
diff --git a/src/configuration.ts b/src/configuration.ts
index dfb1531..4abec55 100644
--- a/src/configuration.ts
+++ b/src/configuration.ts
@@ -6,20 +6,22 @@ import { CornerDotType, CornerSquareType, DotType, ErrorCorrectionLevel, ShapeTy
 import { Options } from "./App";
 
 export const adWebsiteUrl = {
-  // The URL of the website (used in the footer and the default QR code data)
+  /** The URL of the website (used in the footer and the default QR code data) */
   url: 'https://lesailesdumontblanc.com',
-  // The name of the website (used in the footer)
+  /** The name of the website (used in the footer) */
   name: 'Les Ailes du Mont-Blanc',
-  // The full name of the website (used in the main paragraph)
+  /** The full name of the website (used in the main paragraph) */
   longName: 'Les Ailes du Mont-Blanc Paragliding School',
-  // The short name of the website (used in the header)
+  /** The short name of the website (used in the header) */
   shortName: 'ADMB',
-  // The logo of the website (used in the header)
+  /** The logo of the website (used in the header) */
   headerLogo: '/admb-white.svg'
 }
 
-// All embedded logos
-// See public directory for the images
+/**
+ * All embedded logos.
+ * See public directory for the images.
+ */
 export const embeddedLogos = [
   { path: '/admb.svg', label: 'Mini Admb light blue' },
   { path: '/admb-navy.svg', label: 'Mini Admb navy blue' },
@@ -33,38 +35,38 @@ export const embeddedLogos = [
   { path: '/scanme.svg', label: 'Scan me' }
 ];
 
-// The default logo
+/**  The default logo */
 export const defaultBrand = '/admb.svg';
 
-// The default QR code customisation options
+/** The default QR code customisation options */ 
 export const initialOptions: Options = {
-  // the shape of the QR code (square or circle)
+  /** The shape of the QR code (square or circle) */
   shape: ShapeType.square,
-  // the size of the QR code for exporting
+  /** The size of the QR code for exporting */
   size: 1000,
-  // if true there is no logo in the center
+  /** If true, there is no logo in the center */
   removeBrand: false,
-  // the logo to be placed in the center (see embeddedLogos for the available options)
+  /** The logo to be placed in the center (see embeddedLogos for the available options) */
   image: defaultBrand,
-  // the margin around the logo
+  /** The margin around the logo */
   imageMargin: 10,
-  // the shape of the main dots ( dot, randomDot, rounded, extraRounded, verticalLine, horizontalLine, classy, classyRounded, square, smallSquare, diamond)
+  /** The shape of the main dots (dot, randomDot, rounded, extraRounded, verticalLine, horizontalLine, classy, classyRounded, square, smallSquare, diamond) */
   mainShape: DotType.dot,
-  // the color of the main dots
+  /** The color of the main dots */
   shapeColor: '#1E2470',
-  // the shape of the 3 corner zones (dot, square, heart, extraRounded, classy, outpoint, inpoint)
+  /** The shape of the 3 corner zones (dot, square, heart, extraRounded, classy, outpoint, inpoint) */
   squareShape: CornerSquareType.extraRounded,
-  // the color of the 3 corner zones
+  /** The color of the 3 corner zones */
   squareColor: '#008ADC',
-  // the shape of the dots in the 3 corner zones (dot, square, heart, extraRounded, classy, outpoint, inpoint)
+  /** The shape of the dots in the 3 corner zones (dot, square, heart, extraRounded, classy, outpoint, inpoint) */
   cornersDotShape: CornerDotType.dot,
-  // the color of the dots in the 3 corner zones
+  /** The color of the dots in the 3 corner zones */
   cornersDotColor: '#D90012',
-  // the error correction level (L, M, Q, H)
+  /** The error correction level (L, M, Q, H) */
   errorCorrectionLevel: ErrorCorrectionLevel.H
 }
 
-// The basic QR code customisation options (here is a black and white QR code with a square shape)
+/** The basic QR code customisation options (here is a black and white QR code with a square shape) */ 
 export const basicOptions: Options = {
   shape: ShapeType.square,
   size: 1000,
@@ -80,5 +82,7 @@ export const basicOptions: Options = {
   errorCorrectionLevel: ErrorCorrectionLevel.H
 }
 
-// The year the project was created (used in the footer, if the current year is different from the creation year, the years are displayed as a range)
+/** The year the project was created 
+ * (used in the footer, if the current year is different from the creation year, the years are displayed as a range) 
+ */
 export const creationYear = 2024;
\ No newline at end of file