diff --git a/jsdoc/Select.js b/jsdoc/Select.js
new file mode 100644
index 000000000..0e9f9a38c
--- /dev/null
+++ b/jsdoc/Select.js
@@ -0,0 +1,181 @@
+import { ref, reactive, watch, onMounted, defineEmits, defineProps } from "vue";
+import { contentIndex } from "@utils/tabindex.js";
+import Container from "@components/Widget/Container.vue";
+import Header from "@components/Forms/Header/Field.vue";
+import ErrorField from "@components/Forms/Error/Field.vue";
+
+
+/** 
+  @name Select.vue
+  @description This component is used to create a complete select field input with error handling and label.
+  We can be more precise by adding values that need to be selected to be valid.
+  We can also add popover to display more information.
+  It is mainly use in forms.
+  @example
+  {
+    id: 'test-input',
+    value: 'yes',
+    values : ['yes', 'no'],
+    name: 'test-input',
+    disabled: false,
+    required: true,
+    requiredValues : ['no'], // need required to be checked
+    label: 'Test select',
+  }
+  @param {string} id
+  @param {string} text - content of the button
+  @param {string} [type="button"] - button || submit
+  @param {boolean} [disabled=false]
+  @param {boolean} [hideText=false] - hide text to only display icon
+  @param {string} [color="primary"] 
+  @param {string} [size="normal"] - sm || normal || lg || xl
+  @param {string} [iconName=""] - store on components/Icons/Button
+  @param {string} [iconColor=""]
+  @param {object} [eventAttr={}] - {"store" : <store_name>, "default" : <default_value>,  "value" : <value_stored_on_click>, "target"<optional> : <target_id_element>, "valueExpanded" : "expanded_value"}
+  @param {string|number} [tabId=""]
+*/
+
+const props = defineProps({
+  // id && value && method
+    id: {
+        type: String,
+        required: true,
+    },
+    columns: {
+      type: [Object, Boolean],
+      required: false,
+      default: false
+    },
+    value: {
+        type: String,
+        required: true,
+    },
+    values: {
+        type: Array,
+        required: true,
+    },
+    disabled: {
+        type: Boolean,
+        required: false,
+    },
+    required: {
+        type: Boolean,
+        required: false,
+    },
+    requiredValues : {
+      type: Array,
+      required: false,
+      default : []
+    },
+    label: {
+        type: String,
+        required: true,
+    },
+    name: {
+        type: String,
+        required: true,
+    },
+    version: {
+        type: String,
+        required: false,
+        default : ""
+    },
+    hideLabel: {
+        type: Boolean,
+        required: false,
+    },
+    containerClass : {
+      type: String,
+      required: false,
+      default : ""
+    },
+    headerClass: {
+        type: String,
+        required: false,
+        default : ""
+    },
+    inpClass: {
+        type: String,
+        required: false,
+        default : ""
+    },
+    tabId: {
+        type: [String, Number],
+        required: false,
+        default: ""
+    },
+});
+
+
+// When mounted or when props changed, we want select to display new props values
+// When component value change itself, we want to switch to select.value
+// To avoid component to send and stick to props values (bad behavior)
+// Trick is to use select.value || props.value on template
+watch(props, (newProp, oldProp) => {
+  if (newProp.value !== select.value) {
+    select.value = "";
+  }
+});
+
+const select = reactive({
+  isOpen: false,
+  // On mounted value is null to display props value
+  // Then on new select we will switch to select.value
+  // If we use select.value : props.value
+  // Component will not re-render after props.value change
+  value: "",
+  isValid: !props.required ? true : props.requiredValues.length <= 0 ? true : props.requiredValues.includes(props.value) ? true : false,
+});
+
+const selectBtn = ref();
+const selectWidth = ref("");
+
+// EVENTS
+function toggleSelect() {
+  select.isOpen = select.isOpen ? false : true;
+}
+
+function closeSelect() {
+  select.isOpen = false;
+}
+
+function changeValue(newValue) {
+  // Allow on template to switch from prop value to component own value
+  // Then send the new value to parent
+  select.value = newValue;
+  // Check if value is required and if it is in requiredValues
+  select.isValid = !props.required ? true : props.requiredValues.length <= 0 ? true : props.requiredValues.includes(newValue) ? true : false;
+  closeSelect();
+  return newValue;
+}
+
+// Close select dropdown when clicked outside element
+watch(select, () => {
+  if (select.isOpen) {
+    document.querySelector("body").addEventListener("click", closeOutside);
+  } else {
+    document.querySelector("body").removeEventListener("click", closeOutside);
+  }
+});
+
+// Close select when clicked outside logic
+function closeOutside(e) {
+  try {
+    if (e.target !== selectBtn.value) {
+      select.isOpen = false;
+    }
+  } catch (err) {
+    select.isOpen = false;
+  }
+}
+
+onMounted(() => {
+  selectWidth.value = `${selectBtn.value.clientWidth}px`;
+  window.addEventListener("resize", () => {
+    try {
+      selectWidth.value = `${selectBtn.value.clientWidth}px`;
+    } catch (err) {}
+  });
+});
+
+const emits = defineEmits(["inp"]);
\ No newline at end of file
diff --git a/jsdoc/Select.md b/jsdoc/Select.md
new file mode 100644
index 000000000..876636788
Binary files /dev/null and b/jsdoc/Select.md differ
diff --git a/vuejs/client/src/components/Builder.vue b/vuejs/client/src/components/Builder.vue
index 8e7b15162..6ed36027c 100644
--- a/vuejs/client/src/components/Builder.vue
+++ b/vuejs/client/src/components/Builder.vue
@@ -3,28 +3,19 @@ import { reactive, onBeforeMount } from "vue";
 import Checkbox from "@components/Forms/Field/Checkbox.vue";
 import Select from "@components/Forms/Field/Select.vue";
 import Input from "@components/Forms/Field/Input.vue";
+import Datepicker from "@components/Forms/Field/Datepicker.vue";
+import Button from "@components/Widget/Button.vue";
 import GridLayout from "@components/Widget/GridLayout.vue";
 import Grid from "@components/Widget/Grid.vue";
 
-/* 
-  COMPONENT DESCRIPTION
-  *
-  *
-  This Builder component is used to create complete pages content with multiple components.
-  This is an abstract component that will be used to create any kind of page content.
-  You need to determine each container and each widget inside it.
-  *
-  *
-  PROPS ARGUMENTS
-  *
-  *
-  builder : array,
-  *
-  *
-  PROPS EXAMPLE
-  *
-  *
-  [{
+/**
+  @name Builder.vue
+  @description This component is a wrapper to create a complete page using containers and widgets.
+  We have to define each container and each widget inside it.
+  This is an abstract component that will be used to create any kind of page content (base dashboard elements like menu and news excluded)
+  @example
+  [
+   {
         "type": "card",  // this can be a "card", "modal", "table"... etc
         "containerClass": "", // tailwind css grid class (items-start, ...)
         "containerColumns" : {"pc": 12, "tablet": 12, "mobile": 12},
@@ -40,10 +31,9 @@ import Grid from "@components/Widget/Grid.vue";
                         data : {containerClass : "", columns : {"pc": 6, "tablet": 12, "mobile": 12}, id: 'test-select', value: 'yes', values: ['yes', 'no'], name: 'test-select', disabled: false, required: true, label: 'Test select', tabId: '1',}
                 }
         ]
-        },
+   }
   ]
-  *
-  *
+  @param {array} builder - Array of containers and widgets
 */
 
 const props = defineProps({
@@ -69,6 +59,8 @@ const props = defineProps({
                                 <Checkbox v-if="widget.type === 'Checkbox'" v-bind="widget.data"></Checkbox>
                                 <Select v-if="widget.type === 'Select'" v-bind="widget.data"></Select>
                                 <Input v-if="widget.type === 'Input'" v-bind="widget.data"></Input>
+                                <Datepicker v-if="widget.type === 'Datepicker'" v-bind="widget.data"></Datepicker>
+                                <Button v-if="widget.type === 'Button'" v-bind="widget.data"></Button>
                         </template>
                 </Grid>
         </GridLayout>
diff --git a/vuejs/client/src/components/Forms/Error/Field.vue b/vuejs/client/src/components/Forms/Error/Field.vue
index 5e95b551c..19d83923a 100644
--- a/vuejs/client/src/components/Forms/Error/Field.vue
+++ b/vuejs/client/src/components/Forms/Error/Field.vue
@@ -1,26 +1,16 @@
 <script setup>
 
-/*
-  COMPONENT DESCRIPTION
-  *
-  *
-  This error field component is used to show a feedback message to the user when the field is invalid.
-  *
-  *
-  PROPS ARGUMENTS
-  *
-  *
-  isValid: boolean,
-  isValue: boolean,
-  *
-  *
-  PROPS EXAMPLE
-  *
-  *
-  isValid: false,
-  isValue: false,
-  *
-  *
+/** 
+  @name Forms/Error/Field.vue
+  @description This component is used to display a feedback message to user when a field is invalid.
+  It is used with /Forms/Field components.
+  @example
+  {
+    isValid: false,
+    isValue: false,
+  }
+  @param {boolean} [isValid=false] - Check if the field is valid
+  @param {boolean} [isValue=false] - Check if the field has a value, display a different message if the field is empty or not
 */
 
 const props = defineProps({
diff --git a/vuejs/client/src/components/Forms/Field/Checkbox.vue b/vuejs/client/src/components/Forms/Field/Checkbox.vue
index 2f03ddd49..3165dc840 100644
--- a/vuejs/client/src/components/Forms/Field/Checkbox.vue
+++ b/vuejs/client/src/components/Forms/Field/Checkbox.vue
@@ -5,50 +5,35 @@ import Container from "@components/Widget/Container.vue";
 import Header from "@components/Forms/Header/Field.vue";
 import ErrorField from "@components/Forms/Error/Field.vue";
 
-/*
-  COMPONENT DESCRIPTION
-  *
-  *
-  This checkbox component is used to create a complete checkbox (label, validator message).
-  It is mainly use for checkbox setting form.  
-  *
-  *
-  PROPS ARGUMENTS
-  *
-  *
-  id: string,
-  columns: object,
-  value: string,
-  disabled: boolean,
-  required: boolean,
-  label: string,
-  name: string,
-  version: string,
-  hideLabel: boolean,
-  required: boolean,
-  containerClass: string,
-  headerClass: string,
-  inpClass: string,
-  tabId: string || number,
-  *
-  *
-  PROPS EXAMPLE
-  *
-  *
+
+/** 
+  @name Forms/Field/Checkbox.vue
+  @description This component is used to create a complete checkbox field input with error handling and label.
+  We can also add popover to display more information.
+  It is mainly use in forms.
+  @example
   { 
-  containerClass : "", 
   columns : {"pc": 6, "tablet": 12, "mobile": 12}, 
   id:"test-check", 
   value: "yes", 
   label: "Checkbox", 
   name: "checkbox", 
   required: true, 
-  version: "v1.0.0", 
   hideLabel: false, 
   headerClass: "text-red-500" 
   }
-  *
-  *
+  @param {string} id
+  @param {string} name
+  @param {string} label
+  @param {string} value
+  @param {boolean} [disabled=false]
+  @param {boolean} [required=false]
+  @param {object} [columns={"pc": "12", "tab": "12", "mob": "12}]
+  @param {boolean} [hideLabel=false]
+  @param {string} [containerClass=""]
+  @param {string} [headerClass=""]
+  @param {string} [inpClass=""] 
+  @param {string|number} [tabId=""]
 */
 
 const props = defineProps({
diff --git a/vuejs/client/src/components/Forms/Field/Datepicker.vue b/vuejs/client/src/components/Forms/Field/Datepicker.vue
index 94896bb3f..b547aa5e1 100644
--- a/vuejs/client/src/components/Forms/Field/Datepicker.vue
+++ b/vuejs/client/src/components/Forms/Field/Datepicker.vue
@@ -11,39 +11,15 @@ import "@assets/css/datepicker-foundation.css";
 import "@assets/css/flatpickr.css";
 import "@assets/css/flatpickr.dark.css";
 
-/*
-  COMPONENT DESCRIPTION
-  *
-  *
-  This datepicker component is used to create a complete datepicker (label, validator message).
+/** 
+  @name Forms/Field/Datepicker.vue
+  @description This component is used to create a complete datepicker field input with error handling and label.
   You can define a default date, a min and max date, and a format.
-  *
-  *
-  PROPS ARGUMENTS
-  *
-  *
-    id: string,
-    name: string,
-    label: string,
-    hideLabel: boolean,
-    headerClass: string,
-    containerClass: string,
-    columns: object || boolean,
-    disabled: boolean,
-    required: boolean,
-    defaultDate: string || number || date,
-    noPickBeforeStamp: string || number,
-    noPickAfterStamp: string || number,
-    inpClass: string,
-    tabId: string || number,
-  *
-  *
-  PROPS EXAMPLE
-  *
-  *
+  We can also add popover to display more information.
+  It is mainly use in forms.
+  @example
   { 
     id: 'test-date',
-    containerClass : "",
     columns : {"pc": 6, "tablet": 12, "mobile": 12},
     disabled: false,
     required: true,
@@ -51,10 +27,20 @@ import "@assets/css/flatpickr.dark.css";
     noPickBeforeStamp: 1735682600000,
     noPickAfterStamp: 1735689600000,
     inpClass: "text-center",
-    tabId: "1",
   }
-  *
-  *
+  @param {string} id
+  @param {string} name
+  @param {string} label
+  @param {string|number|date} [defaultDate=null] - Default date when instanciate
+  @param {string|number} [noPickBeforeStamp=""] - Impossible to pick a date before this date
+  @param {string|number} [noPickAfterStamp=""] - Impossible to pick a date after this date
+  @param {boolean} [hideLabel=false]
+  @param {object|boolean} [columns={"pc": "12", "tab": "12", "mob": "12}]
+  @param {boolean} [disabled=false]
+  @param {boolean} [required=false]
+  @param {string} [headerClass=""]
+  @param {string} [containerClass=""]
+  @param {string|number} [tabId=""]
 */
 
 const props = defineProps({
diff --git a/vuejs/client/src/components/Forms/Field/Input.vue b/vuejs/client/src/components/Forms/Field/Input.vue
index 5c3ab2dd5..3d6ab9fca 100644
--- a/vuejs/client/src/components/Forms/Field/Input.vue
+++ b/vuejs/client/src/components/Forms/Field/Input.vue
@@ -5,42 +5,14 @@ import Container from "@components/Widget/Container.vue";
 import Header from "@components/Forms/Header/Field.vue";
 import ErrorField from "@components/Forms/Error/Field.vue";
 
-
-/* 
-  COMPONENT DESCRIPTION
-  *
-  *
-  This input component is used to create a complete input (label, validator message).
-  It is mainly use for input setting form.  
-  *
-  *
-  PROPS ARGUMENTS
-  *
-  *
-  id: string,
-  columns : <object|boolean>,
-  name: string,
-  type: string<"text"|"email"|"password"|"number"|"tel"|"url">,
-  disabled: boolean,
-  value: string,
-  placeholder: string,
-  pattern: string,
-  clipboard: boolean,
-  readonly: boolean,
-  label: string,
-  name: string,
-  version: string,
-  hideLabel: boolean,
-  required: boolean,
-  containerClass: string,
-  headerClass: string,
-  inpClass: string,
-  tabId: string || number,
-  *
-  *
-  PROPS EXAMPLE
-  *
-  *
+/** 
+  @name Forms/Field/Input.vue
+  @description This component is used to create a complete input field input with error handling and label.
+  We can add a clipboard button to copy the input value.
+  We can also add a password button to show the password.
+  We can also add popover to display more information.
+  It is mainly use in forms.
+  @example
   {
     id: 'test-input',
     value: 'yes',
@@ -50,11 +22,25 @@ import ErrorField from "@components/Forms/Error/Field.vue";
     required: true,
     label: 'Test input',
     pattern : "(test)",
-    tabId: '1',
   }
-  *
-  *
+  @param {string} id
+  @param {string} name
+  @param {string} type - text, email, password, number, tel, url
+  @param {string} value
+  @param {string} label
+  @param {boolean} [disabled=false]
+  @param {boolean} [required=false]
+  @param {string} [placeholder=""]
+  @param {string} [pattern="(?.*)"]
+  @param {boolean} [clipboard=false] - allow to copy the input value
+  @param {boolean} [readonly=false] - allow to read only the input value
+  @param {boolean} [hideLabel=false]
+  @param {string} [containerClass=""]
+  @param {string} [inpClass=""]
+  @param {string} [headerClass=""]
+  @param {string|number} [tabId=""]
 */
+
 const props = defineProps({
   // id && value && method
     id: {
diff --git a/vuejs/client/src/components/Forms/Field/Select.vue b/vuejs/client/src/components/Forms/Field/Select.vue
index 1e46954eb..1d7a5e18e 100644
--- a/vuejs/client/src/components/Forms/Field/Select.vue
+++ b/vuejs/client/src/components/Forms/Field/Select.vue
@@ -6,37 +6,13 @@ import Header from "@components/Forms/Header/Field.vue";
 import ErrorField from "@components/Forms/Error/Field.vue";
 
 
-/* 
-  COMPONENT DESCRIPTION
-  *
-  *
-  This select component is used to create a complete select (label, validator message).
-  It is mainly use for select setting form.  
-  *
-  *
-  PROPS ARGUMENTS
-  *
-  *
-  id: string,
-  columns : <object|boolean>,
-  value:  string,
-  values:  array,
-  disabled: boolean,
-  required: boolean,
-  requiredValues : array,
-  label: string,
-  name: string,
-  version: string,
-  hideLabel: boolean,
-  containerClass: string,
-  inpClass: string,
-  headerClass: string,
-  tabId: string || number,
-  *
-  *
-  PROPS EXAMPLE
-  *
-  *
+/** 
+  @name Forms/Field/Select.vue
+  @description This component is used to create a complete select field input with error handling and label.
+  We can be more precise by adding values that need to be selected to be valid.
+  We can also add popover to display more information.
+  It is mainly use in forms.
+  @example
   {
     id: 'test-input',
     value: 'yes',
@@ -47,8 +23,20 @@ import ErrorField from "@components/Forms/Error/Field.vue";
     requiredValues : ['no'], // need required to be checked
     label: 'Test select',
   }
-  *
-  *
+  @param {string} id
+  @param {string} name
+  @param {string} value
+  @param {string} label
+  @param {array} values
+  @param {boolean} [disabled=false]
+  @param {boolean} [required=false]
+  @param {array} [requiredValues=[]] - values that need to be selected to be valid, works only if required is true
+  @param {object|boolean} [columns={"pc": "12", "tab": "12", "mob": "12}]
+  @param {boolean} [hideLabel=false]
+  @param {string} [containerClass=""]
+  @param {string} [inpClass=""]
+  @param {string} [headerClass=""]
+  @param {string|number} [tabId=""]
 */
 
 
@@ -161,7 +149,6 @@ function changeValue(newValue) {
   // Then send the new value to parent
   select.value = newValue;
   // Check if value is required and if it is in requiredValues
-  console.log(newValue, props.requiredValues, props.requiredValues.includes(newValue) ? true : false);
   select.isValid = !props.required ? true : props.requiredValues.length <= 0 ? true : props.requiredValues.includes(newValue) ? true : false;
   closeSelect();
   return newValue;
diff --git a/vuejs/client/src/components/Forms/Header/Field.vue b/vuejs/client/src/components/Forms/Header/Field.vue
index d6c6e4a78..2808bcfa3 100644
--- a/vuejs/client/src/components/Forms/Header/Field.vue
+++ b/vuejs/client/src/components/Forms/Header/Field.vue
@@ -1,38 +1,23 @@
 <script setup>
 import { defineProps } from "vue";
 
-/* 
-  COMPONENT DESCRIPTION
-  *
-  *
-  This header component is used with field in order to link a label to field type.
-  We can show additionnal data, like validaiton pattern with invalid message,
-  Or add some popovers elements.
-  *
-  *
-  PROPS ARGUMENTS
-  *
-  *
-  label: string,
-  name: string,
-  required: boolean,
-  version: string,
-  hideLabel: boolean,
-  required: boolean,
-  headerClass: string,
-  *
-  *
-  PROPS EXAMPLE
-  *
-  *
+/** 
+  @name Forms/Header/Field.vue
+  @description This component is used with field in order to link a label to field type.
+  We can add popover to display more information.
+  Always use with field component.
+  @example
   {
     label: 'Test',
     version : "0.1.0",
     name: 'test-input',
     required: true,
   }
-  *
-  *
+  @param {string} label
+  @param {string} name
+  @param {boolean} [required=false]
+  @param {boolean} [hideLabel=false]
+  @param {string} [headerClass=""]
 */
 
 const props = defineProps({
diff --git a/vuejs/client/src/components/Icons/Button/Add.vue b/vuejs/client/src/components/Icons/Button/Add.vue
index 09e273735..544ba949f 100644
--- a/vuejs/client/src/components/Icons/Button/Add.vue
+++ b/vuejs/client/src/components/Icons/Button/Add.vue
@@ -1,26 +1,15 @@
 <script setup>
 import { computed } from 'vue';
 
-
-/* 
-  COMPONENT DESCRIPTION
-  *
-  *
-  This svg component is used to create a complete svg icon for a button.
-  *
-  *
-  PROPS ARGUMENTS
-  *
-  *
-  iconColor: string,
-  *
-  *
-  PROPS EXAMPLE
-  *
-  *
-  iconColor: 'white',
-  *
-  *
+/** 
+  @name Icons/Button/Add.vue
+  @description This component is used to create a complete svg icon for a button.
+  This svg is related to a add action button.
+  @example
+  {
+    iconColor: 'white',
+  }
+  @param {string} [iconColor="white"]
 */
 
 const props = defineProps({
diff --git a/vuejs/client/src/components/Widget/Button.vue b/vuejs/client/src/components/Widget/Button.vue
index 4980a9448..4d918c96f 100644
--- a/vuejs/client/src/components/Widget/Button.vue
+++ b/vuejs/client/src/components/Widget/Button.vue
@@ -5,6 +5,37 @@ import { useEventStore } from "@store/event.js";
 import Container from "@components/Widget/Container.vue";
 import IconAdd from "@components/Icons/Button/Add.vue";
 
+/** 
+  @name Widget/Button.vue
+  @description This component is a standard button.
+  You can link this button to the event store on click with eventAttr.
+  This will allow you to share a value with other components, for example switching form on a click.
+  The eventAttr object must contain the store name and the value to send on click at least.
+  It can also contain the target id element and the expanded value, this will add additionnal accessibility attributs to the button.
+  @example
+  {
+    id: "open-modal-btn",
+    text: "Open modal",
+    disabled: false,
+    hideText: true,
+    color: "green",
+    size: "normal",
+    iconName: "modal",
+    iconColor: "white",
+    eventAttr: {"store" : "modal", "value" : "open", "target" : "modal_id", "valueExpanded" : "open"},7
+  }
+  @param {string} id
+  @param {string} text - Content of the button
+  @param {string} [type="button"] - Can be of type button || submit
+  @param {boolean} [disabled=false]
+  @param {boolean} [hideText=false] - Hide text to only display icon
+  @param {string} [color="primary"] 
+  @param {string} [size="normal"] - Can be of size sm || normal || lg || xl
+  @param {string} [iconName=""] - Name in lowercase of icons store on /Icons/Button
+  @param {string} [iconColor=""]
+  @param {object} [eventAttr={}] - Store event on click {"store" : <store_name>, "default" : <default_value>,  "value" : <value_stored_on_click>, "target"<optional> : <target_id_element>, "valueExpanded" : "expanded_value"}
+  @param {string|number} [tabId=""]
+*/
 
 /*
   COMPONENT DESCRIPTION
diff --git a/vuejs/client/src/components/Widget/Container.vue b/vuejs/client/src/components/Widget/Container.vue
index 39cb3a6e6..9136dace6 100644
--- a/vuejs/client/src/components/Widget/Container.vue
+++ b/vuejs/client/src/components/Widget/Container.vue
@@ -1,31 +1,19 @@
 <script setup>
 import { computed } from 'vue';
 
-/* 
-  COMPONENT DESCRIPTION
-  *
-  *
-  This container component is mainly use as widget container.
-  Each widget can define the base class for the container.
-  In case we columns, this will use it too for positioning.
-  *
-  *
-  PROPS ARGUMENTS
-  *
-  *
-  class: string,
-  columns: object,
-  *
-  *
-  PROPS EXAMPLE
-  *
-  *
+/** 
+  @name Widget/Container.vue
+  @description This component is a basic container that can be used to wrap other components.
+  In case we are working with grid system, we can add columns to position the container.
+  We can define additional class too.
+  This component is mainly use as widget container.
+  @example
   {
-    class: "w-full h-full bg-white rounded shadow-md",
+    containerClass: "w-full h-full bg-white rounded shadow-md",
     columns: { pc: 12, tablet: 12, mobile: 12}
   }
-  *
-  *
+  @param {string} [containerClass=""] - Additional class
+  @param {object|boolean} [columns=false] - Work with grid system { pc: 12, tablet: 12, mobile: 12}
 */
 
 const props = defineProps({
diff --git a/vuejs/client/src/components/Widget/Flex.vue b/vuejs/client/src/components/Widget/Flex.vue
index 8ce92198a..a33457245 100644
--- a/vuejs/client/src/components/Widget/Flex.vue
+++ b/vuejs/client/src/components/Widget/Flex.vue
@@ -1,25 +1,17 @@
 <script setup>
 import { computed } from 'vue';
 
-/*
-  COMPONENT DESCRIPTION
-  *
-  *
-  This container component is used to align groups of components horizontally using flex.
-  *
-  *
-  PROPS ARGUMENTS
-  *
-  *
-  flexClass: string,
-  *
-  *
-  PROPS EXAMPLE
-  *
-  *
+/** 
+  @name Widget/Flex.vue
+  @description This component is a basic container that can be used to wrap other components.
+  Per default, it aligns the components horizontally using flex.
+  We can define additional class too.
+  This component is mainly use as widget container or for groups of widget.
+  @example
+  {
   flexClass: "flex-start"
-  *
-  *
+  }
+  @param {string} [flexClass="flex-start"] - Additional class
 */
 
 const props = defineProps({
diff --git a/vuejs/client/src/components/Widget/Grid.vue b/vuejs/client/src/components/Widget/Grid.vue
index 0c7e077c5..64de3ddc9 100644
--- a/vuejs/client/src/components/Widget/Grid.vue
+++ b/vuejs/client/src/components/Widget/Grid.vue
@@ -1,46 +1,33 @@
 <script setup>
 import { computed } from 'vue';
 
-/* 
-  COMPONENT DESCRIPTION
-  *
-  *
-  This Grid component is a container with a grid system.
-  In case we are adding columns, this will be added, so it can be used with parent grid.
-  *
-  *
-  PROPS ARGUMENTS
-  *
-  *
-  type : <"card"|"table"|...>  (will determine component style)
-  title: string,
-  columns : { pc: int, tablet: int, mobile: int},
-  class : <"items-start"|"items-center"|"items-end">
-  *
-  *
-  PROPS EXAMPLE
-  *
-  *
-  columns: { pc: 12, tablet: 12, mobile: 12},
-  gridClass: "items-start"
-  *
-  *
+/** 
+  @name Widget/Grid.vue
+  @description This component is a basic container that can be used to wrap other components.
+  This container is based on a grid system and will return a grid container with 12 columns.
+  In case we are working with grid system, we can add columns to position the container.
+  We can define additional class too.
+  This component is mainly use as widget container or as a child of a GridLayout.
+  @example
+  {
+    columns: { pc: 12, tablet: 12, mobile: 12},
+    gridClass: "items-start"
+  }
+  @param {string} [gridClass="items-start"] - Additional class
+  @param {object|boolean} [columns=false] - Work with grid system { pc: 12, tablet: 12, mobile: 12}
 */
 
 const props = defineProps({
     columns : {
         type: [Object, Boolean],
         required: false,
-        default : {
-            pc: 12,
-            tablet: 12,
-            mobile: 12}
-    },
-gridClass : {
-        type: String,
-        required: false,
-        default: "items-start"
+        default : false,
     },
+    gridClass : {
+            type: String,
+            required: false,
+            default: "items-start"
+        },
 })
 
 
diff --git a/vuejs/client/src/components/Widget/GridLayout.vue b/vuejs/client/src/components/Widget/GridLayout.vue
index 06fc4aa92..1f4f5f659 100644
--- a/vuejs/client/src/components/Widget/GridLayout.vue
+++ b/vuejs/client/src/components/Widget/GridLayout.vue
@@ -1,41 +1,30 @@
 <script setup>
 import { computed } from 'vue';
 
-/* 
-  COMPONENT DESCRIPTION
-  *
-  *
-  This GridLayout component is used at the top level of a page layout.
-  This component will determine the position of layout components based on the grid columns.
+/** 
+  @name Widget/GridLayout.vue
+  @description This component is used for top level page layout.
+  This will determine the position of layout components based on the grid system.
   We can create card, modal, table and others top level layout using this component.
-  The content of this component is grid based.
-  *
-  *
-  PROPS ARGUMENTS
-  *
-  *
-  type : <"card"|"table"|...>  (will determine component style)
-  title: string,
-  columns : { pc: int, tablet: int, mobile: int},
-  gridLayoutClass : <"items-start"|"items-center"|"items-end">
-  *
-  *
-  PROPS EXAMPLE
-  *
-  *
-  type: "card",
-  title: "Test",
-  columns: { pc: 12, tablet: 12, mobile: 12},
-  gridLayoutClass: "items-start"
-  *
-  *
+  This component is mainly use as Grid parent component.
+  @example
+  {
+    type: "card",
+    title: "Test",
+    columns: { pc: 12, tablet: 12, mobile: 12},
+    gridLayoutClass: "items-start"
+  }
+  @param {string} [type="card"] - Type of layout component, we can have : card, table, modal and others
+  @param {string} [title=""] - Title of the layout component, will be displayed at the top if exists. Type of layout component will determine the style of the title.
+  @param {object} [columns={"pc": 12, "tablet": 12, "mobile": 12}] - Work with grid system { pc: 12, tablet: 12, mobile: 12}
+  @param {string} [gridLayoutClass="items-start"] - Additional class
 */
 
 const props = defineProps({
     type : {
         type: String,
         required: false,
-        default : "grid"
+        default : "card"
     },
     title : {
         type: String,
diff --git a/vuejs/client/src/components/Widget/Popover.vue b/vuejs/client/src/components/Widget/Popover.vue
index a92bce843..96f1922da 100644
--- a/vuejs/client/src/components/Widget/Popover.vue
+++ b/vuejs/client/src/components/Widget/Popover.vue
@@ -3,6 +3,10 @@ import { reactive, onMounted, defineProps } from "vue";
 import { contentIndex } from "@utils/tabindex.js";
 
 const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
   content: {
     type: String,
     required: false,
@@ -11,7 +15,7 @@ const props = defineProps({
     type: String,
     required: false,
   },
-  iconClass: {
+  iconColor: {
     type: String,
     required: false,
   },
@@ -29,22 +33,6 @@ const popover = reactive({
   isHover: false,
 });
 
-// Different style for desktop and mobile
-const tab = reactive({
-  isMobile: false,
-  // format label to fit id
-  id: props.content.trim().toLowerCase().replaceAll(" ", "-").substring(0, 15) + "popover",
-});
-
-onMounted(() => {
-  // When component is created but before is insert on DOM
-  // Check window width to determine we need to display mobile or desktop tab design
-  tab.isMobile = window.innerWidth >= 768 ? false : true;
-  window.addEventListener("resize", () => {
-    tab.isMobile = window.innerWidth >= 768 ? false : true;
-  });
-});
-
 function showPopover() {
   popover.isHover = true;
   setTimeout(() => {
@@ -61,9 +49,9 @@ function hidePopover() {
 <template>
   <component
     :tabindex="contentIndex"
-    :aria-controls="`${tab.id}`"
+    :aria-controls="`${props.id}-popover-text`"
     :aria-expanded="popover.isOpen ? 'true' : 'false'"
-    :aria-describedby="`${tab.id}-text`"
+    :aria-describedby="`${props.id}-popover-text`"
     :is="props.tag"
     role="button"
     @focusin="showPopover()"
@@ -72,9 +60,6 @@ function hidePopover() {
     @pointerleave="hidePopover()"
     class="cursor-pointer flex justify-start w-full"
   >
-    <span :id="`${tab.id}-text`" class="sr-only">
-      {{ $t("dashboard_popover_button_desc") }}
-    </span>
     <svg
       role="img"
       aria-hidden="true"
@@ -88,13 +73,13 @@ function hidePopover() {
     </svg>
   </component>
   <div
-    :id="`${tab.label}-popover-${tab.id}`"
+    :id="`${props.id}-popover-container`"
     role="status"
     :aria-hidden="popover.isOpen ? 'false' : 'true'"
     v-show="popover.isOpen"
     :class="['popover-settings-container']"
     :aria-description="$t('dashboard_popover_detail_desc')"
   >
-    <p :id="${tab.id}-text" class="popover-settings-text"><slot></slot></p>
+    <p :id="`${props.id}-popover-text`" class="popover-settings-text"><slot></slot></p>
   </div>
 </template>
\ No newline at end of file
diff --git a/vuejs/client/src/pages/test/Test.vue b/vuejs/client/src/pages/test/Test.vue
index 5859f3209..43a89a8aa 100644
--- a/vuejs/client/src/pages/test/Test.vue
+++ b/vuejs/client/src/pages/test/Test.vue
@@ -24,8 +24,8 @@ const selectData = {
   values: ['yes', 'no'],
   name: 'test-select',
   disabled: false,
-  required: true,
-  requiredValues : ['no'],
+  required: false,
+  requiredValues : ["no"],
   label: 'Test select',
   tabId: '1',
 }