diff --git a/apps/demo/package.json b/apps/demo/package.json
index 2206610bc..31a06efe6 100644
--- a/apps/demo/package.json
+++ b/apps/demo/package.json
@@ -12,6 +12,8 @@
     "preview": "vite preview",
     "snapshot:update": "vitest --environment jsdom run --update",
     "sort-package": "npx sort-package-json",
+    "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input",
+    "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input",
     "test": "CI=true vitest",
     "test:unit": "CI=true vitest",
     "typecheck": "tsc --noEmit -p tsconfig.vitest.json --composite false"
@@ -23,7 +25,6 @@
     "@prefabs.tech/react-layout": "0.72.1",
     "@prefabs.tech/react-ui": "0.72.1",
     "@prefabs.tech/react-user": "0.72.1",
-    "@prefabs.tech/tsconfig": "0.6.0",
     "@reduxjs/toolkit": "1.9.7",
     "normalize.css": "8.0.1",
     "primeicons": "7.0.0",
@@ -36,11 +37,12 @@
     "zod": "3.24.4"
   },
   "devDependencies": {
-    "@prefabs.tech/tsconfig": "0.5.0",
     "@babel/core": "7.26.10",
     "@babel/plugin-syntax-flow": "7.26.0",
     "@babel/plugin-transform-react-jsx": "^7.21.5",
-    "@prefabs.tech/eslint-config": "0.5.0",
+    "@prefabs.tech/eslint-config": "0.7.0",
+    "@prefabs.tech/stylelint-config": "0.7.0",
+    "@prefabs.tech/tsconfig": "0.7.0",
     "@testing-library/react": "16.3.2",
     "@types/jsdom": "21.1.7",
     "@types/node": "25.3.5",
@@ -51,6 +53,9 @@
     "eslint": "9.39.4",
     "jsdom": "27.0.1",
     "prettier": "3.8.3",
+    "stylelint": "17.9.1",
+    "stylelint-config-standard": "40.0.0",
+    "stylelint-order": "8.1.1",
     "typescript": "5.9.3",
     "vite": "7.3.2",
     "vite-plugin-compression": "0.5.1",
diff --git a/apps/demo/setup-test.ts b/apps/demo/setup-test.ts
index 3bb3c5cce..cd9a4146c 100644
--- a/apps/demo/setup-test.ts
+++ b/apps/demo/setup-test.ts
@@ -4,10 +4,10 @@ import { vi } from "vitest";
 vi.mock("@prefabs.tech/react-i18n", () => ({
   useTranslation: () => {
     return {
-      t: (string_) => string_,
       i18n: {
         changeLanguage: () => new Promise(() => {}),
       },
+      t: (string_) => string_,
     };
   },
 }));
diff --git a/apps/demo/src/Routers.tsx b/apps/demo/src/Routers.tsx
index 1bf999f01..7efeecb35 100644
--- a/apps/demo/src/Routers.tsx
+++ b/apps/demo/src/Routers.tsx
@@ -28,70 +28,70 @@ import {
 const router = createBrowserRouter(
   [
     {
-      path: "/",
-      element: <BasicLayout />,
-      errorElement: <ErrorBoundary />,
       children: [
         {
-          index: true,
           element: <Home />,
+          index: true,
         },
         {
-          path: "/ui",
-          element: <UIPages />,
           children: [
             {
-              index: true,
               element: <UIPage></UIPage>,
+              index: true,
             },
             ...uiRoutes,
           ],
+          element: <UIPages />,
+          path: "/ui",
         },
         {
-          path: "/user",
-          element: <UserPages />,
           children: [
             {
-              index: true,
               element: <UserPage></UserPage>,
+              index: true,
             },
             ...userRoutes,
           ],
+          element: <UserPages />,
+          path: "/user",
         },
         {
-          path: "/form",
-          element: <FormPages />,
           children: [
             {
-              index: true,
               element: <FormPage></FormPage>,
+              index: true,
             },
             ...formRoutes,
           ],
+          element: <FormPages />,
+          path: "/form",
         },
         {
-          path: "/layout",
-          element: <LayoutPages />,
           children: [
             {
-              index: true,
               element: <LayoutPage></LayoutPage>,
+              index: true,
             },
             ...layoutRoutes,
           ],
+          element: <LayoutPages />,
+          path: "/layout",
         },
         {
-          path: "/i18n",
-          element: <I18nPages />,
           children: [
             {
-              index: true,
               element: <I18nPage></I18nPage>,
+              index: true,
             },
             ...i18nRoutes,
           ],
+          element: <I18nPages />,
+          path: "/i18n",
         },
       ],
+      element: <BasicLayout />,
+      errorElement: <ErrorBoundary />,
+      path: "/",
     },
   ],
   {
diff --git a/apps/demo/src/Views/ErrorBoundary/__test__/ErrorBoundary.snapshot.test.tsx b/apps/demo/src/Views/ErrorBoundary/__test__/ErrorBoundary.snapshot.test.tsx
index 3754d57d0..ea7f43c18 100644
--- a/apps/demo/src/Views/ErrorBoundary/__test__/ErrorBoundary.snapshot.test.tsx
+++ b/apps/demo/src/Views/ErrorBoundary/__test__/ErrorBoundary.snapshot.test.tsx
@@ -5,7 +5,7 @@ import ErrorBoundary from "../index";
 
 vi.mock("react-router-dom", async () => ({
   ...(await vi.importActual("react-router-dom")),
-  useRouteError: () => ({ statusText: 404, message: "Not Found" }),
+  useRouteError: () => ({ message: "Not Found", statusText: 404 }),
 }));
 
 test("Component matches snapshot", async () => {
diff --git a/apps/demo/src/Views/ErrorBoundary/__test__/ErrorBoundary.test.tsx b/apps/demo/src/Views/ErrorBoundary/__test__/ErrorBoundary.test.tsx
index 2dbb53fa0..9404443ed 100644
--- a/apps/demo/src/Views/ErrorBoundary/__test__/ErrorBoundary.test.tsx
+++ b/apps/demo/src/Views/ErrorBoundary/__test__/ErrorBoundary.test.tsx
@@ -5,7 +5,7 @@ import ErrorBoundary from "../index";
 
 vi.mock("react-router-dom", async () => ({
   ...(await vi.importActual("react-router-dom")),
-  useRouteError: () => ({ statusText: 404, message: "Not Found" }),
+  useRouteError: () => ({ message: "Not Found", statusText: 404 }),
 }));
 
 test("show error when loader throws error", async () => {
diff --git a/apps/demo/src/Views/ErrorBoundary/index.tsx b/apps/demo/src/Views/ErrorBoundary/index.tsx
index bdcf10038..0d4507020 100644
--- a/apps/demo/src/Views/ErrorBoundary/index.tsx
+++ b/apps/demo/src/Views/ErrorBoundary/index.tsx
@@ -1,11 +1,12 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Page } from "@prefabs.tech/react-ui";
 import { useRouteError } from "react-router-dom";
+
 import "./ErrorBoundary.css";
 
 type RouteError = {
-  statusText?: string;
   message?: string;
+  statusText?: string;
 };
 
 const ErrorBoundary = (): JSX.Element => {
diff --git a/apps/demo/src/Views/Form/components/FileInput/FileInput.tsx b/apps/demo/src/Views/Form/components/FileInput/FileInput.tsx
index 3cd944adf..922d43d06 100644
--- a/apps/demo/src/Views/Form/components/FileInput/FileInput.tsx
+++ b/apps/demo/src/Views/Form/components/FileInput/FileInput.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Button, Page } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
+import { Section } from "../../../../components/Demo";
 import {
   FileAttachDemo,
   FileInputButton,
@@ -9,7 +10,6 @@ import {
   FormWithFileInput,
   FormWithFileInputButton,
 } from "./_components";
-import { Section } from "../../../../components/Demo";
 
 export const FileInputDemo = () => {
   const [t] = useTranslation("form");
@@ -21,10 +21,10 @@ export const FileInputDemo = () => {
       title={t("fileInput.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
diff --git a/apps/demo/src/Views/Form/components/FileInput/_components/FileAttachDemo.tsx b/apps/demo/src/Views/Form/components/FileInput/_components/FileAttachDemo.tsx
index 83de3210a..4e060c228 100644
--- a/apps/demo/src/Views/Form/components/FileInput/_components/FileAttachDemo.tsx
+++ b/apps/demo/src/Views/Form/components/FileInput/_components/FileAttachDemo.tsx
@@ -1,10 +1,10 @@
+import type { FileExtended } from "@prefabs.tech/react-form";
+
 import { FileAttachBasic } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Tooltip } from "@prefabs.tech/react-ui";
 import { useRef, useState } from "react";
 
-import type { FileExtended } from "@prefabs.tech/react-form";
-
 export const FileAttachDemo = () => {
   const { t } = useTranslation("files");
   const [selectedFiles, setSelectedFiles] = useState<FileExtended[]>([]);
@@ -13,26 +13,26 @@ export const FileAttachDemo = () => {
   return (
     <>
       <FileAttachBasic
-        name="fileAttach"
-        selectButtonProps={{ iconLeft: "pi pi-file" }}
-        value={selectedFiles}
         mode={"update"}
         multiple={true}
+        name="fileAttach"
         onChange={(file: FileExtended[]) => {
           setSelectedFiles(file);
         }}
+        selectButtonProps={{ iconLeft: "pi pi-file" }}
         selectedFileDisplay="none"
+        value={selectedFiles}
       />
 
       {selectedFiles.map((file: FileExtended, i) => {
         return (
-          <div key={file.name} className="attached-file">
+          <div className="attached-file" key={file.name}>
             <span>{file.name}</span>
             <Tooltip
+              delay={200}
               elementRef={reference}
-              position="top"
               offset={10}
-              delay={200}
+              position="top"
             >
               <span>{t("fileAttach.deleteFileMessage")}</span>
             </Tooltip>
diff --git a/apps/demo/src/Views/Form/components/FileInput/_components/FileInputButton.tsx b/apps/demo/src/Views/Form/components/FileInput/_components/FileInputButton.tsx
index 0dee42225..a8efcf724 100644
--- a/apps/demo/src/Views/Form/components/FileInput/_components/FileInputButton.tsx
+++ b/apps/demo/src/Views/Form/components/FileInput/_components/FileInputButton.tsx
@@ -12,28 +12,28 @@ export const FileInputButton: React.FC = () => {
   return (
     <>
       <FileInput
-        selectedFileDisplay="popup"
-        inputMethod="button"
-        value={[]}
-        emptySelectionMessage={t("fileInput.emptySelectionMessage")}
-        inputButtonLabel={t("fileInput.buttons.label.inputButtonLabel")}
-        inputButtonLabelSelected={t(
-          "fileInput.buttons.label.inputButtonLabelSelected",
-        )}
-        name="images"
+        addDescriptionLabel={t("fileInput.description.label")}
+        descriptionPlaceholder={t("fileInput.description.placeholder")}
+        dropzoneMessage={t("fileInput.dropzoneMessage")}
         dropzoneOptions={{
           accept: {
             "image/*": [".jpeg", ".png"],
           },
         }}
+        emptySelectionMessage={t("fileInput.emptySelectionMessage")}
         enableDescription
-        dropzoneMessage={t("fileInput.dropzoneMessage")}
-        addDescriptionLabel={t("fileInput.description.label")}
-        descriptionPlaceholder={t("fileInput.description.placeholder")}
+        inputButtonLabel={t("fileInput.buttons.label.inputButtonLabel")}
+        inputButtonLabelSelected={t(
+          "fileInput.buttons.label.inputButtonLabelSelected",
+        )}
+        inputMethod="button"
+        name="images"
+        onChange={onChange}
         selectButtonProps={{
           iconLeft: "pi pi-file",
         }}
-        onChange={onChange}
+        selectedFileDisplay="popup"
+        value={[]}
       />
     </>
   );
diff --git a/apps/demo/src/Views/Form/components/FileInput/_components/FileUpload.tsx b/apps/demo/src/Views/Form/components/FileInput/_components/FileUpload.tsx
index 00c6af8f0..62dbbf9fb 100644
--- a/apps/demo/src/Views/Form/components/FileInput/_components/FileUpload.tsx
+++ b/apps/demo/src/Views/Form/components/FileInput/_components/FileUpload.tsx
@@ -6,26 +6,26 @@ export const FileUploadDemo = () => {
 
   return (
     <FileUpload
-      name="images"
+      addDescriptionLabel={t("fileInput.description.label")}
+      cancelButtonOptions={{
+        iconLeft: "pi pi-times",
+        label: t("fileUpload.actions.cancel"),
+      }}
+      descriptionPlaceholder={t("fileInput.description.placeholder")}
+      dropzoneMessage={t("fileInput.dropzoneMessage")}
       dropzoneOptions={{
         accept: {
           "image/*": [".jpeg", ".png"],
         },
       }}
-      value={[]}
       enableDescription
-      dropzoneMessage={t("fileInput.dropzoneMessage")}
-      addDescriptionLabel={t("fileInput.description.label")}
-      descriptionPlaceholder={t("fileInput.description.placeholder")}
+      name="images"
       onUpload={() => {}}
       uploadButtonOptions={{
-        label: t("fileUpload.actions.upload"),
         iconLeft: "pi pi-plus",
+        label: t("fileUpload.actions.upload"),
       }}
-      cancelButtonOptions={{
-        label: t("fileUpload.actions.cancel"),
-        iconLeft: "pi pi-times",
-      }}
+      value={[]}
     />
   );
 };
diff --git a/apps/demo/src/Views/Form/components/FileInput/_components/FormFileInputButton.tsx b/apps/demo/src/Views/Form/components/FileInput/_components/FormFileInputButton.tsx
index 16cda4d75..bc6fcb7c0 100644
--- a/apps/demo/src/Views/Form/components/FileInput/_components/FormFileInputButton.tsx
+++ b/apps/demo/src/Views/Form/components/FileInput/_components/FormFileInputButton.tsx
@@ -23,26 +23,26 @@ export const FormWithFileInputButton: React.FC = () => {
     <Provider onSubmit={onSubmit}>
       <UploadBy />
       <FormFileInput
-        selectedFileDisplay="popup"
-        inputMethod="button"
-        emptySelectionMessage={t("fileInput.emptySelectionMessage")}
-        inputButtonLabel={t("fileInput.buttons.label.inputButtonLabel")}
-        inputButtonLabelSelected={t(
-          "fileInput.buttons.label.inputButtonLabelSelected",
-        )}
-        name="images"
+        addDescriptionLabel={t("fileInput.description.label")}
+        descriptionPlaceholder={t("fileInput.description.placeholder")}
+        dropzoneMessage={t("fileInput.dropzoneMessage")}
         dropzoneOptions={{
           accept: {
             "image/*": [".jpeg", ".png"],
           },
         }}
+        emptySelectionMessage={t("fileInput.emptySelectionMessage")}
         enableDescription
-        dropzoneMessage={t("fileInput.dropzoneMessage")}
-        addDescriptionLabel={t("fileInput.description.label")}
-        descriptionPlaceholder={t("fileInput.description.placeholder")}
+        inputButtonLabel={t("fileInput.buttons.label.inputButtonLabel")}
+        inputButtonLabelSelected={t(
+          "fileInput.buttons.label.inputButtonLabelSelected",
+        )}
+        inputMethod="button"
+        name="images"
         selectButtonProps={{
           iconLeft: "pi pi-file",
         }}
+        selectedFileDisplay="popup"
       />
       <div className="mb-4">
         <Button label={t("fileInput.actions.upload")} />
diff --git a/apps/demo/src/Views/Form/components/FileInput/_components/FormWithFileInput.tsx b/apps/demo/src/Views/Form/components/FileInput/_components/FormWithFileInput.tsx
index 87390caf7..1b2f8a6d7 100644
--- a/apps/demo/src/Views/Form/components/FileInput/_components/FormWithFileInput.tsx
+++ b/apps/demo/src/Views/Form/components/FileInput/_components/FormWithFileInput.tsx
@@ -1,8 +1,8 @@
 import {
-  Provider,
+  Email,
   FileDropzone,
+  Provider,
   useFormContext,
-  Email,
 } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Button } from "@prefabs.tech/react-ui";
@@ -26,18 +26,18 @@ export const FormWithFileInput: React.FC = () => {
     <Provider onSubmit={onSubmit}>
       <UploadBy />
       <FileDropzone
-        name="images"
-        mode="append"
-        multiple={true}
+        addDescriptionLabel={t("fileInput.description.label")}
+        descriptionPlaceholder={t("fileInput.description.placeholder")}
+        dropzoneMessage={t("fileInput.dropzoneMessage")}
         dropzoneOptions={{
           accept: {
             "image/*": [".jpeg", ".png"],
           },
         }}
         enableDescription
-        dropzoneMessage={t("fileInput.dropzoneMessage")}
-        addDescriptionLabel={t("fileInput.description.label")}
-        descriptionPlaceholder={t("fileInput.description.placeholder")}
+        mode="append"
+        multiple={true}
+        name="images"
       />
       <div className="mb-4">
         <Button label={t("fileInput.actions.upload")} />
diff --git a/apps/demo/src/Views/Form/components/FileInput/_components/index.ts b/apps/demo/src/Views/Form/components/FileInput/_components/index.ts
index d65add18a..7eed33f66 100644
--- a/apps/demo/src/Views/Form/components/FileInput/_components/index.ts
+++ b/apps/demo/src/Views/Form/components/FileInput/_components/index.ts
@@ -1,5 +1,5 @@
 export * from "./FileAttachDemo";
 export * from "./FileInputButton";
 export * from "./FileUpload";
-export * from "./FormWithFileInput";
 export * from "./FormFileInputButton";
+export * from "./FormWithFileInput";
diff --git a/apps/demo/src/Views/Form/components/FormInput/FormInput.tsx b/apps/demo/src/Views/Form/components/FormInput/FormInput.tsx
index 725225529..04aa738b7 100644
--- a/apps/demo/src/Views/Form/components/FormInput/FormInput.tsx
+++ b/apps/demo/src/Views/Form/components/FormInput/FormInput.tsx
@@ -1,7 +1,7 @@
 import {
-  Provider,
   emailSchema,
   passwordSchema,
+  Provider,
 } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Button, Page } from "@prefabs.tech/react-ui";
@@ -9,22 +9,35 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import * as zod from "zod";
 
-import { FormInputFields } from "./FormInputFields";
 import { CodeBlock, Section } from "../../../../components/Demo";
+import { FormInputFields } from "./FormInputFields";
 
 export const FormInputDemo = () => {
-  const { t, i18n } = useTranslation("form");
+  const { i18n, t } = useTranslation("form");
   const navigate = useNavigate();
 
   const [formData, setFormData] = useState("");
   const [filledInput, setFilledInput] = useState(false);
 
   const FormSchema = zod.object({
+    checkboxInput: zod.string().array(),
+    currencyPicker: zod
+      .string()
+      .nonempty({ message: t("formInput.message.required") }),
+    date: zod.string().date(),
     email: emailSchema({
       invalid: t("formInput.message.invalid"),
       required: t("formInput.message.required"),
     }),
     name: zod.string().min(1, t("formInput.message.required")),
+    number: zod
+      .number({
+        required_error: t("formInput.message.required"),
+      })
+      .nullable()
+      .refine((data) => data !== null, {
+        message: t("formInput.message.required"),
+      }),
     password: passwordSchema(
       {
         required: t("formInput.message.required"),
@@ -34,29 +47,16 @@ export const FormInputDemo = () => {
         minLength: 0,
       },
     ),
-    number: zod
-      .number({
-        required_error: t("formInput.message.required"),
-      })
-      .nullable()
-      .refine((data) => data !== null, {
-        message: t("formInput.message.required"),
-      }),
-    text: zod.string().min(1, t("formInput.message.required")),
+    radioInput: zod.string(),
     select: zod
       .string()
       .array()
       .nonempty({ message: t("formInput.message.required") }),
-    currencyPicker: zod
-      .string()
-      .nonempty({ message: t("formInput.message.required") }),
-    typeahead: zod.string().min(1, t("formInput.message.required")),
-    date: zod.string().date(),
-    radioInput: zod.string(),
-    checkboxInput: zod.string().array(),
     terms: zod.boolean().refine((value) => value === true, {
       message: t("formInput.message.required"),
     }),
+    text: zod.string().min(1, t("formInput.message.required")),
+    typeahead: zod.string().min(1, t("formInput.message.required")),
   });
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -72,26 +72,26 @@ export const FormInputDemo = () => {
     <Page
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
         <Provider
-          validationSchema={FormSchema}
-          onSubmit={handleSubmit}
           className={filledInput ? "filled" : ""}
           defaultValues={{
             filled: false,
-            valid: false,
             invalid: false,
-            typeahead: "string",
             radioInput: "value 1",
             select: ["FR"],
+            typeahead: "string",
+            valid: false,
           }}
+          onSubmit={handleSubmit}
+          validationSchema={FormSchema}
           validationTriggerKey={i18n.language}
         >
           <FormInputFields checkFilledState={checkFilledState} />
@@ -99,8 +99,8 @@ export const FormInputDemo = () => {
         {formData && (
           <CodeBlock
             autoFocus
-            title={t("formInput.submittedValue")}
             exampleCode={formData}
+            title={t("formInput.submittedValue")}
           />
         )}
       </Section>
diff --git a/apps/demo/src/Views/Form/components/FormInput/FormInputFields.tsx b/apps/demo/src/Views/Form/components/FormInput/FormInputFields.tsx
index bdc3274cd..40f3238ae 100644
--- a/apps/demo/src/Views/Form/components/FormInput/FormInputFields.tsx
+++ b/apps/demo/src/Views/Form/components/FormInput/FormInputFields.tsx
@@ -28,9 +28,9 @@ export const FormInputFields = ({ checkFilledState }: Properties) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [options, setOptions] = useState<any>([]);
   const {
-    register,
-    getFieldState,
     formState: { errors, submitCount }, // eslint-disable-line @typescript-eslint/no-unused-vars
+    getFieldState,
+    register,
     watch,
   } = useFormContext();
 
@@ -61,60 +61,62 @@ export const FormInputFields = ({ checkFilledState }: Properties) => {
         label={t("formInput.label.email")}
         name="email"
         placeholder={t("formInput.placeHolder.email")}
-        submitCount={submitCount}
-        showValidState={valid}
         showInvalidState={invalid}
+        showValidState={valid}
+        submitCount={submitCount}
       />
       <TextInput
         label={t("formInput.label.text")}
         name="name"
         placeholder={t("formInput.placeHolder.text")}
-        submitCount={submitCount}
-        showValidState={valid}
         showInvalidState={invalid}
+        showValidState={valid}
+        submitCount={submitCount}
       />
       <Password
         getFieldState={getFieldState}
         label={t("formInput.label.password")}
         name="password"
         register={register}
-        submitCount={submitCount}
-        showValidState={valid}
         showInvalidState={invalid}
+        showValidState={valid}
+        submitCount={submitCount}
       />
       <NumberInput
-        name="number"
         label={t("formInput.label.number")}
+        name="number"
         placeholder={t("formInput.placeHolder.number")}
-        submitCount={submitCount}
-        showValidState={valid}
         showInvalidState={invalid}
+        showValidState={valid}
+        submitCount={submitCount}
       />
       <Textarea
-        name="text"
         label={t("formInput.label.text")}
+        name="text"
         placeholder={t("formInput.placeHolder.text")}
-        submitCount={submitCount}
-        showValidState={valid}
         showInvalidState={invalid}
+        showValidState={valid}
+        submitCount={submitCount}
       />
       <Select
         label={t("formInput.label.select")}
+        multiple={true}
         name="select"
         options={[
-          { value: "FR", label: "FR" },
-          { value: "DE", label: "DE" },
-          { value: "BE", label: "BE" },
-          { value: "FE", label: "FE" },
-          { value: "RE", label: "RE" },
+          { label: "FR", value: "FR" },
+          { label: "DE", value: "DE" },
+          { label: "BE", value: "BE" },
+          { label: "FE", value: "FE" },
+          { label: "RE", value: "RE" },
         ]}
-        multiple={true}
         placeholder={t("formInput.placeHolder.select")}
-        submitCount={submitCount}
-        showValidState={valid}
         showInvalidState={invalid}
+        showValidState={valid}
+        submitCount={submitCount}
       />
       <CurrencyPicker
+        label={t("formInput.label.currencyPicker")}
+        name="currencyPicker"
         options={[
           {
             code: "AUD",
@@ -127,48 +129,46 @@ export const FormInputFields = ({ checkFilledState }: Properties) => {
           { code: "EUR", label: "Euro", symbol: "€", value: "EUR" },
           { code: "JPY", label: "Japanese Yen", symbol: "¥", value: "JPY" },
         ]}
-        label={t("formInput.label.currencyPicker")}
-        name="currencyPicker"
         placeholder={t("formInput.placeHolder.currencyPicker")}
         showInvalidState={invalid}
         showValidState={valid}
         submitCount={submitCount}
       />
       <Email
+        defaultValue="monorepo@gmail.com"
+        disabled={true}
         label={t("formInput.label.disabled")}
         name="disabled"
-        disabled={true}
-        defaultValue="monorepo@gmail.com"
       />
       <Email
+        defaultValue="monorepo@gmail.com"
         label={t("formInput.label.readOnly")}
         name="readOnly"
         readOnly={true}
-        defaultValue="monorepo@gmail.com"
       />
       <DateInput
+        getFieldState={getFieldState}
         label={t("formInput.label.dateInput")}
+        max={new Date()}
+        min="2025-04-01"
         name="date"
         register={register}
-        getFieldState={getFieldState}
-        submitCount={submitCount}
-        showValidState={valid}
         showInvalidState={invalid}
-        max={new Date()}
-        min="2025-04-01"
+        showValidState={valid}
+        submitCount={submitCount}
       />
       <Typeahead
-        placeholder={t("formInput.placeHolder.typeahead")}
-        label={t("formInput.label.typeahead")}
-        name="typeahead"
         data={options}
-        suggestionLabel="title"
+        debounceTime={500}
+        label={t("formInput.label.typeahead")}
         loading={isLoading}
+        name="typeahead"
         onSearch={handleDataFetch}
-        debounceTime={500}
-        submitCount={submitCount}
-        showValidState={valid}
+        placeholder={t("formInput.placeHolder.typeahead")}
         showInvalidState={invalid}
+        showValidState={valid}
+        submitCount={submitCount}
+        suggestionLabel="title"
       />
       <RadioInput
         label={t("formInput.label.radioInput")}
@@ -180,6 +180,7 @@ export const FormInputFields = ({ checkFilledState }: Properties) => {
         ]}
       />
       <CheckboxInput
+        direction={"horizontal"}
         label={t("formInput.label.checkboxInput")}
         name="checkboxInput"
         options={[
@@ -187,7 +188,6 @@ export const FormInputFields = ({ checkFilledState }: Properties) => {
           { label: "Two", value: "value 2" },
           { label: "Three", value: "value 3" },
         ]}
-        direction={"horizontal"}
       />
       <CheckboxInput
         inputLabel={
diff --git a/apps/demo/src/Views/Form/components/LoginForm/LoginForm.tsx b/apps/demo/src/Views/Form/components/LoginForm/LoginForm.tsx
index 825a38b1b..94ce5963b 100644
--- a/apps/demo/src/Views/Form/components/LoginForm/LoginForm.tsx
+++ b/apps/demo/src/Views/Form/components/LoginForm/LoginForm.tsx
@@ -1,7 +1,7 @@
 import {
-  Provider,
   emailSchema,
   passwordSchema,
+  Provider,
 } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Button, Page } from "@prefabs.tech/react-ui";
@@ -23,10 +23,10 @@ export const LoginForm = () => {
     <Page
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
diff --git a/apps/demo/src/Views/Form/components/LoginForm/LoginFormFields.tsx b/apps/demo/src/Views/Form/components/LoginForm/LoginFormFields.tsx
index c30091de6..719088707 100644
--- a/apps/demo/src/Views/Form/components/LoginForm/LoginFormFields.tsx
+++ b/apps/demo/src/Views/Form/components/LoginForm/LoginFormFields.tsx
@@ -4,23 +4,23 @@ import { useTranslation } from "@prefabs.tech/react-i18n";
 export const LoginFormFields = () => {
   const [t] = useTranslation("form");
   const {
-    register,
-    getFieldState,
     formState: { errors, submitCount }, // eslint-disable-line @typescript-eslint/no-unused-vars
+    getFieldState,
+    register,
   } = useFormContext();
 
   return (
     <>
       <Email
-        name="email"
         label={t("loginForm.label.email")}
+        name="email"
         submitCount={submitCount}
       />
       <Password
-        name="password"
+        getFieldState={getFieldState}
         label={t("loginForm.label.password")}
+        name="password"
         register={register}
-        getFieldState={getFieldState}
         submitCount={submitCount}
       />
       <input type="submit" value={t("loginForm.label.login")} />
diff --git a/apps/demo/src/Views/Form/index.ts b/apps/demo/src/Views/Form/index.ts
index 2f8ab46dc..3f2a7c38a 100644
--- a/apps/demo/src/Views/Form/index.ts
+++ b/apps/demo/src/Views/Form/index.ts
@@ -1,2 +1,2 @@
-export * from "./pages";
 export * from "./FormPage";
+export * from "./pages";
diff --git a/apps/demo/src/Views/Form/pages.tsx b/apps/demo/src/Views/Form/pages.tsx
index 33e413466..21e9382c3 100644
--- a/apps/demo/src/Views/Form/pages.tsx
+++ b/apps/demo/src/Views/Form/pages.tsx
@@ -1,33 +1,33 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Outlet } from "react-router-dom";
 
+import { Demo } from "../../components/Demo";
 import { FileInputDemo } from "./components/FileInput";
 import { FormInputDemo } from "./components/FormInput";
 import { LoginForm } from "./components/LoginForm/LoginForm";
-import { Demo } from "../../components/Demo";
 
 export const FORM_ROUTES = {
-  GET_STARTED: "/form",
   FILE_INPUT: "/form/file-input",
   FORM_INPUT: "/form/form-input",
+  GET_STARTED: "/form",
   LOGIN_FORM: "/form/login",
 };
 
 export const routes = [
   {
-    path: FORM_ROUTES.FILE_INPUT,
-    key: "fileInput.title",
     element: <FileInputDemo />,
+    key: "fileInput.title",
+    path: FORM_ROUTES.FILE_INPUT,
   },
   {
-    path: FORM_ROUTES.FORM_INPUT,
-    key: "formInput.title",
     element: <FormInputDemo />,
+    key: "formInput.title",
+    path: FORM_ROUTES.FORM_INPUT,
   },
   {
-    path: FORM_ROUTES.LOGIN_FORM,
-    key: "loginForm.title",
     element: <LoginForm />,
+    key: "loginForm.title",
+    path: FORM_ROUTES.LOGIN_FORM,
   },
 ];
 
@@ -39,15 +39,15 @@ export const Pages = () => {
     {
       label: t("headers.examples"),
       submenu: [
-        ...routes.map(({ path, key }) => {
-          return { route: path, label: t(key) };
+        ...routes.map(({ key, path }) => {
+          return { label: t(key), route: path };
         }),
       ],
     },
   ];
 
   return (
-    <Demo subnav={subnav} isGrouped>
+    <Demo isGrouped subnav={subnav}>
       <Outlet />
     </Demo>
   );
diff --git a/apps/demo/src/Views/Home/components/Package.tsx b/apps/demo/src/Views/Home/components/Package.tsx
index 9492fcfff..1aec0e6f4 100644
--- a/apps/demo/src/Views/Home/components/Package.tsx
+++ b/apps/demo/src/Views/Home/components/Package.tsx
@@ -1,20 +1,20 @@
 interface Properties {
   className?: string;
-  title: string;
   description: string;
   onClick: () => void;
+  title: string;
 }
 
 export const Package = ({
   className,
-  title,
   description,
   onClick,
+  title,
 }: Properties) => {
   const classNames = ["package", className].filter((c) => !!c).join(" ");
 
   return (
-    <div className={classNames} role="button" tabIndex={0} onClick={onClick}>
+    <div className={classNames} onClick={onClick} role="button" tabIndex={0}>
       <h2>{title}</h2>
       <p>{description}</p>
     </div>
diff --git a/apps/demo/src/Views/Home/index.tsx b/apps/demo/src/Views/Home/index.tsx
index ecb9a3979..6eebb2d89 100644
--- a/apps/demo/src/Views/Home/index.tsx
+++ b/apps/demo/src/Views/Home/index.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { Page, GridContainer } from "@prefabs.tech/react-ui";
+import { GridContainer, Page } from "@prefabs.tech/react-ui";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -11,43 +11,43 @@ const Home: React.FC = () => {
 
   const packages = [
     {
+      description: "@prefabs.tech/react-ui components and utilities",
       name: "ui",
       route: "/ui",
-      description: "@prefabs.tech/react-ui components and utilities",
     },
     {
+      description: "@prefabs.tech/react-user components and utilities",
       name: "user",
       route: "/user",
-      description: "@prefabs.tech/react-user components and utilities",
     },
     {
+      description: "@prefabs.tech/react-form components and utilities",
       name: "form",
       route: "/form",
-      description: "@prefabs.tech/react-form components and utilities",
     },
 
     {
+      description: "@prefabs.tech/react-layout components and utilities",
       name: "layout",
       route: "/layout",
-      description: "@prefabs.tech/react-layout components and utilities",
     },
     {
+      description: "@prefabs.tech/react-i18n components and utilities",
       name: "i18n",
       route: "/i18n",
-      description: "@prefabs.tech/react-i18n components and utilities",
     },
   ];
 
   return (
-    <Page title={t("pages.home.title")} className="home">
+    <Page className="home" title={t("pages.home.title")}>
       <GridContainer>
         {packages.map((package_) => {
           return (
             <Package
-              key={package_.route}
-              title={t(`header.menu.${package_.name}`)}
               description={package_.description}
+              key={package_.route}
               onClick={() => navigate(package_.route)}
+              title={t(`header.menu.${package_.name}`)}
             />
           );
         })}
diff --git a/apps/demo/src/Views/I18n/index.ts b/apps/demo/src/Views/I18n/index.ts
index 0f976e34c..bada6250d 100644
--- a/apps/demo/src/Views/I18n/index.ts
+++ b/apps/demo/src/Views/I18n/index.ts
@@ -1,2 +1,2 @@
-export * from "./pages";
 export * from "./I18nPage";
+export * from "./pages";
diff --git a/apps/demo/src/Views/I18n/pages.tsx b/apps/demo/src/Views/I18n/pages.tsx
index f2bf672b6..a97c6421f 100644
--- a/apps/demo/src/Views/I18n/pages.tsx
+++ b/apps/demo/src/Views/I18n/pages.tsx
@@ -14,13 +14,13 @@ export const Pages = () => {
 
   const subnav = [
     { label: t("app:getStarted"), route: I18n_ROUTES.GET_STARTED },
-    ...routes.map(({ path, key }) => {
-      return { route: path, label: t(key) };
+    ...routes.map(({ key, path }) => {
+      return { label: t(key), route: path };
     }),
   ];
 
   return (
-    <Demo subnav={subnav} isGrouped>
+    <Demo isGrouped subnav={subnav}>
       <Outlet />
     </Demo>
   );
diff --git a/apps/demo/src/Views/Layout/components/StickyCollapsibleFooterDemo.tsx b/apps/demo/src/Views/Layout/components/StickyCollapsibleFooterDemo.tsx
index 09becb946..2a9cc704f 100644
--- a/apps/demo/src/Views/Layout/components/StickyCollapsibleFooterDemo.tsx
+++ b/apps/demo/src/Views/Layout/components/StickyCollapsibleFooterDemo.tsx
@@ -15,18 +15,18 @@ import { CodeBlock, Section } from "../../../components/Demo";
 
 const data = [
   {
+    description:
+      "The content to be displayed inside the sticky collapsible footer.",
     id: 1,
     prop: "children",
     type: "ReactNode",
-    description:
-      "The content to be displayed inside the sticky collapsible footer.",
   },
   {
+    description:
+      "If false, indicates that the sticky collapsible footer is positioned at the bottom of the parent container, otherwise fixed at the bottom of viewport. Defaults to 'true'.",
     id: 2,
     prop: "fixed",
     type: "boolean",
-    description:
-      "If false, indicates that the sticky collapsible footer is positioned at the bottom of the parent container, otherwise fixed at the bottom of viewport. Defaults to 'true'.",
   },
 ];
 
@@ -38,14 +38,14 @@ export const StickyCollapsibleFooterDemo = () => {
 
   return (
     <Page
-      title={t("stickyCollapsibleFooter.title")}
       className="sticky-collapsible-footer"
+      title={t("stickyCollapsibleFooter.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -104,20 +104,20 @@ export const StickyCollapsibleFooterDemo = () => {
         />
         <StickyCollapsibleFooter>
           <Input
-            placeholder="Input placeholder"
             onChange={(event) => setInputValue(event.target.value)}
+            placeholder="Input placeholder"
           />
           <Button
             label="Submit"
-            size="small"
             onClick={() => alert(inputValue)}
+            size="small"
           />
           <Button
             label="Cancel"
-            size="small"
+            onClick={() => alert("Cancelled!")}
             severity="secondary"
+            size="small"
             variant="outlined"
-            onClick={() => alert("Cancelled!")}
           />
         </StickyCollapsibleFooter>
       </Section>
diff --git a/apps/demo/src/Views/Layout/index.ts b/apps/demo/src/Views/Layout/index.ts
index 31b677f7d..07c56735d 100644
--- a/apps/demo/src/Views/Layout/index.ts
+++ b/apps/demo/src/Views/Layout/index.ts
@@ -1,2 +1,2 @@
-export * from "./pages";
 export * from "./LayoutPage";
+export * from "./pages";
diff --git a/apps/demo/src/Views/Layout/pages.tsx b/apps/demo/src/Views/Layout/pages.tsx
index 04523089d..f9d768532 100644
--- a/apps/demo/src/Views/Layout/pages.tsx
+++ b/apps/demo/src/Views/Layout/pages.tsx
@@ -1,8 +1,8 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Outlet } from "react-router-dom";
 
-import { StickyCollapsibleFooterDemo } from "./components/StickyCollapsibleFooterDemo";
 import { Demo } from "../../components/Demo";
+import { StickyCollapsibleFooterDemo } from "./components/StickyCollapsibleFooterDemo";
 
 export const LAYOUT_ROUTES = {
   GET_STARTED: "/layout",
@@ -11,9 +11,9 @@ export const LAYOUT_ROUTES = {
 
 export const routes = [
   {
-    path: LAYOUT_ROUTES.STICKY_COLLAPSIBLE_FOOTER,
-    key: "stickyCollapsibleFooter.title",
     element: <StickyCollapsibleFooterDemo />,
+    key: "stickyCollapsibleFooter.title",
+    path: LAYOUT_ROUTES.STICKY_COLLAPSIBLE_FOOTER,
   },
 ];
 
@@ -21,19 +21,19 @@ export const Pages = () => {
   const [t] = useTranslation("layout");
 
   const subnav = [
-    { route: "/layout", label: t("app:getStarted") },
+    { label: t("app:getStarted"), route: "/layout" },
     {
       label: t("headers.components"),
       submenu: [
-        ...routes.map(({ path, key }) => {
-          return { route: path, label: t(key) };
+        ...routes.map(({ key, path }) => {
+          return { label: t(key), route: path };
         }),
       ],
     },
   ];
 
   return (
-    <Demo subnav={subnav} isGrouped>
+    <Demo isGrouped subnav={subnav}>
       <Outlet />
     </Demo>
   );
diff --git a/apps/demo/src/Views/Ui/components/AccordionDemo.tsx b/apps/demo/src/Views/Ui/components/AccordionDemo.tsx
index 1d1706b86..7c09e3303 100644
--- a/apps/demo/src/Views/Ui/components/AccordionDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/AccordionDemo.tsx
@@ -66,53 +66,53 @@ export const AccordionDemo = () => {
 
   const propertiesData = [
     {
+      default: "-",
+      description: t("accordion.propertiesDescription.activeIcon"),
       id: 1,
       prop: "activeIcon",
       type: "string | ReactNode",
-      default: "-",
-      description: t("accordion.propertiesDescription.activeIcon"),
     },
     {
+      default: "false",
+      description: t("accordion.propertiesDescription.canSelfCollapse"),
       id: 2,
       prop: "canSelfCollapse",
       type: "boolean",
-      default: "false",
-      description: t("accordion.propertiesDescription.canSelfCollapse"),
     },
     {
+      default: "-",
+      description: t("accordion.propertiesDescription.children"),
       id: 3,
       prop: "children",
       type: "ReactElement | ReactElement[]",
-      default: "-",
-      description: t("accordion.propertiesDescription.children"),
     },
     {
+      default: "-",
+      description: t("accordion.propertiesDescription.className"),
       id: 4,
       prop: "className",
       type: "string",
-      default: "-",
-      description: t("accordion.propertiesDescription.className"),
     },
     {
+      default: "-",
+      description: t("accordion.propertiesDescription.defaultActiveIndex"),
       id: 5,
       prop: "defaultActiveIndex",
       type: "number",
-      default: "-",
-      description: t("accordion.propertiesDescription.defaultActiveIndex"),
     },
     {
+      default: `"vertical"`,
+      description: t("accordion.propertiesDescription.direction"),
       id: 6,
       prop: "direction",
       type: `"horizontal" | "vertical"`,
-      default: `"vertical"`,
-      description: t("accordion.propertiesDescription.direction"),
     },
     {
+      default: "-",
+      description: t("accordion.propertiesDescription.inactiveIcon"),
       id: 7,
       prop: "inactiveIcon",
       type: "string | ReactNode",
-      default: "-",
-      description: t("accordion.propertiesDescription.inactiveIcon"),
     },
   ];
 
@@ -122,10 +122,10 @@ export const AccordionDemo = () => {
       title={t("accordion.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -168,8 +168,8 @@ import { Accordion, SubPane } from "@prefabs.tech/react-ui";
           {accordionItems.map((item, index) => {
             return (
               <SubPane
-                key={`accordion-icon-${index}`}
                 icon={item.icon}
+                key={`accordion-icon-${index}`}
                 title={item.title}
               >
                 {item.content}
@@ -201,7 +201,7 @@ import { Accordion, SubPane } from "@prefabs.tech/react-ui";
       </Section>
 
       <Section title={t("accordion.usage.vertical")}>
-        <Accordion direction="horizontal" defaultActiveIndex={0}>
+        <Accordion defaultActiveIndex={0} direction="horizontal">
           {data.map((item, index) => {
             return (
               <SubPane key={`accordion-vertical-${index}`} title={item.title}>
diff --git a/apps/demo/src/Views/Ui/components/Button/Button.tsx b/apps/demo/src/Views/Ui/components/Button/Button.tsx
index c223a0412..a8dc64c0f 100644
--- a/apps/demo/src/Views/Ui/components/Button/Button.tsx
+++ b/apps/demo/src/Views/Ui/components/Button/Button.tsx
@@ -1,101 +1,101 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { TDataTable, Page, Button } from "@prefabs.tech/react-ui";
+import { Button, Page, TDataTable } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
-import { Basic, Icons, Link, Severity, Size, Variant } from "./components";
 import { CodeBlock, Section } from "../../../../components/Demo";
+import { Basic, Icons, Link, Severity, Size, Variant } from "./components";
 
 const data = [
   {
+    description: "The content to be displayed inside the button.",
     id: 1,
     prop: "children",
     type: "string | ReactNode",
-    description: "The content to be displayed inside the button.",
   },
   {
+    description: "Additional CSS classes to apply to the button.",
     id: 2,
     prop: "className",
     type: "string",
-    description: "Additional CSS classes to apply to the button.",
   },
   {
+    description: "If true, the button will be disabled and non-interactive.",
     id: 3,
     prop: "disabled",
     type: "boolean",
-    description: "If true, the button will be disabled and non-interactive.",
   },
   {
+    description:
+      "Icon to be displayed on the left side of the button. Can be a string (class name) or a ReactNode.",
     id: 4,
     prop: "iconLeft",
     type: "string | ReactNode",
-    description:
-      "Icon to be displayed on the left side of the button. Can be a string (class name) or a ReactNode.",
   },
   {
+    description:
+      "Icon to be displayed on the right side of the button. Can be a string (class name) or a ReactNode.",
     id: 5,
     prop: "iconRight",
     type: "string | ReactNode",
-    description:
-      "Icon to be displayed on the right side of the button. Can be a string (class name) or a ReactNode.",
   },
   {
+    description:
+      "Text to be displayed in the button when `children` is not provided.",
     id: 6,
     prop: "label",
     type: "string",
-    description:
-      "Text to be displayed in the button when `children` is not provided.",
   },
   {
+    description:
+      "If true, indicates that the button is in a loading state and disables user interaction.",
     id: 7,
     prop: "loading",
     type: "boolean",
-    description:
-      "If true, indicates that the button is in a loading state and disables user interaction.",
   },
   {
+    description: "Function to be called when the button is clicked.",
     id: 8,
     prop: "onClick",
     type: "() => void",
-    description: "Function to be called when the button is clicked.",
   },
   {
+    description:
+      "Defines the styling severity of the button. Defaults to 'primary'.",
     id: 9,
     prop: "severity",
     type: '"primary" | "secondary" | "alternate" | "success" | "danger" | "warning"',
-    description:
-      "Defines the styling severity of the button. Defaults to 'primary'.",
   },
   {
+    description: "Sets the size of the button. Defaults to 'medium'.",
     id: 10,
     prop: "size",
     type: '"small" | "medium" | "large"',
-    description: "Sets the size of the button. Defaults to 'medium'.",
   },
   {
+    description:
+      "If provided, the button will act as a `Link` to the specified path instead of a regular button.",
     id: 11,
     prop: "to",
     type: "string",
-    description:
-      "If provided, the button will act as a `Link` to the specified path instead of a regular button.",
   },
   {
+    description: "Tooltip text that appears on hover.",
     id: 12,
     prop: "title",
     type: "string",
-    description: "Tooltip text that appears on hover.",
   },
   {
+    description: "Specifies the button variant. Defaults to 'filled'.",
     id: 13,
     prop: "variant",
     type: '"outlined" | "filled" | "textOnly"',
-    description: "Specifies the button variant. Defaults to 'filled'.",
   },
   {
+    description:
+      "Specifies the button border-radius to be rounded when set to `true`. Defaults to 'false'.",
     id: 14,
     prop: "rounded",
     type: "boolean",
-    description:
-      "Specifies the button border-radius to be rounded when set to `true`. Defaults to 'false'.",
   },
 ];
 
@@ -106,14 +106,14 @@ export const ButtonDemo = () => {
   return (
     <Page
       className="demo-button"
-      title={t("button.title")}
       subtitle={t("button.subtitle")}
+      title={t("button.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
diff --git a/apps/demo/src/Views/Ui/components/Button/components.tsx b/apps/demo/src/Views/Ui/components/Button/components.tsx
index 2ac6913b3..f07457056 100644
--- a/apps/demo/src/Views/Ui/components/Button/components.tsx
+++ b/apps/demo/src/Views/Ui/components/Button/components.tsx
@@ -70,14 +70,14 @@ const Size = ({
 
   return (
     <div className="container">
-      <Button label="Small" size="small" variant="filled" severity="primary" />
+      <Button label="Small" severity="primary" size="small" variant="filled" />
       <Button
         label="Medium"
+        severity="primary"
         size="medium"
         variant="filled"
-        severity="primary"
       />
-      <Button label="Large" size="large" variant="filled" severity="primary" />
+      <Button label="Large" severity="primary" size="large" variant="filled" />
     </div>
   );
 };
@@ -136,66 +136,66 @@ const Icons = ({
     <>
       <div className="container">
         <Button
-          size="small"
-          label="Text only"
           iconLeft="pi pi-user"
+          label="Text only"
+          size="small"
           variant="textOnly"
         />
         <Button
-          size="medium"
-          label="Outlined"
           iconLeft="pi pi-user"
+          label="Outlined"
+          size="medium"
           variant="outlined"
         />
-        <Button label="Default" iconLeft="pi pi-user" size="large" />
+        <Button iconLeft="pi pi-user" label="Default" size="large" />
       </div>
       <div className="container">
         <Button
-          label="Text only"
           iconLeft="pi pi-user"
+          label="Text only"
+          rounded
           size="small"
           variant="textOnly"
-          rounded
         />
         <Button
-          label="Outlined"
           iconLeft="pi pi-user"
+          label="Outlined"
+          rounded
           size="medium"
           variant="outlined"
-          rounded
         />
-        <Button label="Default" rounded iconLeft="pi pi-user" size="large" />
+        <Button iconLeft="pi pi-user" label="Default" rounded size="large" />
       </div>
       <div className="container">
         <Button
+          iconLeft="pi pi-user"
+          severity="secondary"
           size="small"
           variant="textOnly"
-          severity="secondary"
-          iconLeft="pi pi-user"
         />
-        <Button size="medium" variant="filled" iconRight="pi pi-user" />
+        <Button iconRight="pi pi-user" size="medium" variant="filled" />
         <Button
+          iconLeft="pi pi-user"
+          severity="secondary"
           size="large"
           variant="outlined"
-          severity="secondary"
-          iconLeft="pi pi-user"
         />
       </div>
       <div className="container">
         <Button
-          size="small"
-          variant="textOnly"
-          severity="secondary"
           iconLeft="pi pi-user"
           rounded
+          severity="secondary"
+          size="small"
+          variant="textOnly"
         />
-        <Button size="medium" variant="filled" iconRight="pi pi-user" rounded />
+        <Button iconRight="pi pi-user" rounded size="medium" variant="filled" />
         <Button
+          iconLeft="pi pi-user"
+          rounded
+          severity="secondary"
           size="large"
           variant="outlined"
-          severity="secondary"
-          rounded
-          iconLeft="pi pi-user"
         />
       </div>
     </>
@@ -222,4 +222,4 @@ const Link = ({
   );
 };
 
-export { Basic, Severity, Size, Variant, Icons, Link };
+export { Basic, Icons, Link, Severity, Size, Variant };
diff --git a/apps/demo/src/Views/Ui/components/CardDemo.tsx b/apps/demo/src/Views/Ui/components/CardDemo.tsx
index c4479c7d6..43ab036bd 100644
--- a/apps/demo/src/Views/Ui/components/CardDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/CardDemo.tsx
@@ -14,27 +14,27 @@ import { CodeBlock, Section } from "../../../components/Demo";
 
 const data = [
   {
+    default: "-",
+    description: "Additional CSS classes to apply to the card.",
     id: 1,
     prop: " className",
     type: "string",
-    default: "-",
-    description: "Additional CSS classes to apply to the card.",
   },
   {
-    id: 2,
-    prop: "children",
-    type: "ReactNode",
     default: "-",
     description:
       "The content of the card. Typically includes child components like `CardHeader`, `CardBody` and `CardFooter`.",
+    id: 2,
+    prop: "children",
+    type: "ReactNode",
   },
   {
-    id: 3,
-    prop: "outlined",
-    type: "boolean",
     default: "false",
     description:
       "Whether to render the card in an outlined style (e.g. with a border)",
+    id: 3,
+    prop: "outlined",
+    type: "boolean",
   },
 ];
 
@@ -47,10 +47,10 @@ export const CardDemo = () => {
       title={t("card.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
diff --git a/apps/demo/src/Views/Ui/components/ConfirmationModal.tsx b/apps/demo/src/Views/Ui/components/ConfirmationModal.tsx
index 1d36a6aeb..55d72de50 100644
--- a/apps/demo/src/Views/Ui/components/ConfirmationModal.tsx
+++ b/apps/demo/src/Views/Ui/components/ConfirmationModal.tsx
@@ -16,23 +16,23 @@ export const ConfirmationModalDemo = () => {
       title={t("confirmationModal.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
         <Button
-          onClick={() => setShowModal(true)}
           label={t("confirmationModal.buttonLabel")}
+          onClick={() => setShowModal(true)}
         ></Button>
         <ConfirmationModal
-          visible={showModal}
-          message={t("confirmationModal.message")}
           header={t("confirmationModal.header")}
+          message={t("confirmationModal.message")}
           onHide={() => setShowModal(false)}
+          visible={showModal}
         />
       </Section>
     </Page>
diff --git a/apps/demo/src/Views/Ui/components/CountryDisplay/CountryDisplayDemo.tsx b/apps/demo/src/Views/Ui/components/CountryDisplay/CountryDisplayDemo.tsx
index f9b9fa736..5c2821b01 100644
--- a/apps/demo/src/Views/Ui/components/CountryDisplay/CountryDisplayDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/CountryDisplay/CountryDisplayDemo.tsx
@@ -1,11 +1,11 @@
 import { i18n, useTranslation } from "@prefabs.tech/react-i18n";
-import { Button, Page, TDataTable, Country } from "@prefabs.tech/react-ui";
+import { Button, Country, Page, TDataTable } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
-import englishData from "./en.json";
 import { CodeBlock, Section } from "../../../../components/Demo";
 import frenchData from "../FormWidgets/fr.json";
 import nepaliData from "../FormWidgets/np.json";
+import englishData from "./en.json";
 import "../../../../assets/css/country.css";
 
 export const CountryDisplayDemo = () => {
@@ -21,74 +21,74 @@ export const CountryDisplayDemo = () => {
 
   const data = [
     {
+      default: '""',
+      description: t("countryDisplay.propertiesDescription.className"),
       id: 1,
       prop: "className",
       type: "string",
-      default: '""',
-      description: t("countryDisplay.propertiesDescription.className"),
     },
     {
+      default: "-",
+      description: t("countryDisplay.propertiesDescription.code"),
       id: 2,
       prop: "code",
       type: "string",
-      default: "-",
-      description: t("countryDisplay.propertiesDescription.code"),
     },
     {
+      default: '"en"',
+      description: t("countryDisplay.propertiesDescription.fallbackLocale"),
       id: 3,
       prop: "fallbackLocale",
       type: "string",
-      default: '"en"',
-      description: t("countryDisplay.propertiesDescription.fallbackLocale"),
     },
     {
+      default: "undefined",
+      description: t("countryDisplay.propertiesDescription.flagsPath"),
       id: 4,
       prop: "flagsPath",
       type: "(code: string) => string",
-      default: "undefined",
-      description: t("countryDisplay.propertiesDescription.flagsPath"),
     },
     {
+      default: '"left"',
+      description: t("countryDisplay.propertiesDescription.flagsPosition"),
       id: 5,
       prop: "flagsPosition",
       type: '"left" | "right" | "right-edge"',
-      default: '"left"',
-      description: t("countryDisplay.propertiesDescription.flagsPosition"),
     },
     {
+      default: '"rectangular"',
+      description: t("countryDisplay.propertiesDescription.flagsStyle"),
       id: 6,
       prop: "flagsStyle",
       type: '"circle" | "rectangular" | "square"',
-      default: '"rectangular"',
-      description: t("countryDisplay.propertiesDescription.flagsStyle"),
     },
     {
+      default: "en",
+      description: t("countryDisplay.propertiesDescription.locale"),
       id: 7,
       prop: "locale",
       type: "string",
-      default: "en",
-      description: t("countryDisplay.propertiesDescription.locale"),
     },
     {
+      default: "{}",
+      description: t("countryDisplay.propertiesDescription.i18n"),
       id: 8,
       prop: "locales",
       type: "Record<string, Record<string, string>>",
-      default: "{}",
-      description: t("countryDisplay.propertiesDescription.i18n"),
     },
     {
+      default: "undefined",
+      description: t("countryDisplay.propertiesDescription.renderOption"),
       id: 9,
       prop: "renderOption",
       type: "(code: string, label: string) => ReactNode",
-      default: "undefined",
-      description: t("countryDisplay.propertiesDescription.renderOption"),
     },
     {
+      default: "true",
+      description: t("countryDisplay.propertiesDescription.showFlag"),
       id: 10,
       prop: "showFlag",
       type: "boolean",
-      default: "true",
-      description: t("countryDisplay.propertiesDescription.showFlag"),
     },
   ];
 
@@ -99,8 +99,8 @@ export const CountryDisplayDemo = () => {
         <Button
           iconLeft={<i className="pi pi-chevron-left"></i>}
           label={t("buttons.back", "Back")}
-          variant="textOnly"
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -142,7 +142,7 @@ const selectedLocale = "np";
         <Country
           code="EG"
           locale={selectedLocale}
-          locales={{ fr: frenchData, en: englishData }}
+          locales={{ en: englishData, fr: frenchData }}
         />
         <CodeBlock
           exampleCode='import frenchData from "./fr.json";
@@ -164,7 +164,7 @@ selectedLocale = i18n.language
           code="GB"
           fallbackLocale="np"
           locale={selectedLocale}
-          locales={{ np: nepaliData, en: englishData }}
+          locales={{ en: englishData, np: nepaliData }}
         />
         <CodeBlock
           exampleCode='import englishData from "./en.json";
diff --git a/apps/demo/src/Views/Ui/components/DataComponent/index.tsx b/apps/demo/src/Views/Ui/components/DataComponent/index.tsx
index bd1970e2b..2e814820b 100644
--- a/apps/demo/src/Views/Ui/components/DataComponent/index.tsx
+++ b/apps/demo/src/Views/Ui/components/DataComponent/index.tsx
@@ -12,32 +12,32 @@ import { CodeBlock, Section } from "../../../../components/Demo";
 
 const data = [
   {
+    default: "-",
+    description: "The caption displayed alongside the value.",
     id: 1,
     prop: "caption",
     type: "ReactNode",
-    default: "-",
-    description: "The caption displayed alongside the value.",
   },
   {
+    default: "-",
+    description: "Additional CSS classes to apply to the outer container.",
     id: 2,
     prop: "className",
     type: "string",
-    default: "-",
-    description: "Additional CSS classes to apply to the outer container.",
   },
   {
+    default: "attr",
+    description: "Defines which styling to apply to the component.",
     id: 3,
     prop: "mode",
     type: '"attr" | "stat"',
-    default: "attr",
-    description: "Defines which styling to apply to the component.",
   },
   {
+    default: "-",
+    description: "The value to display.",
     id: 4,
     prop: "value",
     type: "ReactNode",
-    default: "-",
-    description: "The value to display.",
   },
 ];
 
@@ -71,14 +71,14 @@ export const DataDemo = () => {
   return (
     <Page
       className="demo-data-component"
-      title={t("data.title")}
       subtitle={t("data.subtitle")}
+      title={t("data.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -94,8 +94,8 @@ export const DataDemo = () => {
 
       <Section title={t("data.usage.mode")}>
         <div className="data-stat-group">
-          <Data caption="Visitors" value="3,825" mode="stat" />
-          <Data caption="Revenue" value="$1,030,217" mode="stat" />
+          <Data caption="Visitors" mode="stat" value="3,825" />
+          <Data caption="Revenue" mode="stat" value="$1,030,217" />
         </div>
         <CodeBlock
           exampleCode='<div className="data-group">
diff --git a/apps/demo/src/Views/Ui/components/DropdownMenuDemo.tsx b/apps/demo/src/Views/Ui/components/DropdownMenuDemo.tsx
index 412f76b93..eabebfbcb 100644
--- a/apps/demo/src/Views/Ui/components/DropdownMenuDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/DropdownMenuDemo.tsx
@@ -1,22 +1,22 @@
+import type { MenuItem } from "@prefabs.tech/react-ui";
+
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Button, DropdownMenu, Page } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
 import { CodeBlock, Section } from "../../../components/Demo";
 
-import type { MenuItem } from "@prefabs.tech/react-ui";
-
 export const DropdownMenuDemo = () => {
   const [t] = useTranslation(["ui", "user"]);
   const navigate = useNavigate();
 
   const menuItems = [
     {
-      icon: "pi pi-lock",
-      label: t("user:changePassword.title"),
       className: "change-password",
-      display: true,
       disabled: true,
+      display: true,
+      icon: "pi pi-lock",
+      label: t("user:changePassword.title"),
     },
     {
       icon: "pi pi-user",
@@ -58,18 +58,18 @@ export const DropdownMenuDemo = () => {
       title={t("dropdownMenu.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section title={t("dropdownMenu.usage.leftAlign")}>
         <DropdownMenu
           label={t("dropdownMenu.label.setting")}
-          position="left-start"
           menu={menuItems}
+          position="left-start"
         />
         <CodeBlock
           exampleCode='<DropdownMenu
@@ -133,7 +133,7 @@ return (<DropdownMenu
         />
       </Section>
       <Section title={t("dropdownMenu.usage.hiddenDropdownIcon")}>
-        <DropdownMenu menu={menuItems} hideDropdownIcon />
+        <DropdownMenu hideDropdownIcon menu={menuItems} />
         <CodeBlock exampleCode="<DropdownMenu menu={menuItems} hideDropdownIcon />" />
       </Section>
     </Page>
diff --git a/apps/demo/src/Views/Ui/components/EditableTitleDemo.tsx b/apps/demo/src/Views/Ui/components/EditableTitleDemo.tsx
index 44d68df2a..4749a492f 100644
--- a/apps/demo/src/Views/Ui/components/EditableTitleDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/EditableTitleDemo.tsx
@@ -14,64 +14,64 @@ import { CodeBlock, Section } from "../../../components/Demo";
 
 const PROPERTIES_DATA = [
   {
+    default: "true",
+    description: "Enables or disables the editing functionality.",
     id: 1,
     prop: "allowEdit",
     type: "boolean",
-    default: "true",
-    description: "Enables or disables the editing functionality.",
   },
   {
-    id: 2,
-    prop: "onChange",
-    type: "(event: ChangeEvent<HTMLInputElement>) => void",
     default: "undefined",
     description:
       "Callback function triggered when the title input changes i.e `onchange` event.",
+    id: 2,
+    prop: "onChange",
+    type: "(event: ChangeEvent<HTMLInputElement>) => void",
   },
   {
-    id: 3,
-    prop: "handleUpdate",
-    type: "(title: string) => void",
     default: "undefined",
     description:
       "Callback function triggered when the title is updated after leaving the input field i.e `onblur` event.",
+    id: 3,
+    prop: "handleUpdate",
+    type: "(title: string) => void",
   },
   {
+    default: "undefined",
+    description: "Placeholder text for the input field when in edit mode.",
     id: 4,
     prop: "placeholder",
     type: "string",
-    default: "undefined",
-    description: "Placeholder text for the input field when in edit mode.",
   },
   {
+    default: "undefined",
+    description: "The initial title to display.",
     id: 5,
     prop: "title",
     type: "string",
-    default: "undefined",
-    description: "The initial title to display.",
   },
   {
+    default: '"h1"',
+    description: "Specifies the HTML heading level for the displayed title.",
     id: 6,
     prop: "titleLevel",
     type: '"h1" | "h2" | "h3" | "h4" | "h5" | "h6"',
-    default: '"h1"',
-    description: "Specifies the HTML heading level for the displayed title.",
   },
   {
-    id: 7,
-    prop: "toggler",
-    type: "JSX.Element",
     default: "<Button />",
     description:
       "A custom toggle button element that activates edit mode. If not provided, a default button will be rendered.",
+    id: 7,
+    prop: "toggler",
+    type: "JSX.Element",
   },
   {
-    id: 8,
-    prop: "showToggler",
-    type: "boolean",
     default: "true",
     description:
       "Display toggle button to toggle between editing and display mode. Otherwise, title itself will handle the functionality on `click event`",
+    id: 8,
+    prop: "showToggler",
+    type: "boolean",
   },
 ];
 
@@ -92,14 +92,14 @@ export const EditableTitleDemo = () => {
 
   return (
     <Page
-      title={t("editableTitle.title")}
       subtitle={t("editableTitle.subtitle")}
+      title={t("editableTitle.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -139,9 +139,9 @@ export const EditableTitleDemo = () => {
         <Card className="editable-title" outlined>
           <CardBody>
             <EditableTitle
+              handleUpdate={handleTitleUpdate}
               title={"Hello"}
               titleLevel="h3"
-              handleUpdate={handleTitleUpdate}
             />
           </CardBody>
         </Card>
@@ -153,9 +153,9 @@ export const EditableTitleDemo = () => {
         <Card className="editable-title" outlined>
           <CardBody>
             <EditableTitle
+              onChange={handleTitleChange}
               title={"Hello"}
               titleLevel="h3"
-              onChange={handleTitleChange}
             />
             {value ? <CodeBlock exampleCode={value} /> : null}
           </CardBody>
@@ -167,7 +167,7 @@ export const EditableTitleDemo = () => {
         <p>{t("editableTitle.usage.disabled.description")}</p>
         <Card className="editable-title" outlined>
           <CardBody>
-            <EditableTitle title={"Hello"} titleLevel="h3" allowEdit={false} />
+            <EditableTitle allowEdit={false} title={"Hello"} titleLevel="h3" />
           </CardBody>
         </Card>
         <CodeBlock exampleCode="<EditableTitle title={'Hello'} titleLevel='h3' allowEdit={false} />" />
diff --git a/apps/demo/src/Views/Ui/components/ExportButton.tsx b/apps/demo/src/Views/Ui/components/ExportButton.tsx
index 4a0665d83..72ccf2f54 100644
--- a/apps/demo/src/Views/Ui/components/ExportButton.tsx
+++ b/apps/demo/src/Views/Ui/components/ExportButton.tsx
@@ -22,15 +22,15 @@ export const ExportButtonDemo = () => {
       title={t("exportButton.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
-        <ExportButton label="Export XLSX" getData={getData} />
+        <ExportButton getData={getData} label="Export XLSX" />
       </Section>
     </Page>
   );
diff --git a/apps/demo/src/Views/Ui/components/FileCard.tsx b/apps/demo/src/Views/Ui/components/FileCard.tsx
index 13eb047c0..e1c5dff40 100644
--- a/apps/demo/src/Views/Ui/components/FileCard.tsx
+++ b/apps/demo/src/Views/Ui/components/FileCard.tsx
@@ -13,31 +13,31 @@ export const FileCardDemo = () => {
       title={t("fileCard.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
         <FileCard
           file={{
+            description: "This is my file",
+            downloadCount: 0,
             id: 0,
+            lastDownloadedAt: Date.now(),
             originalFileName: "file1.png",
-            description: "This is my file",
             size: 4,
-            uploadedBy: { givenName: "Manish", lastName: "Aryal" },
             uploadedAt: Date.now(),
-            downloadCount: 0,
-            lastDownloadedAt: Date.now(),
+            uploadedBy: { givenName: "Manish", lastName: "Aryal" },
           }}
           locale={i18n?.language}
-          onDownload={() => {}}
-          onView={() => {}}
-          onShare={() => {}}
           onArchive={() => {}}
           onDelete={() => {}}
+          onDownload={() => {}}
+          onShare={() => {}}
+          onView={() => {}}
         />
       </Section>
     </Page>
diff --git a/apps/demo/src/Views/Ui/components/FilesList.tsx b/apps/demo/src/Views/Ui/components/FilesList.tsx
index 93d7ac8e1..3158b1bac 100644
--- a/apps/demo/src/Views/Ui/components/FilesList.tsx
+++ b/apps/demo/src/Views/Ui/components/FilesList.tsx
@@ -13,10 +13,10 @@ export const FilesListDemo = () => {
       title={t("filesList.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -24,36 +24,36 @@ export const FilesListDemo = () => {
         <FilesList
           files={[
             {
+              downloadCount: 5,
               id: 0,
+              lastDownloadedAt: Date.now(),
               originalFileName: "file1.png",
-              uploadedBy: { givenName: "Manish", lastName: "Aryal" },
               uploadedAt: Date.now(),
-              downloadCount: 5,
-              lastDownloadedAt: Date.now(),
+              uploadedBy: { givenName: "Manish", lastName: "Aryal" },
             },
             {
+              downloadCount: 5,
               id: 1,
+              lastDownloadedAt: Date.now(),
               originalFileName: "document.pdf",
-              uploadedBy: { givenName: "Gaurav", lastName: "Sapkota" },
               uploadedAt: Date.now(),
-              downloadCount: 5,
-              lastDownloadedAt: Date.now(),
+              uploadedBy: { givenName: "Gaurav", lastName: "Sapkota" },
             },
             {
+              downloadCount: 5,
               id: 2,
+              lastDownloadedAt: Date.now(),
               originalFileName: "photo.jpeg",
-              uploadedBy: { givenName: "Deepak", lastName: "Aryal" },
               uploadedAt: Date.now(),
-              downloadCount: 5,
-              lastDownloadedAt: Date.now(),
+              uploadedBy: { givenName: "Deepak", lastName: "Aryal" },
             },
             {
+              downloadCount: 5,
               id: 3,
+              lastDownloadedAt: Date.now(),
               originalFileName: "manish.png",
-              uploadedBy: { givenName: "Lamdiki", lastName: "Sherpa" },
               uploadedAt: Date.now(),
-              downloadCount: 5,
-              lastDownloadedAt: Date.now(),
+              uploadedBy: { givenName: "Lamdiki", lastName: "Sherpa" },
             },
           ]}
           locale={i18n?.language}
diff --git a/apps/demo/src/Views/Ui/components/FilesPresentation.tsx b/apps/demo/src/Views/Ui/components/FilesPresentation.tsx
index 7ec04292e..c0cbcb533 100644
--- a/apps/demo/src/Views/Ui/components/FilesPresentation.tsx
+++ b/apps/demo/src/Views/Ui/components/FilesPresentation.tsx
@@ -13,72 +13,72 @@ export const FilesPresentationDemo = () => {
       title={t("filesPresentation.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
         <FilesPresentation
-          locale={i18n?.language}
-          visibleFileDetails={[
-            "originalFileName",
-            "description",
-            "size",
-            "uploadedBy",
-            "uploadedAt",
-            "downloadCount",
-            "lastDownloadedAt",
-            "actions",
-          ]}
-          presentation="table"
-          onEditDescription={() => {}}
-          onFileDownload={() => {}}
-          onFileView={() => {}}
           files={[
             {
+              description: "Important file for proposal",
+              downloadCount: 5,
               id: 0,
+              lastDownloadedAt: Date.now(),
               originalFileName: "file1.png",
-              uploadedBy: { givenName: "Manish", surname: "Aryal" },
-              uploadedAt: new Date("2025-04-14").getTime(),
-              downloadCount: 5,
-              description: "Important file for proposal",
               size: 1000,
-              lastDownloadedAt: Date.now(),
+              uploadedAt: new Date("2025-04-14").getTime(),
+              uploadedBy: { givenName: "Manish", surname: "Aryal" },
             },
             {
+              description: "Initial project proposal for client review",
+              downloadCount: 4,
               id: 1,
+              lastDownloadedAt: new Date("2025-03-26").getTime(),
               originalFileName: "document.pdf",
-              uploadedBy: { givenName: "Gaurav", surname: "Sapkota" },
-              uploadedAt: new Date("2025-03-02").getTime(),
-              downloadCount: 4,
-              description: "Initial project proposal for client review",
               size: 500,
-              lastDownloadedAt: new Date("2025-03-26").getTime(),
+              uploadedAt: new Date("2025-03-02").getTime(),
+              uploadedBy: { givenName: "Gaurav", surname: "Sapkota" },
             },
             {
+              description: "Proposal for project",
+              downloadCount: 6,
               id: 2,
+              lastDownloadedAt: new Date("2025-03-12").getTime(),
               originalFileName: "photo.jpeg",
-              uploadedBy: { givenName: "Deepak", surname: "Aryal" },
-              uploadedAt: new Date("2025-02-20").getTime(),
-              downloadCount: 6,
-              description: "Proposal for project",
               size: 1500,
-              lastDownloadedAt: new Date("2025-03-12").getTime(),
+              uploadedAt: new Date("2025-02-20").getTime(),
+              uploadedBy: { givenName: "Deepak", surname: "Aryal" },
             },
             {
+              description: "File containing client list",
+              downloadCount: 3,
               id: 3,
+              lastDownloadedAt: new Date("2025-03-08").getTime(),
               originalFileName: "manish.png",
-              uploadedBy: { givenName: "Lamdiki", surname: "Sherpa" },
-              uploadedAt: new Date("2025-02-17").getTime(),
-              downloadCount: 3,
-              description: "File containing client list",
               size: 2000,
-              lastDownloadedAt: new Date("2025-03-08").getTime(),
+              uploadedAt: new Date("2025-02-17").getTime(),
+              uploadedBy: { givenName: "Lamdiki", surname: "Sherpa" },
             },
           ]}
+          locale={i18n?.language}
+          onEditDescription={() => {}}
+          onFileDownload={() => {}}
+          onFileView={() => {}}
+          presentation="table"
+          visibleFileDetails={[
+            "originalFileName",
+            "description",
+            "size",
+            "uploadedBy",
+            "uploadedAt",
+            "downloadCount",
+            "lastDownloadedAt",
+            "actions",
+          ]}
         />
       </Section>
     </Page>
diff --git a/apps/demo/src/Views/Ui/components/FilesTable.tsx b/apps/demo/src/Views/Ui/components/FilesTable.tsx
index 307ce4525..f436ecf83 100644
--- a/apps/demo/src/Views/Ui/components/FilesTable.tsx
+++ b/apps/demo/src/Views/Ui/components/FilesTable.tsx
@@ -13,38 +13,54 @@ export const FilesTableDemo = () => {
       title={t("filesTable.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
         <FilesTable
-          onFileDelete={() => {}}
-          onFileArchive={() => {}}
+          columns={[
+            {
+              id: "uploadedBy",
+              tooltip: ({ row: { original } }) => {
+                return `${original.uploadedBy.givenName} ${original.uploadedBy.lastName}`;
+              },
+            },
+            {
+              accessorKey: "uploadedAt",
+              tooltip: true,
+            },
+          ]}
           files={[
             {
+              description: "Initial project proposal for client review",
+              downloadCount: 10,
               id: 0,
+              lastDownloadedAt: new Date("2025-01-26").getTime(),
               originalFileName: "my file",
-              description: "Initial project proposal for client review",
-              uploadedBy: { givenName: "Manish", surname: "Aryal" },
               uploadedAt: new Date("2025-01-14").getTime(),
-              lastDownloadedAt: new Date("2025-01-26").getTime(),
-              downloadCount: 10,
+              uploadedBy: { givenName: "Manish", surname: "Aryal" },
             },
             {
+              description: "Final logo design for branding",
+              downloadCount: 12,
               id: 1,
+              lastDownloadedAt: Date.now(),
               originalFileName: "logo",
-              description: "Final logo design for branding",
-              uploadedBy: { givenName: "Nabin", surname: "Dhital" },
               uploadedAt: new Date("2025-02-17").getTime(),
-              lastDownloadedAt: Date.now(),
-              downloadCount: 12,
+              uploadedBy: { givenName: "Nabin", surname: "Dhital" },
             },
           ]}
           locale={i18n?.language}
+          onFileArchive={() => {}}
+          onFileDelete={() => {}}
+          paginationOptions={{
+            itemsPerPageControlLabel: t("filesTable.pagination.rowsPerPage"),
+            pageInputLabel: t("filesTable.pagination.pageControl"),
+          }}
           visibleColumns={[
             "originalFileName",
             "description",
@@ -54,22 +70,6 @@ export const FilesTableDemo = () => {
             "downloadCount",
             "actions",
           ]}
-          columns={[
-            {
-              id: "uploadedBy",
-              tooltip: ({ row: { original } }) => {
-                return `${original.uploadedBy.givenName} ${original.uploadedBy.lastName}`;
-              },
-            },
-            {
-              accessorKey: "uploadedAt",
-              tooltip: true,
-            },
-          ]}
-          paginationOptions={{
-            pageInputLabel: t("filesTable.pagination.pageControl"),
-            itemsPerPageControlLabel: t("filesTable.pagination.rowsPerPage"),
-          }}
         />
       </Section>
     </Page>
diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/Checkbox.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/Checkbox.tsx
index ce15ec5da..6d9e01ce3 100644
--- a/apps/demo/src/Views/Ui/components/FormWidgets/Checkbox.tsx
+++ b/apps/demo/src/Views/Ui/components/FormWidgets/Checkbox.tsx
@@ -13,10 +13,10 @@ export const CheckboxDemo = () => {
       title={t("checkbox.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/CheckboxInput.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/CheckboxInput.tsx
index 0feafb415..ed44281fc 100644
--- a/apps/demo/src/Views/Ui/components/FormWidgets/CheckboxInput.tsx
+++ b/apps/demo/src/Views/Ui/components/FormWidgets/CheckboxInput.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Button, Page, TDataTable } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
+import { CodeBlock, Section } from "../../../../components/Demo";
 import {
   CustomLabelMultiCheckboxDemo,
   CustomLabelSingleCheckboxDemo,
@@ -9,106 +10,105 @@ import {
   MultiCheckboxDemo,
   SingleCheckboxDemo,
 } from "./CheckboxInputUsage";
-import { CodeBlock, Section } from "../../../../components/Demo";
 
 const data = [
   {
+    default: "false",
+    description: "Determines the checked state of a single checkbox.",
     id: 1,
     name: "checked",
     type: "boolean",
-    default: "false",
-    description: "Determines the checked state of a single checkbox.",
   },
   {
+    default: "-",
+    description: "Additional CSS classes for styling.",
     id: 2,
     name: "className",
     type: "string",
-    default: "-",
-    description: "Additional CSS classes for styling.",
   },
   {
+    default: '"vertical"',
+    description: "Defines the layout direction for multiple checkboxes.",
     id: 3,
     name: "direction",
     type: '"horizontal" | "vertical"',
-    default: '"vertical"',
-    description: "Defines the layout direction for multiple checkboxes.",
   },
   {
+    default: "-",
+    description: "Disables the checkbox input.",
     id: 4,
     name: "disabled",
     type: "boolean",
-    default: "-",
-    description: "Disables the checkbox input.",
   },
   {
+    default: "-",
+    description: "Displays an error message below the component.",
     id: 5,
     name: "errorMessage",
     type: "string",
-    default: "-",
-    description: "Displays an error message below the component.",
   },
   {
+    default: "-",
+    description: "Displays a helper text below the component.",
     id: 6,
     name: "helperText",
     type: "string",
-    default: "-",
-    description: "Displays a helper text below the component.",
   },
   {
+    default: "-",
+    description: "Label for the single checkbox.",
     id: 7,
     name: "inputLabel",
     type: "string | React.ReactNode",
-    default: "-",
-    description: "Label for the single checkbox.",
   },
   {
+    default: "-",
+    description: "Label for the group of checkboxes.",
     id: 8,
     name: "label",
     type: "string | React.ReactNode",
-    default: "-",
-    description: "Label for the group of checkboxes.",
   },
   {
+    default: "-",
+    description: "The name attribute for the checkbox input.",
     id: 9,
     name: "name",
     type: "string",
-    default: "-",
-    description: "The name attribute for the checkbox input.",
   },
   {
+    default: "-",
+    description: "Callback function that returns the updated values.",
     id: 10,
     name: "onChange",
     type: "(newValue: T[]) => void",
-    default: "-",
-    description: "Callback function that returns the updated values.",
   },
   {
+    default: "[]",
+    description: "Options for multiple checkboxes.",
     id: 11,
     name: "options",
     type: "Array<{ value, label }>",
-    default: "[]",
-    description: "Options for multiple checkboxes.",
   },
   {
+    default: "-",
+    description: "Placeholder text (not applicable to checkboxes).",
     id: 12,
     name: "placeholder",
     type: "string",
-    default: "-",
-    description: "Placeholder text (not applicable to checkboxes).",
   },
   {
+    default: "[]",
+    description: "Array of selected values for multiple checkboxes.",
     id: 13,
     name: "value",
     type: "T[]",
-    default: "[]",
-    description: "Array of selected values for multiple checkboxes.",
   },
   {
+    default: "-",
+    description: "Custom render label for multiple checkboxes.",
     id: 14,
     name: "renderOptionsLabel",
     type: "(option: Option<T>) => React.ReactNode",
-    default: "-",
-    description: "Custom render label for multiple checkboxes.",
   },
 ];
 
@@ -119,14 +119,14 @@ export const CheckboxInputDemo = () => {
   return (
     <Page
       className="demo-checkbox-input"
-      title={t("checkboxInput.title")}
       subtitle={t("checkboxInput.subtitle")}
+      title={t("checkboxInput.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/CheckboxInputUsage.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/CheckboxInputUsage.tsx
index 3d17b1f37..646e1ba83 100644
--- a/apps/demo/src/Views/Ui/components/FormWidgets/CheckboxInputUsage.tsx
+++ b/apps/demo/src/Views/Ui/components/FormWidgets/CheckboxInputUsage.tsx
@@ -22,9 +22,9 @@ const SingleCheckboxDemo = ({
 
   return (
     <CheckboxInput
-      name="single-checkbox"
-      inputLabel="Accept terms and conditions"
       checked={checked}
+      inputLabel="Accept terms and conditions"
+      name="single-checkbox"
       onChange={(newChecked) => setChecked(newChecked as boolean)}
     />
   );
@@ -55,13 +55,13 @@ const CustomLabelSingleCheckboxDemo = ({
 
   return (
     <CheckboxInput
-      name="custom-single-checkbox"
+      checked={checked}
       inputLabel={
         <span>
           Accept <b>terms and conditions</b>
         </span>
       }
-      checked={checked}
+      name="custom-single-checkbox"
       onChange={(newChecked) => setChecked(newChecked as boolean)}
     />
   );
@@ -75,9 +75,9 @@ const MultiCheckboxDemo = ({
   const [selectedValues, setSelectedValues] = useState<number[]>([]);
 
   const options = [
-    { value: 1, label: "Bike" },
-    { value: 2, label: "Car" },
-    { value: 3, label: "Truck" },
+    { label: "Bike", value: 1 },
+    { label: "Car", value: 2 },
+    { label: "Truck", value: 3 },
   ];
 
   if (isString) {
@@ -103,12 +103,12 @@ const MultiCheckboxDemo = ({
 
   return (
     <CheckboxInput
-      name="multi-checkbox"
-      label="Choose vehicle options"
       direction="horizontal"
+      label="Choose vehicle options"
+      name="multi-checkbox"
+      onChange={(newValues) => setSelectedValues(newValues as number[])}
       options={options}
       value={selectedValues}
-      onChange={(newValues) => setSelectedValues(newValues as number[])}
     />
   );
 };
@@ -121,9 +121,9 @@ const CustomLabelMultiCheckboxDemo = ({
   const [selectedValues, setSelectedValues] = useState<number[]>([]);
 
   const options = [
-    { value: 1, label: "Bike" },
-    { value: 2, label: "Car" },
-    { value: 3, label: "Truck" },
+    { label: "Bike", value: 1 },
+    { label: "Car", value: 2 },
+    { label: "Truck", value: 3 },
   ];
 
   const renderOptionsLabel = (option: (typeof options)[0]) => {
@@ -170,13 +170,13 @@ const CustomLabelMultiCheckboxDemo = ({
 
   return (
     <CheckboxInput
-      name="custom-multi-checkbox"
-      label="Choose vehicle options"
       direction="horizontal"
-      renderOptionsLabel={renderOptionsLabel}
+      label="Choose vehicle options"
+      name="custom-multi-checkbox"
+      onChange={(newValues) => setSelectedValues(newValues as number[])}
       options={options}
+      renderOptionsLabel={renderOptionsLabel}
       value={selectedValues}
-      onChange={(newValues) => setSelectedValues(newValues as number[])}
     />
   );
 };
@@ -187,9 +187,9 @@ const DisabledDemo = ({
   isString?: boolean;
 }): JSX.Element | string => {
   const options = [
-    { value: 1, label: "Bike" },
-    { value: 2, label: "Car" },
-    { value: 3, label: "Truck" },
+    { label: "Bike", value: 1 },
+    { label: "Car", value: 2 },
+    { label: "Truck", value: 3 },
   ];
 
   if (isString) {
@@ -214,20 +214,20 @@ const DisabledDemo = ({
 
   return (
     <CheckboxInput
-      name="disabled-checkbox"
+      disabled
+      helperText="These checkboxes are disabled."
       label="Disabled options"
+      name="disabled-checkbox"
       options={options}
       value={[2]}
-      disabled
-      helperText="These checkboxes are disabled."
     />
   );
 };
 
 export {
-  CustomLabelSingleCheckboxDemo,
   CustomLabelMultiCheckboxDemo,
-  SingleCheckboxDemo,
-  MultiCheckboxDemo,
+  CustomLabelSingleCheckboxDemo,
   DisabledDemo,
+  MultiCheckboxDemo,
+  SingleCheckboxDemo,
 };
diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx
index d3a6f02ce..91ca06711 100644
--- a/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx
+++ b/apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx
@@ -1,17 +1,17 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import {
+  Button,
   CountryPicker,
   Page,
-  Button,
   TDataTable,
 } from "@prefabs.tech/react-ui";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
+import { CodeBlock, Section } from "../../../../components/Demo";
 import englishData from "./en.json";
 import frenchData from "./fr.json";
 import nepaliData from "./np.json";
-import { CodeBlock, Section } from "../../../../components/Demo";
 
 export const CountryPickerDemo = () => {
   import("@prefabs.tech/react-ui/dist/PrefabsTechFlagIcon.css");
@@ -22,13 +22,13 @@ export const CountryPickerDemo = () => {
 
   const frenchTranslation = {
     ...frenchData,
-    EU: "Union Européenne",
     ASEAN: "ASEAN",
+    EU: "Union Européenne",
   };
   const englishTranslation = {
     ...englishData,
-    EU: "European Union",
     ASEAN: "ASEAN",
+    EU: "European Union",
   };
 
   const data = [
@@ -195,10 +195,10 @@ export const CountryPickerDemo = () => {
       title={t("countryPicker.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -212,9 +212,9 @@ export const CountryPickerDemo = () => {
           label={t("countryPicker.labels.single")}
           locale={locale}
           name="countryPickerSingle"
+          onChange={(value: string) => setSingleSelectValue(value)}
           placeholder={t("countryPicker.placeholders.single")}
           value={singleSelectValue}
-          onChange={(value: string) => setSingleSelectValue(value)}
         />
         <CodeBlock
           exampleCode='
@@ -238,9 +238,9 @@ const selectedLocale = i18n.language;
           locale={locale}
           multiple={true}
           name="countryPickerMultiple"
+          onChange={(value: string[]) => setMultipleSelectValues(value)}
           placeholder={t("countryPicker.placeholders.multiple")}
           value={multipleSelectValues}
-          onChange={(value: string[]) => setMultipleSelectValues(value)}
         />
         <CodeBlock
           exampleCode='
@@ -261,13 +261,13 @@ const selectedLocale = i18n.language;
 
       <Section title={t("countryPicker.locale")}>
         <CountryPicker
-          locales={{ np: nepaliData }}
           label={t("countryPicker.labels.single")}
           locale="np"
+          locales={{ np: nepaliData }}
           name="countryPickerNepali"
+          onChange={(value: string) => setNepaliValue(value)}
           placeholder={t("countryPicker.placeholders.single")}
           value={nepaliValue}
-          onChange={(value: string) => setNepaliValue(value)}
         />
         <CodeBlock
           exampleCode='
@@ -291,16 +291,16 @@ const selectedLocale = "np";
       <Section title={t("countryPicker.fallbackLocale")}>
         <CountryPicker
           fallbackLocale="fr"
+          label={t("countryPicker.labels.single")}
+          locale="gb"
           locales={{
-            np: nepaliData,
             fr: frenchData,
+            np: nepaliData,
           }}
-          label={t("countryPicker.labels.single")}
-          locale="gb"
           name="countryPickerFallback"
+          onChange={(value: string) => setFallbackValue(value)}
           placeholder={t("countryPicker.placeholders.single")}
           value={fallbackValue}
-          onChange={(value: string) => setFallbackValue(value)}
         />
         <CodeBlock
           exampleCode='import nepaliData from "./np.json
@@ -331,9 +331,9 @@ const fallbackLocale = "fr";
           flagsStyle="circle"
           label={t("countryPicker.labels.single")}
           name="countryPickerFlags"
+          onChange={(value: string) => setFlagsSelectValue(value)}
           placeholder={t("countryPicker.placeholders.single")}
           value={flagsSelectValue}
-          onChange={(value: string) => setFlagsSelectValue(value)}
         />
         <CodeBlock
           exampleCode='
@@ -356,9 +356,9 @@ const [singleSelectValue, setSingleSelectValue] = useState<string>("");
           flagsPath={customFlagsPath}
           label={t("countryPicker.labels.single")}
           name="countryPickerCustomFlags"
+          onChange={(value: string) => setCustomFlagsSelectValue(value)}
           placeholder={t("countryPicker.placeholders.single")}
           value={customFlagsSelectValue}
-          onChange={(value: string) => setCustomFlagsSelectValue(value)}
         />
         <CodeBlock
           exampleCode={`
@@ -385,9 +385,9 @@ const flagsPath = (code: string) => {
           label={t("countryPicker.labels.single")}
           locale={locale}
           name="countryPickerInclude"
+          onChange={(value: string) => setIncludeSelectValue(value)}
           placeholder={t("countryPicker.placeholders.single")}
           value={includeSelectValue}
-          onChange={(value: string) => setIncludeSelectValue(value)}
         />
         <CodeBlock
           exampleCode='
@@ -435,9 +435,9 @@ const selectedLocale = i18n.language;
           label={t("countryPicker.labels.single")}
           locale={locale}
           name="favoriteCountry"
+          onChange={(value: string) => setFavoriteValue(value)}
           placeholder={t("countryPicker.placeholders.single")}
           value={favoriteValue}
-          onChange={(value: string) => setFavoriteValue(value)}
         />
         <CodeBlock
           exampleCode='
@@ -461,9 +461,9 @@ const selectedLocale = i18n.language;
           label={t("countryPicker.labels.single")}
           locale={locale}
           name="countryPickerFav"
+          onChange={(value: string) => setIncludeFavoritesValue(value)}
           placeholder={t("countryPicker.placeholders.single")}
           value={includeFavoritesValue}
-          onChange={(value: string) => setIncludeFavoritesValue(value)}
         />
         <CodeBlock
           exampleCode='
@@ -484,18 +484,18 @@ const selectedLocale = i18n.language;
       <Section title={t("countryPicker.groupingDefault")}>
         <CountryPicker
           groups={{
+            "European Hubs": ["GB", "DE", "FR"],
             "North America HQ": ["US", "CA"],
             "Offshore Dev Center": ["IN", "VN", "PH"],
-            "European Hubs": ["GB", "DE", "FR"],
           }}
           label={t("countryPicker.labels.single")}
           locale={locale}
           name="groupingCustom"
-          placeholder={t("countryPicker.placeholders.single")}
-          value={customGroupValue}
-          onChange={(value: string | number | (string | number)[]) =>
+          onChange={(value: (number | string)[] | number | string) =>
             setCustomGroupValue(value as string)
           }
+          placeholder={t("countryPicker.placeholders.single")}
+          value={customGroupValue}
         />
         <CodeBlock
           exampleCode='
@@ -519,19 +519,19 @@ const groups = {
 
       <Section title={t("countryPicker.groupingWithTranslation")}>
         <CountryPicker
-          locales={{ fr: frenchTranslation, en: englishTranslation }}
           groups={{
-            EU: ["FR", "DE", "IT", "ES"],
             ASEAN: ["VN", "TH", "SG"],
+            EU: ["FR", "DE", "IT", "ES"],
           }}
           label={t("countryPicker.labels.single")}
           locale={locale}
+          locales={{ en: englishTranslation, fr: frenchTranslation }}
           name="groupingTranslationKeys"
-          placeholder={t("countryPicker.placeholders.single")}
-          value={translationGroupValue}
-          onChange={(value: string | number | (string | number)[]) =>
+          onChange={(value: (number | string)[] | number | string) =>
             setTranslationGroupValue(value as string)
           }
+          placeholder={t("countryPicker.placeholders.single")}
+          value={translationGroupValue}
         />
         <CodeBlock
           exampleCode='import englishData from "./locales/en.json";
@@ -572,17 +572,17 @@ const groups = {
           autoSortOptions={false}
           favorites={["US", "FR"]}
           groups={{
-            "North America": ["US", "CA"],
             Europe: ["FR", "DE", "IT", "ES"],
+            "North America": ["US", "CA"],
           }}
           label={t("countryPicker.labels.single")}
           locale={locale}
           name="groupingFavorites"
-          placeholder={t("countryPicker.placeholders.single")}
-          value={favoriteGroupValue}
-          onChange={(value: string | number | (string | number)[]) =>
+          onChange={(value: (number | string)[] | number | string) =>
             setFavoriteGroupValue(value as string)
           }
+          placeholder={t("countryPicker.placeholders.single")}
+          value={favoriteGroupValue}
         />
         <CodeBlock
           exampleCode='
diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/CurrencyPicker.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/CurrencyPicker.tsx
index bc36f48c0..c7813de53 100644
--- a/apps/demo/src/Views/Ui/components/FormWidgets/CurrencyPicker.tsx
+++ b/apps/demo/src/Views/Ui/components/FormWidgets/CurrencyPicker.tsx
@@ -1,10 +1,10 @@
 import { Trans, useTranslation } from "@prefabs.tech/react-i18n";
-import { CurrencyPicker, Page, Button } from "@prefabs.tech/react-ui";
+import { Button, CurrencyPicker, Page } from "@prefabs.tech/react-ui";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { currencies } from "./data";
 import { CodeBlock, Section } from "../../../../components/Demo";
+import { currencies } from "./data";
 
 export const CurrencyPickerDemo = () => {
   const [t] = useTranslation("ui");
@@ -48,10 +48,10 @@ export const CurrencyPickerDemo = () => {
       title={t("currencyPicker.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -64,10 +64,10 @@ export const CurrencyPickerDemo = () => {
         <CurrencyPicker
           label={t("currencyPicker.label")}
           name="currency"
-          options={options}
-          value={singleSelectCurrencyValue}
           onChange={(value: string) => setSingleSelectCurrencyValue(value)}
+          options={options}
           placeholder={t("currencyPicker.placeholder")}
+          value={singleSelectCurrencyValue}
         />
         <CodeBlock
           exampleCode='
@@ -92,20 +92,20 @@ const [singleSelectCurrencyValue, setSingleSelectCurrencyValue] = useState<strin
         />
         <p>
           <Trans
-            i18nKey={"ui:select.autoSortOptionsInfo"}
             components={{ code: <code /> }}
+            i18nKey={"ui:select.autoSortOptionsInfo"}
           ></Trans>
         </p>
       </Section>
       <Section title={t("currencyPicker.usage.multiple")}>
         <CurrencyPicker
           label={t("currencyPicker.label")}
-          name="multipleCurrency"
-          options={options}
           multiple={true}
-          value={multiSelectCurrencyValue}
+          name="multipleCurrency"
           onChange={(value: string[]) => setMultiSelectCurrencyValue(value)}
+          options={options}
           placeholder={t("currencyPicker.multiSelectPlaceholder")}
+          value={multiSelectCurrencyValue}
         />
         <CodeBlock
           exampleCode='
@@ -134,12 +134,12 @@ const [multiSelectCurrencyValue, setMultiSelectCurrencyValue] = useState<string[
         <CurrencyPicker
           label={t("currencyPicker.label")}
           name="extensiveCurrency"
-          options={currencies}
-          value={extensiveOptionsCurrencyPickerValue}
           onChange={(value: string) =>
             setExtensiveOptionsCurrencyPickerValue(value)
           }
+          options={currencies}
           placeholder={t("currencyPicker.placeholder")}
+          value={extensiveOptionsCurrencyPickerValue}
         />
         <CodeBlock
           exampleCode='
diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/Input.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/Input.tsx
index 3a455999d..854827d9e 100644
--- a/apps/demo/src/Views/Ui/components/FormWidgets/Input.tsx
+++ b/apps/demo/src/Views/Ui/components/FormWidgets/Input.tsx
@@ -13,22 +13,22 @@ export const InputDemo = () => {
       title={t("input.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section title={t("input.usage.basic")}>
-        <Input placeholder="Input placeholder" label="Input label" />
+        <Input label="Input label" placeholder="Input placeholder" />
       </Section>
       <Section title={t("input.usage.invalidInput")}>
         <Input
-          hasError={true}
           errorMessage="Invalid input"
-          placeholder="Input placeholder"
+          hasError={true}
           label="Input label"
+          placeholder="Input placeholder"
         />
       </Section>
     </Page>
diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/Select.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/Select.tsx
index dc94f1257..52c7f09f8 100644
--- a/apps/demo/src/Views/Ui/components/FormWidgets/Select.tsx
+++ b/apps/demo/src/Views/Ui/components/FormWidgets/Select.tsx
@@ -1,16 +1,16 @@
 import { Trans, useTranslation } from "@prefabs.tech/react-i18n";
-import { Select, Page, Button, Tag } from "@prefabs.tech/react-ui";
+import { Button, Page, Select, Tag } from "@prefabs.tech/react-ui";
 import { TDataTable } from "@prefabs.tech/react-ui";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { CodeBlock, Section } from "../../../../components/Demo";
 
-type Option<T = string | number> = {
-  value?: T;
-  label?: string;
-  disabled?: boolean;
+type Option<T = number | string> = {
   [key: string]: unknown;
+  disabled?: boolean;
+  label?: string;
+  value?: T;
 };
 
 export const SelectDemo = () => {
@@ -19,182 +19,182 @@ export const SelectDemo = () => {
 
   const data = [
     {
+      default: "true",
+      description: t("select.propertiesDescription.autoSortOptions"),
       id: 1,
       prop: "autoSortOptions",
       type: "boolean",
-      default: "true",
-      description: t("select.propertiesDescription.autoSortOptions"),
     },
     {
+      default: "false",
+      description: t("select.propertiesDescription.autoSelectSingleOption"),
       id: 2,
       prop: "autoSelectSingleOption",
       type: "boolean",
-      default: "false",
-      description: t("select.propertiesDescription.autoSelectSingleOption"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.className"),
       id: 3,
       prop: "className",
       type: "string",
-      default: "-",
-      description: t("select.propertiesDescription.className"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.disabled"),
       id: 4,
       prop: "disabled",
       type: "boolean",
-      default: "-",
-      description: t("select.propertiesDescription.disabled"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.disableGroupSelect"),
       id: 5,
       prop: "disableGroupSelect",
       type: "boolean",
-      default: "-",
-      description: t("select.propertiesDescription.disableGroupSelect"),
     },
     {
+      default: "false",
+      description: t("select.propertiesDescription.disableSearch"),
       id: 6,
       prop: "disableSearch",
       type: "boolean",
-      default: "false",
-      description: t("select.propertiesDescription.disableSearch"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.errorMessage"),
       id: 7,
       prop: "errorMessage",
       type: "string",
-      default: "-",
-      description: t("select.propertiesDescription.errorMessage"),
     },
     {
+      default: "false",
+      description: t("select.propertiesDescription.enableTooltip"),
       id: 8,
       prop: "enableTooltip",
       type: "boolean",
-      default: "false",
-      description: t("select.propertiesDescription.enableTooltip"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.hasError"),
       id: 9,
       prop: "hasError",
       type: "boolean",
-      default: "-",
-      description: t("select.propertiesDescription.hasError"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.helperText"),
       id: 10,
       prop: "helperText",
       type: "string",
-      default: "-",
-      description: t("select.propertiesDescription.helperText"),
     },
     {
+      default: "false",
+      description: t("select.propertiesDescription.hideIfSingleOption"),
       id: 11,
       prop: "hideIfSingleOption",
       type: "boolean",
-      default: "false",
-      description: t("select.propertiesDescription.hideIfSingleOption"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.label"),
       id: 12,
       prop: "label",
       type: "string",
-      default: "-",
-      description: t("select.propertiesDescription.label"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.labelKey"),
       id: 13,
       prop: "labelKey",
       type: "string",
-      default: "-",
-      description: t("select.propertiesDescription.labelKey"),
     },
     {
+      default: "false",
+      description: t("select.propertiesDescription.multiple"),
       id: 14,
       prop: "multiple",
       type: "boolean",
-      default: "false",
-      description: t("select.propertiesDescription.multiple"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.name"),
       id: 15,
       prop: "name",
       type: "string",
-      default: "-",
-      description: t("select.propertiesDescription.name"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.options"),
       id: 16,
       prop: "options",
       type: "Option[] | GroupedOption[]",
-      default: "-",
-      description: t("select.propertiesDescription.options"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.placeholder"),
       id: 17,
       prop: "placeholder",
       type: "string",
-      default: "-",
-      description: t("select.propertiesDescription.placeholder"),
     },
     {
+      default: "Select all",
+      description: t("select.propertiesDescription.selectAllLabel"),
       id: 18,
       prop: "selectAllLabel",
       type: "string",
-      default: "Select all",
-      description: t("select.propertiesDescription.selectAllLabel"),
     },
     {
+      default: "true",
+      description: t("select.propertiesDescription.showRemoveSelection"),
       id: 19,
       prop: "showRemoveSelection",
       type: "boolean",
-      default: "true",
-      description: t("select.propertiesDescription.showRemoveSelection"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.tooltipOptions"),
       id: 20,
       prop: "tooltipOptions",
       type: "TooltipOptions",
-      default: "-",
-      description: t("select.propertiesDescription.tooltipOptions"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.value"),
       id: 21,
       prop: "value",
       type: "Value",
-      default: "-",
-      description: t("select.propertiesDescription.value"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.valueKey"),
       id: 22,
       prop: "valueKey",
       type: "string",
-      default: "-",
-      description: t("select.propertiesDescription.valueKey"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.renderOption"),
       id: 23,
       prop: "renderOption",
       type: "(option: Option<T> | GroupedOption<T>) => React.ReactNode",
-      default: "-",
-      description: t("select.propertiesDescription.renderOption"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.renderValue"),
       id: 24,
       prop: "renderValue",
       type: `(
         value?: T | T[],
         options?: Option<T>[] | GroupedOption<T>[]
       ) => React.ReactNode`,
-      default: "-",
-      description: t("select.propertiesDescription.renderValue"),
     },
     {
+      default: "-",
+      description: t("select.propertiesDescription.onChange"),
       id: 25,
       prop: "onChange",
       type: " (newValue: T | T[]) => void",
-      default: "-",
-      description: t("select.propertiesDescription.onChange"),
     },
   ];
 
@@ -312,10 +312,10 @@ export const SelectDemo = () => {
       title={t("select.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -328,6 +328,7 @@ export const SelectDemo = () => {
         <Select
           label={t("select.label")}
           name="select"
+          onChange={(value: string) => setSingleSelectValue(value)}
           options={[
             { label: "France", value: "FR" },
             { label: "Germany", value: "DE" },
@@ -335,9 +336,8 @@ export const SelectDemo = () => {
             { label: "Nepal", value: "NP" },
             { label: "India", value: "IN" },
           ]}
-          value={singleSelectValue}
-          onChange={(value: string) => setSingleSelectValue(value)}
           placeholder={t("select.placeholder")}
+          value={singleSelectValue}
         />
         <CodeBlock
           exampleCode='
@@ -360,19 +360,19 @@ const [singleSelectValue, setSingleSelectValue] = useState<string>("");
         />
         <p>
           <Trans
-            i18nKey={"ui:select.autoSortOptionsInfo"}
             components={{ code: <code /> }}
+            i18nKey={"ui:select.autoSortOptionsInfo"}
           ></Trans>
         </p>
       </Section>
       <Section title={t("select.usage.disabled")}>
         <Select
+          disabled={true}
           label={t("select.label")}
           name="disbledSelect"
-          options={[{ value: "NP", label: "Nepal" }]}
-          value="NP"
           onChange={() => {}}
-          disabled={true}
+          options={[{ label: "Nepal", value: "NP" }]}
+          value="NP"
         />
         <CodeBlock
           exampleCode='
@@ -391,6 +391,7 @@ const [singleSelectValue, setSingleSelectValue] = useState<string>("");
           disableSearch
           label={t("select.label")}
           name="disableSearchSelect"
+          onChange={(value: string) => setDisableSearchSelectValue(value)}
           options={[
             { label: "France", value: "FR" },
             { label: "Germany", value: "DE" },
@@ -398,9 +399,8 @@ const [singleSelectValue, setSingleSelectValue] = useState<string>("");
             { label: "Nepal", value: "NP" },
             { label: "India", value: "IN" },
           ]}
-          value={disableSearchSelectValue}
-          onChange={(value: string) => setDisableSearchSelectValue(value)}
           placeholder={t("select.placeholder")}
+          value={disableSearchSelectValue}
         />
         <CodeBlock
           exampleCode='
@@ -426,7 +426,9 @@ const [disableSearchSelectValue, setDisableSearchSelectValue] = useState<string>
       <Section title={t("select.usage.multiple")}>
         <Select
           label={t("select.label")}
+          multiple={true}
           name="multiselect"
+          onChange={(value: string[]) => setMultiselectValue(value)}
           options={[
             { label: "France", value: "FR" },
             { label: "Germany", value: "DE" },
@@ -434,10 +436,8 @@ const [disableSearchSelectValue, setDisableSearchSelectValue] = useState<string>
             { label: "Nepal", value: "NP" },
             { label: "India", value: "IN" },
           ]}
-          multiple={true}
-          value={multiselectValue}
-          onChange={(value: string[]) => setMultiselectValue(value)}
           placeholder={t("select.multiSelectPlaceholder")}
+          value={multiselectValue}
         />
         <CodeBlock
           exampleCode='
@@ -464,7 +464,9 @@ const [multiselectValue, setMultiselectValue] = useState<string[]>([]);
       <Section title={t("select.usage.renderValue")}>
         <Select
           label={t("select.label")}
+          multiple={true}
           name="customRenderSelect"
+          onChange={(value: string[]) => setRenderedValue(value)}
           options={[
             { label: "France", value: "FR" },
             { label: "Germany", value: "DE" },
@@ -472,11 +474,9 @@ const [multiselectValue, setMultiselectValue] = useState<string[]>([]);
             { label: "Nepal", value: "NP" },
             { label: "India", value: "IN" },
           ]}
-          value={renderedValue}
-          onChange={(value: string[]) => setRenderedValue(value)}
-          renderValue={renderSelectedValue}
-          multiple={true}
           placeholder={t("select.multiSelectPlaceholder")}
+          renderValue={renderSelectedValue}
+          value={renderedValue}
         />
         <CodeBlock
           exampleCode='
@@ -520,7 +520,9 @@ const renderSelectedValue = (
       <Section title={t("select.usage.renderOption")}>
         <Select
           label={t("select.label")}
+          multiple={true}
           name="customOptionSelect"
+          onChange={(value: string[]) => setRenderedOption(value)}
           options={[
             { label: "France", value: "FR" },
             { label: "Germany", value: "DE" },
@@ -528,11 +530,9 @@ const renderSelectedValue = (
             { label: "Nepal", value: "NP" },
             { label: "India", value: "IN" },
           ]}
-          value={renderedOption}
-          onChange={(value: string[]) => setRenderedOption(value)}
-          renderOption={renderOption}
-          multiple={true}
           placeholder={t("select.multiSelectPlaceholder")}
+          renderOption={renderOption}
+          value={renderedOption}
         />
         <CodeBlock
           exampleCode='
@@ -569,19 +569,19 @@ const renderOption = (option: Option) => {
       <Section title={t("select.usage.key")}>
         <Select
           label={t("select.label")}
+          labelKey="country"
           name="keySelect"
+          onChange={(value: string) => setValue(value)}
           options={[
-            { country: "France", code: "fr" },
-            { country: "Germany", code: "de" },
-            { disabled: true, country: "Belgium", code: "be" },
-            { country: "Nepal", code: "np" },
-            { country: "India", code: "hi" },
+            { code: "fr", country: "France" },
+            { code: "de", country: "Germany" },
+            { code: "be", country: "Belgium", disabled: true },
+            { code: "np", country: "Nepal" },
+            { code: "hi", country: "India" },
           ]}
-          value={value}
-          onChange={(value: string) => setValue(value)}
           placeholder={t("select.placeholder")}
+          value={value}
           valueKey="code"
-          labelKey="country"
         />
         <CodeBlock
           exampleCode='
@@ -613,13 +613,13 @@ const [value, setValue] = useState<string>("");
           loading={loading}
           name="serverSelect"
           noOptionsMessage={t("select.noRoleOptions")}
+          onChange={(value: string) => setRoleSelectValue(value)}
           options={rolesOptions}
+          placeholder={t("select.roleSelectPlaceholder")}
+          serverSearchFn={fetchRoles}
           serverSearchHelperText={t("select.serverSearchHelper")}
           value={roleSelectValue}
           valueKey="id"
-          onChange={(value: string) => setRoleSelectValue(value)}
-          placeholder={t("select.roleSelectPlaceholder")}
-          serverSearchFn={fetchRoles}
         />
         <CodeBlock
           exampleCode='
@@ -655,8 +655,12 @@ const fetchRoles = async (searchInput: string) => {
 
       <Section title={t("select.usage.withTooltip")}>
         <Select
+          className="country-selector"
+          enableTooltip
           label={t("select.label")}
+          multiple
           name="tooltipSelect"
+          onChange={(value: string[]) => setSelectedCountries(value)}
           options={[
             { label: "France", value: "FR" },
             { label: "Germany", value: "DE" },
@@ -664,16 +668,12 @@ const fetchRoles = async (searchInput: string) => {
             { label: "Nepal", value: "NP" },
             { label: "India", value: "IN" },
           ]}
-          value={selectedCountries}
-          onChange={(value: string[]) => setSelectedCountries(value)}
-          className="country-selector"
           placeholder={t("select.placeholder")}
-          multiple
-          enableTooltip
           tooltipOptions={{
-            position: "top",
             offset: 15,
+            position: "top",
           }}
+          value={selectedCountries}
         />
         <CodeBlock
           exampleCode='
@@ -705,8 +705,11 @@ const [selectedCountries, setSelectedCountries] = useState<string[]>([]);
 
       <Section title={t("select.usage.invalid")}>
         <Select
+          errorMessage={!selectedValue ? "Required field" : ""}
+          hasError={!selectedValue}
           label={t("select.label")}
           name="invalidSelect"
+          onChange={(value: string) => setSelectedValue(value)}
           options={[
             { label: "France", value: "FR" },
             { label: "Germany", value: "DE" },
@@ -714,11 +717,8 @@ const [selectedCountries, setSelectedCountries] = useState<string[]>([]);
             { label: "Nepal", value: "NP" },
             { label: "India", value: "IN" },
           ]}
-          value={selectedValue}
-          onChange={(value: string) => setSelectedValue(value)}
-          hasError={!selectedValue}
-          errorMessage={!selectedValue ? "Required field" : ""}
           placeholder={t("select.placeholder")}
+          value={selectedValue}
         />
         <CodeBlock
           exampleCode='
@@ -746,6 +746,7 @@ const [selectedValue, setSelectedValue] = useState<string>("");
         <Select
           label={t("select.label")}
           name="groupSelect"
+          onChange={(value: string) => setSingleSelectGroupValue(value)}
           options={[
             {
               label: "Europe",
@@ -763,9 +764,8 @@ const [selectedValue, setSelectedValue] = useState<string>("");
               ],
             },
           ]}
-          value={singleSelectGroupValue}
-          onChange={(value: string) => setSingleSelectGroupValue(value)}
           placeholder={t("select.placeholder")}
+          value={singleSelectGroupValue}
         />
         <CodeBlock
           exampleCode='
@@ -798,15 +798,17 @@ const [singleSelectGroupValue, setSingleSelectGroupValue] = useState<string>("")
         />
         <p>
           <Trans
-            i18nKey={"ui:select.autoSortOptionsInfo"}
             components={{ code: <code /> }}
+            i18nKey={"ui:select.autoSortOptionsInfo"}
           ></Trans>
         </p>
       </Section>
       <Section title={t("select.usage.groupMultiSelect")}>
         <Select
           label={t("select.label")}
+          multiple={true}
           name="groupMultiselect"
+          onChange={(value: string[]) => setMultiSelectGroupValue(value)}
           options={[
             {
               label: "Europe",
@@ -824,10 +826,8 @@ const [singleSelectGroupValue, setSingleSelectGroupValue] = useState<string>("")
               ],
             },
           ]}
-          multiple={true}
-          value={multiSelectGroupValue}
-          onChange={(value: string[]) => setMultiSelectGroupValue(value)}
           placeholder={t("select.multiSelectPlaceholder")}
+          value={multiSelectGroupValue}
         />
         <CodeBlock
           exampleCode='
@@ -863,9 +863,13 @@ const [multiSelectGroupValue, setMultiSelectGroupValue] = useState<string[]>([])
       </Section>
       <Section title={t("select.usage.groupMultiSelectDisabled")}>
         <Select
+          disableGroupSelect={true}
           label={t("select.label")}
+          multiple={true}
           name="disabledMultiselect"
-          disableGroupSelect={true}
+          onChange={(value: string[]) =>
+            setMultiSelectGroupSelectDisableValue(value)
+          }
           options={[
             {
               label: "Europe",
@@ -883,12 +887,8 @@ const [multiSelectGroupValue, setMultiSelectGroupValue] = useState<string[]>([])
               ],
             },
           ]}
-          multiple={true}
-          value={multiSelectGroupSelectDisableValue}
-          onChange={(value: string[]) =>
-            setMultiSelectGroupSelectDisableValue(value)
-          }
           placeholder={t("select.multiSelectPlaceholder")}
+          value={multiSelectGroupSelectDisableValue}
         />
         <CodeBlock
           exampleCode='
diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/SwitchInput.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/SwitchInput.tsx
index 09a35845c..b78ad7289 100644
--- a/apps/demo/src/Views/Ui/components/FormWidgets/SwitchInput.tsx
+++ b/apps/demo/src/Views/Ui/components/FormWidgets/SwitchInput.tsx
@@ -2,51 +2,51 @@ import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Button, Page, TDataTable } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
+import { CodeBlock, Section } from "../../../../components/Demo";
 import {
   Basic,
   ControlledSnippet,
   Disabled,
   Invalid,
 } from "./SwitchInputUsage";
-import { CodeBlock, Section } from "../../../../components/Demo";
 
 const data = [
   {
+    description: "If true, the switch is disabled.",
     id: 1,
     prop: "disabled",
     type: "boolean",
-    description: "If true, the switch is disabled.",
   },
   {
+    description:
+      "Message to display when there is an error associated with the switch.",
     id: 2,
     prop: "errorMessage",
     type: "string",
-    description:
-      "Message to display when there is an error associated with the switch.",
   },
   {
+    description: "If true, indicates that there is an error.",
     id: 3,
     prop: "hasError",
     type: "boolean",
-    description: "If true, indicates that there is an error.",
   },
   {
+    description: "The label for the switch.",
     id: 4,
     prop: "label",
     type: "string",
-    description: "The label for the switch.",
   },
   {
+    description: "The name of the switch input, used for form handling.",
     id: 5,
     prop: "name",
     type: "string",
-    description: "The name of the switch input, used for form handling.",
   },
   {
+    description: "Any other attributes for the input element.",
     id: 6,
     prop: "...others",
     type: "InputHTMLAttributes",
-    description: "Any other attributes for the input element.",
   },
 ];
 
@@ -57,14 +57,14 @@ export const SwitchInputDemo = () => {
   return (
     <Page
       className="demo-switch-input"
-      title={t("switchInput.title")}
       subtitle={t("switchInput.subtitle")}
+      title={t("switchInput.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/SwitchInputUsage.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/SwitchInputUsage.tsx
index cebe0755e..046a9d031 100644
--- a/apps/demo/src/Views/Ui/components/FormWidgets/SwitchInputUsage.tsx
+++ b/apps/demo/src/Views/Ui/components/FormWidgets/SwitchInputUsage.tsx
@@ -49,7 +49,7 @@ const Invalid = ({
     return `<SwitchInput hasError={true} errorMessage="Invalid" />`;
   }
 
-  return <SwitchInput hasError={true} errorMessage="Invalid" />;
+  return <SwitchInput errorMessage="Invalid" hasError={true} />;
 };
 
 const ControlledSnippet = () => `const App = () => {
@@ -84,4 +84,4 @@ const ControlledSnippet = () => `const App = () => {
     );
 };`;
 
-export { Basic, Disabled, Invalid, ControlledSnippet };
+export { Basic, ControlledSnippet, Disabled, Invalid };
diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/Textarea.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/Textarea.tsx
index fb87af6f3..931eaa25e 100644
--- a/apps/demo/src/Views/Ui/components/FormWidgets/Textarea.tsx
+++ b/apps/demo/src/Views/Ui/components/FormWidgets/Textarea.tsx
@@ -13,25 +13,25 @@ export const TextareaDemo = () => {
       title={t("textarea.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
         <Textarea
-          placeholder={t("textarea.placeHolder")}
           label={t("textarea.label")}
+          placeholder={t("textarea.placeHolder")}
         />
       </Section>
       <Section>
         <Textarea
-          hasError={true}
           errorMessage={t("textarea.errorMessage")}
-          placeholder={t("textarea.placeHolder")}
+          hasError={true}
           label={t("textarea.label")}
+          placeholder={t("textarea.placeHolder")}
         />
       </Section>
     </Page>
diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/Typeahead.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/Typeahead.tsx
index 1c9ef7b41..250d407b8 100644
--- a/apps/demo/src/Views/Ui/components/FormWidgets/Typeahead.tsx
+++ b/apps/demo/src/Views/Ui/components/FormWidgets/Typeahead.tsx
@@ -6,8 +6,8 @@ import { useNavigate } from "react-router-dom";
 import { Section } from "../../../../components/Demo";
 
 type CustomSuggestionType = {
-  value: string;
   label: string;
+  value: string;
 };
 
 const items: string[] = [
@@ -25,25 +25,25 @@ const items: string[] = [
 
 const suggestionItems = [
   {
-    value: "Roslabel",
     label: "A fragrant flower often associated with romance",
+    value: "Roslabel",
   },
-  { value: "Tulip", label: "A bright, cup-shaped flower popular in spring" },
-  { value: "Daisy", label: "A simple, white flower with a yellow center" },
+  { label: "A bright, cup-shaped flower popular in spring", value: "Tulip" },
+  { label: "A simple, white flower with a yellow center", value: "Daisy" },
   {
-    value: "Sunflower",
     label: "A tall plant with a large, yellow flower head",
+    value: "Sunflower",
   },
-  { value: "Lily", label: "An elegant flower often used in bouquets" },
-  { value: "Orchid", label: "An exotic flower with a unique shape" },
-  { value: "Marigold", label: "A vibrant, orange or yellow flower" },
-  { value: "Lavender", label: "A fragrant flower known for its calming scent" },
-  { value: "Peony", label: "A lush, full flower often used in weddings" },
-  { value: "Chrysanthemum", label: "A hardy flower with a variety of colors" },
-  { value: "Daffodil", label: "A bright, yellow flower that blooms in spring" },
+  { label: "An elegant flower often used in bouquets", value: "Lily" },
+  { label: "An exotic flower with a unique shape", value: "Orchid" },
+  { label: "A vibrant, orange or yellow flower", value: "Marigold" },
+  { label: "A fragrant flower known for its calming scent", value: "Lavender" },
+  { label: "A lush, full flower often used in weddings", value: "Peony" },
+  { label: "A hardy flower with a variety of colors", value: "Chrysanthemum" },
+  { label: "A bright, yellow flower that blooms in spring", value: "Daffodil" },
   {
-    value: "Hydrangea",
     label: "A large, cluster-like flower that changes color",
+    value: "Hydrangea",
   },
 ];
 
@@ -115,66 +115,66 @@ export const TypeaheadDemo = () => {
       title={t("typeahead.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
         <Typeahead
-          placeholder={t("typeahead.placeholder")}
-          label={t("typeahead.label.client")}
           data={suggestions}
+          label={t("typeahead.label.client")}
           onSearch={handleDataFilter}
+          placeholder={t("typeahead.placeholder")}
         />
       </Section>
       <Section>
         <Typeahead
-          label={t("typeahead.label.server")}
-          placeholder={t("typeahead.placeholder")}
           data={options}
+          debounceTime={500}
+          label={t("typeahead.label.server")}
           loading={isLoading}
-          onSearch={handleDataFetch}
           onChange={handleServerChange}
-          debounceTime={500}
+          onSearch={handleDataFetch}
+          placeholder={t("typeahead.placeholder")}
         />
       </Section>
       <Section>
         <Typeahead
-          placeholder={t("typeahead.placeholder")}
-          label={t("typeahead.label.invalid")}
-          hasError={true}
           errorMessage="Required field"
+          hasError={true}
+          label={t("typeahead.label.invalid")}
+          placeholder={t("typeahead.placeholder")}
         />
       </Section>
       <Section>
         <Typeahead
-          placeholder={t("typeahead.placeholder")}
-          label={t("typeahead.label.disabled")}
           data={items}
           disabled={true}
+          label={t("typeahead.label.disabled")}
+          placeholder={t("typeahead.placeholder")}
         />
       </Section>
       <Section>
         <Typeahead
-          placeholder={t("typeahead.placeholder")}
-          label={t("typeahead.label.customSuggestion")}
           data={customSuggestions}
+          label={t("typeahead.label.customSuggestion")}
           onSearch={handleCustomSuggestionDataFilter}
+          placeholder={t("typeahead.placeholder")}
           renderSuggestion={renderSuggestion}
         />
       </Section>
       <Section>
         <Typeahead
-          placeholder={t("typeahead.placeholder")}
-          label={t("typeahead.label.emptyMessage")}
           data={options}
+          emptyMessage={t("typeahead.message.emptyMessage")}
+          label={t("typeahead.label.emptyMessage")}
           loading={isLoading}
-          onSearch={handleDataFetch}
           onChange={handleServerChange}
-          emptyMessage={t("typeahead.message.emptyMessage")}
+          onSearch={handleDataFetch}
+          placeholder={t("typeahead.placeholder")}
         />
       </Section>
     </Page>
diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/index.ts b/apps/demo/src/Views/Ui/components/FormWidgets/index.ts
index 1e2c640da..c93b5c5e7 100644
--- a/apps/demo/src/Views/Ui/components/FormWidgets/index.ts
+++ b/apps/demo/src/Views/Ui/components/FormWidgets/index.ts
@@ -1,8 +1,8 @@
 export * from "./Checkbox";
+export * from "./CheckboxInput";
 export * from "./CurrencyPicker";
 export * from "./Input";
 export * from "./Select";
 export * from "./SwitchInput";
 export * from "./Textarea";
 export * from "./Typeahead";
-export * from "./CheckboxInput";
diff --git a/apps/demo/src/Views/Ui/components/GridContainerDemo.tsx b/apps/demo/src/Views/Ui/components/GridContainerDemo.tsx
index cf4edef45..71edca98d 100644
--- a/apps/demo/src/Views/Ui/components/GridContainerDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/GridContainerDemo.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { Page, GridContainer, Button } from "@prefabs.tech/react-ui";
+import { Button, GridContainer, Page } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
 import { Package } from "../../Home/components/Package";
@@ -10,38 +10,38 @@ export const GridContainerDemo = () => {
 
   const packages = [
     {
-      name: "Card 1",
       description: "Lorem ipsum dolor sit amet, consectetur adipiscing",
+      name: "Card 1",
     },
     {
-      name: "Card 2",
       description: "Lorem ipsum dolor sit amet, consectetur adipiscing",
+      name: "Card 2",
     },
     {
-      name: "Card 3",
       description: "Lorem ipsum dolor sit amet, consectetur adipiscing",
+      name: "Card 3",
     },
 
     {
-      name: "Card 4",
       description: "Lorem ipsum dolor sit amet, consectetur adipiscing",
+      name: "Card 4",
     },
     {
-      name: "Card 5",
       description: "Lorem ipsum dolor sit amet, consectetur adipiscing",
+      name: "Card 5",
     },
   ];
 
   return (
     <Page
-      title={t("gridContainer.title")}
       className="home"
+      title={t("gridContainer.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -49,10 +49,10 @@ export const GridContainerDemo = () => {
         {packages.map((package_) => {
           return (
             <Package
-              key={package_.name}
-              title={package_.name}
               description={package_.description}
+              key={package_.name}
               onClick={() => {}}
+              title={package_.name}
             />
           );
         })}
diff --git a/apps/demo/src/Views/Ui/components/InlineLinkDemo.tsx b/apps/demo/src/Views/Ui/components/InlineLinkDemo.tsx
index 4e9dd5386..d454ba3f6 100644
--- a/apps/demo/src/Views/Ui/components/InlineLinkDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/InlineLinkDemo.tsx
@@ -1,47 +1,47 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { Page, InlineLink, TDataTable, Button } from "@prefabs.tech/react-ui";
+import { Button, InlineLink, Page, TDataTable } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
 import { CodeBlock, Section } from "../../../components/Demo";
 
 const data = [
   {
+    description: "Additional CSS classes to apply to the component.",
     id: 1,
     prop: "className",
     type: "string",
-    description: "Additional CSS classes to apply to the component.",
   },
   {
+    description:
+      "Determines whether the link is an external link or an internal link. Defaults to false.",
     id: 2,
     prop: "external",
     type: "boolean",
-    description:
-      "Determines whether the link is an external link or an internal link. Defaults to false.",
   },
   {
+    description: "Content to display inside the link component.",
     id: 3,
     prop: "label",
     type: "ReactNode",
-    description: "Content to display inside the link component.",
   },
   {
+    description:
+      "Specifies where to open the linked document. Only meant for external links.",
     id: 4,
     prop: "target",
     type: "HTMLAnchorElement['target']",
-    description:
-      "Specifies where to open the linked document. Only meant for external links.",
   },
   {
+    description: "Specifies the link's destination.",
     id: 5,
     prop: "to",
     type: "string",
-    description: "Specifies the link's destination.",
   },
   {
+    description: "If true, the link must be underlined by default.",
     id: 6,
     prop: "underlined",
     type: "boolean",
-    description: "If true, the link must be underlined by default.",
   },
 ];
 
@@ -54,10 +54,10 @@ export const InlineLinkDemo = () => {
       title={t("inlineLink.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
diff --git a/apps/demo/src/Views/Ui/components/Loading.tsx b/apps/demo/src/Views/Ui/components/Loading.tsx
index 4ac769e5c..448578d42 100644
--- a/apps/demo/src/Views/Ui/components/Loading.tsx
+++ b/apps/demo/src/Views/Ui/components/Loading.tsx
@@ -13,20 +13,20 @@ export const LoadingDemo = () => {
       title={t("loading.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
         <div
           style={{
-            display: "flex",
-            justifyContent: "center",
             alignItems: "center",
+            display: "flex",
             flex: 1,
+            justifyContent: "center",
           }}
         >
           <LoadingIcon color={"black"} fontSize={"0.5rem"} />
diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index e8b895c78..9ebdc74a9 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -49,14 +49,14 @@ export const MessageDemo = () => {
 
   return (
     <Page
-      title={t("message.title")}
       subtitle={t("message.subtitle")}
+      title={t("message.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -122,8 +122,8 @@ export const MessageDemo = () => {
 
       <Section title={t("message.usage.icons.icon")}>
         <Message
-          message="New features just launched! Check them out!"
           icon="pi pi-android"
+          message="New features just launched! Check them out!"
         />
         <CodeBlock
           exampleCode='<Message 
@@ -135,8 +135,8 @@ export const MessageDemo = () => {
 
       <Section title={t("message.usage.icons.customIcon")}>
         <Message
-          message="New Year, New You: Start fresh with our services!"
           icon={<i className="pi pi-bell" />}
+          message="New Year, New You: Start fresh with our services!"
         />
         <CodeBlock
           exampleCode='<Message 
diff --git a/apps/demo/src/Views/Ui/components/ModalDemo.tsx b/apps/demo/src/Views/Ui/components/ModalDemo.tsx
index 961f1166e..3a82d3d88 100644
--- a/apps/demo/src/Views/Ui/components/ModalDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/ModalDemo.tsx
@@ -15,53 +15,53 @@ export const ModalDemo = () => {
 
   const data = [
     {
+      default: "-",
+      description: t("modal.propertiesDescription.className"),
       id: 1,
       prop: "className",
       type: "string",
-      default: "-",
-      description: t("modal.propertiesDescription.className"),
     },
     {
+      default: "-",
+      description: t("modal.propertiesDescription.children"),
       id: 2,
       prop: "children",
       type: "ReactNode",
-      default: "-",
-      description: t("modal.propertiesDescription.children"),
     },
     {
+      default: "-",
+      description: t("modal.propertiesDescription.footer"),
       id: 3,
       prop: "footer",
       type: "ReactNode",
-      default: "-",
-      description: t("modal.propertiesDescription.footer"),
     },
     {
+      default: "-",
+      description: t("modal.propertiesDescription.header"),
       id: 4,
       prop: "header",
       type: "ReactNode",
-      default: "-",
-      description: t("modal.propertiesDescription.header"),
     },
     {
+      default: "-",
+      description: t("modal.propertiesDescription.onHide"),
       id: 5,
       prop: "onHide",
       type: "() => void",
-      default: "-",
-      description: t("modal.propertiesDescription.onHide"),
     },
     {
+      default: `"medium"`,
+      description: t("modal.propertiesDescription.size"),
       id: 6,
       prop: "size",
       type: `"auto" | "medium" | "large"`,
-      default: `"medium"`,
-      description: t("modal.propertiesDescription.size"),
     },
     {
+      default: "false",
+      description: t("modal.propertiesDescription.visible"),
       id: 7,
       prop: "visible",
       type: "Boolean",
-      default: "false",
-      description: t("modal.propertiesDescription.visible"),
     },
   ];
 
@@ -76,14 +76,14 @@ export const ModalDemo = () => {
   return (
     <Page
       className="demo-modal"
-      title={t("modal.title")}
       subtitle={t("modal.subtitle")}
+      title={t("modal.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -176,14 +176,14 @@ const [isLargeModalOpen, setIsLargeModalOpen] = useState<boolean>(false);
           ></Button>
         </div>
         <Modal
-          header={<Header />}
-          onHide={() => setHeaderFooterModal(false)}
-          visible={headerFooterModal}
           footer={
             <div>
               <Button label="Click me" />
             </div>
           }
+          header={<Header />}
+          onHide={() => setHeaderFooterModal(false)}
+          visible={headerFooterModal}
         >
           <p style={{ lineHeight: 1.6 }}>{content}</p>
         </Modal>
diff --git a/apps/demo/src/Views/Ui/components/PageDemo.tsx b/apps/demo/src/Views/Ui/components/PageDemo.tsx
index fa447305f..449bbe036 100644
--- a/apps/demo/src/Views/Ui/components/PageDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/PageDemo.tsx
@@ -8,8 +8,8 @@ export const PageDemo = () => {
   const breadcrumb = (
     <Button
       iconLeft={<i className="pi pi-chevron-left"></i>}
-      variant="textOnly"
       label={t("page.breadcrumb.back")}
+      variant="textOnly"
     />
   );
 
@@ -19,56 +19,56 @@ export const PageDemo = () => {
 
       <hr />
       <Page
+        children={PageContent}
         title={t("page.title.toolbar")}
         toolbar={<Button label={t("page.toolbar.edit")} />}
-        children={PageContent}
       />
 
       <hr />
       <Page
+        centered={true}
+        children={PageContent}
         title={t("page.title.centerAligned")}
         toolbar={<Button label={t("page.toolbar.edit")} />}
-        children={PageContent}
-        centered={true}
       />
 
       <hr />
       <Page
-        title={t("page.title.stringSubtitle")}
-        subtitle={t("page.subTitle.title")}
         children={PageContent}
+        subtitle={t("page.subTitle.title")}
+        title={t("page.title.stringSubtitle")}
       />
 
       <hr />
       <Page
-        title={t("page.title.componentSubtitle")}
-        subtitle={<Tag label={t("page.subTitle.tag")} />}
         children={PageContent}
+        subtitle={<Tag label={t("page.subTitle.tag")} />}
+        title={t("page.title.componentSubtitle")}
       />
 
       <hr />
       <Page
-        title={t("page.title.breadcrumb")}
-        children={PageContent}
         breadcrumb={breadcrumb}
+        children={PageContent}
+        title={t("page.title.breadcrumb")}
       />
 
       <hr />
       <Page
+        breadcrumb={breadcrumb}
+        children={PageContent}
+        subtitle={<Tag label={t("page.subTitle.tag")} />}
         title={t("page.title.complete")}
         titleTag={<Tag label={t("page.heading.tag")} />}
         toolbar={
           <>
             <Button
-              severity="secondary"
               label={t("page.toolbar.button.label")}
+              severity="secondary"
             />
             <Button label={t("page.toolbar.edit")} />
           </>
         }
-        subtitle={<Tag label={t("page.subTitle.tag")} />}
-        children={PageContent}
-        breadcrumb={breadcrumb}
       />
     </>
   );
diff --git a/apps/demo/src/Views/Ui/components/Popup.tsx b/apps/demo/src/Views/Ui/components/Popup.tsx
index cabee4931..24df65f2c 100644
--- a/apps/demo/src/Views/Ui/components/Popup.tsx
+++ b/apps/demo/src/Views/Ui/components/Popup.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { Button, Popup, Page } from "@prefabs.tech/react-ui";
+import { Button, Page, Popup } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
 import { Section } from "../../../components/Demo";
@@ -13,19 +13,19 @@ export const PopupDemo = () => {
       title={t("popup.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
         <Popup
-          trigger={<Button iconLeft={"pi pi-angle-double-right"}></Button>}
           content={<div style={{ padding: "1rem" }}>Popup content</div>}
-          position="right"
           offset={20}
+          position="right"
+          trigger={<Button iconLeft={"pi pi-angle-double-right"}></Button>}
         />
       </Section>
     </Page>
diff --git a/apps/demo/src/Views/Ui/components/SortableList.tsx b/apps/demo/src/Views/Ui/components/SortableList.tsx
index b867f07b6..0cdb931ea 100644
--- a/apps/demo/src/Views/Ui/components/SortableList.tsx
+++ b/apps/demo/src/Views/Ui/components/SortableList.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { SortableList, Page, Button } from "@prefabs.tech/react-ui";
+import { Button, Page, SortableList } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
 import { Section } from "../../../components/Demo";
@@ -13,19 +13,19 @@ export const SortableListDemo = () => {
       title={t("sortableList.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
         <SortableList
           items={[
-            { id: 1, data: "Item 1" },
-            { id: 2, data: "Item 2" },
-            { id: 3, data: "Item 3" },
+            { data: "Item 1", id: 1 },
+            { data: "Item 2", id: 2 },
+            { data: "Item 3", id: 3 },
           ]}
         />
       </Section>
diff --git a/apps/demo/src/Views/Ui/components/Stepper/Stepper.tsx b/apps/demo/src/Views/Ui/components/Stepper/Stepper.tsx
index d4b4b7b9b..9505a8662 100644
--- a/apps/demo/src/Views/Ui/components/Stepper/Stepper.tsx
+++ b/apps/demo/src/Views/Ui/components/Stepper/Stepper.tsx
@@ -1,10 +1,9 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { Button, Divider, Stepper, Page } from "@prefabs.tech/react-ui";
+import { Button, Divider, Page, Stepper } from "@prefabs.tech/react-ui";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import "./index.css";
-
 import { Section } from "../../../../components/Demo";
 
 export const StepperDemo = () => {
@@ -15,9 +14,9 @@ export const StepperDemo = () => {
   const [verticalStepperIndex, setVerticalStepperIndex] = useState(0);
   const list = [
     {
-      step: "a",
       completedStepIcon: <i className="pi pi-check" />,
       label: "Personal",
+      step: "a",
     },
     {
       completedStepIcon: "pi pi-check",
@@ -106,43 +105,43 @@ export const StepperDemo = () => {
       title={t("stepper.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section title={t("stepper.usage.basic")}>
-        <Stepper steps={steps} align="start" />
+        <Stepper align="start" steps={steps} />
       </Section>
 
       <Section title={t("stepper.usage.vertical")}>
-        <Stepper steps={steps} align="start" direction="vertical" />
+        <Stepper align="start" direction="vertical" steps={steps} />
       </Section>
 
       <Section title={t("stepper.usage.controlled")}>
         <Stepper
-          steps={list}
-          hideButtons={true}
           activeIndex={activeIndex}
-          readOnly={true}
+          align="start"
+          hideButtons={true}
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           onChange={(event: any) => {
             setActiveIndex(event.index);
           }}
-          align="start"
+          readOnly={true}
+          steps={list}
         />
         <div className="demo-stepper-content-wrapper">
           {renderStepContent(activeIndex)}
         </div>
         <div className="demo-stepper-button-wrapper">
           <Button
-            onClick={handlePrevious}
             label="Previous"
+            onClick={handlePrevious}
             variant="outlined"
           />
-          <Button onClick={handleNext} label="Next" />
+          <Button label="Next" onClick={handleNext} />
         </div>
       </Section>
 
@@ -162,13 +161,13 @@ export const StepperDemo = () => {
             </div>
             <div className="demo-stepper-button-wrapper">
               <Button
-                onClick={handleStepperPrevious}
                 label={t("stepper.label.previous")}
+                onClick={handleStepperPrevious}
                 variant="outlined"
               />
               <Button
-                onClick={handleStepperNext}
                 label={t("stepper.label.next")}
+                onClick={handleStepperNext}
               />
             </div>
           </div>
diff --git a/apps/demo/src/Views/Ui/components/Stepper/index.css b/apps/demo/src/Views/Ui/components/Stepper/index.css
index c7a944260..792f99d6f 100644
--- a/apps/demo/src/Views/Ui/components/Stepper/index.css
+++ b/apps/demo/src/Views/Ui/components/Stepper/index.css
@@ -10,13 +10,13 @@
 }
 
 .demo-stepper-button-wrapper {
-  margin-top: 3rem;
   display: flex;
-  justify-content: flex-start;
   gap: 1rem;
+  justify-content: flex-start;
+  margin-top: 3rem;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .demo-stepper-wrapper {
     flex-direction: row;
   }
diff --git a/apps/demo/src/Views/Ui/components/SubmitButton.tsx b/apps/demo/src/Views/Ui/components/SubmitButton.tsx
index c70bad6d5..255392362 100644
--- a/apps/demo/src/Views/Ui/components/SubmitButton.tsx
+++ b/apps/demo/src/Views/Ui/components/SubmitButton.tsx
@@ -7,23 +7,23 @@ import { CodeBlock, Section } from "../../../components/Demo";
 
 const data = [
   {
+    description: "If true, the button will be disabled and non-interactive.",
     id: 1,
     prop: "disabled",
     type: "boolean",
-    description: "If true, the button will be disabled and non-interactive.",
   },
   {
+    description: "Text to be displayed in the button.",
     id: 2,
     prop: "label",
     type: "string",
-    description: "Text to be displayed in the button.",
   },
   {
+    description:
+      "If true, indicates that the button is in a loading state and disables user interaction.",
     id: 3,
     prop: "loading",
     type: "boolean",
-    description:
-      "If true, indicates that the button is in a loading state and disables user interaction.",
   },
 ];
 
@@ -36,10 +36,10 @@ export const SubmitButtonDemo = () => {
       title={t("submitButton.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
diff --git a/apps/demo/src/Views/Ui/components/TabView/TabViewDemo.tsx b/apps/demo/src/Views/Ui/components/TabView/TabViewDemo.tsx
index 7fb1bd72b..be2be7a44 100644
--- a/apps/demo/src/Views/Ui/components/TabView/TabViewDemo.tsx
+++ b/apps/demo/src/Views/Ui/components/TabView/TabViewDemo.tsx
@@ -5,104 +5,104 @@ import { ConfirmationModal } from "@prefabs.tech/react-ui";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { addTab } from "./utilities";
 import { CodeBlock, Section } from "../../../../components/Demo";
+import { addTab } from "./utilities";
 
 const data = [
   {
+    default: "-",
+    description: "Active key of TabView.",
     id: 1,
     prop: "activeKey",
     type: "string",
-    default: "-",
-    description: "Active key of TabView.",
   },
   {
-    id: 2,
-    prop: "controlled",
-    type: "boolean",
     default: "false",
     description:
       "If true, TabView becomes a controlled component. In this mode, internal state, hash routing, and state persistence are disabled.",
+    id: 2,
+    prop: "controlled",
+    type: "boolean",
   },
   {
+    default: "false",
+    description: "Enable hash routing for the tab view URL.",
     id: 3,
     prop: "enableHashRouting",
     type: "boolean",
-    default: "false",
-    description: "Enable hash routing for the tab view URL.",
   },
   {
-    id: 4,
-    prop: "id",
-    type: "string",
     default: "-",
     description:
       "Id of tab to save the state. Should provide 'id' in case of tab state persistence.",
+    id: 4,
+    prop: "id",
+    type: "string",
   },
   {
-    id: 5,
-    prop: "lazy",
-    type: "boolean",
     default: "true",
     description:
       "The lazy prop enables lazy loading.It only loads content for the active tab.",
+    id: 5,
+    prop: "lazy",
+    type: "boolean",
   },
   {
-    id: 6,
-    prop: "persistState",
-    type: "boolean",
     default: "true",
     description:
       "If true, tab state is saved either in localStorage or sessionStorage. Ignored when 'controlled' or 'enableHashRouting' is true.",
+    id: 6,
+    prop: "persistState",
+    type: "boolean",
   },
   {
+    default: "localStorage",
+    description: "Storage to save tab state.",
     id: 7,
     prop: "persistStateStorage",
     type: '"localStorage" | "sessionStorage"',
-    default: "localStorage",
-    description: "Storage to save tab state.",
   },
   {
+    default: "top",
+    description: "Position of the tab panel header relative to its content.",
     id: 8,
     prop: "position",
     type: '"top" | "left" | "bottom" | "right"',
-    default: "top",
-    description: "Position of the tab panel header relative to its content.",
   },
   {
+    default: "-",
+    description: "Array of tab object.",
     id: 9,
     prop: "tabs",
     type: "Tabs",
-    default: "-",
-    description: "Array of tab object.",
   },
   {
+    default: "-",
+    description: "Array of visible tabs.",
     id: 10,
     prop: "visibleTabs",
     type: "VisibleTabs",
-    default: "-",
-    description: "Array of visible tabs.",
   },
   {
+    default: "-",
+    description: "Function to be called when active tab change.",
     id: 11,
     prop: "onActiveTabChange",
     type: "(activeTab: string) => void",
-    default: "-",
-    description: "Function to be called when active tab change.",
   },
   {
+    default: "-",
+    description: "Function to be called when visible tabs change.",
     id: 12,
     prop: "onVisibleTabsChange",
     type: "(visibleTabs: string[]) => void",
-    default: "-",
-    description: "Function to be called when visible tabs change.",
   },
   {
+    default: "-",
+    description: "Function to be called when tab close.",
     id: 13,
     prop: "onTabClose",
     type: "(activeTab: string) => void",
-    default: "-",
-    description: "Function to be called when tab close.",
   },
 ];
 
@@ -119,7 +119,7 @@ export const TabViewDemo = () => {
   ]);
   const [controlledActiveTab, setControlledActiveTab] = useState("36");
   const [showModal, setShowModal] = useState(false);
-  const [requestedTab, setRequestedTab] = useState<string | null>(null);
+  const [requestedTab, setRequestedTab] = useState<null | string>(null);
 
   const handleTabChange = (key: string) => {
     if (key !== controlledActiveTab) {
@@ -160,14 +160,14 @@ export const TabViewDemo = () => {
 
   return (
     <Page
-      title={t("tabview.title")}
       className="tab-view"
+      title={t("tabview.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -178,23 +178,23 @@ export const TabViewDemo = () => {
 
       <Section title={t("tabview.usage.basic")}>
         <TabView
+          id="tabview-1"
           tabs={[
-            { label: "Description", children: "Description", key: "1" },
-            { label: "Reviews", children: "Reviews", key: "2" },
+            { children: "Description", key: "1", label: "Description" },
+            { children: "Reviews", key: "2", label: "Reviews" },
             {
-              label: "Specifications",
               children: "Specifications",
               key: "3",
+              label: "Specifications",
             },
-            { label: "Pricing", children: "Pricing", key: "4" },
+            { children: "Pricing", key: "4", label: "Pricing" },
             {
-              label: "Installation",
               children: "Installation Instructions",
               key: "5",
+              label: "Installation",
             },
-            { label: "Certifications", children: "Certifications", key: "6" },
+            { children: "Certifications", key: "6", label: "Certifications" },
           ]}
-          id="tabview-1"
         />
         <CodeBlock
           exampleCode='
@@ -215,26 +215,26 @@ export const TabViewDemo = () => {
       <Section title={t("tabview.usage.disableTabState.title")}>
         <p>{t("tabbedPanel.usage.disableTabState.subTitle")}</p>
         <TabView
-          visibleTabs={["7", "11", "12"]}
+          activeKey="7"
+          id="tabview-2"
+          persistState={false}
           tabs={[
-            { label: "Description", children: "Description", key: "7" },
-            { label: "Reviews", children: "Reviews", key: "8" },
+            { children: "Description", key: "7", label: "Description" },
+            { children: "Reviews", key: "8", label: "Reviews" },
             {
-              label: "Specifications",
               children: "Specifications",
               key: "9",
+              label: "Specifications",
             },
-            { label: "Pricing", children: "Pricing", key: "10" },
+            { children: "Pricing", key: "10", label: "Pricing" },
             {
-              label: "Installation",
               children: "Installation Instructions",
               key: "11",
+              label: "Installation",
             },
-            { label: "Certifications", children: "Certifications", key: "12" },
+            { children: "Certifications", key: "12", label: "Certifications" },
           ]}
-          activeKey="7"
-          id="tabview-2"
-          persistState={false}
+          visibleTabs={["7", "11", "12"]}
         />
         <CodeBlock
           exampleCode='
@@ -265,26 +265,26 @@ tabs={[
 
       <Section title={t("tabview.usage.positionBottom")}>
         <TabView
-          visibleTabs={["13", "16", "17"]}
+          activeKey="13"
+          id="tabview-4"
+          position="bottom"
           tabs={[
-            { label: "Description", children: "Description", key: "13" },
-            { label: "Reviews", children: "Reviews", key: "14" },
+            { children: "Description", key: "13", label: "Description" },
+            { children: "Reviews", key: "14", label: "Reviews" },
             {
-              label: "Specifications",
               children: "Specifications",
               key: "15",
+              label: "Specifications",
             },
-            { label: "Pricing", children: "Pricing", key: "16" },
+            { children: "Pricing", key: "16", label: "Pricing" },
             {
-              label: "Installation",
               children: "Installation Instructions",
               key: "17",
+              label: "Installation",
             },
-            { label: "Certifications", children: "Certifications", key: "18" },
+            { children: "Certifications", key: "18", label: "Certifications" },
           ]}
-          activeKey="13"
-          id="tabview-4"
-          position="bottom"
+          visibleTabs={["13", "16", "17"]}
         />
         <CodeBlock
           exampleCode='
@@ -315,26 +315,26 @@ tabs={[
 
       <Section title={t("tabview.usage.positionLeft")}>
         <TabView
-          visibleTabs={["18", "22", "23"]}
+          activeKey="18"
+          id="tabview-5"
+          position="left"
           tabs={[
-            { label: "Description", children: "Description", key: "18" },
-            { label: "Reviews", children: "Reviews", key: "19" },
+            { children: "Description", key: "18", label: "Description" },
+            { children: "Reviews", key: "19", label: "Reviews" },
             {
-              label: "Specifications",
               children: "Specifications",
               key: "20",
+              label: "Specifications",
             },
-            { label: "Pricing", children: "Pricing", key: "21" },
+            { children: "Pricing", key: "21", label: "Pricing" },
             {
-              label: "Installation",
               children: "Installation Instructions",
               key: "22",
+              label: "Installation",
             },
-            { label: "Certifications", children: "Certifications", key: "23" },
+            { children: "Certifications", key: "23", label: "Certifications" },
           ]}
-          activeKey="18"
-          id="tabview-5"
-          position="left"
+          visibleTabs={["18", "22", "23"]}
         />
         <CodeBlock
           exampleCode=' 
@@ -366,26 +366,26 @@ tabs={[
 
       <Section title={t("tabview.usage.positionRight")}>
         <TabView
-          visibleTabs={["24", "26", "29"]}
+          activeKey="24"
+          id="tabview-6"
+          position="right"
           tabs={[
-            { label: "Description", children: "Description", key: "24" },
-            { label: "Reviews", children: "Reviews", key: "25" },
+            { children: "Description", key: "24", label: "Description" },
+            { children: "Reviews", key: "25", label: "Reviews" },
             {
-              label: "Specifications",
               children: "Specifications",
               key: "26",
+              label: "Specifications",
             },
-            { label: "Pricing", children: "Pricing", key: "27" },
+            { children: "Pricing", key: "27", label: "Pricing" },
             {
-              label: "Installation",
               children: "Installation Instructions",
               key: "28",
+              label: "Installation",
             },
-            { label: "Certifications", children: "Certifications", key: "29" },
+            { children: "Certifications", key: "29", label: "Certifications" },
           ]}
-          activeKey="24"
-          id="tabview-6"
-          position="right"
+          visibleTabs={["24", "26", "29"]}
         />
         <CodeBlock
           exampleCode='
@@ -430,38 +430,38 @@ tabs={[
           />
         </div>
         <TabView
-          visibleTabs={visibleTabs}
+          activeKey={active}
+          id="tabview-3"
+          onActiveTabChange={setActive}
+          onVisibleTabsChange={setVisibleTabs}
           tabs={[
-            { label: "Description", children: "Description", key: "30" },
+            { children: "Description", key: "30", label: "Description" },
             {
-              label: "Reviews",
               children: "Reviews",
-              key: "31",
               closable: true,
+              key: "31",
+              label: "Reviews",
             },
             {
-              label: "Specifications",
               children: "Specifications",
-              key: "32",
               closable: true,
+              key: "32",
+              label: "Specifications",
             },
             {
-              label: "Pricing",
               children: "Pricing",
-              key: "33",
               closable: true,
+              key: "33",
+              label: "Pricing",
             },
             {
-              label: "Installation",
               children: "Installation Instructions",
               key: "34",
+              label: "Installation",
             },
-            { label: "Certifications", children: "Certifications", key: "35" },
+            { children: "Certifications", key: "35", label: "Certifications" },
           ]}
-          activeKey={active}
-          id="tabview-3"
-          onVisibleTabsChange={setVisibleTabs}
-          onActiveTabChange={setActive}
+          visibleTabs={visibleTabs}
         />
         <CodeBlock
           exampleCode='
@@ -554,40 +554,40 @@ visibleTabs={visibleTabs}
           />
         </div>
         <TabView
+          activeKey={controlledActiveTab}
+          controlled={true}
+          id="tabview-7"
+          onActiveTabChange={handleTabChange}
+          onTabClose={handleTabClose}
           tabs={[
-            { label: "Description", children: "Description", key: "36" },
-            { label: "Reviews", children: "Reviews", key: "37" },
+            { children: "Description", key: "36", label: "Description" },
+            { children: "Reviews", key: "37", label: "Reviews" },
             {
-              label: "Specifications",
               children: "Specifications",
               key: "38",
+              label: "Specifications",
             },
             {
-              label: "Pricing",
               children: "Pricing",
-              key: "39",
               closable: true,
+              key: "39",
+              label: "Pricing",
             },
             {
-              label: "Installation",
               children: "Installation Instructions",
-              key: "40",
               closable: true,
+              key: "40",
+              label: "Installation",
             },
-            { label: "Certifications", children: "Certifications", key: "41" },
+            { children: "Certifications", key: "41", label: "Certifications" },
           ]}
-          id="tabview-7"
-          activeKey={controlledActiveTab}
           visibleTabs={controlledVisibleTabs}
-          controlled={true}
-          onActiveTabChange={handleTabChange}
-          onTabClose={handleTabClose}
         />
         <ConfirmationModal
+          accept={confirmTabSwitch}
           message="Are you sure you want to proceed?"
-          visible={showModal}
           onHide={cancelTabSwitch}
-          accept={confirmTabSwitch}
+          visible={showModal}
         />
 
         <CodeBlock
@@ -718,39 +718,39 @@ onTabClose={handleTabClose}
 
       <Section title={t("tabview.usage.hashRoute")}>
         <TabView
-          visibleTabs={[
-            "descritpion",
-            "specifications",
-            "certifications",
-            "pricing",
-          ]}
+          activeKey="descritpion"
+          enableHashRouting={true}
+          id="tabview-8"
           tabs={[
             {
-              label: "Description",
               children: "Description",
               key: "descritpion",
+              label: "Description",
             },
-            { label: "Reviews", children: "Reviews", key: "reviews" },
+            { children: "Reviews", key: "reviews", label: "Reviews" },
             {
-              label: "Specifications",
               children: "Specifications",
               key: "specifications",
+              label: "Specifications",
             },
-            { label: "Pricing", children: "Pricing", key: "pricing" },
+            { children: "Pricing", key: "pricing", label: "Pricing" },
             {
-              label: "Installation",
               children: "Installation Instructions",
               key: "installation",
+              label: "Installation",
             },
             {
-              label: "Certifications",
               children: "Certifications",
               key: "certifications",
+              label: "Certifications",
             },
           ]}
-          activeKey="descritpion"
-          id="tabview-8"
-          enableHashRouting={true}
+          visibleTabs={[
+            "descritpion",
+            "specifications",
+            "certifications",
+            "pricing",
+          ]}
         />
         <CodeBlock
           exampleCode='
diff --git a/apps/demo/src/Views/Ui/components/TabbedPanel/TabbedPanel.tsx b/apps/demo/src/Views/Ui/components/TabbedPanel/TabbedPanel.tsx
index 7f100dd10..0bdaa39c8 100644
--- a/apps/demo/src/Views/Ui/components/TabbedPanel/TabbedPanel.tsx
+++ b/apps/demo/src/Views/Ui/components/TabbedPanel/TabbedPanel.tsx
@@ -3,6 +3,8 @@ import { Button, Page } from "@prefabs.tech/react-ui";
 import { Message } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
+import { CodeBlock } from "../../../../components/Demo";
+import { Section } from "../../../../components/Demo";
 import {
   Basic,
   CustomActive,
@@ -11,8 +13,6 @@ import {
   PositionLeft,
   PositionRight,
 } from "./components";
-import { CodeBlock } from "../../../../components/Demo";
-import { Section } from "../../../../components/Demo";
 
 export const TabbedPanelDemo = () => {
   const [t] = useTranslation("ui");
@@ -23,16 +23,16 @@ export const TabbedPanelDemo = () => {
       title={t("tabbedPanel.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Message
-        message="@deprecated: Use TabView component from the ui package instead"
         enableClose={false}
+        message="@deprecated: Use TabView component from the ui package instead"
       />
       <Section title={t("tabbedPanel.usage.basic")}>
         <Basic />
diff --git a/apps/demo/src/Views/Ui/components/TabbedPanel/components.tsx b/apps/demo/src/Views/Ui/components/TabbedPanel/components.tsx
index cf61217a9..82c1a55dd 100644
--- a/apps/demo/src/Views/Ui/components/TabbedPanel/components.tsx
+++ b/apps/demo/src/Views/Ui/components/TabbedPanel/components.tsx
@@ -39,7 +39,7 @@ const CustomActive = ({
   }
 
   return (
-    <TabbedPanel id="tabbed-pannel-2" defaultActiveIndex={1}>
+    <TabbedPanel defaultActiveIndex={1} id="tabbed-pannel-2">
       <SubPane title="Description">Description</SubPane>
       <SubPane title="Reviews">Reviews</SubPane>
       <SubPane title="Specifications">Specifications</SubPane>
diff --git a/apps/demo/src/Views/Ui/components/Table/Table.tsx b/apps/demo/src/Views/Ui/components/Table/Table.tsx
index 02d53af17..073406d91 100644
--- a/apps/demo/src/Views/Ui/components/Table/Table.tsx
+++ b/apps/demo/src/Views/Ui/components/Table/Table.tsx
@@ -1,30 +1,30 @@
 import { Trans, useTranslation } from "@prefabs.tech/react-i18n";
 import {
-  TDataTable,
-  Page,
   Button,
-  TableColumnDefinition,
   DebouncedInput,
+  Page,
+  TableColumnDefinition,
+  TDataTable,
 } from "@prefabs.tech/react-ui";
-import { FilterFunction, DatePicker } from "@prefabs.tech/react-ui";
+import { DatePicker, FilterFunction } from "@prefabs.tech/react-ui";
 import { Tag } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
+import { CodeBlock, Section } from "../../../../components/Demo";
 import {
+  city,
+  country,
+  data,
+  formatDemoData,
   HORIZONTAL_CSS_CODE,
   TData,
   VERTICAL_CSS_CODE,
-  data,
-  formatDemoData,
-  city,
-  country,
 } from "./data";
-import { CodeBlock, Section } from "../../../../components/Demo";
 
 declare module "@prefabs.tech/react-ui" {
   interface FilterFunctions {
-    inDateRangeFilter: FilterFunction<unknown>;
     customEqualStringFilter: FilterFunction<unknown>;
+    inDateRangeFilter: FilterFunction<unknown>;
   }
 }
 
@@ -35,48 +35,48 @@ export const TableDemo = () => {
   const columns: Array<TableColumnDefinition<TData>> = [
     {
       accessorKey: "email",
-      header: "Email",
       enableColumnFilter: true,
       enableSorting: true,
       filterPlaceholder: t("table.placeholder.search"),
+      header: "Email",
     },
     {
       accessorKey: "name",
-      header: () => <span>Full name</span>,
       enableColumnFilter: true,
       enableSorting: true,
       filterPlaceholder: t("table.placeholder.search"),
+      header: () => <span>Full name</span>,
     },
     {
       accessorKey: "age",
-      header: "Age",
       align: "right",
       dataType: "number",
-      enableSorting: true,
       enableColumnFilter: true,
+      enableSorting: true,
       filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
+      header: "Age",
     },
     {
       accessorKey: "city",
-      header: () => <span>City</span>,
       enableColumnFilter: true,
       enableSorting: true,
       filterPlaceholder: t("table.placeholder.select"),
+      header: () => <span>City</span>,
       meta: {
-        filterVariant: "multiselect",
         filterOptions: city,
+        filterVariant: "multiselect",
       },
     },
     {
       accessorKey: "country",
-      header: "Country",
       enableColumnFilter: true,
       enableSorting: true,
+      filterPlaceholder: t("table.placeholder.country"),
+      header: "Country",
       meta: {
-        filterVariant: "select",
         filterOptions: country,
+        filterVariant: "select",
       },
-      filterPlaceholder: t("table.placeholder.country"),
     },
   ];
 
@@ -338,15 +338,15 @@ export const TableDemo = () => {
 
   return (
     <Page
+      className="demo-data-tables-page"
       subtitle={t("table.subtitle")}
       title={t("table.title")}
-      className="demo-data-tables-page"
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -360,17 +360,16 @@ export const TableDemo = () => {
           columns={columns}
           data={data}
           id="invitations-table"
-          showResetStateAction
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
           rowClassName={({ row: { original } }) => {
             return `row-${original.id}`;
           }}
+          showResetStateAction
         ></TDataTable>
       </Section>
 
       <Section title={t("table.usage.filterable")}>
         <TDataTable
-          visibleColumns={["email", "name", "age", "city", "country"]}
           columns={[
             ...columns,
             {
@@ -388,20 +387,20 @@ export const TableDemo = () => {
               enableColumnFilter: true,
               filterPlaceholder: t("table.placeholder.select"),
               meta: {
-                filterVariant: "multiselect",
                 filterOptions: city,
+                filterVariant: "multiselect",
               },
             },
           ]}
           data={data}
           id="filterable-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
+          visibleColumns={["email", "name", "age", "city", "country"]}
         ></TDataTable>
       </Section>
 
       <Section title={t("table.usage.sortable")}>
         <TDataTable
-          visibleColumns={["email", "name", "age", "city", "country"]}
           columns={columns.map((column) => ({
             ...column,
             enableSorting: true,
@@ -409,7 +408,8 @@ export const TableDemo = () => {
           data={data}
           id="sortable-table"
           initialFilters={[{ id: "email", value: "s" }]}
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
+          visibleColumns={["email", "name", "age", "city", "country"]}
         ></TDataTable>
       </Section>
 
@@ -419,7 +419,7 @@ export const TableDemo = () => {
           data={data.slice(0, 5)}
           enableRowSelection={true}
           id="row-selection-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
         ></TDataTable>
       </Section>
 
@@ -439,8 +439,8 @@ export const TableDemo = () => {
             },
           ]}
           data={data}
-          initialSorting={[{ id: "email", desc: false }]}
           id="persistent-state"
+          initialSorting={[{ desc: false, id: "email" }]}
           persistState
           showColumnsAction
         ></TDataTable>
@@ -455,11 +455,11 @@ export const TableDemo = () => {
             },
           ]}
           data={data.slice(0, 5)}
+          id="custom-pagination-table"
+          initialSorting={[{ desc: false, id: "email" }]}
           renderCustomPagination={(table) => {
             return <>Custom pagination</>;
           }}
-          id="custom-pagination-table"
-          initialSorting={[{ id: "email", desc: false }]}
         ></TDataTable>
       </Section>
 
@@ -472,6 +472,8 @@ export const TableDemo = () => {
             },
           ]}
           data={data.slice(0, 5)}
+          id="custom-toolbar-actions-table"
+          initialSorting={[{ desc: false, id: "email" }]}
           renderToolbarItems={(table) => {
             return (
               <>
@@ -479,17 +481,11 @@ export const TableDemo = () => {
               </>
             );
           }}
-          id="custom-toolbar-actions-table"
-          initialSorting={[{ id: "email", desc: false }]}
         ></TDataTable>
       </Section>
 
       <Section title={t("table.usage.columnTooltip")}>
         <TDataTable
-          title={{
-            text: t("table.usage.columnTooltip"),
-            align: "left",
-          }}
           columns={[
             ...columns,
             {
@@ -524,7 +520,11 @@ export const TableDemo = () => {
           data={data.slice(0, 5)}
           enableRowSelection={true}
           id="custom-tooltip-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
+          title={{
+            align: "left",
+            text: t("table.usage.columnTooltip"),
+          }}
         ></TDataTable>
       </Section>
 
@@ -544,18 +544,18 @@ export const TableDemo = () => {
           data={data.slice(0, 5)}
           enableRowSelection={true}
           id="column-alignment-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
         ></TDataTable>
       </Section>
 
       <Section title={t("table.usage.columnAction")}>
         <TDataTable
+          columnActionBtnLabel="Columns"
           columns={[...columns]}
           data={data.slice(10, 15)}
-          showColumnsAction={true}
-          columnActionBtnLabel="Columns"
           id="column-action-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
+          showColumnsAction={true}
         ></TDataTable>
       </Section>
 
@@ -563,6 +563,8 @@ export const TableDemo = () => {
         <TDataTable
           columns={[...columns]}
           data={data}
+          id="table-with-footer"
+          initialSorting={[{ desc: false, id: "email" }]}
           renderTableFooterContent={(table) => (
             <tr>
               <td>
@@ -570,24 +572,21 @@ export const TableDemo = () => {
               </td>
             </tr>
           )}
-          id="table-with-footer"
-          initialSorting={[{ id: "email", desc: false }]}
         ></TDataTable>
       </Section>
 
       <Section title={t("table.usage.tableBorderVertical")}>
         <TDataTable
-          showColumnsAction={true}
-          columnActionBtnLabel="Columns"
           className="vertical"
-          visibleColumns={["email", "name", "age", "city", "country"]}
+          columnActionBtnLabel="Columns"
           columns={[...columns]}
           data={data}
           id="vertical-border-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
+          showColumnsAction={true}
+          visibleColumns={["email", "name", "age", "city", "country"]}
         ></TDataTable>
         <CodeBlock
-          title={t("table.cssCodeBlock.title")}
           exampleCode={VERTICAL_CSS_CODE}
           subheader={
             <>
@@ -600,22 +599,22 @@ export const TableDemo = () => {
               </p>
             </>
           }
+          title={t("table.cssCodeBlock.title")}
         />
       </Section>
 
       <Section title={t("table.usage.tableBorderHorizontal")}>
         <TDataTable
-          showColumnsAction={true}
-          columnActionBtnLabel="Columns"
           className="horizontal"
-          visibleColumns={["email", "name", "age", "city", "country"]}
+          columnActionBtnLabel="Columns"
           columns={[...columns]}
           data={data}
           id="horizontal-border-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
+          showColumnsAction={true}
+          visibleColumns={["email", "name", "age", "city", "country"]}
         ></TDataTable>
         <CodeBlock
-          title={t("table.cssCodeBlock.title")}
           exampleCode={HORIZONTAL_CSS_CODE}
           subheader={
             <>
@@ -628,6 +627,7 @@ export const TableDemo = () => {
               </p>
             </>
           }
+          title={t("table.cssCodeBlock.title")}
         />
       </Section>
 
@@ -635,20 +635,20 @@ export const TableDemo = () => {
         <TDataTable
           columns={[...columns]}
           data={data.slice(10, 15)}
-          paginated={false}
           id="pagination-disabled-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
+          paginated={false}
         ></TDataTable>
       </Section>
 
       <Section title={t("table.usage.withTitle")}>
         <TDataTable
-          title={{ text: "Table title", align: "left" }}
           columns={[...columns]}
           data={data.slice(10, 15)}
-          paginated={false}
           id="table-with-title"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
+          paginated={false}
+          title={{ align: "left", text: "Table title" }}
         ></TDataTable>
       </Section>
 
@@ -656,7 +656,6 @@ export const TableDemo = () => {
         <TDataTable
           columns={[...columns]}
           data={data.slice(10, 15)}
-          paginated={false}
           dataActionsMenu={{
             actions: [
               {
@@ -668,8 +667,8 @@ export const TableDemo = () => {
                 },
               },
               {
-                label: "Edit",
                 disabled: true,
+                label: "Edit",
                 onClick: (rowData) => {
                   //your logic here
                   // eslint-disable-next-line no-console
@@ -677,11 +676,11 @@ export const TableDemo = () => {
                 },
               },
               {
-                label: "Share",
                 disabled: (rowData) => {
                   ///your logic here
                   return rowData.id !== 11;
                 },
+                label: "Share",
                 onClick: (rowData) => {
                   //your logic here
                   // eslint-disable-next-line no-console
@@ -689,14 +688,7 @@ export const TableDemo = () => {
                 },
               },
               {
-                label: "Delete",
                 className: "danger",
-                onClick: (rowData) => {
-                  //your logic here
-                  // eslint-disable-next-line no-console
-                  console.log(rowData, "delete action");
-                },
-                requireConfirmationModal: true,
                 confirmationOptions: (rowData) => {
                   return {
                     header: t("table.confirmation.header"),
@@ -705,6 +697,13 @@ export const TableDemo = () => {
                     }),
                   };
                 },
+                label: "Delete",
+                onClick: (rowData) => {
+                  //your logic here
+                  // eslint-disable-next-line no-console
+                  console.log(rowData, "delete action");
+                },
+                requireConfirmationModal: true,
               },
             ],
             displayActions: (rowData) => {
@@ -712,7 +711,8 @@ export const TableDemo = () => {
             },
           }}
           id="builtin-action-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
+          paginated={false}
         />
       </Section>
 
@@ -720,15 +720,14 @@ export const TableDemo = () => {
         <TDataTable
           columns={[...columns]}
           data={data.slice(10, 15)}
-          paginated={false}
           dataActionsMenu={{
             actions: [
               {
-                icon: "pi pi-eye",
-                label: "View",
                 display: (rowData) => {
                   return rowData.id !== 12;
                 },
+                icon: "pi pi-eye",
+                label: "View",
                 onClick: (rowData) => {
                   //your logic here
                   // eslint-disable-next-line no-console
@@ -736,12 +735,12 @@ export const TableDemo = () => {
                 },
               },
               {
-                icon: "pi pi-pencil",
-                label: "Edit",
+                disabled: true,
                 display: (rowData) => {
                   return rowData.id !== 12;
                 },
-                disabled: true,
+                icon: "pi pi-pencil",
+                label: "Edit",
                 onClick: (rowData) => {
                   //your logic here
                   // eslint-disable-next-line no-console
@@ -749,15 +748,15 @@ export const TableDemo = () => {
                 },
               },
               {
-                icon: "pi pi-share-alt",
-                label: "Share",
-                display: (rowData) => {
-                  return rowData.id !== 12;
-                },
                 disabled: (rowData) => {
                   ///your logic here
                   return rowData.id !== 11;
                 },
+                display: (rowData) => {
+                  return rowData.id !== 12;
+                },
+                icon: "pi pi-share-alt",
+                label: "Share",
                 onClick: (rowData) => {
                   //your logic here
                   // eslint-disable-next-line no-console
@@ -765,34 +764,35 @@ export const TableDemo = () => {
                 },
               },
               {
-                icon: "pi pi-trash",
-                label: "Delete",
-                severity: "danger",
-                onClick: (rowData) => {
-                  //your logic here
-                  // eslint-disable-next-line no-console
-                  console.log(rowData, "delete action");
-                },
-                requireConfirmationModal: true,
                 confirmationOptions: (rowData) => {
                   return {
                     header: t("table.confirmation.header"),
                     message: (
                       <p>
                         <Trans
-                          i18nKey="ui:table.confirmation.message.deleteUser"
                           component={{ strong: <strong /> }}
+                          i18nKey="ui:table.confirmation.message.deleteUser"
                           values={{ user: rowData?.name }}
                         ></Trans>
                       </p>
                     ),
                   };
                 },
+                icon: "pi pi-trash",
+                label: "Delete",
+                onClick: (rowData) => {
+                  //your logic here
+                  // eslint-disable-next-line no-console
+                  console.log(rowData, "delete action");
+                },
+                requireConfirmationModal: true,
+                severity: "danger",
               },
             ],
           }}
           id="row-specific-action-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
+          paginated={false}
         />
       </Section>
 
@@ -800,12 +800,11 @@ export const TableDemo = () => {
         <TDataTable
           columns={[...columns]}
           data={data.slice(10, 15)}
-          paginated={false}
           dataActionsMenu={{
             actions: [
               {
-                label: "View",
                 icon: "pi pi-eye",
+                label: "View",
                 onClick: (rowData) => {
                   //your logic here
                   // eslint-disable-next-line no-console
@@ -815,7 +814,8 @@ export const TableDemo = () => {
             ],
           }}
           id="single-action-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
+          paginated={false}
         />
       </Section>
 
@@ -823,7 +823,6 @@ export const TableDemo = () => {
         <TDataTable
           columns={[...columns]}
           data={data.slice(10, 15)}
-          paginated={false}
           dataActionsMenu={{
             actions: [
               {
@@ -838,7 +837,8 @@ export const TableDemo = () => {
             mode: "dropdown",
           }}
           id="single-action-menu-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
+          paginated={false}
         />
       </Section>
 
@@ -846,15 +846,14 @@ export const TableDemo = () => {
         <TDataTable
           columns={[...columns]}
           data={data.slice(10, 15)}
-          paginated={false}
           dataActionsMenu={{
             actions: [
               {
-                icon: "pi pi-eye",
-                label: "View",
                 display: (rowData) => {
                   return rowData.id !== 12;
                 },
+                icon: "pi pi-eye",
+                label: "View",
                 onClick: (rowData) => {
                   //your logic here
                   // eslint-disable-next-line no-console
@@ -862,12 +861,12 @@ export const TableDemo = () => {
                 },
               },
               {
-                icon: "pi pi-pencil",
-                label: "Edit",
+                disabled: true,
                 display: (rowData) => {
                   return rowData.id !== 12;
                 },
-                disabled: true,
+                icon: "pi pi-pencil",
+                label: "Edit",
                 onClick: (rowData) => {
                   //your logic here
                   // eslint-disable-next-line no-console
@@ -875,15 +874,15 @@ export const TableDemo = () => {
                 },
               },
               {
-                icon: "pi pi-share-alt",
-                label: "Share",
-                display: (rowData) => {
-                  return rowData.id !== 12;
-                },
                 disabled: (rowData) => {
                   ///your logic here
                   return rowData.id !== 11;
                 },
+                display: (rowData) => {
+                  return rowData.id !== 12;
+                },
+                icon: "pi pi-share-alt",
+                label: "Share",
                 onClick: (rowData) => {
                   //your logic here
                   // eslint-disable-next-line no-console
@@ -891,25 +890,26 @@ export const TableDemo = () => {
                 },
               },
               {
+                confirmationOptions: {
+                  header: "Are you sure!",
+                  message: "You are going to delete this data.",
+                },
                 icon: "pi pi-trash",
                 label: "Delete",
-                severity: "danger",
                 onClick: (rowData) => {
                   //your logic here
                   // eslint-disable-next-line no-console
                   console.log(rowData, "delete action");
                 },
                 requireConfirmationModal: true,
-                confirmationOptions: {
-                  header: "Are you sure!",
-                  message: "You are going to delete this data.",
-                },
+                severity: "danger",
               },
             ],
             mode: "buttons",
           }}
           id="mutiple-button-action-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
+          paginated={false}
         />
       </Section>
 
@@ -919,26 +919,26 @@ export const TableDemo = () => {
             ...columns,
             {
               accessorKey: "email",
-              enableColumnFilter: true,
               customFilterComponent: (column) => (
                 <DebouncedInput
+                  debounceTime={200}
                   defaultValue={column.getFilterValue() as string}
                   onInputChange={(value) => {
                     column.setFilterValue(value);
                   }}
                   placeholder={t("table.placeholder.search")}
-                  debounceTime={200}
                 ></DebouncedInput>
               ),
+              enableColumnFilter: true,
               meta: {
                 serverFilterFn: "contains",
               },
             },
           ]}
-          fetchData={() => {}}
           data={data.slice(10, 15)}
+          fetchData={() => {}}
           id="custom-filter-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
         ></TDataTable>
       </Section>
 
@@ -949,16 +949,16 @@ export const TableDemo = () => {
             {
               accessorKey: "email",
               enableColumnFilter: true,
+              filterPlaceholder: t("table.placeholder.search"),
               meta: {
                 serverFilterFn: "equals",
               },
-              filterPlaceholder: t("table.placeholder.search"),
             },
           ]}
-          fetchData={() => {}}
           data={data.slice(10, 15)}
+          fetchData={() => {}}
           id="equal-server-filter-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
         ></TDataTable>
       </Section>
 
@@ -967,74 +967,74 @@ export const TableDemo = () => {
           columns={[
             {
               accessorKey: "description",
-              header: "Description",
               enableColumnFilter: true,
               enableSorting: true,
               filterPlaceholder: t("table.placeholder.search"),
+              header: "Description",
             },
             {
               accessorKey: "quantity",
-              header: () => "Quantity",
-              enableSorting: true,
               dataType: "number",
+              enableColumnFilter: true,
+              enableSorting: true,
+              filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
+              header: () => "Quantity",
               numberOptions: {
                 locale: "en-IN",
               },
-              enableColumnFilter: true,
-              filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
             },
             {
               accessorKey: "amount",
-              header: "Amount",
               dataType: "currency",
+              enableColumnFilter: true,
               enableSorting: true,
+              filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
+              header: "Amount",
+              meta: {
+                filterVariant: "range",
+              },
               numberOptions: {
-                locale: "en-US",
                 formatOptions: {
                   currency: "EUR",
                 },
+                locale: "en-US",
               },
-              enableColumnFilter: true,
-              meta: {
-                filterVariant: "range",
-              },
-              filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
             },
             {
               accessorKey: "date",
-              header: "Date",
               dataType: "date",
               enableColumnFilter: true,
               enableSorting: true,
               filterPlaceholder: t("table.placeholder.date"),
+              header: "Date",
               meta: {
                 filterVariant: "dateRange",
               },
             },
             {
               accessorKey: "datetime",
-              header: "Datetime",
               dataType: "datetime",
               enableColumnFilter: true,
               enableSorting: true,
               filterPlaceholder: t("table.placeholder.date"),
+              header: "Datetime",
               meta: {
                 filterVariant: "dateRange",
               },
             },
             {
-              id: "action",
-              header: () => <i className="pi pi-cog"></i>,
-              dataType: "other",
               cell: () => (
-                <Button iconLeft="pi pi-eye" variant="textOnly" rounded />
+                <Button iconLeft="pi pi-eye" rounded variant="textOnly" />
               ),
+              dataType: "other",
+              header: () => <i className="pi pi-cog"></i>,
+              id: "action",
             },
           ]}
           data={formatDemoData}
-          paginated={false}
           id="cell-data-formatting-table"
-          initialSorting={[{ id: "quantity", desc: true }]}
+          initialSorting={[{ desc: true, id: "quantity" }]}
+          paginated={false}
         ></TDataTable>
       </Section>
 
@@ -1043,58 +1043,58 @@ export const TableDemo = () => {
           columns={[
             {
               accessorKey: "description",
-              header: "Description",
               enableColumnFilter: true,
               enableSorting: true,
               filterPlaceholder: t("table.placeholder.search"),
+              header: "Description",
             },
             {
               accessorKey: "quantity",
-              header: () => "Quantity",
-              enableSorting: true,
               dataType: "number",
               enableColumnFilter: true,
+              enableSorting: true,
               filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
+              header: () => "Quantity",
             },
             {
               accessorKey: "amount",
-              header: "Amount",
               dataType: "currency",
-              enableSorting: true,
               enableColumnFilter: true,
+              enableSorting: true,
+              filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
+              header: "Amount",
               meta: {
                 filterVariant: "range",
               },
-              filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
             },
             {
               accessorKey: "date",
-              header: "Date",
               dataType: "date",
               enableColumnFilter: true,
               enableSorting: true,
               filterPlaceholder: t("table.placeholder.date"),
+              header: "Date",
               meta: {
                 filterVariant: "dateRange",
               },
             },
             {
-              id: "action",
-              header: () => <i className="pi pi-cog"></i>,
-              dataType: "other",
               cell: () => (
-                <Button iconLeft="pi pi-eye" variant="textOnly" rounded />
+                <Button iconLeft="pi pi-eye" rounded variant="textOnly" />
               ),
+              dataType: "other",
+              header: () => <i className="pi pi-cog"></i>,
+              id: "action",
             },
           ]}
-          data={formatDemoData}
-          paginated={false}
           customFormatters={{
-            number: (value) => `~${value}`,
             currency: (value) => `$${value}`,
+            number: (value) => `~${value}`,
           }}
+          data={formatDemoData}
           id="custom-cell-data-formatting-table"
-          initialSorting={[{ id: "quantity", desc: true }]}
+          initialSorting={[{ desc: true, id: "quantity" }]}
+          paginated={false}
         ></TDataTable>
       </Section>
 
@@ -1104,47 +1104,42 @@ export const TableDemo = () => {
           columns={[
             {
               accessorKey: "description",
-              header: "Description",
-              filterFn: "customEqualStringFilter",
               enableColumnFilter: true,
               enableSorting: true,
+              filterFn: "customEqualStringFilter",
               filterPlaceholder: t("table.placeholder.search"),
+              header: "Description",
             },
             {
               accessorKey: "quantity",
-              header: () => "Quantity",
-              enableSorting: true,
               dataType: "number",
+              enableColumnFilter: true,
+              enableSorting: true,
+              filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
+              header: () => "Quantity",
               numberOptions: {
                 locale: "en-IN",
               },
-              enableColumnFilter: true,
-              filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
             },
             {
               accessorKey: "amount",
-              header: "Amount",
               dataType: "currency",
+              enableColumnFilter: true,
               enableSorting: true,
+              filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
+              header: "Amount",
+              meta: {
+                filterVariant: "range",
+              },
               numberOptions: {
-                locale: "en-US",
                 formatOptions: {
                   currency: "EUR",
                 },
+                locale: "en-US",
               },
-              enableColumnFilter: true,
-              meta: {
-                filterVariant: "range",
-              },
-              filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
             },
             {
               accessorKey: "date",
-              header: "Date",
-              dataType: "date",
-              enableColumnFilter: true,
-              enableSorting: true,
-              filterFn: "inDateRangeFilter",
               customFilterComponent(column) {
                 return (
                   <div className="filter-date">
@@ -1157,8 +1152,8 @@ export const TableDemo = () => {
                           old?.[1],
                         ])
                       }
-                      value={(column.getFilterValue() as [Date, Date])?.[0]}
                       placeholder={t("table.placeholder.startDate")}
+                      value={(column.getFilterValue() as [Date, Date])?.[0]}
                     />
                     <DatePicker
                       inputRef={null}
@@ -1169,30 +1164,35 @@ export const TableDemo = () => {
                           date,
                         ])
                       }
-                      value={(column.getFilterValue() as [Date, Date])?.[1]}
                       placeholder={t("table.placeholder.endDate")}
+                      value={(column.getFilterValue() as [Date, Date])?.[1]}
                     />
                   </div>
                 );
               },
+              dataType: "date",
+              enableColumnFilter: true,
+              enableSorting: true,
+              filterFn: "inDateRangeFilter",
+              header: "Date",
             },
             {
-              id: "action",
-              header: () => <i className="pi pi-cog"></i>,
-              dataType: "other",
               cell: () => (
-                <Button iconLeft="pi pi-eye" variant="textOnly" rounded />
+                <Button iconLeft="pi pi-eye" rounded variant="textOnly" />
               ),
+              dataType: "other",
+              header: () => <i className="pi pi-cog"></i>,
+              id: "action",
             },
           ]}
           data={formatDemoData}
-          paginated={false}
           filterFns={{
-            inDateRangeFilter: inDateRangeFilter,
             customEqualStringFilter: customEqualStringFilter,
+            inDateRangeFilter: inDateRangeFilter,
           }}
           id="custom-static-filter-table"
-          initialSorting={[{ id: "quantity", desc: true }]}
+          initialSorting={[{ desc: true, id: "quantity" }]}
+          paginated={false}
         ></TDataTable>
       </Section>
 
@@ -1202,61 +1202,60 @@ export const TableDemo = () => {
           columns={[
             {
               accessorKey: "email",
-              header: "Email",
               enableColumnFilter: true,
               enableSorting: true,
               filterPlaceholder: t("table.placeholder.search"),
+              header: "Email",
             },
             {
               accessorKey: "name",
-              header: "Name",
               enableColumnFilter: true,
               enableSorting: true,
               filterPlaceholder: t("table.placeholder.search"),
+              header: "Name",
             },
             {
               accessorKey: "age",
-              header: "Age",
               align: "right",
               dataType: "number",
-              enableSorting: true,
               enableColumnFilter: true,
+              enableSorting: true,
               filterPlaceholder: `${t("table.placeholder.min")},${t("table.placeholder.max")}`,
+              header: "Age",
             },
             {
               accessorKey: "city",
-              header: () => <span>City</span>,
               enableColumnFilter: true,
               enableSorting: true,
               filterPlaceholder: t("table.placeholder.select"),
+              header: () => <span>City</span>,
               meta: {
-                filterVariant: "multiselect",
                 filterOptions: city,
+                filterVariant: "multiselect",
               },
             },
             {
               accessorKey: "country",
-              header: "Country",
               enableColumnFilter: true,
               enableSorting: true,
+              filterPlaceholder: t("table.placeholder.country"),
+              header: "Country",
               meta: {
-                filterVariant: "select",
                 filterOptions: country,
+                filterVariant: "select",
               },
-              filterPlaceholder: t("table.placeholder.country"),
             },
             {
-              align: "center",
               accessorKey: "disabled",
-              header: "Status",
+              align: "center",
               cell: ({ row: { original } }) => {
                 const color = original.disabled ? "red" : "green";
 
                 return (
                   <Tag
-                    label={original.disabled ? "Disabled" : "Enabled"}
                     color={color}
                     fullWidth
+                    label={original.disabled ? "Disabled" : "Enabled"}
                   />
                 );
               },
@@ -1270,10 +1269,10 @@ export const TableDemo = () => {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const updatedFilterValue = filterValue.map((value: any) => {
                   switch (value) {
-                    case "true":
-                      return true;
                     case "false":
                       return false;
+                    case "true":
+                      return true;
                     default:
                       return value;
                   }
@@ -1283,25 +1282,26 @@ export const TableDemo = () => {
 
                 return updatedFilterValue.includes(cellValue);
               },
+              filterPlaceholder: t("table.placeholder.status"),
+              header: "Status",
               meta: {
-                filterVariant: "multiselect",
                 filterOptions: [
                   {
-                    value: "false",
                     label: "Enabled",
+                    value: "false",
                   },
                   {
-                    value: "true",
                     label: "Disabled",
+                    value: "true",
                   },
                 ],
+                filterVariant: "multiselect",
               },
-              filterPlaceholder: t("table.placeholder.status"),
             },
           ]}
           data={data.slice(10, 15)}
           id="div-content-table"
-          initialSorting={[{ id: "email", desc: false }]}
+          initialSorting={[{ desc: false, id: "email" }]}
         ></TDataTable>
       </Section>
       <Section
diff --git a/apps/demo/src/Views/Ui/components/Table/data.ts b/apps/demo/src/Views/Ui/components/Table/data.ts
index 48b1424e8..638749fb5 100644
--- a/apps/demo/src/Views/Ui/components/Table/data.ts
+++ b/apps/demo/src/Views/Ui/components/Table/data.ts
@@ -1,34 +1,34 @@
 export type TData = {
-  id: number;
-  name: string;
-  email: string;
   age: number;
   city: string;
   country: string;
   disabled?: boolean;
+  email: string;
+  id: number;
+  name: string;
 };
 
 const city = [
-  { value: "Atlanta", label: "Atlanta" },
-  { value: "Austin", label: "Austin" },
-  { value: "Boston", label: "Boston" },
-  { value: "Charlotte", label: "Charlotte" },
-  { value: "Chicago", label: "Chicago" },
-  { value: "Dallas-Fort Worth", label: "Dallas-Fort Worth" },
-  { value: "Denver", label: "Denver" },
-  { value: "Detroit", label: "Detroit" },
-  { value: "Houston", label: "Houston" },
-  { value: "Los Angeles", label: "Los Angeles" },
-  { value: "Miami Beach", label: "Miami Beach" },
-  { value: "Minneapolis", label: "Minneapolis" },
-  { value: "Nashville", label: "Nashville" },
-  { value: "New York", label: "New York" },
-  { value: "Philadelphia", label: "Philadelphia" },
-  { value: "Phoenix", label: "Phoenix" },
-  { value: "Portland", label: "Portland" },
-  { value: "San Diego", label: "San Diego" },
-  { value: "San Francisco Bay Area", label: "San Francisco Bay Area" },
-  { value: "Seattle", label: "Seattle" },
+  { label: "Atlanta", value: "Atlanta" },
+  { label: "Austin", value: "Austin" },
+  { label: "Boston", value: "Boston" },
+  { label: "Charlotte", value: "Charlotte" },
+  { label: "Chicago", value: "Chicago" },
+  { label: "Dallas-Fort Worth", value: "Dallas-Fort Worth" },
+  { label: "Denver", value: "Denver" },
+  { label: "Detroit", value: "Detroit" },
+  { label: "Houston", value: "Houston" },
+  { label: "Los Angeles", value: "Los Angeles" },
+  { label: "Miami Beach", value: "Miami Beach" },
+  { label: "Minneapolis", value: "Minneapolis" },
+  { label: "Nashville", value: "Nashville" },
+  { label: "New York", value: "New York" },
+  { label: "Philadelphia", value: "Philadelphia" },
+  { label: "Phoenix", value: "Phoenix" },
+  { label: "Portland", value: "Portland" },
+  { label: "San Diego", value: "San Diego" },
+  { label: "San Francisco Bay Area", value: "San Francisco Bay Area" },
+  { label: "Seattle", value: "Seattle" },
 ];
 
 const country = [
@@ -42,267 +42,267 @@ const country = [
 
 const data: TData[] = [
   {
-    id: 1,
-    name: "John Doe",
-    email: "john.doe@example.com",
     age: 28,
     city: "New York",
     country: "France",
     disabled: true,
+    email: "john.doe@example.com",
+    id: 1,
+    name: "John Doe",
   },
   {
-    id: 2,
-    name: "Jane Elizabeth Smith",
-    email: "jane.smith@example.com",
     age: 32,
     city: "Los Angeles",
     country: "France",
     disabled: true,
+    email: "jane.smith@example.com",
+    id: 2,
+    name: "Jane Elizabeth Smith",
   },
   {
-    id: 3,
-    name: "Robert Johnson",
-    email: "bob.j@example.com",
     age: 25,
     city: "Chicago",
     country: "United State of America",
     disabled: false,
+    email: "bob.j@example.com",
+    id: 3,
+    name: "Robert Johnson",
   },
   {
-    id: 4,
-    name: "Alice Brown",
-    email: "alice.brown@example.com",
     age: 22,
     city: "San Franceancisco Bay Area",
     country: "United State of America",
     disabled: true,
+    email: "alice.brown@example.com",
+    id: 4,
+    name: "Alice Brown",
   },
   {
-    id: 5,
-    name: "Charles William Wilson Jr.",
-    email: "charlie.w@example.com",
     age: 35,
     city: "Houston",
     country: "United State of America",
     disabled: false,
+    email: "charlie.w@example.com",
+    id: 5,
+    name: "Charles William Wilson Jr.",
   },
   {
-    id: 6,
-    name: "Evangeline Martinez",
-    email: "eva.martinez@example.com",
     age: 30,
     city: "Miami Beach",
     country: "United State of America",
     disabled: false,
+    email: "eva.martinez@example.com",
+    id: 6,
+    name: "Evangeline Martinez",
   },
   {
-    id: 7,
-    name: "David Lawrence",
-    email: "david.lee@example.com",
     age: 27,
     city: "Seattle",
     country: "United State of America",
     disabled: false,
+    email: "david.lee@example.com",
+    id: 7,
+    name: "David Lawrence",
   },
   {
-    id: 8,
-    name: "Sophia Turner",
-    email: "sophie.t@example.com",
     age: 29,
     city: "Atlanta",
     country: "United State of America",
     disabled: false,
+    email: "sophie.t@example.com",
+    id: 8,
+    name: "Sophia Turner",
   },
   {
-    id: 9,
-    name: "Michael Anthony Adams",
-    email: "michael.a@example.com",
     age: 31,
     city: "Dallas-Fort Worth",
     country: "United State of America",
     disabled: true,
+    email: "michael.a@example.com",
+    id: 9,
+    name: "Michael Anthony Adams",
   },
   {
-    id: 10,
-    name: "Olivia Charlotte Carter",
-    email: "olivia.carter@example.com",
     age: 26,
     city: "Denver",
     country: "United State of America",
     disabled: false,
+    email: "olivia.carter@example.com",
+    id: 10,
+    name: "Olivia Charlotte Carter",
   },
   {
-    id: 11,
-    name: "Ryan Alexander Cooper",
-    email: "ryan.cooper@example.com",
     age: 34,
     city: "Boston",
     country: "United State of America",
     disabled: true,
+    email: "ryan.cooper@example.com",
+    id: 11,
+    name: "Ryan Alexander Cooper",
   },
   {
-    id: 12,
-    name: "Emily Davis",
-    email: "emily.d@example.com",
     age: 33,
     city: "Phoenix",
     country: "United State of America",
     disabled: true,
+    email: "emily.d@example.com",
+    id: 12,
+    name: "Emily Davis",
   },
   {
-    id: 13,
-    name: "Daniel William White",
-    email: "daniel.white@example.com",
     age: 28,
     city: "Philadelphia",
     country: "United State of America",
     disabled: true,
+    email: "daniel.white@example.com",
+    id: 13,
+    name: "Daniel William White",
   },
   {
-    id: 14,
-    name: "Ava Rose Moore",
-    email: "ava.m@example.com",
     age: 24,
     city: "Austin",
     country: "France",
     disabled: false,
+    email: "ava.m@example.com",
+    id: 14,
+    name: "Ava Rose Moore",
   },
   {
-    id: 15,
-    name: "Nicholas Harrison",
-    email: "nicholas.h@example.com",
     age: 27,
     city: "San Diego",
     country: "United State of America",
     disabled: false,
+    email: "nicholas.h@example.com",
+    id: 15,
+    name: "Nicholas Harrison",
   },
   {
-    id: 16,
-    name: "Emma Grace Turner",
-    email: "emma.t@example.com",
     age: 29,
     city: "Portland",
     country: "France",
     disabled: true,
+    email: "emma.t@example.com",
+    id: 16,
+    name: "Emma Grace Turner",
   },
   {
-    id: 17,
-    name: "William Lewis Jr.",
-    email: "william.l@example.com",
     age: 32,
     city: "Detroit",
     country: "France",
     disabled: true,
+    email: "william.l@example.com",
+    id: 17,
+    name: "William Lewis Jr.",
   },
   {
-    id: 18,
-    name: "Grace Margaret Murphy",
-    email: "grace.murphy@example.com",
     age: 26,
     city: "Minneapolis",
     country: "Estonia",
     disabled: true,
+    email: "grace.murphy@example.com",
+    id: 18,
+    name: "Grace Margaret Murphy",
   },
   {
-    id: 19,
-    name: "Matthew Wright",
-    email: "matthew.w@example.com",
     age: 30,
     city: "Charlotte",
     country: "Estonia",
     disabled: false,
+    email: "matthew.w@example.com",
+    id: 19,
+    name: "Matthew Wright",
   },
   {
-    id: 20,
-    name: "Lily Alexandra Adams",
-    email: "lily.adams@example.com",
     age: 31,
     city: "Nashville",
     country: "Estonia",
     disabled: false,
+    email: "lily.adams@example.com",
+    id: 20,
+    name: "Lily Alexandra Adams",
   },
 ];
 
 const formatDemoData = [
   {
-    id: 1001,
     amount: 1_234_567.89,
-    quantity: 420,
     date: null,
     datetime: null,
     description: "Purchase of equipment",
+    id: 1001,
+    quantity: 420,
   },
   {
-    id: 1002,
     amount: 987_654.32,
-    quantity: 175,
     date: new Date("2023-12-01T12:30:00"),
     datetime: new Date("2023-12-01T11:00:00"),
     description: "Office rent payment",
+    id: 1002,
+    quantity: 175,
   },
   {
-    id: 1003,
     amount: 54321.0,
-    quantity: 7890,
     date: new Date("2023-12-15T08:45:00"),
     datetime: new Date("2023-12-15T08:45:00"),
     description: "Marketing campaign expenses",
+    id: 1003,
+    quantity: 7890,
   },
   {
-    id: 1004,
     amount: 654_321.12,
-    quantity: 2950,
     date: new Date(),
     datetime: new Date(),
     description: "Product development costs",
+    id: 1004,
+    quantity: 2950,
   },
   {
-    id: 1005,
     amount: 789_012.34,
-    quantity: 53210,
     date: new Date("2023-12-05T09:15:00"),
     datetime: new Date("2023-12-05T09:15:00"),
     description: "Travel and accommodation",
+    id: 1005,
+    quantity: 53210,
   },
   {
-    id: 1006,
     amount: 12345.67,
-    quantity: 6430,
     date: new Date("2023-12-20T14:00:00"),
     datetime: new Date("2023-12-05T09:15:00"),
     description: "Employee salaries",
+    id: 1006,
+    quantity: 6430,
   },
   {
-    id: 1007,
     amount: 234_567.89,
-    quantity: 98760,
     date: new Date(),
     datetime: new Date(),
     description: "Product inventory replenishment",
+    id: 1007,
+    quantity: 98760,
   },
   {
-    id: 1008,
     amount: 876_543.21,
-    quantity: 123_450,
     date: new Date("2023-12-10T18:45:00"),
     datetime: new Date("2023-12-10T18:45:00"),
     description: "New marketing materials",
+    id: 1008,
+    quantity: 123_450,
   },
   {
-    id: 1009,
     amount: 13579.24,
-    quantity: 45670,
     date: new Date("2023-12-25T11:30:00"),
     datetime: new Date("2023-12-25T11:30:00"),
     description: "Holiday season promotions",
+    id: 1009,
+    quantity: 45670,
   },
   {
-    id: 1010,
     amount: 24680.36,
-    quantity: 78901,
     date: new Date(),
     datetime: new Date(),
     description: "Office furniture upgrade",
+    id: 1010,
+    quantity: 78901,
   },
 ];
 
diff --git a/apps/demo/src/Views/Ui/components/Tag/Tag.tsx b/apps/demo/src/Views/Ui/components/Tag/Tag.tsx
index c7660edd8..a4085e8cc 100644
--- a/apps/demo/src/Views/Ui/components/Tag/Tag.tsx
+++ b/apps/demo/src/Views/Ui/components/Tag/Tag.tsx
@@ -3,7 +3,6 @@ import { Button, Page, Tag } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
 import { Section } from "../../../../components/Demo";
-
 import "./index.css";
 
 export const TagDemo = () => {
@@ -15,10 +14,10 @@ export const TagDemo = () => {
       title={t("tag.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
@@ -31,30 +30,30 @@ export const TagDemo = () => {
       <Section title={t("tag.usage.color")}>
         <div className="demo-tag-container">
           <Tag label="default" />
-          <Tag label="gray" color="gray" />
-          <Tag label="red" color="red" />
-          <Tag label="pink" color="pink" />
-          <Tag label="purple" color="purple" />
-          <Tag label="blue" color="blue" />
-          <Tag label="cyan" color="cyan" />
-          <Tag label="green" color="green" />
-          <Tag label="yellow" color="yellow" />
-          <Tag label="orange" color="orange" />
-          <Tag label="brown" color="brown" />
+          <Tag color="gray" label="gray" />
+          <Tag color="red" label="red" />
+          <Tag color="pink" label="pink" />
+          <Tag color="purple" label="purple" />
+          <Tag color="blue" label="blue" />
+          <Tag color="cyan" label="cyan" />
+          <Tag color="green" label="green" />
+          <Tag color="yellow" label="yellow" />
+          <Tag color="orange" label="orange" />
+          <Tag color="brown" label="brown" />
         </div>
       </Section>
 
       <Section title={t("tag.usage.pill")}>
         <div className="demo-tag-container">
           <Tag label="default" rounded />
-          <Tag label="blue" color="blue" icon="pi pi-times" rounded />
+          <Tag color="blue" icon="pi pi-times" label="blue" rounded />
         </div>
       </Section>
 
       <Section title={t("tag.usage.icon")}>
         <div className="demo-tag-container">
-          <Tag label="green" icon="pi pi-check" color="green" />
-          <Tag label="red" icon="pi pi-times" color="red" />
+          <Tag color="green" icon="pi pi-check" label="green" />
+          <Tag color="red" icon="pi pi-times" label="red" />
           <Tag icon="pi pi-user" />
         </div>
       </Section>
@@ -62,13 +61,13 @@ export const TagDemo = () => {
       <Section title={t("tag.usage.custom")}>
         <div className="demo-tag-container">
           <Tag
+            color="#eddec8"
             renderContent={() => (
               <>
                 <span>{t("tag.usage.custom")}</span>
                 <i className="pi pi-user"></i>
               </>
             )}
-            color="#eddec8"
           />
         </div>
       </Section>
diff --git a/apps/demo/src/Views/Ui/components/Tag/index.css b/apps/demo/src/Views/Ui/components/Tag/index.css
index 205a6cc9f..4d64470ab 100644
--- a/apps/demo/src/Views/Ui/components/Tag/index.css
+++ b/apps/demo/src/Views/Ui/components/Tag/index.css
@@ -1,6 +1,6 @@
 .demo-tag-container {
-  display: flex;
   align-items: center;
-  gap: 1rem;
+  display: flex;
   flex-wrap: wrap;
+  gap: 1rem;
 }
diff --git a/apps/demo/src/Views/Ui/components/Tooltip/Tooltip.tsx b/apps/demo/src/Views/Ui/components/Tooltip/Tooltip.tsx
index 8a00c02e3..eb521c5c9 100644
--- a/apps/demo/src/Views/Ui/components/Tooltip/Tooltip.tsx
+++ b/apps/demo/src/Views/Ui/components/Tooltip/Tooltip.tsx
@@ -1,10 +1,9 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { Tooltip, Page, Button } from "@prefabs.tech/react-ui";
+import { Button, Page, Tooltip } from "@prefabs.tech/react-ui";
 import { useRef } from "react";
 import { useNavigate } from "react-router-dom";
 
 import "./index.css";
-
 import { Section } from "../../../../components/Demo";
 
 export const TooltipDemo = () => {
@@ -24,45 +23,45 @@ export const TooltipDemo = () => {
       title={t("tooltip.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
         <div className="tooltip-component">
           <Tooltip
+            delay={100}
             elementRef={rightReference}
             offset={10}
-            delay={100}
             position="right"
           >
             Tooltip content
           </Tooltip>
           <div ref={rightReference}>{t("tooltip.position.right")}</div>
 
-          <Tooltip elementRef={leftReference} position="left" delay={200}>
+          <Tooltip delay={200} elementRef={leftReference} position="left">
             Tooltip content
           </Tooltip>
           <div ref={leftReference}>{t("tooltip.position.left")}</div>
 
-          <Tooltip elementRef={topReference} position="top" offset={10}>
+          <Tooltip elementRef={topReference} offset={10} position="top">
             Tooltip content
           </Tooltip>
           <div ref={topReference}>{t("tooltip.position.top")}</div>
 
-          <Tooltip elementRef={bottomReference} position="bottom" offset={10}>
+          <Tooltip elementRef={bottomReference} offset={10} position="bottom">
             Tooltip content
           </Tooltip>
           <div ref={bottomReference}>{t("tooltip.position.bottom")}</div>
 
-          <Tooltip elementRef={buttonReference} position="right" offset={10}>
+          <Tooltip elementRef={buttonReference} offset={10} position="right">
             <i className="pi pi-check"></i>
             <span>Save</span>
           </Tooltip>
-          <button ref={buttonReference} className="button-save">
+          <button className="button-save" ref={buttonReference}>
             Save
           </button>
 
diff --git a/apps/demo/src/Views/Ui/components/YoutubeFacade/YoutubeFacade.tsx b/apps/demo/src/Views/Ui/components/YoutubeFacade/YoutubeFacade.tsx
index 0d21ffb33..7b40b42c6 100644
--- a/apps/demo/src/Views/Ui/components/YoutubeFacade/YoutubeFacade.tsx
+++ b/apps/demo/src/Views/Ui/components/YoutubeFacade/YoutubeFacade.tsx
@@ -3,11 +3,11 @@ import React from "react";
 import "./index.css";
 
 interface IProperties {
+  alt?: string;
+  aspectRatio?: string;
+  imageSource?: string;
   videoLink: string;
   videoToken: string;
-  imageSource?: string;
-  aspectRatio?: string;
-  alt?: string;
 }
 
 const YoutubeFacade: React.FC<IProperties> = ({
@@ -46,24 +46,24 @@ const YoutubeFacade: React.FC<IProperties> = ({
     <div
       className="youTubeFacade"
       style={{
+        aspectRatio: aspectRatio,
         background: `url(${VideoImageLink}) no-repeat`,
-        backgroundSize: "contain",
         backgroundPosition: "center",
-        aspectRatio: aspectRatio,
+        backgroundSize: "contain",
       }}
     >
       <div className="facade-thumbnail">
         <a
-          href={videoLink}
           data-youtube-video-token={videoToken}
-          title="Watch Video on YouTube"
+          href={videoLink}
           onClick={loadYoutubeVideo}
-          target="_blank"
           rel="noreferrer"
+          target="_blank"
+          title="Watch Video on YouTube"
         >
-          <img src={VideoImageLink} alt={alt} data-aspect-ratio={aspectRatio} />
+          <img alt={alt} data-aspect-ratio={aspectRatio} src={VideoImageLink} />
         </a>
-        <a href={videoLink} target="_blank" rel="noreferrer">
+        <a href={videoLink} rel="noreferrer" target="_blank">
           Watch On <b>YouTube</b>
         </a>
       </div>
diff --git a/apps/demo/src/Views/Ui/components/YoutubeFacade/demo.tsx b/apps/demo/src/Views/Ui/components/YoutubeFacade/demo.tsx
index f3bb6524b..b8069a0de 100644
--- a/apps/demo/src/Views/Ui/components/YoutubeFacade/demo.tsx
+++ b/apps/demo/src/Views/Ui/components/YoutubeFacade/demo.tsx
@@ -2,8 +2,8 @@ import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Button, Page } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
-import YoutubeFacade from "./YoutubeFacade";
 import { Section } from "../../../../components/Demo";
+import YoutubeFacade from "./YoutubeFacade";
 
 export const YoutubeFacadeDemo = () => {
   const { t } = useTranslation("ui");
@@ -14,20 +14,20 @@ export const YoutubeFacadeDemo = () => {
       title={t("youtubeFacade.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
         <div style={{ width: "50%" }}>
           <YoutubeFacade
+            alt="Video alt"
+            aspectRatio="16/9"
             videoLink="https://www.youtube.com/watch?v=zhnIruPa0XI"
             videoToken="zhnIruPa0XI"
-            aspectRatio="16/9"
-            alt="Video alt"
           />
         </div>
       </Section>
diff --git a/apps/demo/src/Views/Ui/components/YoutubeFacade/index.css b/apps/demo/src/Views/Ui/components/YoutubeFacade/index.css
index c55288016..2573372b6 100644
--- a/apps/demo/src/Views/Ui/components/YoutubeFacade/index.css
+++ b/apps/demo/src/Views/Ui/components/YoutubeFacade/index.css
@@ -1,14 +1,14 @@
 .youTubeFacade {
+  display: flex;
   position: relative;
   width: 100%;
-  display: flex;
 }
 
 .videoEmbed,
 .youTubeFacade img {
-  width: 100%;
-  height: auto;
   border: none;
+  height: auto;
+  width: 100%;
 }
 
 .youTubeFacade img {
@@ -20,26 +20,26 @@
 }
 
 .youTubeFacade a:first-child::after {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 234.67 165.33'%3E%3Cpath d='M229.763 25.817c-2.699-10.162-10.65-18.165-20.748-20.881C190.716 0 117.333 0 117.333 0S43.951 0 25.651 4.936C15.553 7.652 7.6 15.655 4.903 25.817 0 44.236 0 82.667 0 82.667s0 38.429 4.903 56.85C7.6 149.68 15.553 157.681 25.65 160.4c18.3 4.934 91.682 4.934 91.682 4.934s73.383 0 91.682-4.934c10.098-2.718 18.049-10.72 20.748-20.882 4.904-18.421 4.904-56.85 4.904-56.85s0-38.431-4.904-56.85' fill='red'%3E%3C/path%3E%3Cpath d='M93.333 117.559l61.333-34.89-61.333-34.894z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E")
+    center no-repeat;
+  background-size: 4rem;
   content: "";
+  height: 4rem;
+  left: 50%;
   position: absolute;
   top: 50%;
-  left: 50%;
   translate: -50% -50%;
   width: 4rem;
-  height: 4rem;
-  background-size: 4rem;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 234.67 165.33'%3E%3Cpath d='M229.763 25.817c-2.699-10.162-10.65-18.165-20.748-20.881C190.716 0 117.333 0 117.333 0S43.951 0 25.651 4.936C15.553 7.652 7.6 15.655 4.903 25.817 0 44.236 0 82.667 0 82.667s0 38.429 4.903 56.85C7.6 149.68 15.553 157.681 25.65 160.4c18.3 4.934 91.682 4.934 91.682 4.934s73.383 0 91.682-4.934c10.098-2.718 18.049-10.72 20.748-20.882 4.904-18.421 4.904-56.85 4.904-56.85s0-38.431-4.904-56.85' fill='red'%3E%3C/path%3E%3Cpath d='M93.333 117.559l61.333-34.89-61.333-34.894z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E")
-    center no-repeat;
 }
 
 .youTubeFacade a:last-child {
-  position: absolute;
+  background: #333;
   bottom: 1rem;
+  color: #fff;
+  font-family: arial, helvetica, sans-serif;
   left: 0;
   padding: 1rem;
-  font-family: arial, helvetica, sans-serif;
-  background: #333;
-  color: #fff;
+  position: absolute;
 }
 
 .youTubeFacade a:last-child::after {
@@ -47,15 +47,15 @@
 }
 
 .youTubeFacade a:last-child b {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 507.9 113.39'%3E%3Cg fill='%23fff'%3E%3Cpath d='M64.792 80.99V32.396l42.082 24.297zm93.803-63.285a20.285 20.285 0 00-14.32-14.32C131.642 0 80.99 0 80.99 0S30.337 0 17.705 3.385a20.286 20.286 0 00-14.32 14.32C0 30.338 0 56.693 0 56.693S0 83.049 3.385 95.68A20.285 20.285 0 0017.705 110c12.632 3.386 63.285 3.386 63.285 3.386s50.652 0 63.285-3.386a20.284 20.284 0 0014.32-14.32c3.385-12.632 3.385-38.988 3.385-38.988s0-26.355-3.385-38.988m94.473 74.326c.887-2.314 1.332-6.098 1.332-11.35V58.556c0-5.097-.445-8.822-1.332-11.178-.888-2.355-2.452-3.533-4.69-3.533-2.163 0-3.69 1.178-4.577 3.533-.888 2.356-1.332 6.081-1.332 11.178V80.68c0 5.25.424 9.035 1.275 11.35.848 2.318 2.392 3.475 4.633 3.475 2.239 0 3.803-1.157 4.691-3.475zm-17.953 11.122c-3.207-2.16-5.486-5.52-6.835-10.079-1.352-4.554-2.027-10.617-2.027-18.185v-10.31c0-7.644.771-13.784 2.316-18.417 1.544-4.633 3.956-8.011 7.24-10.135 3.282-2.123 7.587-3.186 12.916-3.186 5.251 0 9.459 1.082 12.626 3.243 3.165 2.162 5.482 5.542 6.95 10.136 1.466 4.595 2.2 10.715 2.2 18.36v10.31c0 7.567-.714 13.65-2.142 18.243-1.43 4.595-3.747 7.955-6.951 10.077-3.205 2.124-7.548 3.186-13.03 3.186-5.64 0-10.06-1.082-13.263-3.243m248.053-57.981c-.81 1.005-1.352 2.646-1.621 4.923-.272 2.278-.404 5.734-.404 10.367v5.097h11.697V60.46c0-4.555-.155-8.011-.463-10.367-.309-2.355-.868-4.014-1.678-4.98-.812-.966-2.067-1.449-3.766-1.449-1.7 0-2.954.503-3.765 1.506zm-2.025 29.886v3.591c0 4.557.132 7.974.404 10.251.269 2.279.828 3.94 1.68 4.982.849 1.041 2.16 1.564 3.938 1.564 2.392 0 4.035-.927 4.923-2.781.887-1.853 1.37-4.942 1.447-9.268l13.785.812c.077.62.116 1.469.116 2.548 0 6.565-1.795 11.47-5.387 14.712-3.589 3.242-8.669 4.865-15.232 4.865-7.876 0-13.398-2.47-16.564-7.414-3.168-4.94-4.75-12.586-4.75-22.935V63.589c0-10.657 1.641-18.436 4.924-23.342 3.281-4.903 8.9-7.355 16.854-7.355 5.482 0 9.691 1.004 12.626 3.012 2.933 2.01 5 5.137 6.197 9.383 1.197 4.247 1.796 10.117 1.796 17.607v12.163h-26.757m-284.953-1.33l-18.187-65.68h15.869l6.37 29.77c1.623 7.339 2.82 13.594 3.591 18.766h.464c.54-3.706 1.738-9.922 3.591-18.65l6.603-29.886h15.869l-18.417 65.68v31.51h-15.754v-31.51M322.115 34.23v71.007h-12.511l-1.39-8.688h-.347c-3.399 6.564-8.496 9.845-15.291 9.845-4.71 0-8.185-1.543-10.425-4.633-2.24-3.087-3.359-7.915-3.359-14.48V34.23h15.985v52.126c0 3.168.348 5.426 1.043 6.776.695 1.353 1.853 2.027 3.475 2.027 1.39 0 2.722-.423 3.996-1.275 1.274-.849 2.22-1.928 2.838-3.241V34.229h15.986m81.995.001v71.007h-12.511l-1.391-8.688h-.345c-3.402 6.564-8.498 9.845-15.292 9.845-4.711 0-8.186-1.543-10.426-4.633-2.24-3.087-3.358-7.915-3.358-14.48V34.23h15.985v52.126c0 3.168.347 5.426 1.041 6.776.696 1.353 1.855 2.027 3.476 2.027 1.391 0 2.723-.423 3.996-1.275 1.275-.849 2.22-1.928 2.839-3.241V34.229h15.985'%3E%3C/path%3E%3Cpath d='M365.552 20.908h-15.87v84.329h-15.637v-84.33h-15.869V8.05h47.376v12.858m76.811 53.636c0 5.174-.215 9.229-.639 12.162-.424 2.937-1.139 5.021-2.143 6.255-1.004 1.236-2.357 1.854-4.053 1.854a7.404 7.404 0 01-3.65-.927c-1.12-.618-2.026-1.544-2.722-2.78V50.796c.54-1.93 1.467-3.513 2.78-4.749 1.313-1.234 2.74-1.853 4.285-1.853 1.623 0 2.876.637 3.766 1.91.886 1.275 1.505 3.418 1.853 6.43.348 3.011.523 7.297.523 12.857zm14.652-28.964c-.967-4.478-2.531-7.721-4.692-9.73-2.163-2.007-5.136-3.011-8.919-3.011-2.935 0-5.676.83-8.224 2.49a16.926 16.926 0 00-5.908 6.545h-.117l.001-37.416h-15.405v100.777h13.204l1.622-6.717h.347c1.235 2.393 3.088 4.285 5.56 5.675 2.47 1.39 5.213 2.085 8.225 2.085 5.404 0 9.382-2.491 11.931-7.471 2.548-4.982 3.823-12.76 3.823-23.341V64.23c0-7.953-.484-14.17-1.448-18.65'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
+    center no-repeat;
+  background-size: 5rem;
+  color: transparent;
   display: inline-block;
-  width: 5rem;
-  margin-left: 0.25rem;
   font-size: 1.2rem;
   line-height: 1.2rem;
-  color: transparent;
-  background-size: 5rem;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 507.9 113.39'%3E%3Cg fill='%23fff'%3E%3Cpath d='M64.792 80.99V32.396l42.082 24.297zm93.803-63.285a20.285 20.285 0 00-14.32-14.32C131.642 0 80.99 0 80.99 0S30.337 0 17.705 3.385a20.286 20.286 0 00-14.32 14.32C0 30.338 0 56.693 0 56.693S0 83.049 3.385 95.68A20.285 20.285 0 0017.705 110c12.632 3.386 63.285 3.386 63.285 3.386s50.652 0 63.285-3.386a20.284 20.284 0 0014.32-14.32c3.385-12.632 3.385-38.988 3.385-38.988s0-26.355-3.385-38.988m94.473 74.326c.887-2.314 1.332-6.098 1.332-11.35V58.556c0-5.097-.445-8.822-1.332-11.178-.888-2.355-2.452-3.533-4.69-3.533-2.163 0-3.69 1.178-4.577 3.533-.888 2.356-1.332 6.081-1.332 11.178V80.68c0 5.25.424 9.035 1.275 11.35.848 2.318 2.392 3.475 4.633 3.475 2.239 0 3.803-1.157 4.691-3.475zm-17.953 11.122c-3.207-2.16-5.486-5.52-6.835-10.079-1.352-4.554-2.027-10.617-2.027-18.185v-10.31c0-7.644.771-13.784 2.316-18.417 1.544-4.633 3.956-8.011 7.24-10.135 3.282-2.123 7.587-3.186 12.916-3.186 5.251 0 9.459 1.082 12.626 3.243 3.165 2.162 5.482 5.542 6.95 10.136 1.466 4.595 2.2 10.715 2.2 18.36v10.31c0 7.567-.714 13.65-2.142 18.243-1.43 4.595-3.747 7.955-6.951 10.077-3.205 2.124-7.548 3.186-13.03 3.186-5.64 0-10.06-1.082-13.263-3.243m248.053-57.981c-.81 1.005-1.352 2.646-1.621 4.923-.272 2.278-.404 5.734-.404 10.367v5.097h11.697V60.46c0-4.555-.155-8.011-.463-10.367-.309-2.355-.868-4.014-1.678-4.98-.812-.966-2.067-1.449-3.766-1.449-1.7 0-2.954.503-3.765 1.506zm-2.025 29.886v3.591c0 4.557.132 7.974.404 10.251.269 2.279.828 3.94 1.68 4.982.849 1.041 2.16 1.564 3.938 1.564 2.392 0 4.035-.927 4.923-2.781.887-1.853 1.37-4.942 1.447-9.268l13.785.812c.077.62.116 1.469.116 2.548 0 6.565-1.795 11.47-5.387 14.712-3.589 3.242-8.669 4.865-15.232 4.865-7.876 0-13.398-2.47-16.564-7.414-3.168-4.94-4.75-12.586-4.75-22.935V63.589c0-10.657 1.641-18.436 4.924-23.342 3.281-4.903 8.9-7.355 16.854-7.355 5.482 0 9.691 1.004 12.626 3.012 2.933 2.01 5 5.137 6.197 9.383 1.197 4.247 1.796 10.117 1.796 17.607v12.163h-26.757m-284.953-1.33l-18.187-65.68h15.869l6.37 29.77c1.623 7.339 2.82 13.594 3.591 18.766h.464c.54-3.706 1.738-9.922 3.591-18.65l6.603-29.886h15.869l-18.417 65.68v31.51h-15.754v-31.51M322.115 34.23v71.007h-12.511l-1.39-8.688h-.347c-3.399 6.564-8.496 9.845-15.291 9.845-4.71 0-8.185-1.543-10.425-4.633-2.24-3.087-3.359-7.915-3.359-14.48V34.23h15.985v52.126c0 3.168.348 5.426 1.043 6.776.695 1.353 1.853 2.027 3.475 2.027 1.39 0 2.722-.423 3.996-1.275 1.274-.849 2.22-1.928 2.838-3.241V34.229h15.986m81.995.001v71.007h-12.511l-1.391-8.688h-.345c-3.402 6.564-8.498 9.845-15.292 9.845-4.711 0-8.186-1.543-10.426-4.633-2.24-3.087-3.358-7.915-3.358-14.48V34.23h15.985v52.126c0 3.168.347 5.426 1.041 6.776.696 1.353 1.855 2.027 3.476 2.027 1.391 0 2.723-.423 3.996-1.275 1.275-.849 2.22-1.928 2.839-3.241V34.229h15.985'%3E%3C/path%3E%3Cpath d='M365.552 20.908h-15.87v84.329h-15.637v-84.33h-15.869V8.05h47.376v12.858m76.811 53.636c0 5.174-.215 9.229-.639 12.162-.424 2.937-1.139 5.021-2.143 6.255-1.004 1.236-2.357 1.854-4.053 1.854a7.404 7.404 0 01-3.65-.927c-1.12-.618-2.026-1.544-2.722-2.78V50.796c.54-1.93 1.467-3.513 2.78-4.749 1.313-1.234 2.74-1.853 4.285-1.853 1.623 0 2.876.637 3.766 1.91.886 1.275 1.505 3.418 1.853 6.43.348 3.011.523 7.297.523 12.857zm14.652-28.964c-.967-4.478-2.531-7.721-4.692-9.73-2.163-2.007-5.136-3.011-8.919-3.011-2.935 0-5.676.83-8.224 2.49a16.926 16.926 0 00-5.908 6.545h-.117l.001-37.416h-15.405v100.777h13.204l1.622-6.717h.347c1.235 2.393 3.088 4.285 5.56 5.675 2.47 1.39 5.213 2.085 8.225 2.085 5.404 0 9.382-2.491 11.931-7.471 2.548-4.982 3.823-12.76 3.823-23.341V64.23c0-7.953-.484-14.17-1.448-18.65'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
-    center no-repeat;
+  margin-left: 0.25rem;
+  width: 5rem;
 }
 
 .youTubeFacade span {
diff --git a/apps/demo/src/Views/Ui/index.css b/apps/demo/src/Views/Ui/index.css
index 9981b0201..e708bc94b 100644
--- a/apps/demo/src/Views/Ui/index.css
+++ b/apps/demo/src/Views/Ui/index.css
@@ -1,14 +1,13 @@
 .demo-button .container,
 .demo-modal .container {
-  display: flex;
   align-items: center;
-  gap: 1rem;
+  display: flex;
   flex-wrap: wrap;
+  gap: 1rem;
 }
 
 .demo-switch-input .container {
   display: flex;
-  flex-direction: column;
+  flex-flow: column wrap;
   gap: 1rem;
-  flex-wrap: wrap;
 }
diff --git a/apps/demo/src/Views/Ui/pages.tsx b/apps/demo/src/Views/Ui/pages.tsx
index 7a6bd3c00..e22b8bbb6 100644
--- a/apps/demo/src/Views/Ui/pages.tsx
+++ b/apps/demo/src/Views/Ui/pages.tsx
@@ -1,10 +1,12 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Outlet } from "react-router-dom";
 
+import { Demo } from "../../components/Demo";
 import { AccordionDemo } from "./components/AccordionDemo";
 import { ButtonDemo } from "./components/Button";
 import { CardDemo } from "./components/CardDemo";
 import { ConfirmationModalDemo } from "./components/ConfirmationModal";
+import { CountryDisplayDemo } from "./components/CountryDisplay/CountryDisplayDemo";
 import { DataDemo } from "./components/DataComponent";
 import { DropdownMenuDemo } from "./components/DropdownMenuDemo";
 import { EditableTitleDemo } from "./components/EditableTitleDemo";
@@ -23,6 +25,7 @@ import {
   TextareaDemo,
   TypeaheadDemo,
 } from "./components/FormWidgets";
+import { CountryPickerDemo } from "./components/FormWidgets/CountryPicker";
 import { GridContainerDemo } from "./components/GridContainerDemo";
 import { InlineLinkDemo } from "./components/InlineLinkDemo";
 import { LoadingDemo } from "./components/Loading";
@@ -39,9 +42,6 @@ import { TabViewDemo } from "./components/TabView";
 import { TagDemo } from "./components/Tag/Tag";
 import { TooltipDemo } from "./components/Tooltip";
 import { YoutubeFacadeDemo } from "./components/YoutubeFacade";
-import { Demo } from "../../components/Demo";
-import { CountryDisplayDemo } from "./components/CountryDisplay/CountryDisplayDemo";
-import { CountryPickerDemo } from "./components/FormWidgets/CountryPicker";
 
 export const UI_ROUTES = {
   ACCORDION: "/ui/accordion",
@@ -51,20 +51,20 @@ export const UI_ROUTES = {
   CHECKBOX_INPUT: "/ui/checkbox-input",
   CONFIRMATION_MODAL: "/ui/confirmation-modal",
   COUNTRY_DISPLAY: "/ui/country-display",
-  CURRENCY_SELECTOR: "/ui/currency-picker",
   COUNTRY_PICKER: "/ui/country-picker",
+  CURRENCY_SELECTOR: "/ui/currency-picker",
   DATA_COMPONENT: "/ui/data-component",
   DROPDOWN_MENU: "/ui/dropdown-menu",
   EDITABLE_TITLE: "/ui/editable-title",
   EXPORT_BUTTON: "/ui/export-xlsx",
+  FILE_CARD: "/ui/file-card",
   FILES_LIST: "/ui/files-list",
   FILES_PRESENTATION: "/ui/files-presentation",
   FILES_TABLE: "/ui/files-table",
-  FILE_CARD: "/ui/file-card",
   GET_STARTED: "/ui",
   GRID_CONTAINER: "/ui/grid-container",
-  INPUT: "/ui/input",
   INLINE_LINK: "/ui/inline-link",
+  INPUT: "/ui/input",
   LOADING: "/ui/loading",
   LOCAL_DATA_TABLE: "/ui/local-table",
   MESSAGE: "/ui/message",
@@ -89,218 +89,218 @@ export const UI_ROUTES = {
 
 const BUTTONS_ROUTES = [
   {
-    path: UI_ROUTES.BUTTON,
-    key: "button.title",
     element: <ButtonDemo />,
+    key: "button.title",
+    path: UI_ROUTES.BUTTON,
   },
   {
-    path: UI_ROUTES.EXPORT_BUTTON,
-    key: "exportButton.title",
     element: <ExportButtonDemo />,
+    key: "exportButton.title",
+    path: UI_ROUTES.EXPORT_BUTTON,
   },
   {
-    path: UI_ROUTES.SUBMIT_BUTTON,
-    key: "submitButton.title",
     element: <SubmitButtonDemo />,
+    key: "submitButton.title",
+    path: UI_ROUTES.SUBMIT_BUTTON,
   },
 ];
 
 const DATA_COMPONENT_ROUTES = [
   {
-    path: UI_ROUTES.DATA_COMPONENT,
-    key: "data.title",
     element: <DataDemo />,
+    key: "data.title",
+    path: UI_ROUTES.DATA_COMPONENT,
   },
   {
-    path: UI_ROUTES.TABLE,
-    key: "table.title",
     element: <TableDemo />,
+    key: "table.title",
+    path: UI_ROUTES.TABLE,
   },
   {
-    path: UI_ROUTES.COUNTRY_DISPLAY,
-    key: "countryDisplay.title",
     element: <CountryDisplayDemo />,
+    key: "countryDisplay.title",
+    path: UI_ROUTES.COUNTRY_DISPLAY,
   },
 ];
 
 const FILE_ROUTES = [
   {
-    path: UI_ROUTES.FILE_CARD,
-    key: "fileCard.title",
     element: <FileCardDemo />,
+    key: "fileCard.title",
+    path: UI_ROUTES.FILE_CARD,
   },
   {
-    path: UI_ROUTES.FILES_LIST,
-    key: "filesList.title",
     element: <FilesListDemo />,
+    key: "filesList.title",
+    path: UI_ROUTES.FILES_LIST,
   },
   {
-    path: UI_ROUTES.FILES_PRESENTATION,
-    key: "filesPresentation.title",
     element: <FilesPresentationDemo />,
+    key: "filesPresentation.title",
+    path: UI_ROUTES.FILES_PRESENTATION,
   },
   {
-    path: UI_ROUTES.FILES_TABLE,
-    key: "filesTable.title",
     element: <FilesTableDemo />,
+    key: "filesTable.title",
+    path: UI_ROUTES.FILES_TABLE,
   },
 ];
 
 const FORM_WIDGETS_ROUTES = [
   {
-    path: UI_ROUTES.CHECKBOX,
-    key: "checkbox.title",
     element: <CheckboxDemo />,
+    key: "checkbox.title",
+    path: UI_ROUTES.CHECKBOX,
   },
   {
-    path: UI_ROUTES.CHECKBOX_INPUT,
-    key: "checkboxInput.title",
     element: <CheckboxInputDemo />,
+    key: "checkboxInput.title",
+    path: UI_ROUTES.CHECKBOX_INPUT,
   },
   {
-    path: UI_ROUTES.COUNTRY_PICKER,
-    key: "countryPicker.title",
     element: <CountryPickerDemo />,
+    key: "countryPicker.title",
+    path: UI_ROUTES.COUNTRY_PICKER,
   },
   {
-    path: UI_ROUTES.CURRENCY_SELECTOR,
-    key: "currencyPicker.title",
     element: <CurrencyPickerDemo />,
+    key: "currencyPicker.title",
+    path: UI_ROUTES.CURRENCY_SELECTOR,
   },
   {
-    path: UI_ROUTES.INPUT,
-    key: "input.title",
     element: <InputDemo />,
+    key: "input.title",
+    path: UI_ROUTES.INPUT,
   },
   {
-    path: UI_ROUTES.SELECT,
-    key: "select.title",
     element: <SelectDemo />,
+    key: "select.title",
+    path: UI_ROUTES.SELECT,
   },
   {
-    path: UI_ROUTES.SWITCH_INPUT,
-    key: "switchInput.title",
     element: <SwitchInputDemo />,
+    key: "switchInput.title",
+    path: UI_ROUTES.SWITCH_INPUT,
   },
   {
-    path: UI_ROUTES.TEXTAREA,
-    key: "textarea.title",
     element: <TextareaDemo />,
+    key: "textarea.title",
+    path: UI_ROUTES.TEXTAREA,
   },
   {
-    path: UI_ROUTES.TYPEAHEAD,
-    key: "typeahead.title",
     element: <TypeaheadDemo />,
+    key: "typeahead.title",
+    path: UI_ROUTES.TYPEAHEAD,
   },
 ];
 
 const MENU_ROUTES = [
   {
-    path: UI_ROUTES.DROPDOWN_MENU,
-    key: "dropdownMenu.title",
     element: <DropdownMenuDemo />,
+    key: "dropdownMenu.title",
+    path: UI_ROUTES.DROPDOWN_MENU,
   },
 ];
 
 const MESSAGES_ROUTES = [
   {
-    path: UI_ROUTES.MESSAGE,
-    key: "message.title",
     element: <MessageDemo />,
+    key: "message.title",
+    path: UI_ROUTES.MESSAGE,
   },
 ];
 
 const MISC_ROUTES = [
   {
-    path: UI_ROUTES.EDITABLE_TITLE,
-    key: "editableTitle.title",
     element: <EditableTitleDemo />,
+    key: "editableTitle.title",
+    path: UI_ROUTES.EDITABLE_TITLE,
   },
   {
-    path: UI_ROUTES.GRID_CONTAINER,
-    key: "gridContainer.title",
     element: <GridContainerDemo />,
+    key: "gridContainer.title",
+    path: UI_ROUTES.GRID_CONTAINER,
   },
   {
-    path: UI_ROUTES.LOADING,
-    key: "loading.title",
     element: <LoadingDemo />,
+    key: "loading.title",
+    path: UI_ROUTES.LOADING,
   },
   {
-    path: UI_ROUTES.PAGE_DEMO,
-    key: "page.title.menu",
     element: <PageDemo />,
+    key: "page.title.menu",
+    path: UI_ROUTES.PAGE_DEMO,
   },
   {
-    path: UI_ROUTES.SORTABLE_LIST,
-    key: "sortableList.title",
     element: <SortableListDemo />,
+    key: "sortableList.title",
+    path: UI_ROUTES.SORTABLE_LIST,
   },
   {
-    path: UI_ROUTES.TAG,
-    key: "tag.title",
     element: <TagDemo />,
+    key: "tag.title",
+    path: UI_ROUTES.TAG,
   },
   {
-    path: UI_ROUTES.YOUTUBE_FACADE,
-    key: "youtubeFacade.title",
     element: <YoutubeFacadeDemo />,
+    key: "youtubeFacade.title",
+    path: UI_ROUTES.YOUTUBE_FACADE,
   },
   {
-    path: UI_ROUTES.INLINE_LINK,
-    key: "inlineLink.title",
     element: <InlineLinkDemo />,
+    key: "inlineLink.title",
+    path: UI_ROUTES.INLINE_LINK,
   },
 ];
 
 const OVERLAY_ROUTES = [
   {
-    path: UI_ROUTES.CONFIRMATION_MODAL,
-    key: "confirmationModal.title",
     element: <ConfirmationModalDemo />,
+    key: "confirmationModal.title",
+    path: UI_ROUTES.CONFIRMATION_MODAL,
   },
   {
-    path: UI_ROUTES.MODAL,
-    key: "modal.title",
     element: <ModalDemo />,
+    key: "modal.title",
+    path: UI_ROUTES.MODAL,
   },
   {
-    path: UI_ROUTES.POPUP,
-    key: "popup.title",
     element: <PopupDemo />,
+    key: "popup.title",
+    path: UI_ROUTES.POPUP,
   },
   {
-    path: UI_ROUTES.TOOLTIP,
-    key: "tooltip.title",
     element: <TooltipDemo />,
+    key: "tooltip.title",
+    path: UI_ROUTES.TOOLTIP,
   },
 ];
 
 const PANEL_ROUTES = [
   {
-    path: UI_ROUTES.ACCORDION,
-    key: "accordion.title",
     element: <AccordionDemo />,
+    key: "accordion.title",
+    path: UI_ROUTES.ACCORDION,
   },
   {
-    path: UI_ROUTES.CARD,
-    key: "card.title",
     element: <CardDemo />,
+    key: "card.title",
+    path: UI_ROUTES.CARD,
   },
   {
-    path: UI_ROUTES.STEPPER,
-    key: "stepper.title",
     element: <StepperDemo />,
+    key: "stepper.title",
+    path: UI_ROUTES.STEPPER,
   },
   {
-    path: UI_ROUTES.TABBED_PANEL,
-    key: "tabbedPanel.title",
     element: <TabbedPanelDemo />,
+    key: "tabbedPanel.title",
+    path: UI_ROUTES.TABBED_PANEL,
   },
   {
-    path: UI_ROUTES.TABVIEW,
-    key: "tabview.title",
     element: <TabViewDemo />,
+    key: "tabview.title",
+    path: UI_ROUTES.TABVIEW,
   },
 ];
 
@@ -324,79 +324,79 @@ export const Pages = () => {
     {
       label: t("headers.buttons"),
       submenu: [
-        ...BUTTONS_ROUTES.map(({ path, key }) => {
-          return { route: path, label: t(key) };
+        ...BUTTONS_ROUTES.map(({ key, path }) => {
+          return { label: t(key), route: path };
         }),
       ],
     },
     {
       label: t("headers.data"),
       submenu: [
-        ...DATA_COMPONENT_ROUTES.map(({ path, key }) => {
-          return { route: path, label: t(key) };
+        ...DATA_COMPONENT_ROUTES.map(({ key, path }) => {
+          return { label: t(key), route: path };
         }),
       ],
     },
     {
       label: t("headers.file"),
       submenu: [
-        ...FILE_ROUTES.map(({ path, key }) => {
-          return { route: path, label: t(key) };
+        ...FILE_ROUTES.map(({ key, path }) => {
+          return { label: t(key), route: path };
         }),
       ],
     },
     {
       label: t("headers.formWidgets"),
       submenu: [
-        ...FORM_WIDGETS_ROUTES.map(({ path, key }) => {
-          return { route: path, label: t(key) };
+        ...FORM_WIDGETS_ROUTES.map(({ key, path }) => {
+          return { label: t(key), route: path };
         }),
       ],
     },
     {
       label: t("headers.menu"),
       submenu: [
-        ...MENU_ROUTES.map(({ path, key }) => {
-          return { route: path, label: t(key) };
+        ...MENU_ROUTES.map(({ key, path }) => {
+          return { label: t(key), route: path };
         }),
       ],
     },
     {
       label: t("headers.messages"),
       submenu: [
-        ...MESSAGES_ROUTES.map(({ path, key }) => {
-          return { route: path, label: t(key) };
+        ...MESSAGES_ROUTES.map(({ key, path }) => {
+          return { label: t(key), route: path };
         }),
       ],
     },
     {
       label: t("headers.overlay"),
       submenu: [
-        ...OVERLAY_ROUTES.map(({ path, key }) => {
-          return { route: path, label: t(key) };
+        ...OVERLAY_ROUTES.map(({ key, path }) => {
+          return { label: t(key), route: path };
         }),
       ],
     },
     {
       label: t("headers.panel"),
       submenu: [
-        ...PANEL_ROUTES.map(({ path, key }) => {
-          return { route: path, label: t(key) };
+        ...PANEL_ROUTES.map(({ key, path }) => {
+          return { label: t(key), route: path };
         }),
       ],
     },
     {
       label: t("headers.misc"),
       submenu: [
-        ...MISC_ROUTES.map(({ path, key }) => {
-          return { route: path, label: t(key) };
+        ...MISC_ROUTES.map(({ key, path }) => {
+          return { label: t(key), route: path };
         }),
       ],
     },
   ];
 
   return (
-    <Demo subnav={subnav} isGrouped>
+    <Demo isGrouped subnav={subnav}>
       <Outlet />
     </Demo>
   );
diff --git a/apps/demo/src/Views/User/components/AllUsersTable.tsx b/apps/demo/src/Views/User/components/AllUsersTable.tsx
index 2bb2d35b1..2a57416e2 100644
--- a/apps/demo/src/Views/User/components/AllUsersTable.tsx
+++ b/apps/demo/src/Views/User/components/AllUsersTable.tsx
@@ -3,8 +3,8 @@ import { Button, Page } from "@prefabs.tech/react-ui";
 import { AllUsersTable } from "@prefabs.tech/react-user";
 import { useNavigate } from "react-router-dom";
 
-import { allUsers } from "./data";
 import { Section } from "../../../components/Demo";
+import { allUsers } from "./data";
 
 export const AllUsersTableDemo = () => {
   const [t] = useTranslation("user");
@@ -15,10 +15,10 @@ export const AllUsersTableDemo = () => {
       title={t("allUsersTable.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
diff --git a/apps/demo/src/Views/User/components/InvitationForm/InvitationForm.tsx b/apps/demo/src/Views/User/components/InvitationForm/InvitationForm.tsx
index f5cc137c5..609ff4299 100644
--- a/apps/demo/src/Views/User/components/InvitationForm/InvitationForm.tsx
+++ b/apps/demo/src/Views/User/components/InvitationForm/InvitationForm.tsx
@@ -15,25 +15,25 @@ export const InvitationFormDemo = () => {
       title={t("invitationForm.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section title={t("invitationForm.usage.withAppField")}>
         <InvitationForm
-          onSubmitted={() => {}}
-          onCancel={() => {}}
           apps={apps}
+          onCancel={() => {}}
+          onSubmitted={() => {}}
         />
       </Section>
 
       <Section title={t("invitationForm.usage.withRoleField")}>
         <InvitationForm
-          onSubmitted={() => {}}
           onCancel={() => {}}
+          onSubmitted={() => {}}
           roles={roles}
         />
       </Section>
@@ -44,8 +44,8 @@ export const InvitationFormDemo = () => {
             display: true,
             mode: "calendar",
           }}
-          onSubmitted={() => {}}
           onCancel={() => {}}
+          onSubmitted={() => {}}
           roles={roles}
         />
       </Section>
@@ -56,8 +56,8 @@ export const InvitationFormDemo = () => {
             display: true,
             mode: "input",
           }}
-          onSubmitted={() => {}}
           onCancel={() => {}}
+          onSubmitted={() => {}}
           roles={roles}
         />
       </Section>
diff --git a/apps/demo/src/Views/User/components/InvitationModal.tsx b/apps/demo/src/Views/User/components/InvitationModal.tsx
index ff8b4df7b..d513e4a73 100644
--- a/apps/demo/src/Views/User/components/InvitationModal.tsx
+++ b/apps/demo/src/Views/User/components/InvitationModal.tsx
@@ -15,10 +15,10 @@ export const InvitationModalDemo = () => {
       title={t("invitationModal.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
diff --git a/apps/demo/src/Views/User/components/InvitationsTable.tsx b/apps/demo/src/Views/User/components/InvitationsTable.tsx
index ec019019f..fff954c32 100644
--- a/apps/demo/src/Views/User/components/InvitationsTable.tsx
+++ b/apps/demo/src/Views/User/components/InvitationsTable.tsx
@@ -3,14 +3,14 @@ import { Button, Page } from "@prefabs.tech/react-ui";
 import { InvitationsTable } from "@prefabs.tech/react-user";
 import { useNavigate } from "react-router-dom";
 
-import { invitations } from "./data";
 import { Section } from "../../../components/Demo";
+import { invitations } from "./data";
 
 export const InvitationsTableDemo = () => {
   const [t] = useTranslation("user");
   const navigate = useNavigate();
 
-  const isExpired = (date?: string | Date | number) => {
+  const isExpired = (date?: Date | number | string) => {
     return !!(date && new Date(date) < new Date());
   };
 
@@ -19,19 +19,19 @@ export const InvitationsTableDemo = () => {
       title={t("invitationsTable.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
         <InvitationsTable
           appFilterOptions={[
-            { value: "1", label: "1" },
-            { value: "2", label: "2" },
-            { value: "3", label: "3" },
+            { label: "1", value: "1" },
+            { label: "2", value: "2" },
+            { label: "3", value: "3" },
           ]}
           columns={[
             {
@@ -68,7 +68,7 @@ export const InvitationsTableDemo = () => {
                   return true;
                 }
 
-                const { acceptedAt, revokedAt, expiresAt } = row.original;
+                const { acceptedAt, expiresAt, revokedAt } = row.original;
 
                 const getCellValue = () => {
                   if (acceptedAt) {
@@ -90,21 +90,21 @@ export const InvitationsTableDemo = () => {
               },
             },
           ]}
-          initialSorting={[{ id: "email", desc: false }]}
+          id="invitation-table"
+          initialSorting={[{ desc: false, id: "email" }]}
           invitations={invitations}
           onInvitationAdded={() => {}}
           roleFilterOptions={[
-            { value: "ADMIN", label: "ADMIN" },
-            { value: "SUPERADMIN", label: "SUPERADMIN" },
-            { value: "USER", label: "USER" },
+            { label: "ADMIN", value: "ADMIN" },
+            { label: "SUPERADMIN", value: "SUPERADMIN" },
+            { label: "USER", value: "USER" },
           ]}
           statusFilterOptions={[
-            { value: "accepted", label: "Accepted" },
-            { value: "expired", label: "Expired" },
-            { value: "pending", label: "Pending" },
-            { value: "revoked", label: "Revoked" },
+            { label: "Accepted", value: "accepted" },
+            { label: "Expired", value: "expired" },
+            { label: "Pending", value: "pending" },
+            { label: "Revoked", value: "revoked" },
           ]}
-          id="invitation-table"
         />
       </Section>
     </Page>
diff --git a/apps/demo/src/Views/User/components/UsersTable.tsx b/apps/demo/src/Views/User/components/UsersTable.tsx
index 504bf879e..fc31945f2 100644
--- a/apps/demo/src/Views/User/components/UsersTable.tsx
+++ b/apps/demo/src/Views/User/components/UsersTable.tsx
@@ -3,8 +3,8 @@ import { Button, Page } from "@prefabs.tech/react-ui";
 import { UsersTable } from "@prefabs.tech/react-user";
 import { useNavigate } from "react-router-dom";
 
-import { allUsers } from "./data";
 import { Section } from "../../../components/Demo";
+import { allUsers } from "./data";
 
 export const UsersTableDemo = () => {
   const [t] = useTranslation("user");
@@ -15,17 +15,24 @@ export const UsersTableDemo = () => {
       title={t("usersTable.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >
       <Section>
         <UsersTable
-          users={allUsers}
+          id="users-table"
+          initialSorting={[{ desc: false, id: "email" }]}
           onInvitationAdded={() => {}}
+          roleFilterOptions={[
+            { label: "ADMIN", value: "ADMIN" },
+            { label: "SUPERADMIN", value: "SUPERADMIN" },
+            { label: "USER", value: "USER" },
+          ]}
+          users={allUsers}
           visibleColumns={[
             "email",
             "name",
@@ -34,13 +41,6 @@ export const UsersTableDemo = () => {
             "disabled",
             "actions",
           ]}
-          initialSorting={[{ id: "email", desc: false }]}
-          roleFilterOptions={[
-            { value: "ADMIN", label: "ADMIN" },
-            { value: "SUPERADMIN", label: "SUPERADMIN" },
-            { value: "USER", label: "USER" },
-          ]}
-          id="users-table"
         />
       </Section>
     </Page>
diff --git a/apps/demo/src/Views/User/components/data.ts b/apps/demo/src/Views/User/components/data.ts
index 68da4bd4a..50f40f1f3 100644
--- a/apps/demo/src/Views/User/components/data.ts
+++ b/apps/demo/src/Views/User/components/data.ts
@@ -31,408 +31,408 @@ export const apps = [
 
 export const allUsers = [
   {
-    id: "user-1",
+    disabled: false,
     email: "john@prefabs.tech.com",
     givenName: "John",
+    id: "user-1",
+    invitedBy: null,
+    isActiveUser: true,
+    name: "John Doe",
     roles: ["USER"],
+    signedUpAt: "2023-08-10T08:00:00Z",
     surname: "Doe",
     username: "johndoe",
-    isActiveUser: true,
-    invitedBy: null,
-    signedUpAt: "2023-08-10T08:00:00Z",
-    disabled: false,
-    name: "John Doe",
   },
   {
-    id: "invitation-123",
+    disabled: true,
     email: "jane@prefabs.tech.com",
     givenName: "Jane",
-    roles: ["ADMIN"],
-    surname: "Smith",
-    username: "janesmith",
-    isActiveUser: false,
+    id: "invitation-123",
     invitedBy: {
-      id: "user-2",
       email: "admin@prefabs.tech.com",
       givenName: "Admin",
+      id: "user-2",
+      isActiveUser: true,
       roles: ["USER"],
       surname: "User",
       username: "admin",
-      isActiveUser: true,
     },
-    disabled: true,
+    isActiveUser: false,
     name: "Jane Smith",
+    roles: ["ADMIN"],
+    surname: "Smith",
+    username: "janesmith",
   },
   {
-    id: "user-3",
+    disabled: false,
     email: "alice@prefabs.tech.com",
     givenName: "Alice",
+    id: "user-3",
+    invitedBy: null,
+    isActiveUser: true,
+    name: "Alice Johnson",
     roles: ["USER"],
+    signedUpAt: "2023-08-08T10:30:00Z",
     surname: "Johnson",
     username: "alicej",
-    isActiveUser: true,
-    invitedBy: null,
-    signedUpAt: "2023-08-08T10:30:00Z",
-    disabled: false,
-    name: "Alice Johnson",
   },
   {
-    id: "invitation-456",
+    disabled: false,
     email: "bob@prefabs.tech.com",
     givenName: "Bob",
-    roles: ["ADMIN"],
-    surname: "Williams",
-    username: "bobw",
-    isActiveUser: false,
-    disabled: false,
+    id: "invitation-456",
     invitedBy: {
-      id: "user-4",
       email: "charlie@prefabs.tech.com",
       givenName: "Charlie",
+      id: "user-4",
+      isActiveUser: true,
       roles: ["USER"],
       surname: "Brown",
       username: "charlieb",
-      isActiveUser: true,
     },
+    isActiveUser: false,
     name: "Bob Williams",
+    roles: ["ADMIN"],
+    surname: "Williams",
+    username: "bobw",
   },
   {
-    id: "user-6",
+    disabled: true,
     email: "george@prefabs.tech.com",
     givenName: "george",
+    id: "user-6",
+    invitedBy: null,
+    isActiveUser: true,
+    name: "George Williams",
     roles: ["USER"],
+    signedUpAt: "2023-10-10T08:00:00Z",
     surname: "williams",
     username: "george",
-    isActiveUser: true,
-    invitedBy: null,
-    signedUpAt: "2023-10-10T08:00:00Z",
-    disabled: true,
-    name: "George Williams",
   },
 ];
 
 export const invitations = [
   {
-    id: 456,
+    acceptedAt: null,
     appId: 2,
     createdAt: new Date("2024-01-05").getTime(),
-    expiresAt: new Date("2024-02-04").getTime(),
     email: "bob@prefabs.tech.com",
-    payload: null,
-    invitedById: "user-4",
-    revokedAt: new Date("2024-01-14").getTime(),
-    acceptedAt: null,
-    role: "USER",
-    updatedAt: new Date("2024-01-14").getTime(),
+    expiresAt: new Date("2024-02-04").getTime(),
+    id: 456,
     invitedBy: {
-      id: "user-4",
+      disabled: false,
       email: "charlie@prefabs.tech.com",
       givenName: "Charlie",
+      id: "user-4",
+      isActiveUser: true,
       roles: ["USER"],
       surname: "Brown",
       username: "charlieb",
-      isActiveUser: true,
-      disabled: false,
     },
+    invitedById: "user-4",
+    payload: null,
+    revokedAt: new Date("2024-01-14").getTime(),
+    role: "USER",
+    updatedAt: new Date("2024-01-14").getTime(),
   },
   {
-    id: 123,
+    acceptedAt: null,
     appId: 3,
     createdAt: new Date("2024-01-05").getTime(),
-    expiresAt: new Date("2024-02-04").getTime(),
     email: "jane@prefabs.tech.com",
+    expiresAt: new Date("2024-02-04").getTime(),
     givenName: "Jane",
-    payload: null,
-    invitedById: "user-2",
-    revokedAt: null,
-    acceptedAt: null,
-    role: "ADMIN",
-    updatedAt: new Date("2024-01-24").getTime(),
+    id: 123,
     invitedBy: {
-      id: "user-2",
+      disabled: false,
       email: "admin@prefabs.tech.com",
       givenName: "Admin",
+      id: "user-2",
+      isActiveUser: true,
       roles: ["USER"],
       surname: "User",
       username: "admin",
-      isActiveUser: true,
-      disabled: false,
     },
+    invitedById: "user-2",
+    payload: null,
+    revokedAt: null,
+    role: "ADMIN",
+    updatedAt: new Date("2024-01-24").getTime(),
   },
   {
-    id: 789,
+    acceptedAt: new Date("2024-02-24").getTime(),
     appId: 2,
     createdAt: new Date("2024-01-05").getTime(),
-    expiresAt: new Date().getTime() + 4 * 24 * 60 * 60 * 1000,
-    payload: null,
     email: "june@prefabs.tech.com",
-    invitedById: "user-8",
-    revokedAt: null,
-    acceptedAt: new Date("2024-02-24").getTime(),
-    role: "USER",
-    updatedAt: new Date("2024-01-24").getTime(),
+    expiresAt: new Date().getTime() + 4 * 24 * 60 * 60 * 1000,
+    id: 789,
     invitedBy: {
-      id: "user-8",
+      disabled: true,
       email: "jonny@prefabs.tech.com",
       givenName: "jonny",
+      id: "user-8",
+      isActiveUser: true,
       roles: ["USER"],
       surname: "smith",
       username: "admin",
-      isActiveUser: true,
-      disabled: true,
     },
+    invitedById: "user-8",
+    payload: null,
+    revokedAt: null,
+    role: "USER",
+    updatedAt: new Date("2024-01-24").getTime(),
   },
   {
-    id: 789,
+    acceptedAt: null,
     appId: 2,
     createdAt: new Date("2024-01-05").getTime(),
-    expiresAt: new Date().getTime() + 4 * 24 * 60 * 60 * 1000,
-    payload: null,
     email: "janet@prefabs.tech.com",
-    invitedById: "user-8",
-    revokedAt: null,
-    acceptedAt: null,
-    role: "ADMIN",
-    updatedAt: new Date("2024-01-24").getTime(),
+    expiresAt: new Date().getTime() + 4 * 24 * 60 * 60 * 1000,
+    id: 789,
     invitedBy: {
-      id: "user-8",
+      disabled: true,
       email: "jolly@prefabs.tech.com",
       givenName: "jolly",
+      id: "user-8",
+      isActiveUser: true,
       roles: ["USER"],
       surname: "doe",
       username: "admin",
-      isActiveUser: true,
-      disabled: true,
     },
+    invitedById: "user-8",
+    payload: null,
+    revokedAt: null,
+    role: "ADMIN",
+    updatedAt: new Date("2024-01-24").getTime(),
   },
   {
-    id: 890,
+    acceptedAt: null,
     appId: 2,
     createdAt: new Date("2024-01-10").getTime(),
-    expiresAt: new Date().getTime() + 4 * 24 * 60 * 60 * 1000,
-    payload: null,
     email: "alexander.smith1234@prefabs.tech.com",
-    invitedById: "user-15",
-    revokedAt: null,
-    acceptedAt: null,
-    role: "ADMIN",
-    updatedAt: new Date("2024-01-24").getTime(),
+    expiresAt: new Date().getTime() + 4 * 24 * 60 * 60 * 1000,
+    id: 890,
     invitedBy: {
-      id: "user-15",
+      disabled: true,
       email: "michelle.williams@prefabs.tech.com",
       givenName: "Michelle Alexandra",
+      id: "user-15",
+      isActiveUser: true,
       roles: ["USER"],
       surname: "Williams-Smithson",
       username: "admin",
-      isActiveUser: true,
-      disabled: true,
     },
+    invitedById: "user-15",
+    payload: null,
+    revokedAt: null,
+    role: "ADMIN",
+    updatedAt: new Date("2024-01-24").getTime(),
   },
   {
-    id: 891,
+    acceptedAt: null,
     appId: 2,
     createdAt: new Date("2024-03-01").getTime(),
-    expiresAt: new Date("2024-05-01").getTime(),
-    payload: null,
     email: "george.harrison@prefabs.tech.com",
-    invitedById: "user-22",
-    revokedAt: null,
-    acceptedAt: null,
-    role: "USER",
-    updatedAt: new Date("2024-03-03").getTime(),
+    expiresAt: new Date("2024-05-01").getTime(),
+    id: 891,
     invitedBy: {
-      id: "user-22",
+      disabled: false,
       email: "robert.johnson@prefabs.tech.com",
       givenName: "Robert James",
+      id: "user-22",
+      isActiveUser: true,
       roles: ["USER"],
       surname: "Johnson-Longstreet",
       username: "moderator_robert",
-      isActiveUser: true,
-      disabled: false,
     },
+    invitedById: "user-22",
+    payload: null,
+    revokedAt: null,
+    role: "USER",
+    updatedAt: new Date("2024-03-03").getTime(),
   },
   {
-    id: 892,
+    acceptedAt: null,
     appId: 2,
     createdAt: new Date("2024-01-15").getTime(),
-    expiresAt: new Date("2024-03-15").getTime(),
-    payload: null,
     email: "lucas.martins@prefabs.techech.com",
-    invitedById: "user-34",
-    revokedAt: null,
-    acceptedAt: null,
-    role: "USER",
-    updatedAt: new Date("2024-01-18").getTime(),
+    expiresAt: new Date("2024-03-15").getTime(),
+    id: 892,
     invitedBy: {
-      id: "user-34",
+      disabled: true,
       email: "david.jones@prefabs.tech.com",
       givenName: "David William",
+      id: "user-34",
+      isActiveUser: true,
       roles: ["ADMIN", "MODERATOR"],
       surname: "Jones-Smith",
       username: "admin_david_jones",
-      isActiveUser: true,
-      disabled: true,
     },
+    invitedById: "user-34",
+    payload: null,
+    revokedAt: null,
+    role: "USER",
+    updatedAt: new Date("2024-01-18").getTime(),
   },
   {
-    id: 893,
+    acceptedAt: null,
     appId: 2,
     createdAt: new Date("2024-02-18").getTime(),
-    expiresAt: new Date("2024-04-20").getTime(),
-    payload: null,
     email: "olivia.clark@prefabs.tech.com",
-    invitedById: "user-18",
-    revokedAt: null,
-    acceptedAt: null,
-    role: "USER",
-    updatedAt: new Date("2024-02-21").getTime(),
+    expiresAt: new Date("2024-04-20").getTime(),
+    id: 893,
     invitedBy: {
-      id: "user-18",
+      disabled: false,
       email: "luke.martin@prefabs.tech.com",
       givenName: "Luke Robert",
+      id: "user-18",
+      isActiveUser: true,
       roles: ["USER"],
       surname: "Martin",
       username: "user_luke",
-      isActiveUser: true,
-      disabled: false,
     },
+    invitedById: "user-18",
+    payload: null,
+    revokedAt: null,
+    role: "USER",
+    updatedAt: new Date("2024-02-21").getTime(),
   },
   {
-    id: 894,
+    acceptedAt: null,
     appId: 2,
     createdAt: new Date("2024-03-05").getTime(),
-    expiresAt: new Date("2024-05-05").getTime(),
-    payload: null,
     email: "jackson.davis@prefabs.tech.com",
-    invitedById: "user-27",
-    revokedAt: null,
-    acceptedAt: null,
-    role: "ADMIN",
-    updatedAt: new Date("2024-03-07").getTime(),
+    expiresAt: new Date("2024-05-05").getTime(),
+    id: 894,
     invitedBy: {
-      id: "user-27",
+      disabled: false,
       email: "emma.white@prefabs.tech.com",
       givenName: "Emma Nicole",
+      id: "user-27",
+      isActiveUser: true,
       roles: ["ADMIN", "MODERATOR"],
       surname: "White",
       username: "superadmin_emma",
-      isActiveUser: true,
-      disabled: false,
     },
+    invitedById: "user-27",
+    payload: null,
+    revokedAt: null,
+    role: "ADMIN",
+    updatedAt: new Date("2024-03-07").getTime(),
   },
   {
-    id: 895,
+    acceptedAt: null,
     appId: 2,
     createdAt: new Date("2024-02-05").getTime(),
-    expiresAt: new Date("2024-04-06").getTime(),
-    payload: null,
     email: "sophia.brown@prefabs.tech.com",
-    invitedById: "user-10",
-    revokedAt: null,
-    acceptedAt: null,
-    role: "USER",
-    updatedAt: new Date("2024-02-12").getTime(),
+    expiresAt: new Date("2024-04-06").getTime(),
+    id: 895,
     invitedBy: {
-      id: "user-10",
+      disabled: false,
       email: "michael.green@prefabs.tech.com",
       givenName: "Michael Christopher",
+      id: "user-10",
+      isActiveUser: true,
       roles: ["ADMIN", "USER"],
       surname: "Green",
       username: "admin_michael",
-      isActiveUser: true,
-      disabled: false,
     },
+    invitedById: "user-10",
+    payload: null,
+    revokedAt: null,
+    role: "USER",
+    updatedAt: new Date("2024-02-12").getTime(),
   },
   {
-    id: 896,
+    acceptedAt: null,
     appId: 2,
     createdAt: new Date("2024-01-28").getTime(),
-    expiresAt: new Date("2024-03-28").getTime(),
-    payload: null,
     email: "madeline.james@prefabs.tech.com",
-    invitedById: "user-20",
-    revokedAt: null,
-    acceptedAt: null,
-    role: "USER",
-    updatedAt: new Date("2024-02-01").getTime(),
+    expiresAt: new Date("2024-03-28").getTime(),
+    id: 896,
     invitedBy: {
-      id: "user-20",
+      disabled: true,
       email: "brandon.kelly@prefabs.tech.org",
       givenName: "Brandon Nathaniel",
+      id: "user-20",
+      isActiveUser: true,
       roles: ["USER"],
       surname: "Kelly",
       username: "admin_bkelly",
-      isActiveUser: true,
-      disabled: true,
     },
+    invitedById: "user-20",
+    payload: null,
+    revokedAt: null,
+    role: "USER",
+    updatedAt: new Date("2024-02-01").getTime(),
   },
   {
-    id: 897,
+    acceptedAt: null,
     appId: 2,
     createdAt: new Date("2024-03-10").getTime(),
-    expiresAt: new Date("2024-05-10").getTime(),
-    payload: null,
     email: "ethan.miller@prefabs.tech.com",
-    invitedById: "user-5",
-    revokedAt: null,
-    acceptedAt: null,
-    role: "USER",
-    updatedAt: new Date("2024-03-12").getTime(),
+    expiresAt: new Date("2024-05-10").getTime(),
+    id: 897,
     invitedBy: {
-      id: "user-5",
+      disabled: false,
       email: "hannah.morris@prefabs.tech.com",
       givenName: "Hannah",
+      id: "user-5",
+      isActiveUser: true,
       roles: ["ADMIN"],
       surname: "Morris",
       username: "admin_hannah",
-      isActiveUser: true,
-      disabled: false,
     },
+    invitedById: "user-5",
+    payload: null,
+    revokedAt: null,
+    role: "USER",
+    updatedAt: new Date("2024-03-12").getTime(),
   },
   {
-    id: 898,
+    acceptedAt: null,
     appId: 2,
     createdAt: new Date("2024-02-25").getTime(),
-    expiresAt: new Date("2024-04-25").getTime(),
-    payload: null,
     email: "benjamin.martinez@prefabs.tech.com",
-    invitedById: "user-12",
-    revokedAt: null,
-    acceptedAt: null,
-    role: "ADMIN",
-    updatedAt: new Date("2024-02-28").getTime(),
+    expiresAt: new Date("2024-04-25").getTime(),
+    id: 898,
     invitedBy: {
-      id: "user-12",
+      disabled: false,
       email: "lucy.rodriguez@prefabs.tech.net",
       givenName: "Lucy Isabella",
+      id: "user-12",
+      isActiveUser: true,
       roles: ["ADMIN"],
       surname: "Rodriguez",
       username: "superadmin_lucy",
-      isActiveUser: true,
-      disabled: false,
     },
+    invitedById: "user-12",
+    payload: null,
+    revokedAt: null,
+    role: "ADMIN",
+    updatedAt: new Date("2024-02-28").getTime(),
   },
   {
-    id: 899,
+    acceptedAt: null,
     appId: 2,
     createdAt: new Date("2024-01-30").getTime(),
-    expiresAt: new Date("2024-03-30").getTime(),
-    payload: null,
     email: "claire.morgan@prefabs.tech.com",
-    invitedById: "user-16",
-    revokedAt: null,
-    acceptedAt: null,
-    role: "USER",
-    updatedAt: new Date("2024-02-02").getTime(),
+    expiresAt: new Date("2024-03-30").getTime(),
+    id: 899,
     invitedBy: {
-      id: "user-16",
+      disabled: false,
       email: "jacob.smith@prefabs.tech.com",
       givenName: "Jacob",
+      id: "user-16",
+      isActiveUser: true,
       roles: ["USER"],
       surname: "Smith",
       username: "user_jacobsmith",
-      isActiveUser: true,
-      disabled: false,
     },
+    invitedById: "user-16",
+    payload: null,
+    revokedAt: null,
+    role: "USER",
+    updatedAt: new Date("2024-02-02").getTime(),
   },
 ];
diff --git a/apps/demo/src/Views/User/pages.tsx b/apps/demo/src/Views/User/pages.tsx
index 1c888789f..6c3c084f1 100644
--- a/apps/demo/src/Views/User/pages.tsx
+++ b/apps/demo/src/Views/User/pages.tsx
@@ -1,47 +1,47 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Outlet } from "react-router-dom";
 
+import { Demo } from "../../components/Demo";
 import { AllUsersTableDemo } from "./components/AllUsersTable";
 import { InvitationFormDemo } from "./components/InvitationForm";
 import { InvitationModalDemo } from "./components/InvitationModal";
 import { InvitationsTableDemo } from "./components/InvitationsTable";
 import { UsersTableDemo } from "./components/UsersTable";
-import { Demo } from "../../components/Demo";
 
 export const USER_ROUTES = {
+  ALL_USERS_TABLE: "/user/all-users-table",
   GET_STARTED: "/user",
   INVITATION_FORM: "/user/invitation-form",
   INVITATION_MODAL: "/user/invitation-modal",
   INVITATIONS_TABLE: "/user/invitations-table",
   USERS_TABLE: "/user/users-table",
-  ALL_USERS_TABLE: "/user/all-users-table",
 };
 
 export const routes = [
   {
-    path: USER_ROUTES.INVITATION_FORM,
-    key: "invitationForm.title",
     element: <InvitationFormDemo />,
+    key: "invitationForm.title",
+    path: USER_ROUTES.INVITATION_FORM,
   },
   {
-    path: USER_ROUTES.INVITATION_MODAL,
-    key: "invitationModal.title",
     element: <InvitationModalDemo />,
+    key: "invitationModal.title",
+    path: USER_ROUTES.INVITATION_MODAL,
   },
   {
-    path: USER_ROUTES.INVITATIONS_TABLE,
-    key: "invitationsTable.title",
     element: <InvitationsTableDemo />,
+    key: "invitationsTable.title",
+    path: USER_ROUTES.INVITATIONS_TABLE,
   },
   {
-    path: USER_ROUTES.USERS_TABLE,
-    key: "usersTable.title",
     element: <UsersTableDemo />,
+    key: "usersTable.title",
+    path: USER_ROUTES.USERS_TABLE,
   },
   {
-    path: USER_ROUTES.ALL_USERS_TABLE,
-    key: "allUsersTable.title",
     element: <AllUsersTableDemo />,
+    key: "allUsersTable.title",
+    path: USER_ROUTES.ALL_USERS_TABLE,
   },
 ];
 
@@ -53,15 +53,15 @@ export const Pages = () => {
     {
       label: t("headers.components"),
       submenu: [
-        ...routes.map(({ path, key }) => {
-          return { route: path, label: t(key) };
+        ...routes.map(({ key, path }) => {
+          return { label: t(key), route: path };
         }),
       ],
     },
   ];
 
   return (
-    <Demo subnav={subnav} isGrouped>
+    <Demo isGrouped subnav={subnav}>
       <Outlet />
     </Demo>
   );
diff --git a/apps/demo/src/assets/css/code-block.css b/apps/demo/src/assets/css/code-block.css
index 780db60cc..9e03a7828 100644
--- a/apps/demo/src/assets/css/code-block.css
+++ b/apps/demo/src/assets/css/code-block.css
@@ -9,24 +9,18 @@
 
 .code-block pre {
   background-color: #f5f5f5;
-  padding: 1.5rem;
-  margin: 0;
   border-radius: 5px;
+  margin: 0;
   overflow-x: auto;
+  padding: 1.5rem;
   text-wrap: wrap;
 }
 
-.code-block .actions {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-}
-
 .code-block .actions {
   opacity: 0;
   position: absolute;
-  top: 0.5rem;
   right: 0.5rem;
+  top: 0.5rem;
   transition: all 0.3s ease-in-out;
 }
 
diff --git a/apps/demo/src/assets/css/country.css b/apps/demo/src/assets/css/country.css
index f405bdfad..d7155115e 100644
--- a/apps/demo/src/assets/css/country.css
+++ b/apps/demo/src/assets/css/country.css
@@ -1,9 +1,9 @@
 .country-display .custom-render {
+  align-items: center;
   background-color: #eef2ff;
   border: 1px solid var(--border-color, #e2e8f0);
   border-radius: 1rem;
   display: inline-flex;
-  align-items: center;
   gap: 0.5rem;
   padding: 0.25rem 1rem;
   width: 8rem;
diff --git a/apps/demo/src/assets/css/demo.css b/apps/demo/src/assets/css/demo.css
index e35070c09..64680a1e0 100644
--- a/apps/demo/src/assets/css/demo.css
+++ b/apps/demo/src/assets/css/demo.css
@@ -1,18 +1,18 @@
 .demo {
-  width: 100%;
-  height: 100%;
+  align-items: stretch;
   display: flex;
   flex-wrap: wrap;
-  align-items: stretch;
+  height: 100%;
+  width: 100%;
 }
 
 .demo > .demo-aside {
-  flex-basis: 17rem;
-  flex-grow: 1;
   display: flex;
+  flex-basis: 17rem;
   flex-direction: column;
-  padding: 1rem 1rem 1rem 0;
+  flex-grow: 1;
   gap: 1rem;
+  padding: 1rem 1rem 1rem 0;
 }
 
 .demo > .demo-main {
@@ -90,7 +90,7 @@
   font-weight: 600;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .demo > .demo-aside {
     border-right: 1px solid var(--border-color, #e5e7eb);
     height: 100%;
diff --git a/apps/demo/src/assets/css/header-addon.css b/apps/demo/src/assets/css/header-addon.css
index 5d37bb259..df232f0f8 100644
--- a/apps/demo/src/assets/css/header-addon.css
+++ b/apps/demo/src/assets/css/header-addon.css
@@ -8,9 +8,9 @@
 }
 
 .dz-layout .dz-header-container .header-addon {
-  grid-area: addon;
   color: var(--_layout-header-color);
   display: none;
+  grid-area: addon;
 }
 
 .dz-header-container .header-addon > a:hover {
@@ -23,7 +23,13 @@
     var(--dz-layout-nav-item-padding-h);
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
+  .dz-header-container .header-addon:hover {
+    background-color: var(--hover-bg, #e5e5e5);
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
   .dz-layout[aria-expanded="true"] .dz-header-container .header-addon {
     display: block;
     order: 1;
@@ -31,12 +37,6 @@
     var(--dz-layout-nav-item-padding-h);
   }
 
-  .dz-header-container .header-addon:hover {
-    background-color: var(--hover-bg, #e5e5e5);
-    border-radius: 5px;
-    cursor: pointer;
-  }
-
   .dz-header-container .dz-header-menu {
     order: 2;
   }
diff --git a/apps/demo/src/assets/css/home.css b/apps/demo/src/assets/css/home.css
index 49fc585ec..84cce8f93 100644
--- a/apps/demo/src/assets/css/home.css
+++ b/apps/demo/src/assets/css/home.css
@@ -1,11 +1,11 @@
 .dz-grid-container .package {
+  border: 1px solid rgb(0 0 0 / 20%);
   border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  padding: 1rem;
   gap: 0.25rem;
+  padding: 1rem;
 }
 
 .dz-grid-container .package:hover {
diff --git a/apps/demo/src/assets/css/index.css b/apps/demo/src/assets/css/index.css
index 2b72a6672..3ded2cc47 100644
--- a/apps/demo/src/assets/css/index.css
+++ b/apps/demo/src/assets/css/index.css
@@ -1,15 +1,14 @@
-@import "./vars.css";
-@import "./style.css";
-@import "./code-block.css";
-@import "./demo.css";
-
-@import "./data.css";
-@import "./editable-title.css";
-@import "./header-addon.css";
-@import "./home.css";
-@import "./inline-link.css";
-@import "./select.css";
-@import "./sticky-collapsible-footer.css";
-@import "./tab-view.css";
-@import "./table-border.css";
-@import "./table.css";
+@import url("./vars.css");
+@import url("./style.css");
+@import url("./code-block.css");
+@import url("./demo.css");
+@import url("./data.css");
+@import url("./editable-title.css");
+@import url("./header-addon.css");
+@import url("./home.css");
+@import url("./inline-link.css");
+@import url("./select.css");
+@import url("./sticky-collapsible-footer.css");
+@import url("./tab-view.css");
+@import url("./table-border.css");
+@import url("./table.css");
diff --git a/apps/demo/src/assets/css/sticky-collapsible-footer.css b/apps/demo/src/assets/css/sticky-collapsible-footer.css
index 955d048cc..5826dccc2 100644
--- a/apps/demo/src/assets/css/sticky-collapsible-footer.css
+++ b/apps/demo/src/assets/css/sticky-collapsible-footer.css
@@ -3,7 +3,7 @@
 }
 
 .demo-section .demo-section-content .sticky-collapsible .content {
-  padding: 1rem;
   display: flex;
   gap: 0.5rem;
+  padding: 1rem;
 }
diff --git a/apps/demo/src/assets/css/style.css b/apps/demo/src/assets/css/style.css
index d932c71f8..ba6fc1543 100644
--- a/apps/demo/src/assets/css/style.css
+++ b/apps/demo/src/assets/css/style.css
@@ -4,18 +4,18 @@
 
 .main-menu > ul > li:hover,
 .main-menu > ul > li .active {
-  text-decoration: underline;
   font-weight: normal;
+  text-decoration: underline;
 }
 
 code {
   background: lightgrey;
   border-radius: 0.25rem;
-  padding: 0.5rem 0.5rem;
   font-family: monospace;
+  padding: 0.5rem;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .dz-layout > header > .dz-header-container {
     flex-wrap: wrap;
   }
diff --git a/apps/demo/src/assets/css/table.css b/apps/demo/src/assets/css/table.css
index a36dea7e9..41052f7b2 100644
--- a/apps/demo/src/assets/css/table.css
+++ b/apps/demo/src/assets/css/table.css
@@ -1,39 +1,39 @@
 .demo-data-tables-page .column-name {
-  width: 14rem;
   max-width: 14rem;
   min-width: 14rem;
+  width: 14rem;
 }
 
 .demo-data-tables-page .column-age {
-  width: 12rem;
   max-width: 12rem;
   min-width: 12rem;
+  width: 12rem;
 }
 
 .demo-data-tables-page .column-city {
-  width: 13rem;
   max-width: 13rem;
   min-width: 13rem;
+  width: 13rem;
 }
 
 .demo-data-tables-page .column-country {
-  width: 15rem;
   max-width: 15rem;
   min-width: 15rem;
+  width: 15rem;
 }
 
 .demo-data-tables-page .column-quantity,
 .demo-data-tables-page .column-date,
 .demo-data-tables-page .column-amount {
-  width: 12rem;
   max-width: 12rem;
   min-width: 12rem;
+  width: 12rem;
 }
 
 .demo-data-tables-page .column-datetime {
-  width: 12rem;
   max-width: 12rem;
   min-width: 12rem;
+  width: 12rem;
 }
 
 .demo-data-tables-page .column-action {
@@ -41,31 +41,31 @@
 }
 
 .custom-static-filter-table .column-date {
-  width: 16rem;
   max-width: 16rem;
   min-width: 16rem;
+  width: 16rem;
 }
 
 .center-aligned-content-table .column-name {
-  width: 30rem;
   max-width: 30rem;
   min-width: 30rem;
+  width: 30rem;
 }
 
 .center-aligned-content-table .column-age {
-  width: 12rem;
   max-width: 12rem;
   min-width: 12rem;
+  width: 12rem;
 }
 
 .center-aligned-content-table .column-city {
-  width: 12rem;
   max-width: 12rem;
   min-width: 12rem;
+  width: 12rem;
 }
 
 .center-aligned-content-table .column-disabled {
-  width: 12rem;
   max-width: 12rem;
   min-width: 12rem;
+  width: 12rem;
 }
diff --git a/apps/demo/src/components/Demo/CodeBlock.tsx b/apps/demo/src/components/Demo/CodeBlock.tsx
index e73cf5047..6a46784f4 100644
--- a/apps/demo/src/components/Demo/CodeBlock.tsx
+++ b/apps/demo/src/components/Demo/CodeBlock.tsx
@@ -3,8 +3,8 @@ import { Button } from "@prefabs.tech/react-ui";
 import React, { useEffect, useRef, useState } from "react";
 
 const COPY_STATES = {
-  copy: { icon: "pi pi-copy", title: "codeBlock.copyStates.copy" },
   copied: { icon: "pi pi-check", title: "codeBlock.copyStates.copied" },
+  copy: { icon: "pi pi-copy", title: "codeBlock.copyStates.copy" },
   error: {
     icon: "pi pi-exclamation-triangle",
     title: "codeBlock.copyStates.error",
@@ -13,14 +13,14 @@ const COPY_STATES = {
 
 export const CodeBlock = ({
   autoFocus = false,
-  title,
   exampleCode,
   subheader,
+  title,
 }: {
   autoFocus?: boolean;
-  title?: string;
   exampleCode: string;
   subheader?: React.ReactNode;
+  title?: string;
 }) => {
   const [copyState, setCopyState] = useState(COPY_STATES.copy);
   const reference = useRef<HTMLDivElement>(null);
@@ -67,7 +67,7 @@ export const CodeBlock = ({
   };
 
   return (
-    <div ref={reference} className="code-block" autoFocus={autoFocus}>
+    <div autoFocus={autoFocus} className="code-block" ref={reference}>
       {renderHeader()}
 
       <pre>
@@ -78,9 +78,9 @@ export const CodeBlock = ({
         <Button
           className="copy"
           iconLeft={copyState.icon}
-          variant="outlined"
-          title={t(copyState.title)}
           onClick={handleCopyClick}
+          title={t(copyState.title)}
+          variant="outlined"
         ></Button>
       </div>
     </div>
diff --git a/apps/demo/src/components/Demo/Demo.tsx b/apps/demo/src/components/Demo/Demo.tsx
index e9733b0b3..b0d5bed50 100644
--- a/apps/demo/src/components/Demo/Demo.tsx
+++ b/apps/demo/src/components/Demo/Demo.tsx
@@ -3,16 +3,16 @@ import { ReactNode, useMemo, useRef } from "react";
 import { NavLink } from "react-router-dom";
 
 interface Properties {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  subnav: Array<any>;
   children?: ReactNode;
   isGrouped?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  subnav: Array<any>;
 }
 
 export const Demo: React.FC<Properties> = ({
-  subnav,
   children,
   isGrouped = false,
+  subnav,
 }) => {
   const demoMainReference = useRef<HTMLDivElement | null>(null);
 
@@ -26,7 +26,7 @@ export const Demo: React.FC<Properties> = ({
         {subnav.map((nav) => {
           return (
             <li key={nav.route}>
-              <NavLink to={nav.route} end>
+              <NavLink end to={nav.route}>
                 {nav.label}
               </NavLink>
             </li>
@@ -39,7 +39,7 @@ export const Demo: React.FC<Properties> = ({
   return (
     <div className="demo">
       <div className="demo-aside">{subnavigationMenu}</div>
-      <div ref={demoMainReference} className="demo-main">
+      <div className="demo-main" ref={demoMainReference}>
         {children}
       </div>
     </div>
diff --git a/apps/demo/src/components/Demo/Section.tsx b/apps/demo/src/components/Demo/Section.tsx
index 6fa50e443..4183126e3 100644
--- a/apps/demo/src/components/Demo/Section.tsx
+++ b/apps/demo/src/components/Demo/Section.tsx
@@ -1,15 +1,15 @@
 import { ReactNode } from "react";
 
 interface Properties {
-  title?: string;
-  subtitle?: string;
   children?: ReactNode;
+  subtitle?: string;
+  title?: string;
 }
 
 export const Section: React.FC<Properties> = ({
-  title,
-  subtitle,
   children,
+  subtitle,
+  title,
 }) => {
   return (
     <section className="demo-section">
diff --git a/apps/demo/src/components/Demo/index.ts b/apps/demo/src/components/Demo/index.ts
index 490dd9843..d27694dd7 100644
--- a/apps/demo/src/components/Demo/index.ts
+++ b/apps/demo/src/components/Demo/index.ts
@@ -1,3 +1,3 @@
+export * from "./CodeBlock";
 export * from "./Demo";
 export * from "./Section";
-export * from "./CodeBlock";
diff --git a/apps/demo/src/config.ts b/apps/demo/src/config.ts
index 97c7b59ba..645713fdb 100644
--- a/apps/demo/src/config.ts
+++ b/apps/demo/src/config.ts
@@ -1,10 +1,10 @@
+import type { AppConfig, AppFeatures } from "@prefabs.tech/react-config";
+
 import { parse } from "@prefabs.tech/react-config";
 
 import en from "./locales/en";
 import fr from "./locales/fr";
 
-import type { AppConfig, AppFeatures } from "@prefabs.tech/react-config";
-
 const config: AppConfig = {
   apiBaseUrl: import.meta.env.VITE_API_BASE_URL as string,
   appName: import.meta.env.VITE_APP_NAME as string,
@@ -76,8 +76,8 @@ export const userConfig = {
   apiBaseUrl: config.websiteDomain,
   appDomain: config.websiteDomain,
   supertokens: {
-    appName: "Demo - Prefabs Tech React",
     apiDomain: config.websiteDomain,
+    appName: "Demo - Prefabs Tech React",
   },
   supportedRoles: [],
 };
diff --git a/apps/demo/src/layouts/BasicLayout.tsx b/apps/demo/src/layouts/BasicLayout.tsx
index b07903c99..863c32802 100644
--- a/apps/demo/src/layouts/BasicLayout.tsx
+++ b/apps/demo/src/layouts/BasicLayout.tsx
@@ -18,9 +18,9 @@ export const BasicLayout = (): JSX.Element => {
       headerAddon={
         <div className="header-addon">
           <a
-            target="_blank"
-            rel="noopener noreferrer"
             href="https://github.com/prefabs-tech/react/blob/main/CHANGELOG.md"
+            rel="noopener noreferrer"
+            target="_blank"
           >
             <span>{t("header.menu.changelog")}</span>
           </a>
diff --git a/apps/demo/src/locales/en/index.ts b/apps/demo/src/locales/en/index.ts
index 2edcac678..43cc75054 100644
--- a/apps/demo/src/locales/en/index.ts
+++ b/apps/demo/src/locales/en/index.ts
@@ -13,8 +13,8 @@ const en = {
   files,
   form,
   invitations,
-  locales,
   layout,
+  locales,
   ui,
   user,
   users,
diff --git a/apps/demo/src/locales/fr/index.ts b/apps/demo/src/locales/fr/index.ts
index 84b8c1483..a0b11d623 100644
--- a/apps/demo/src/locales/fr/index.ts
+++ b/apps/demo/src/locales/fr/index.ts
@@ -13,8 +13,8 @@ const fr = {
   files,
   form,
   invitations,
-  locales,
   layout,
+  locales,
   ui,
   user,
   users,
diff --git a/apps/demo/src/main.tsx b/apps/demo/src/main.tsx
index e9ee4ab85..f8ff528f5 100644
--- a/apps/demo/src/main.tsx
+++ b/apps/demo/src/main.tsx
@@ -10,12 +10,10 @@ import config, { userConfig } from "./config";
 
 // react-toastify
 import "react-toastify/dist/ReactToastify.css";
-
 // PrimeReact CSS
 import "primereact/resources/primereact.min.css";
 import "primereact/resources/themes/lara-light-indigo/theme.css";
 import "primeicons/primeicons.css";
-
 import "@prefabs.tech/react-form/dist/PrefabsTechReactForm.css";
 import "@prefabs.tech/react-i18n/dist/PrefabsTechReactI18n.css";
 import "@prefabs.tech/react-layout/dist/PrefabsTechReactLayout.css";
@@ -28,10 +26,10 @@ i18n(config.i18n);
 
 // configure tooltip globally
 configureTooltip({
-  offset: 10,
   delay: 400,
-  position: "right",
   mouseTrack: false,
+  offset: 10,
+  position: "right",
 });
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
diff --git a/apps/demo/src/redux/hooks.ts b/apps/demo/src/redux/hooks.ts
index aeceb0d3f..daecc26f1 100644
--- a/apps/demo/src/redux/hooks.ts
+++ b/apps/demo/src/redux/hooks.ts
@@ -1,7 +1,8 @@
+import type { TypedUseSelectorHook } from "react-redux";
+
 import { useDispatch, useSelector } from "react-redux";
 
-import type { RootState, AppDispatch } from "./store";
-import type { TypedUseSelectorHook } from "react-redux";
+import type { AppDispatch, RootState } from "./store";
 
 // Use throughout the app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch = () => useDispatch<AppDispatch>();
diff --git a/apps/demo/src/redux/store.ts b/apps/demo/src/redux/store.ts
index 0fc42486a..6ba0df825 100644
--- a/apps/demo/src/redux/store.ts
+++ b/apps/demo/src/redux/store.ts
@@ -6,14 +6,14 @@ const showDevtools = process.env.NODE_ENV !== "production";
 const reducer = {};
 
 export const store = configureStore({
-  reducer,
   devTools: showDevtools,
   middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
+  reducer,
 });
 
 // required for refetchOnFocus/refetchOnReconnect behaviors
 setupListeners(store.dispatch);
 
+export type AppDispatch = typeof store.dispatch;
 // Infer the `RootState` and `AppDispatch` types from the store itself
 export type RootState = ReturnType<typeof store.getState>;
-export type AppDispatch = typeof store.dispatch;
diff --git a/apps/demo/src/types.ts b/apps/demo/src/types.ts
index 9455c47c8..09c9cfc73 100644
--- a/apps/demo/src/types.ts
+++ b/apps/demo/src/types.ts
@@ -1,7 +1,7 @@
 interface Component {
+  component: JSX.Element;
   key: number;
   title: string;
-  component: JSX.Element;
 }
 
 export type { Component };
diff --git a/apps/demo/stylelint.config.js b/apps/demo/stylelint.config.js
new file mode 100644
index 000000000..832e143e4
--- /dev/null
+++ b/apps/demo/stylelint.config.js
@@ -0,0 +1,3 @@
+import stylelintConfig from "@prefabs.tech/stylelint-config/index.js";
+
+export default stylelintConfig;
diff --git a/apps/demo/vite.config.ts b/apps/demo/vite.config.ts
index e7735c0bb..db3879bc4 100644
--- a/apps/demo/vite.config.ts
+++ b/apps/demo/vite.config.ts
@@ -1,6 +1,5 @@
-import { fileURLToPath, URL } from "url";
-
 import react from "@vitejs/plugin-react";
+import { fileURLToPath, URL } from "url";
 import { defineConfig, loadEnv } from "vite";
 import viteCompression from "vite-plugin-compression";
 import { createHtmlPlugin } from "vite-plugin-html";
@@ -11,6 +10,9 @@ export default defineConfig(({ mode }) => {
 
   return {
     base: process.env.VITE_APP_BASE_PATH,
+    optimizeDeps: {
+      include: ["react/jsx-runtime"],
+    },
     plugins: [
       react(),
       createHtmlPlugin({
@@ -37,8 +39,5 @@ export default defineConfig(({ mode }) => {
     server: {
       allowedHosts: true,
     },
-    optimizeDeps: {
-      include: ["react/jsx-runtime"],
-    },
   };
 });
diff --git a/makefile b/makefile
index 1fb5dace8..edf68f31b 100644
--- a/makefile
+++ b/makefile
@@ -42,6 +42,14 @@ sort-package:
 	@printf "\033[0;32m>>> Format package.json\033[0m\n"
 	pnpm sort-package
 
+stylelint:
+	@printf "\033[0;32m>>> Lint style\033[0m\n"
+	pnpm stylelint
+
+stylelint.fix:
+	@printf "\033[0;32m>>>Fix lint style\033[0m\n"
+	pnpm stylelint:fix
+
 test:
 	@printf "\033[0;32m>>> Running tests\033[0m\n"
 	pnpm test
diff --git a/package.json b/package.json
index bc328d553..69b5a97ab 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
     "lint:fix": "turbo run lint:fix",
     "prepare": "husky install",
     "sort-package": "npx sort-package-json && turbo run sort-package",
+    "stylelint": "turbo run stylelint",
+    "stylelint:fix": "turbo run stylelint:fix",
     "test": "turbo run test --parallel",
     "test:ci": "turbo run test:ci --parallel",
     "test:integration": "turbo run test:integration --parallel",
diff --git a/packages/config/package.json b/packages/config/package.json
index 534e2965f..6c66a6bf6 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -23,6 +23,8 @@
     "lint:fix": "eslint . --fix",
     "snapshot:update": "vitest --environment jsdom run --update --passWithNoTests",
     "sort-package": "npx sort-package-json",
+    "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input",
+    "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input",
     "test": "vitest --environment jsdom run --coverage --passWithNoTests",
     "test:component": "vitest --environment jsdom run component/ --passWithNoTests",
     "test:snapshot": "vitest --environment jsdom run snapshot/ --passWithNoTests",
@@ -31,8 +33,9 @@
     "typecheck": "tsc --noEmit -p tsconfig.vitest.json --composite false"
   },
   "devDependencies": {
-    "@prefabs.tech/eslint-config": "0.5.0",
-    "@prefabs.tech/tsconfig": "0.6.0",
+    "@prefabs.tech/eslint-config": "0.7.0",
+    "@prefabs.tech/stylelint-config": "0.7.0",
+    "@prefabs.tech/tsconfig": "0.7.0",
     "@types/jsdom": "21.1.7",
     "@types/node": "25.3.5",
     "@types/react": "18.3.28",
@@ -42,6 +45,9 @@
     "jsdom": "27.0.1",
     "prettier": "3.8.3",
     "react": "18.3.1",
+    "stylelint": "17.9.1",
+    "stylelint-config-standard": "40.0.0",
+    "stylelint-order": "8.1.1",
     "typescript": "5.9.3",
     "vite": "7.3.2",
     "vitest": "3.0.9"
diff --git a/packages/config/src/context/ConfigProvider.tsx b/packages/config/src/context/ConfigProvider.tsx
index c4e474939..ecfa507e5 100644
--- a/packages/config/src/context/ConfigProvider.tsx
+++ b/packages/config/src/context/ConfigProvider.tsx
@@ -3,13 +3,13 @@ import React, { createContext } from "react";
 import { AppConfig } from "../types";
 
 interface Properties {
-  children: React.ReactNode;
   appConfig: AppConfig;
+  children: React.ReactNode;
 }
 
 const configContext = createContext<AppConfig | undefined>(undefined);
 
-const ConfigProvider = ({ children, appConfig }: Properties) => {
+const ConfigProvider = ({ appConfig, children }: Properties) => {
   return (
     <configContext.Provider value={appConfig}>
       {children}
diff --git a/packages/config/src/index.ts b/packages/config/src/index.ts
index cb97d8a0b..fc1cda590 100644
--- a/packages/config/src/index.ts
+++ b/packages/config/src/index.ts
@@ -1,8 +1,8 @@
+import type { AppConfig, AppFeatures } from "./types";
+
 import ConfigProvider, { configContext } from "./context/ConfigProvider";
 import { parse } from "./utils";
 
-import type { AppConfig, AppFeatures } from "./types";
-
 export { configContext, ConfigProvider, parse };
 
 export type { AppConfig, AppFeatures };
diff --git a/packages/config/src/types.ts b/packages/config/src/types.ts
index 93f8fe580..6d354574b 100644
--- a/packages/config/src/types.ts
+++ b/packages/config/src/types.ts
@@ -1,10 +1,10 @@
 interface AppConfig {
-  authBasePath?: string;
   apiBaseUrl: string;
   appName?: string;
   appPort: string;
   appTitle: string;
   appVersion: string;
+  authBasePath?: string;
   copyright?: {
     holder: string;
     url?: string;
@@ -17,8 +17,8 @@ interface AppConfig {
 }
 
 interface AppFeatures {
-  showVersion: boolean;
   [feature: string]: boolean;
+  showVersion: boolean;
 }
 
 type ToastNotificationPosition =
diff --git a/packages/config/src/utils/index.ts b/packages/config/src/utils/index.ts
index 3be886aaa..54026f098 100644
--- a/packages/config/src/utils/index.ts
+++ b/packages/config/src/utils/index.ts
@@ -1,6 +1,6 @@
 export const parse = (
-  value: string | boolean | undefined | number,
-  fallback: bigint | number | string | null | boolean,
+  value: boolean | number | string | undefined,
+  fallback: bigint | boolean | null | number | string,
 ) => {
   if (typeof value === "undefined") {
     return fallback;
diff --git a/packages/config/stylelint.config.js b/packages/config/stylelint.config.js
new file mode 100644
index 000000000..832e143e4
--- /dev/null
+++ b/packages/config/stylelint.config.js
@@ -0,0 +1,3 @@
+import stylelintConfig from "@prefabs.tech/stylelint-config/index.js";
+
+export default stylelintConfig;
diff --git a/packages/config/vite.config.ts b/packages/config/vite.config.ts
index 49b27f4bb..87a810aa7 100644
--- a/packages/config/vite.config.ts
+++ b/packages/config/vite.config.ts
@@ -1,7 +1,6 @@
-import { resolve, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-
 import react from "@vitejs/plugin-react";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import { defineConfig, loadEnv } from "vite";
 
 // https://vitejs.dev/config/
diff --git a/packages/form/package.json b/packages/form/package.json
index bc667136d..18f7c9b61 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -23,6 +23,8 @@
     "lint:fix": "eslint . --fix",
     "snapshot:update": "vitest --environment jsdom run --update --passWithNoTests",
     "sort-package": "npx sort-package-json",
+    "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input",
+    "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input",
     "test": "vitest --environment jsdom run --coverage",
     "test:component": "vitest --environment jsdom run component/",
     "test:snapshot": "vitest --environment jsdom run snapshot/",
@@ -40,9 +42,10 @@
     "zod": "3.24.4"
   },
   "devDependencies": {
-    "@prefabs.tech/eslint-config": "0.5.0",
+    "@prefabs.tech/eslint-config": "0.7.0",
     "@prefabs.tech/react-ui": "0.72.1",
-    "@prefabs.tech/tsconfig": "0.6.0",
+    "@prefabs.tech/stylelint-config": "0.7.0",
+    "@prefabs.tech/tsconfig": "0.7.0",
     "@testing-library/react": "16.3.2",
     "@types/jsdom": "21.1.7",
     "@types/node": "25.3.5",
@@ -57,6 +60,9 @@
     "primereact": "9.6.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "stylelint": "17.9.1",
+    "stylelint-config-standard": "40.0.0",
+    "stylelint-order": "8.1.1",
     "typescript": "5.9.3",
     "vite": "7.3.2",
     "vitest": "3.0.9"
diff --git a/packages/form/src/assets/css/date-input.css b/packages/form/src/assets/css/date-input.css
index 3d469ea01..d5de394b9 100644
--- a/packages/form/src/assets/css/date-input.css
+++ b/packages/form/src/assets/css/date-input.css
@@ -8,8 +8,8 @@
 
 input[type="date"] {
   background-color: var(--_background-color);
-  border-radius: var(--_border-radius);
   border: 1px solid var(--_border-color);
+  border-radius: var(--_border-radius);
   padding-block: var(--_padding-block);
   padding-inline: var(--_padding-inline);
   width: 100%;
@@ -19,8 +19,8 @@ input[type="date"][aria-invalid="true"] {
   --_border-color: var(--dz-danger-color);
 
   background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/></svg>");
-  background-repeat: no-repeat;
   background-position: right calc(0.75 * var(--_padding-inline, 0.5rem)) center;
+  background-repeat: no-repeat;
   background-size: 1rem;
 }
 
@@ -28,8 +28,8 @@ input[type="date"][aria-invalid="false"] {
   --_border-color: var(--dz-success-color);
 
   background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
-  background-repeat: no-repeat;
   background-position: right calc(0.75 * var(--_padding-inline, 0.5rem)) center;
+  background-repeat: no-repeat;
   background-size: 1rem;
 }
 
@@ -40,6 +40,6 @@ input[type="date"]:focus-within {
 input[type="date"]:disabled {
   --_background-color: var(--field-bg-color-disabled, #f8f8f8);
 
-  opacity: 0.8;
   cursor: not-allowed;
+  opacity: 0.8;
 }
diff --git a/packages/form/src/assets/css/file-input.css b/packages/form/src/assets/css/file-input.css
index 42ca0739f..974d1d330 100644
--- a/packages/form/src/assets/css/file-input.css
+++ b/packages/form/src/assets/css/file-input.css
@@ -5,25 +5,21 @@
   padding: 1rem 0;
 }
 
-.file-input .selected {
-  padding-inline-start: 0px;
-}
-
 .file-input .selected li {
+  align-items: flex-start;
+  border-bottom: 1px solid #bdbdbd48;
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
   gap: 0.5rem;
+  justify-content: space-between;
+  padding: 0.5rem 0;
   position: relative;
-  border-bottom: 1px solid #bdbdbd48;
-  padding: 0.5rem 0rem;
 }
 
 .file-input .selected li .info {
-  position: relative;
   display: flex;
   gap: 0.75rem;
+  position: relative;
   width: 90%;
 }
 
@@ -32,10 +28,17 @@
 }
 
 .file-input .selected li .preview {
+  background: lightgray;
+  height: 3.5rem;
   min-width: 3.5rem;
   width: 3.5rem;
-  height: 3.5rem;
-  background: lightgray;
+}
+
+.file-input .details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 80%;
 }
 
 .file-input .selected li .info .details {
@@ -45,37 +48,36 @@
 }
 
 .file-input .selected li .info .details > span {
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2; 
+  -webkit-box-orient: vertical; 
   display: -webkit-box;
+  -webkit-line-clamp: 2;
   overflow: hidden;
   overflow-wrap: break-word; 
   text-overflow: ellipsis;
-  word-break: break-word; 
 }
 
 
 .file-input .selected li .description-wrapper {
   display: grid;
-  grid-template-columns: auto 1fr;
   gap: 0.5rem;
+  grid-template-columns: auto 1fr;
   height: 2.3rem;
   width: 100%;
 }
 
 .file-input .dropzone {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: "center";
-  padding: 30px 20px;
-  border-width: 2;
-  border-radius: 2;
-  border-color: #eeeeee;
-  border-style: dashed;
+  align-items: center;
   background-color: var(--dz-input-fill-color);
+  border-color: #eee;
+  border-radius: 2px;
+  border-style: dashed;
+  border-width: 2px;
   color: #bdbdbd;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
   outline: none;
+  padding: 30px 20px;
   transition: border 0.24s ease-in-out;
 }
 
@@ -92,12 +94,12 @@
 }
 
 .file-input .description-wrapper .description {
+  color: rgb(0 0 0 / 51.4%);
   cursor: pointer;
-  color: rgba(0, 0, 0, 0.514);
-  text-overflow: ellipsis;
   height: 2.3rem;
   max-width: 40rem;
   overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -109,21 +111,14 @@
   visibility: visible;
 }
 
-.file-input .details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 80%;
-}
-
 .file-input .dz-file-errors {
+  background: rgb(255 0 0 / 10%);
+  border-radius: 6px;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin: 1rem 0;
-  background: rgba(255, 0, 0, 0.1);
   padding: 0.75rem;
-  border-radius: 6px;
 }
 
 .file-input .dz-file-error {
@@ -139,7 +134,7 @@
   list-style: initial;
 }
 
-@media screen and (max-width: 576px) {
+@media screen and (width <= 576px) {
   .file-input .description-wrapper i {
     visibility: visible;
   }
diff --git a/packages/form/src/assets/css/file-upload.css b/packages/form/src/assets/css/file-upload.css
index 4d38daff4..83b1ec0e6 100644
--- a/packages/form/src/assets/css/file-upload.css
+++ b/packages/form/src/assets/css/file-upload.css
@@ -1,5 +1,5 @@
 .file-upload {
   display: flex;
-  gap: 0.5rem;
   flex-direction: column;
+  gap: 0.5rem;
 }
diff --git a/packages/form/src/assets/css/form.css b/packages/form/src/assets/css/form.css
index 1eb374618..4e71f42d2 100644
--- a/packages/form/src/assets/css/form.css
+++ b/packages/form/src/assets/css/form.css
@@ -35,7 +35,7 @@ form .field .p-calendar > input {
   background-color: var(--dz-input-fill-color);
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .dz-form-actions {
     flex-direction: row;
   }
@@ -45,21 +45,22 @@ form .field .p-calendar > input {
   }
 
   .dz-form-actions[data-alignment="right"] {
-    justify-content: flex-start;
     flex-direction: row-reverse;
+    justify-content: flex-start;
   }
 
   .dz-form-actions[data-reverse="true"] {
-    justify-content: flex-end;
     flex-direction: row-reverse;
+    justify-content: flex-end;
   }
 
   .dz-form-actions[data-direction="vertical"][data-reverse="true"] {
     flex-direction: column-reverse;
   }
+
   .dz-form-actions[data-alignment="right"][data-reverse="true"] {
-    justify-content: flex-end;
     flex-direction: row;
+    justify-content: flex-end;
   }
 
   .dz-form-actions[data-alignment="center"],
diff --git a/packages/form/src/assets/css/index.css b/packages/form/src/assets/css/index.css
index b9af269af..2ee04bf57 100644
--- a/packages/form/src/assets/css/index.css
+++ b/packages/form/src/assets/css/index.css
@@ -1,6 +1,5 @@
-@import "./form.css";
-
-@import "./date-input.css";
-@import "./file-input.css";
-@import "./file-upload.css";
-@import "./password.css";
+@import url("./form.css");
+@import url("./date-input.css");
+@import url("./file-input.css");
+@import url("./file-upload.css");
+@import url("./password.css");
diff --git a/packages/form/src/assets/css/password.css b/packages/form/src/assets/css/password.css
index b08d4a118..786f107e4 100644
--- a/packages/form/src/assets/css/password.css
+++ b/packages/form/src/assets/css/password.css
@@ -1,7 +1,7 @@
 .input-field-password {
   align-items: center;
-  border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
   display: flex;
   text-align: left;
   width: 100%;
diff --git a/packages/form/src/components/CheckboxInput.tsx b/packages/form/src/components/CheckboxInput.tsx
index de2e6e7da..8d4a16827 100644
--- a/packages/form/src/components/CheckboxInput.tsx
+++ b/packages/form/src/components/CheckboxInput.tsx
@@ -5,15 +5,15 @@ import {
 import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
 
-export const CheckboxInput = <T extends string | number>({
+export const CheckboxInput = <T extends number | string>({
   className,
   direction,
   disabled,
+  helperText,
+  inputLabel,
   label,
   name,
   options,
-  helperText,
-  inputLabel,
   ...others
 }: ICheckboxInputProperties<T>) => {
   const { control, getFieldState } = useFormContext();
@@ -24,9 +24,9 @@ export const CheckboxInput = <T extends string | number>({
 
   return (
     <Controller
-      name={name}
       control={control}
       defaultValue={isMultiCheckbox ? [] : false}
+      name={name}
       render={({ field }) => (
         <BasicCheckboxInput
           checked={!isMultiCheckbox ? field.value : undefined}
diff --git a/packages/form/src/components/CurrencyPicker.tsx b/packages/form/src/components/CurrencyPicker.tsx
index e345ab246..40e707f8f 100644
--- a/packages/form/src/components/CurrencyPicker.tsx
+++ b/packages/form/src/components/CurrencyPicker.tsx
@@ -5,24 +5,24 @@ import {
 import React, { useEffect } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 
-interface ValidationMessages {
-  maxSelection?: string;
-  minSelection?: string;
-}
-
-interface ICurrencyPickerProperties<T extends string | number> extends Omit<
+interface ICurrencyPickerProperties<T extends number | string> extends Omit<
   CurrencyPickerProperties<T>,
-  "onChange" | "value" | "hasError" | "errorMessage"
+  "errorMessage" | "hasError" | "onChange" | "value"
 > {
   maxSelection?: number;
   minSelection?: number;
-  showValidState?: boolean;
   showInvalidState?: boolean;
+  showValidState?: boolean;
   submitCount?: number;
   validationMessages?: ValidationMessages;
 }
 
-export const CurrencyPicker = <T extends string | number>({
+interface ValidationMessages {
+  maxSelection?: string;
+  minSelection?: string;
+}
+
+export const CurrencyPicker = <T extends number | string>({
   autoSelectSingleOption = false,
   maxSelection,
   minSelection,
@@ -61,8 +61,21 @@ export const CurrencyPicker = <T extends string | number>({
       control={control}
       defaultValue={multiple ? [] : undefined}
       name={name}
+      render={({ field }) => (
+        <BasicCurrencyPicker
+          autoSelectSingleOption={autoSelectSingleOption}
+          errorMessage={error?.message}
+          hasError={submitCount > 0 ? checkInvalidState() : undefined}
+          multiple={multiple}
+          name={name}
+          onChange={field.onChange}
+          options={options}
+          value={field.value}
+          {...others}
+        />
+      )}
       rules={{
-        validate: (value: T[] | T) => {
+        validate: (value: T | T[]) => {
           if (!multiple || !Array.isArray(value)) {
             return;
           }
@@ -86,19 +99,6 @@ export const CurrencyPicker = <T extends string | number>({
           return true;
         },
       }}
-      render={({ field }) => (
-        <BasicCurrencyPicker
-          autoSelectSingleOption={autoSelectSingleOption}
-          errorMessage={error?.message}
-          hasError={submitCount > 0 ? checkInvalidState() : undefined}
-          multiple={multiple}
-          name={name}
-          onChange={field.onChange}
-          options={options}
-          value={field.value}
-          {...others}
-        />
-      )}
     />
   );
 };
diff --git a/packages/form/src/components/DateInput.tsx b/packages/form/src/components/DateInput.tsx
index f9fc1434a..1df392829 100644
--- a/packages/form/src/components/DateInput.tsx
+++ b/packages/form/src/components/DateInput.tsx
@@ -4,34 +4,34 @@ import { UseFormGetFieldState, UseFormRegister } from "react-hook-form";
 interface IDateInput {
   className?: string;
   disabled?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getFieldState?: UseFormGetFieldState<any>;
   helperText?: string;
-  label?: string | React.ReactNode;
-  max?: string | number | Date;
-  min?: string | number | Date;
+  label?: React.ReactNode | string;
+  max?: Date | number | string;
+  min?: Date | number | string;
   name: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  register?: UseFormRegister<any>;
   showInvalidState?: boolean;
   showValidState?: boolean;
   submitCount?: number;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  getFieldState?: UseFormGetFieldState<any>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  register?: UseFormRegister<any>;
 }
 
 // TODO use Input component from @prefabs.tech/react-ui
 export const DateInput: React.FC<IDateInput> = ({
   className = "",
   disabled,
+  getFieldState,
   helperText,
   label = "",
   max,
   min,
   name,
+  register,
   showInvalidState = true,
   showValidState = true,
   submitCount = 0,
-  register,
-  getFieldState,
 }) => {
   if (!register || !getFieldState) {
     return null;
@@ -59,7 +59,7 @@ export const DateInput: React.FC<IDateInput> = ({
     }
   };
 
-  const convertToDateString = (value: string | number | Date | undefined) => {
+  const convertToDateString = (value: Date | number | string | undefined) => {
     if (!value) {
       return undefined;
     }
@@ -82,18 +82,18 @@ export const DateInput: React.FC<IDateInput> = ({
       {label && <label htmlFor={name}>{label}</label>}
       <input
         {...rest}
-        name={name}
-        id={name}
         aria-invalid={submitCount > 0 ? checkInvalidState() : undefined}
-        type="date"
         disabled={disabled}
+        id={name}
+        max={convertToDateString(max)}
+        min={convertToDateString(min)}
+        name={name}
         onClick={handleClick}
         ref={(event) => {
           ref(event);
           inputReference.current = event;
         }}
-        min={convertToDateString(min)}
-        max={convertToDateString(max)}
+        type="date"
       />
       {helperText && <span className="helper-text">{helperText}</span>}
       {error?.message && (
diff --git a/packages/form/src/components/DatePicker.tsx b/packages/form/src/components/DatePicker.tsx
index 3cc14a3d4..d6d01a91f 100644
--- a/packages/form/src/components/DatePicker.tsx
+++ b/packages/form/src/components/DatePicker.tsx
@@ -7,7 +7,7 @@ import { Controller, useFormContext } from "react-hook-form";
 
 interface DatePicker extends Omit<
   DatePickerProperties,
-  "onChange" | "value" | "error" | "inputRef"
+  "error" | "inputRef" | "onChange" | "value"
 > {
   name: string;
 }
@@ -19,15 +19,15 @@ export const DatePicker: FC<DatePicker> = ({ name, ...others }) => {
   return (
     <>
       <Controller
-        name={name}
         control={control}
+        name={name}
         render={({ field }) => (
           <DatePickerBasic
+            error={error?.message}
             inputRef={field.ref}
             name={name}
             onChange={field.onChange}
             value={field.value}
-            error={error?.message}
             {...others}
           />
         )}
diff --git a/packages/form/src/components/DaysInput.tsx b/packages/form/src/components/DaysInput.tsx
index 7bc95662e..90bc9457c 100644
--- a/packages/form/src/components/DaysInput.tsx
+++ b/packages/form/src/components/DaysInput.tsx
@@ -37,7 +37,7 @@ export const DaysInput: React.FC<IDaysInputField> = ({
     },
   });
 
-  const { error, isDirty, isTouched, invalid } = getFieldState(name);
+  const { error, invalid, isDirty, isTouched } = getFieldState(name);
 
   let inputClassName = "";
   if (isDirty && !invalid) {
@@ -54,8 +54,8 @@ export const DaysInput: React.FC<IDaysInputField> = ({
       <input
         {...updatedRegister}
         className={inputClassName}
-        type="number"
         placeholder={placeholder}
+        type="number"
         {...others}
       />
       {helperText && <span className="helper-text">{helperText}</span>}
diff --git a/packages/form/src/components/Email.tsx b/packages/form/src/components/Email.tsx
index 406af9f72..b098a3fbc 100644
--- a/packages/form/src/components/Email.tsx
+++ b/packages/form/src/components/Email.tsx
@@ -1,23 +1,23 @@
 import { IInputProperties, Input } from "@prefabs.tech/react-ui";
 import React from "react";
 import {
-  UseFormGetFieldState,
-  UseFormRegister,
   Controller,
   useFormContext,
+  UseFormGetFieldState,
+  UseFormRegister,
 } from "react-hook-form";
 
 interface IProperties extends IInputProperties {
   defaultValue?: string;
-  label?: string | React.ReactNode;
-  name: string;
-  showValidState?: boolean;
-  showInvalidState?: boolean;
-  submitCount?: number;
   /** @deprecated */
   getFieldState?: UseFormGetFieldState<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+  label?: React.ReactNode | string;
+  name: string;
   /** @deprecated */
   register?: UseFormRegister<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+  showInvalidState?: boolean;
+  showValidState?: boolean;
+  submitCount?: number;
 }
 
 export const Email: React.FC<IProperties> = ({
@@ -50,24 +50,24 @@ export const Email: React.FC<IProperties> = ({
 
   return (
     <Controller
-      name={name}
       control={control}
       defaultValue={defaultValue}
+      name={name}
       render={({ field }) => (
         <Input
           {...others}
           autoComplete={autoComplete}
-          value={field.value}
           disabled={disabled}
-          helperText={helperText}
           errorMessage={error?.message}
           hasError={submitCount > 0 ? checkInvalidState() : undefined}
+          helperText={helperText}
           label={label}
           name={field.name}
           onChange={field.onChange}
           placeholder={placeholder}
           readOnly={readOnly}
           type="email"
+          value={field.value}
         />
       )}
     />
diff --git a/packages/form/src/components/File/FileAttach/FileAttachBasic.tsx b/packages/form/src/components/File/FileAttach/FileAttachBasic.tsx
index 37b34061f..21283e8f6 100644
--- a/packages/form/src/components/File/FileAttach/FileAttachBasic.tsx
+++ b/packages/form/src/components/File/FileAttach/FileAttachBasic.tsx
@@ -1,28 +1,29 @@
+import type { FC } from "react";
+
 // components/FormComponents/FileAttachBasic.tsx
 import { Button } from "@prefabs.tech/react-ui";
 import React from "react";
 import { useDropzone } from "react-dropzone";
 
-import { useOnDropFile } from "../hooks";
-
 import type { IFileAttachBasicProperties } from "../types";
-import type { FC } from "react";
+
+import { useOnDropFile } from "../hooks";
 
 export const FileAttachBasic: FC<IFileAttachBasicProperties> = ({
-  name,
+  dropzoneOptions,
   mode = "append",
   multiple = true,
-  value = [],
-  dropzoneOptions,
+  name,
   onChange,
   selectButtonProps,
+  value = [],
 }) => {
-  const onDrop = useOnDropFile({ mode, name, onChange, value, multiple });
+  const onDrop = useOnDropFile({ mode, multiple, name, onChange, value });
 
-  const { getRootProps, getInputProps } = useDropzone({
+  const { getInputProps, getRootProps } = useDropzone({
+    multiple,
     noDrag: true,
     onDrop,
-    multiple,
     ...dropzoneOptions,
   });
 
diff --git a/packages/form/src/components/File/FileDropzone/FileDropzone.tsx b/packages/form/src/components/File/FileDropzone/FileDropzone.tsx
index 8ca94b71c..b92577914 100644
--- a/packages/form/src/components/File/FileDropzone/FileDropzone.tsx
+++ b/packages/form/src/components/File/FileDropzone/FileDropzone.tsx
@@ -1,41 +1,41 @@
 import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
 
-import { FileDropzoneBasic } from "./FileDropzoneBasic";
-
 import type { FileExtended, IFileDropzoneProperties } from "../types";
 
+import { FileDropzoneBasic } from "./FileDropzoneBasic";
+
 export const FileDropzone = ({
-  name,
-  label,
-  mode = "update",
-  multiple,
-  enableDescription = false,
   addDescriptionLabel,
   descriptionPlaceholder,
   dropzoneMessage,
   dropzoneOptions,
+  enableDescription = false,
+  label,
+  mode = "update",
+  multiple,
+  name,
 }: IFileDropzoneProperties) => {
   const { control } = useFormContext();
 
   return (
     <>
       <Controller
-        name={name}
         control={control}
+        name={name}
         render={({ field }) => (
           <FileDropzoneBasic
-            name={field.name}
-            value={field.value}
-            label={label}
-            mode={mode}
-            multiple={multiple}
-            dropzoneOptions={dropzoneOptions}
-            enableDescription={enableDescription}
             addDescriptionLabel={addDescriptionLabel}
             descriptionPlaceholder={descriptionPlaceholder}
             dropzoneMessage={dropzoneMessage}
+            dropzoneOptions={dropzoneOptions}
+            enableDescription={enableDescription}
+            label={label}
+            mode={mode}
+            multiple={multiple}
+            name={field.name}
             onChange={(files: FileExtended[]) => field.onChange(files)}
+            value={field.value}
           />
         )}
       />
diff --git a/packages/form/src/components/File/FileDropzone/FileDropzoneBasic.tsx b/packages/form/src/components/File/FileDropzone/FileDropzoneBasic.tsx
index 93f50532a..5ab69feb4 100644
--- a/packages/form/src/components/File/FileDropzone/FileDropzoneBasic.tsx
+++ b/packages/form/src/components/File/FileDropzone/FileDropzoneBasic.tsx
@@ -1,40 +1,41 @@
+import type { FC } from "react";
+
 // components/FormComponents/FileDropzoneBasic.tsx
 import React, { useMemo } from "react";
 import { useDropzone } from "react-dropzone";
 
+import type { IFileDropzoneBasicProperties } from "../types";
+
 import { useOnDropFile, useOnRemoveFile } from "../hooks";
 import { SelectedFile } from "../SelectedFile";
 
-import type { IFileDropzoneBasicProperties } from "../types";
-import type { FC } from "react";
-
 export const FileDropzoneBasic: FC<IFileDropzoneBasicProperties> = ({
-  name,
-  label,
-  mode = "append",
-  multiple = true,
-  value = [],
-  dropzoneOptions,
-  enableDescription = false,
   addDescriptionLabel,
   descriptionPlaceholder,
   dropzoneMessage,
-  onChange,
+  dropzoneOptions,
+  enableDescription = false,
   errorMessages,
+  label,
+  mode = "append",
+  multiple = true,
+  name,
+  onChange,
+  value = [],
 }) => {
-  const onDrop = useOnDropFile({ mode, name, onChange, value, multiple });
-  const onRemove = useOnRemoveFile({ value, onChange });
+  const onDrop = useOnDropFile({ mode, multiple, name, onChange, value });
+  const onRemove = useOnRemoveFile({ onChange, value });
 
   const {
     fileRejections,
-    getRootProps,
     getInputProps,
-    isFocused,
+    getRootProps,
     isDragAccept,
     isDragReject,
+    isFocused,
   } = useDropzone({
-    onDrop,
     multiple: multiple,
+    onDrop,
     ...dropzoneOptions,
   });
 
@@ -48,10 +49,10 @@ export const FileDropzoneBasic: FC<IFileDropzoneBasicProperties> = ({
 
   const getErrorMessage = (code: string) => {
     switch (code) {
-      case "file-too-large":
-        return errorMessages?.fileTooLarge;
       case "file-invalid-type":
         return errorMessages?.fileInvalidType;
+      case "file-too-large":
+        return errorMessages?.fileTooLarge;
       case "file-too-small":
         return errorMessages?.fileTooSmall;
       case "too-many-files":
@@ -61,12 +62,12 @@ export const FileDropzoneBasic: FC<IFileDropzoneBasicProperties> = ({
     }
   };
 
-  const fileRejectionItems = fileRejections.map(({ file, errors }) => (
-    <div key={file.name} className="dz-file-error">
+  const fileRejectionItems = fileRejections.map(({ errors, file }) => (
+    <div className="dz-file-error" key={file.name}>
       <strong>{file.name}</strong>
       <ul>
         {errors.map((error) => (
-          <li key={error.code} data-error-code={error.code}>
+          <li data-error-code={error.code} key={error.code}>
             {getErrorMessage(error.code) || error.message}
           </li>
         ))}
@@ -97,16 +98,16 @@ export const FileDropzoneBasic: FC<IFileDropzoneBasicProperties> = ({
           {value.map((file, index) => {
             return (
               <SelectedFile
-                key={file.name}
-                file={file}
-                index={index}
-                enableDescription={enableDescription}
                 addDescriptionLabel={addDescriptionLabel}
                 descriptionPlaceholder={descriptionPlaceholder}
-                onRemove={() => onRemove(index)}
+                enableDescription={enableDescription}
+                file={file}
+                index={index}
+                key={file.name}
                 onDescriptionChange={(description) => {
                   file.description = description;
                 }}
+                onRemove={() => onRemove(index)}
               />
             );
           })}
diff --git a/packages/form/src/components/File/FileInput/FileInput.tsx b/packages/form/src/components/File/FileInput/FileInput.tsx
index 436ede2a0..cc8f32a57 100644
--- a/packages/form/src/components/File/FileInput/FileInput.tsx
+++ b/packages/form/src/components/File/FileInput/FileInput.tsx
@@ -1,48 +1,48 @@
 import React, { useState } from "react";
 
-import { FileInputBasic } from "./FileInputBasic";
-
 import type { FileExtended, IFileInputProperties } from "../types";
 
+import { FileInputBasic } from "./FileInputBasic";
+
 export const FileInput = ({
-  name,
-  inputMethod,
-  multiple = false,
-  label,
-  mode = "update",
-  inputButtonLabel,
-  inputButtonLabelSelected,
-  enableDescription = false,
   addDescriptionLabel,
   descriptionPlaceholder,
   dropzoneMessage,
   dropzoneOptions,
+  enableDescription = false,
+  inputButtonLabel,
+  inputButtonLabelSelected,
+  inputMethod,
+  label,
+  mode = "update",
+  multiple = false,
+  name,
+  onChange,
   selectButtonProps,
   value = [],
-  onChange,
 }: IFileInputProperties) => {
   const [selectedFiles, setSelectedFiles] = useState<FileExtended[]>(value);
 
   return (
     <FileInputBasic
-      name={name}
-      inputMethod={inputMethod}
+      addDescriptionLabel={addDescriptionLabel}
+      descriptionPlaceholder={descriptionPlaceholder}
+      dropzoneMessage={dropzoneMessage}
+      dropzoneOptions={dropzoneOptions}
+      enableDescription={enableDescription}
       inputButtonLabel={inputButtonLabel}
       inputButtonLabelSelected={inputButtonLabelSelected}
-      value={selectedFiles}
+      inputMethod={inputMethod}
       label={label}
       mode={mode}
       multiple={multiple}
-      dropzoneOptions={dropzoneOptions}
-      enableDescription={enableDescription}
-      addDescriptionLabel={addDescriptionLabel}
-      descriptionPlaceholder={descriptionPlaceholder}
-      dropzoneMessage={dropzoneMessage}
+      name={name}
       onChange={(files) => {
         setSelectedFiles(files);
         onChange(files);
       }}
       selectButtonProps={selectButtonProps}
+      value={selectedFiles}
     />
   );
 };
diff --git a/packages/form/src/components/File/FileInput/FileInputBasic.tsx b/packages/form/src/components/File/FileInput/FileInputBasic.tsx
index 5f958324d..736910356 100644
--- a/packages/form/src/components/File/FileInput/FileInputBasic.tsx
+++ b/packages/form/src/components/File/FileInput/FileInputBasic.tsx
@@ -1,33 +1,34 @@
+import type { FC } from "react";
+
 // components/FormComponents/FileInputBasic.tsx
 import { Button } from "@prefabs.tech/react-ui";
 import React, { useMemo } from "react";
 import { useDropzone } from "react-dropzone";
 
+import type { IFileInputBasicProperties } from "../types";
+
 import { useOnDropFile, useOnRemoveFile } from "../hooks";
 import { SelectedFile } from "../SelectedFile";
 
-import type { IFileInputBasicProperties } from "../types";
-import type { FC } from "react";
-
 export const FileInputBasic: FC<IFileInputBasicProperties> = ({
-  name,
-  inputMethod = "button",
+  addDescriptionLabel,
+  descriptionPlaceholder,
+  dropzoneMessage,
+  dropzoneOptions,
+  enableDescription = false,
   inputButtonLabel = "Select",
   inputButtonLabelSelected = "Selected",
+  inputMethod = "button",
   label,
   mode = "append",
   multiple = true,
-  value = [],
-  dropzoneOptions,
-  enableDescription = false,
-  addDescriptionLabel,
-  descriptionPlaceholder,
-  dropzoneMessage,
+  name,
   onChange,
   selectButtonProps,
+  value = [],
 }) => {
-  const onDrop = useOnDropFile({ mode, name, onChange, value, multiple });
-  const onRemove = useOnRemoveFile({ value, onChange });
+  const onDrop = useOnDropFile({ mode, multiple, name, onChange, value });
+  const onRemove = useOnRemoveFile({ onChange, value });
 
   const {
     severity = "secondary",
@@ -35,11 +36,11 @@ export const FileInputBasic: FC<IFileInputBasicProperties> = ({
     ...buttonProperties
   } = selectButtonProps || {};
 
-  const { getRootProps, getInputProps, isFocused, isDragAccept, isDragReject } =
+  const { getInputProps, getRootProps, isDragAccept, isDragReject, isFocused } =
     useDropzone({
+      multiple,
       noDrag: inputMethod == "button",
       onDrop,
-      multiple,
       ...dropzoneOptions,
     });
 
@@ -91,16 +92,16 @@ export const FileInputBasic: FC<IFileInputBasicProperties> = ({
           {value.map((file, index) => {
             return (
               <SelectedFile
-                key={file.name}
-                file={file}
-                index={index}
-                enableDescription={enableDescription}
                 addDescriptionLabel={addDescriptionLabel}
                 descriptionPlaceholder={descriptionPlaceholder}
-                onRemove={() => onRemove(index)}
+                enableDescription={enableDescription}
+                file={file}
+                index={index}
+                key={file.name}
                 onDescriptionChange={(description) => {
                   file.description = description;
                 }}
+                onRemove={() => onRemove(index)}
               />
             );
           })}
diff --git a/packages/form/src/components/File/FileInput/FormFileInput.tsx b/packages/form/src/components/File/FileInput/FormFileInput.tsx
index a35039f48..ce8c4d5c7 100644
--- a/packages/form/src/components/File/FileInput/FormFileInput.tsx
+++ b/packages/form/src/components/File/FileInput/FormFileInput.tsx
@@ -1,48 +1,48 @@
 import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
 
-import { FileInputBasic } from "./FileInputBasic";
-
 import type { IFormFileInputProperties } from "../types";
 
+import { FileInputBasic } from "./FileInputBasic";
+
 export const FormFileInput = ({
-  name,
-  inputMethod,
-  multiple = false,
-  label,
-  mode = "update",
-  inputButtonLabel,
-  inputButtonLabelSelected,
-  enableDescription = false,
   addDescriptionLabel,
   descriptionPlaceholder,
   dropzoneMessage,
   dropzoneOptions,
+  enableDescription = false,
+  inputButtonLabel,
+  inputButtonLabelSelected,
+  inputMethod,
+  label,
+  mode = "update",
+  multiple = false,
+  name,
   selectButtonProps,
 }: IFormFileInputProperties) => {
   const { control } = useFormContext();
 
   return (
     <Controller
-      name={name}
       control={control}
+      name={name}
       render={({ field }) => (
         <FileInputBasic
-          name={field.name}
-          inputMethod={inputMethod}
+          addDescriptionLabel={addDescriptionLabel}
+          descriptionPlaceholder={descriptionPlaceholder}
+          dropzoneMessage={dropzoneMessage}
+          dropzoneOptions={dropzoneOptions}
+          enableDescription={enableDescription}
           inputButtonLabel={inputButtonLabel}
           inputButtonLabelSelected={inputButtonLabelSelected}
-          value={field.value}
+          inputMethod={inputMethod}
           label={label}
           mode={mode}
           multiple={multiple}
-          dropzoneOptions={dropzoneOptions}
-          enableDescription={enableDescription}
-          addDescriptionLabel={addDescriptionLabel}
-          descriptionPlaceholder={descriptionPlaceholder}
-          dropzoneMessage={dropzoneMessage}
+          name={field.name}
           onChange={(files) => field.onChange(files)}
           selectButtonProps={selectButtonProps}
+          value={field.value}
         />
       )}
     />
diff --git a/packages/form/src/components/File/FileInput/index.ts b/packages/form/src/components/File/FileInput/index.ts
index c44018f76..091a5ac1f 100644
--- a/packages/form/src/components/File/FileInput/index.ts
+++ b/packages/form/src/components/File/FileInput/index.ts
@@ -1,3 +1,3 @@
-export * from "./FormFileInput";
 export * from "./FileInput";
 export * from "./FileInputBasic";
+export * from "./FormFileInput";
diff --git a/packages/form/src/components/File/FileUpload/FileUpload.tsx b/packages/form/src/components/File/FileUpload/FileUpload.tsx
index 974df3400..204441d45 100644
--- a/packages/form/src/components/File/FileUpload/FileUpload.tsx
+++ b/packages/form/src/components/File/FileUpload/FileUpload.tsx
@@ -1,11 +1,12 @@
+import type { FC } from "react";
+
 import { useEffect, useState } from "react";
 
 import { FormActions } from "@/components/FormActions";
 
-import { FileDropzoneBasic } from "../FileDropzone";
-
 import type { FileExtended, IFileUploadProperties } from "../types";
-import type { FC } from "react";
+
+import { FileDropzoneBasic } from "../FileDropzone";
 
 export const FileUpload: FC<IFileUploadProperties> = ({
   actionsAlignment = "right",
@@ -40,16 +41,16 @@ export const FileUpload: FC<IFileUploadProperties> = ({
   return (
     <div className="file-upload">
       <FileDropzoneBasic
-        name={name}
-        value={selectedFiles}
-        label={label}
-        multiple={multiple}
-        mode={mode}
-        dropzoneOptions={dropzoneOptions}
-        enableDescription={enableDescription}
         addDescriptionLabel={addDescriptionLabel}
         descriptionPlaceholder={descriptionPlaceholder}
         dropzoneMessage={dropzoneMessage}
+        dropzoneOptions={dropzoneOptions}
+        enableDescription={enableDescription}
+        errorMessages={errorMessages}
+        label={label}
+        mode={mode}
+        multiple={multiple}
+        name={name}
         onChange={(files) => {
           let modifiedFiles: FileExtended[] = files;
 
@@ -59,17 +60,17 @@ export const FileUpload: FC<IFileUploadProperties> = ({
 
           setSelectedFiles(modifiedFiles);
         }}
-        errorMessages={errorMessages}
+        value={selectedFiles}
       />
 
       <FormActions
         actions={[
           {
-            id: "upload",
-            type: "button",
             disabled: !selectedFiles.length,
+            id: "upload",
             label: "Upload",
             onClick: () => onUpload(selectedFiles),
+            type: "button",
             ...uploadButtonOptions,
           },
           {
diff --git a/packages/form/src/components/File/SelectedFile/SelectedFile.tsx b/packages/form/src/components/File/SelectedFile/SelectedFile.tsx
index 70325178e..fe1a78f54 100644
--- a/packages/form/src/components/File/SelectedFile/SelectedFile.tsx
+++ b/packages/form/src/components/File/SelectedFile/SelectedFile.tsx
@@ -4,23 +4,23 @@ import React, { ChangeEvent, KeyboardEvent, useEffect, useState } from "react";
 import { FileExtended } from "../types";
 
 type SelectedFileProperties = {
-  file: FileExtended;
-  enableDescription?: boolean;
   addDescriptionLabel?: string;
   descriptionPlaceholder?: string;
+  enableDescription?: boolean;
+  file: FileExtended;
   index: number;
-  onRemove?: () => void;
   onDescriptionChange?: (description?: string) => void;
+  onRemove?: () => void;
 };
 
 export const SelectedFile: React.FC<SelectedFileProperties> = ({
-  file,
-  enableDescription = false,
   addDescriptionLabel,
   descriptionPlaceholder,
+  enableDescription = false,
+  file,
   index,
-  onRemove,
   onDescriptionChange,
+  onRemove,
 }) => {
   const [showDescriptionInput, setShowDescriptionInput] = useState(false);
   const [description, setDescription] = useState(file.description || "");
@@ -45,12 +45,12 @@ export const SelectedFile: React.FC<SelectedFileProperties> = ({
                 <>
                   <div
                     className={`description description-${index}`}
-                    role="button"
-                    tabIndex={0}
-                    title={file.description}
                     onClick={() => {
                       setShowDescriptionInput(true);
                     }}
+                    role="button"
+                    tabIndex={0}
+                    title={file.description}
                   >
                     <span>{description || addDescriptionLabel}</span>
                   </div>
@@ -61,8 +61,9 @@ export const SelectedFile: React.FC<SelectedFileProperties> = ({
                   <div className="p-inputgroup">
                     <Input
                       autoFocus
-                      value={description}
-                      placeholder={descriptionPlaceholder}
+                      onBlur={() => {
+                        setShowDescriptionInput(false);
+                      }}
                       onChange={(event: ChangeEvent<HTMLInputElement>) =>
                         setDescription(event.target.value)
                       }
@@ -73,9 +74,8 @@ export const SelectedFile: React.FC<SelectedFileProperties> = ({
                           setShowDescriptionInput(false);
                         }
                       }}
-                      onBlur={() => {
-                        setShowDescriptionInput(false);
-                      }}
+                      placeholder={descriptionPlaceholder}
+                      value={description}
                     />
                   </div>
                 </>
@@ -87,8 +87,8 @@ export const SelectedFile: React.FC<SelectedFileProperties> = ({
 
       {!!onRemove && (
         <Button
-          onClick={onRemove}
           iconLeft="pi pi-times"
+          onClick={onRemove}
           severity="danger"
           size="small"
           variant="outlined"
diff --git a/packages/form/src/components/File/hooks.ts b/packages/form/src/components/File/hooks.ts
index 38780ff3f..c0bbe8632 100644
--- a/packages/form/src/components/File/hooks.ts
+++ b/packages/form/src/components/File/hooks.ts
@@ -9,11 +9,11 @@ export const useOnDropFile = ({
   onChange,
   value,
 }: {
-  name: string;
-  multiple: boolean;
   mode: FileMode;
-  value: FileExtended[];
+  multiple: boolean;
+  name: string;
   onChange: (file: FileExtended[]) => void;
+  value: FileExtended[];
 }) =>
   useCallback(
     (droppedFiles: FileExtended[]) => {
@@ -57,11 +57,11 @@ export const useOnDropFile = ({
   );
 
 export const useOnRemoveFile = ({
-  value,
   onChange,
+  value,
 }: {
-  value: FileExtended[];
   onChange: (file: FileExtended[]) => void;
+  value: FileExtended[];
 }) =>
   useCallback(
     (index: number) => {
diff --git a/packages/form/src/components/File/types.ts b/packages/form/src/components/File/types.ts
index 6fb5684bc..41e95c47f 100644
--- a/packages/form/src/components/File/types.ts
+++ b/packages/form/src/components/File/types.ts
@@ -1,25 +1,32 @@
-import { IButtonProperties } from "@prefabs.tech/react-ui";
-
 import type { DropzoneOptions } from "react-dropzone";
 
+import { IButtonProperties } from "@prefabs.tech/react-ui";
+
 export interface FileExtended extends File {
   description?: string;
 }
 
-export type FileMode = "update" | "append";
 export type FileInputMethod = "button" | "dropzone";
+export type FileMode = "append" | "update";
+
+export interface IFileAttachBasicProperties extends Omit<
+  IFileInputBasicProperties,
+  | "dropzoneMessage"
+  | "inputButtonLabel"
+  | "inputButtonLabelSelected"
+  | "inputMethod"
+  | "label"
+  | "selectedFileDisplay"
+> {
+  selectedFileDisplay?: "none" | "popup";
+}
 
 export interface IFileDropzoneBasicProperties {
-  name: string;
-  label?: string;
-  multiple?: boolean;
-  mode?: FileMode;
-  value?: FileExtended[];
-  enableDescription?: boolean;
   addDescriptionLabel?: string;
   descriptionPlaceholder?: string;
   dropzoneMessage?: string;
   dropzoneOptions?: DropzoneOptions;
+  enableDescription?: boolean;
   errorMessages?: {
     default?: string;
     fileInvalidType?: string;
@@ -27,57 +34,50 @@ export interface IFileDropzoneBasicProperties {
     fileTooSmall?: string;
     tooManyFiles?: string;
   };
+  label?: string;
+  mode?: FileMode;
+  multiple?: boolean;
+  name: string;
   onChange: (files: FileExtended[]) => void;
-}
-
-export interface IFileUploadProperties extends Omit<
-  IFileDropzoneBasicProperties,
-  "onChange"
-> {
-  actionsAlignment?: "left" | "right";
-  cancelButtonOptions?: IButtonProperties;
-  onCancel?: () => void;
-  onFileSelect?: (files: FileExtended[]) => FileExtended[];
-  onUpload: (files: FileExtended[]) => void;
-  reverseActionsOrder?: boolean;
-  uploadButtonOptions?: IButtonProperties;
+  value?: FileExtended[];
 }
 
 export type IFileDropzoneProperties = Omit<
   IFileDropzoneBasicProperties,
-  "value" | "onChange"
+  "onChange" | "value"
 >;
 
 export interface IFileInputBasicProperties extends IFileDropzoneBasicProperties {
-  inputButtonLabel?: string;
-  inputButtonLabelSelected?: string;
-  inputMethod?: FileInputMethod;
-  selectButtonProps?: IButtonProperties;
   /**
    * @deprecated deprecated as Overlay is removed.
    */
   emptySelectionMessage?: string;
+  inputButtonLabel?: string;
+  inputButtonLabelSelected?: string;
+  inputMethod?: FileInputMethod;
+  selectButtonProps?: IButtonProperties;
   /**
    * @deprecated deprecated as Overlay is removed.
    */
-  selectedFileDisplay?: "list" | "popup" | "none";
+  selectedFileDisplay?: "list" | "none" | "popup";
 }
 
 export type IFileInputProperties = IFileInputBasicProperties;
 
+export interface IFileUploadProperties extends Omit<
+  IFileDropzoneBasicProperties,
+  "onChange"
+> {
+  actionsAlignment?: "left" | "right";
+  cancelButtonOptions?: IButtonProperties;
+  onCancel?: () => void;
+  onFileSelect?: (files: FileExtended[]) => FileExtended[];
+  onUpload: (files: FileExtended[]) => void;
+  reverseActionsOrder?: boolean;
+  uploadButtonOptions?: IButtonProperties;
+}
+
 export type IFormFileInputProperties = Omit<
   IFileInputBasicProperties,
-  "value" | "onChange"
+  "onChange" | "value"
 >;
-
-export interface IFileAttachBasicProperties extends Omit<
-  IFileInputBasicProperties,
-  | "inputMethod"
-  | "label"
-  | "dropzoneMessage"
-  | "selectedFileDisplay"
-  | "inputButtonLabel"
-  | "inputButtonLabelSelected"
-> {
-  selectedFileDisplay?: "popup" | "none";
-}
diff --git a/packages/form/src/components/Form.tsx b/packages/form/src/components/Form.tsx
index 52912cbb5..d9841ee5e 100644
--- a/packages/form/src/components/Form.tsx
+++ b/packages/form/src/components/Form.tsx
@@ -1,55 +1,55 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import React, { Children, createElement } from "react";
-import { UseFormProps, useForm } from "react-hook-form";
+import { useForm, UseFormProps } from "react-hook-form";
 import { ZodEffects, ZodObject } from "zod";
 
 interface IForm extends UseFormProps {
-  className?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   children: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  validationSchema?: ZodObject<any> | ZodEffects<any>;
+  className?: string;
   html5Validation?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onSubmit: (data: any) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  validationSchema?: ZodEffects<any> | ZodObject<any>;
 }
 
 export const Form: React.FC<IForm> = ({
-  className = "",
   children,
-  onSubmit,
-  validationSchema,
+  className = "",
   html5Validation = false,
   mode,
+  onSubmit,
+  validationSchema,
   ...useFormOptions
 }) => {
   const {
-    register,
-    handleSubmit,
+    formState: { submitCount },
     getFieldState,
-    /* eslint-disable @typescript-eslint/no-unused-vars */
-    formState: { errors, isDirty, isValid, touchedFields, submitCount },
+    handleSubmit,
+
+    register,
   } = useForm({
-    resolver: validationSchema ? zodResolver(validationSchema) : undefined,
     mode: mode,
+    resolver: validationSchema ? zodResolver(validationSchema) : undefined,
     ...useFormOptions,
   });
 
   return (
     <form
       className={className}
-      onSubmit={handleSubmit(onSubmit)}
       noValidate={!html5Validation} // enable/disable default html5 validations
+      onSubmit={handleSubmit(onSubmit)}
     >
       {Children.map(children, (child) => {
         return child.props.name
           ? createElement(child.type, {
               ...{
                 ...child.props,
-                register,
                 getFieldState,
-                submitCount: submitCount,
                 key: child.props.name,
+                register,
+                submitCount: submitCount,
               },
             })
           : child;
diff --git a/packages/form/src/components/FormActions.tsx b/packages/form/src/components/FormActions.tsx
index ce3e8a614..4939fe3a2 100644
--- a/packages/form/src/components/FormActions.tsx
+++ b/packages/form/src/components/FormActions.tsx
@@ -3,7 +3,7 @@ import React, { useMemo } from "react";
 
 interface FormActionsProperties {
   actions?: IButtonProperties[];
-  alignment?: "center" | "left" | "right" | "fill";
+  alignment?: "center" | "fill" | "left" | "right";
   className?: string;
   flowDirection?: "horizontal" | "vertical";
   loading?: boolean;
diff --git a/packages/form/src/components/FormProvider.tsx b/packages/form/src/components/FormProvider.tsx
index 2f394bb0d..f18aec1d4 100644
--- a/packages/form/src/components/FormProvider.tsx
+++ b/packages/form/src/components/FormProvider.tsx
@@ -1,27 +1,27 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import React, { useEffect } from "react";
-import { UseFormProps, useForm, FormProvider } from "react-hook-form";
+import { FormProvider, useForm, UseFormProps } from "react-hook-form";
 import { ZodEffects, ZodObject } from "zod";
 
 import { FormSubmitOptions } from "..";
 
 interface IForm extends UseFormProps {
-  className?: string;
   children: React.ReactNode;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  validationSchema?: ZodObject<any> | ZodEffects<any>;
+  className?: string;
   html5Validation?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onSubmit: (data: any, options?: FormSubmitOptions) => any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  validationSchema?: ZodEffects<any> | ZodObject<any>;
   validationTriggerKey?: string;
 }
 
 export const Provider: React.FC<IForm> = ({
-  className = "",
   children,
+  className = "",
+  html5Validation = false,
   onSubmit,
   validationSchema,
-  html5Validation = false,
   validationTriggerKey,
   ...useFormOptions
 }) => {
@@ -42,7 +42,7 @@ export const Provider: React.FC<IForm> = ({
 
       await onSubmit(data, formSubmitOptions);
     } catch (error) {
-      const { name, message } = error as Error;
+      const { message, name } = error as Error;
 
       methods.setError(name, { message });
     }
@@ -62,8 +62,8 @@ export const Provider: React.FC<IForm> = ({
     <FormProvider {...methods}>
       <form
         className={className}
-        onSubmit={methods.handleSubmit(handleOnSubmit)}
         noValidate={!html5Validation} // enable/disable default html5 validations
+        onSubmit={methods.handleSubmit(handleOnSubmit)}
       >
         {children}
       </form>
diff --git a/packages/form/src/components/NumberInput.tsx b/packages/form/src/components/NumberInput.tsx
index fe3901de7..a8bb0a925 100644
--- a/packages/form/src/components/NumberInput.tsx
+++ b/packages/form/src/components/NumberInput.tsx
@@ -3,12 +3,12 @@ import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
 
 interface Properties extends IInputProperties {
-  label: string | React.ReactNode;
+  label: React.ReactNode | string;
   name: string;
   placeholder?: string;
-  submitCount?: number;
-  showValidState?: boolean;
   showInvalidState?: boolean;
+  showValidState?: boolean;
+  submitCount?: number;
 }
 
 export const NumberInput = ({
@@ -42,17 +42,17 @@ export const NumberInput = ({
         return (
           <Input
             {...others}
+            errorMessage={error?.message}
+            hasError={submitCount > 0 ? checkInvalidState() : undefined}
             label={label}
             name={name}
-            placeholder={placeholder}
-            type="number"
-            value={typeof field.value !== "number" ? "" : field.value}
-            errorMessage={error?.message}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
               const value = event.target.valueAsNumber;
               field.onChange(!isNaN(value) ? value : null);
             }}
-            hasError={submitCount > 0 ? checkInvalidState() : undefined}
+            placeholder={placeholder}
+            type="number"
+            value={typeof field.value !== "number" ? "" : field.value}
           />
         );
       }}
diff --git a/packages/form/src/components/Password.tsx b/packages/form/src/components/Password.tsx
index 53e967563..0f597f155 100644
--- a/packages/form/src/components/Password.tsx
+++ b/packages/form/src/components/Password.tsx
@@ -38,18 +38,18 @@ export const Password: React.FC<CustomInputProperties & IInputProperties> = ({
     <div className={`field ${className}`.trimEnd()}>
       {label && <label htmlFor={name}>{label}</label>}
       <div
-        className="input-field-password"
         aria-invalid={submitCount > 0 ? checkInvalidState() : undefined}
+        className="input-field-password"
       >
         <input
           {...others}
           {...register(name)}
-          name={name}
-          id={name}
-          type={showPassword ? "text" : "password"}
-          placeholder={placeholder}
           aria-invalid={submitCount > 0 ? checkInvalidState() : undefined}
           autoComplete={autoComplete}
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          type={showPassword ? "text" : "password"}
         ></input>
         <span
           className="eye-icon"
diff --git a/packages/form/src/components/RadioInput.tsx b/packages/form/src/components/RadioInput.tsx
index c728cd268..e1cb47def 100644
--- a/packages/form/src/components/RadioInput.tsx
+++ b/packages/form/src/components/RadioInput.tsx
@@ -40,18 +40,18 @@ export const RadioInput: React.FC<IRadioInput> = ({
 
   return (
     <Controller
-      name={name}
       control={control}
+      name={name}
       render={({ field }) => (
         <BasicRadioInput
-          name={field.name}
-          label={label}
-          value={field.value}
           disabled={disabled}
           errorMessage={error?.message}
+          hasError={submitCount > 0 ? checkInvalidState() : undefined}
+          label={label}
+          name={field.name}
           onChange={field.onChange}
           options={options}
-          hasError={submitCount > 0 ? checkInvalidState() : undefined}
+          value={field.value}
           {...others}
         />
       )}
diff --git a/packages/form/src/components/Select.tsx b/packages/form/src/components/Select.tsx
index 855eab08b..01b1961b0 100644
--- a/packages/form/src/components/Select.tsx
+++ b/packages/form/src/components/Select.tsx
@@ -6,24 +6,24 @@ import {
 import React, { useEffect, useMemo } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 
-interface ValidationMessages {
-  maxSelection?: string;
-  minSelection?: string;
-}
-
-interface ISelect<T extends string | number> extends Omit<
+interface ISelect<T extends number | string> extends Omit<
   ISelectProperties<T>,
-  "onChange" | "value" | "hasError" | "errorMessage"
+  "errorMessage" | "hasError" | "onChange" | "value"
 > {
   maxSelection?: number;
   minSelection?: number;
-  showValidState?: boolean;
   showInvalidState?: boolean;
+  showValidState?: boolean;
   submitCount?: number;
   validationMessages?: ValidationMessages;
 }
 
-export const Select = <T extends string | number>({
+interface ValidationMessages {
+  maxSelection?: string;
+  minSelection?: string;
+}
+
+export const Select = <T extends number | string>({
   autoSelectSingleOption = false,
   maxSelection,
   minSelection,
@@ -70,11 +70,24 @@ export const Select = <T extends string | number>({
 
   return (
     <Controller
-      name={name}
       control={control}
       defaultValue={multiple ? [] : undefined}
+      name={name}
+      render={({ field }) => (
+        <BasicSelect
+          autoSelectSingleOption={autoSelectSingleOption}
+          errorMessage={error?.message}
+          hasError={submitCount > 0 ? checkInvalidState() : undefined}
+          multiple={multiple}
+          name={name}
+          onChange={field.onChange}
+          options={options}
+          value={field.value}
+          {...others}
+        />
+      )}
       rules={{
-        validate: (value: T[] | T) => {
+        validate: (value: T | T[]) => {
           if (!multiple || !Array.isArray(value)) {
             return;
           }
@@ -98,19 +111,6 @@ export const Select = <T extends string | number>({
           return true;
         },
       }}
-      render={({ field }) => (
-        <BasicSelect
-          autoSelectSingleOption={autoSelectSingleOption}
-          errorMessage={error?.message}
-          hasError={submitCount > 0 ? checkInvalidState() : undefined}
-          multiple={multiple}
-          name={name}
-          options={options}
-          onChange={field.onChange}
-          value={field.value}
-          {...others}
-        />
-      )}
     />
   );
 };
diff --git a/packages/form/src/components/SwitchInput.tsx b/packages/form/src/components/SwitchInput.tsx
index 74e928679..7a3d601fb 100644
--- a/packages/form/src/components/SwitchInput.tsx
+++ b/packages/form/src/components/SwitchInput.tsx
@@ -7,10 +7,10 @@ import { Controller, useFormContext } from "react-hook-form";
 
 interface ISwitch extends ISwitchInputProperties {
   disabled?: boolean;
-  label?: string | React.ReactNode;
+  label?: React.ReactNode | string;
   name: string;
-  showValidState?: boolean;
   showInvalidState?: boolean;
+  showValidState?: boolean;
   submitCount?: number;
 }
 
@@ -40,18 +40,18 @@ export const SwitchInput: React.FC<ISwitch> = ({
 
   return (
     <Controller
-      name={name}
       control={control}
+      name={name}
       render={({ field }) => (
         <BasicSwitchInput
-          label={label}
-          name={field.name}
           checked={field.value}
           className={className}
-          onChange={field.onChange}
           disabled={disabled}
           errorMessage={error?.message}
           hasError={submitCount > 0 ? checkInvalidState() : undefined}
+          label={label}
+          name={field.name}
+          onChange={field.onChange}
           {...others}
         />
       )}
diff --git a/packages/form/src/components/TextInput.tsx b/packages/form/src/components/TextInput.tsx
index 0c8b0ec6e..b770353da 100644
--- a/packages/form/src/components/TextInput.tsx
+++ b/packages/form/src/components/TextInput.tsx
@@ -1,24 +1,24 @@
 import { IInputProperties, Input } from "@prefabs.tech/react-ui";
 import React from "react";
 import {
-  UseFormGetFieldState,
-  UseFormRegister,
   Controller,
   useFormContext,
+  UseFormGetFieldState,
+  UseFormRegister,
 } from "react-hook-form";
 
 interface ITextInput extends IInputProperties {
   defaultValue?: string;
-  label?: string | React.ReactNode;
-  placeholder?: string;
-  name: string;
-  showValidState?: boolean;
-  showInvalidState?: boolean;
-  submitCount?: number;
   /** @deprecated */
   getFieldState?: UseFormGetFieldState<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+  label?: React.ReactNode | string;
+  name: string;
+  placeholder?: string;
   /** @deprecated */
   register?: UseFormRegister<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
+  showInvalidState?: boolean;
+  showValidState?: boolean;
+  submitCount?: number;
 }
 
 export const TextInput: React.FC<ITextInput> = ({
@@ -47,20 +47,20 @@ export const TextInput: React.FC<ITextInput> = ({
 
   return (
     <Controller
-      name={name}
       control={control}
       defaultValue={defaultValue}
+      name={name}
       render={({ field }) => (
         <Input
           {...others}
-          name={field.name}
+          errorMessage={error?.message}
+          hasError={submitCount > 0 ? checkInvalidState() : undefined}
           label={label}
+          name={field.name}
+          onChange={field.onChange}
           placeholder={placeholder}
-          value={field.value}
           type="text"
-          errorMessage={error?.message}
-          onChange={field.onChange}
-          hasError={submitCount > 0 ? checkInvalidState() : undefined}
+          value={field.value}
         />
       )}
     />
diff --git a/packages/form/src/components/Textarea.tsx b/packages/form/src/components/Textarea.tsx
index 825629884..4abcc1b15 100644
--- a/packages/form/src/components/Textarea.tsx
+++ b/packages/form/src/components/Textarea.tsx
@@ -1,35 +1,35 @@
 import {
-  ITextareaProperties,
   Textarea as BasicTextarea,
+  ITextareaProperties,
 } from "@prefabs.tech/react-ui";
 import {
   Controller,
+  useFormContext,
   UseFormGetFieldState,
   UseFormRegister,
-  useFormContext,
 } from "react-hook-form";
 
 interface ITextarea extends ITextareaProperties {
   defaultValue?: string;
-  label?: string | React.ReactNode;
-  name: string;
-  placeholder?: string;
-  showValidState?: boolean;
-  showInvalidState?: boolean;
-  submitCount?: number;
   /** @deprecated */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getFieldState?: UseFormGetFieldState<any>;
+  label?: React.ReactNode | string;
+  name: string;
+  placeholder?: string;
   /** @deprecated */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   register?: UseFormRegister<any>;
+  showInvalidState?: boolean;
+  showValidState?: boolean;
+  submitCount?: number;
 }
 
 export const Textarea: React.FC<ITextarea> = ({
   defaultValue = "",
   label = "",
-  placeholder = "",
   name,
+  placeholder = "",
   showInvalidState = true,
   showValidState = true,
   submitCount = 0,
@@ -51,18 +51,18 @@ export const Textarea: React.FC<ITextarea> = ({
 
   return (
     <Controller
-      name={name}
       control={control}
       defaultValue={defaultValue}
+      name={name}
       render={({ field }) => (
         <BasicTextarea
-          name={field.name}
+          errorMessage={error?.message}
+          hasError={submitCount > 0 ? checkInvalidState() : undefined}
           label={label}
+          name={field.name}
+          onChange={field.onChange}
           placeholder={placeholder}
           value={field.value}
-          errorMessage={error?.message}
-          onChange={field.onChange}
-          hasError={submitCount > 0 ? checkInvalidState() : undefined}
           {...others}
         />
       )}
diff --git a/packages/form/src/components/Typeahead.tsx b/packages/form/src/components/Typeahead.tsx
index 8ae9af376..605ace5af 100644
--- a/packages/form/src/components/Typeahead.tsx
+++ b/packages/form/src/components/Typeahead.tsx
@@ -2,12 +2,6 @@ import { Typeahead as BasicTypeahead } from "@prefabs.tech/react-ui";
 import React, { InputHTMLAttributes } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 
-type Suggestion = string | number | object;
-
-interface SuggestionOption<T> {
-  suggestionLabel?: T extends object ? keyof T : undefined;
-}
-
 interface IProperties<T>
   extends InputHTMLAttributes<HTMLInputElement>, SuggestionOption<T> {
   data: T[];
@@ -15,14 +9,20 @@ interface IProperties<T>
   emptyMessage?: string;
   forceSelect?: boolean;
   helperText?: string;
-  label?: string | React.ReactNode;
+  label?: React.ReactNode | string;
   loading?: boolean;
   name: string;
-  submitCount?: number;
-  showValidState?: boolean;
-  showInvalidState?: boolean;
-  onSearch?: (value: string | number | readonly string[]) => void;
+  onSearch?: (value: number | readonly string[] | string) => void;
   renderSuggestion?: (value?: T) => React.ReactNode;
+  showInvalidState?: boolean;
+  showValidState?: boolean;
+  submitCount?: number;
+}
+
+type Suggestion = number | object | string;
+
+interface SuggestionOption<T> {
+  suggestionLabel?: T extends object ? keyof T : undefined;
 }
 
 export const Typeahead = <T extends Suggestion>({
@@ -36,12 +36,12 @@ export const Typeahead = <T extends Suggestion>({
   label = "",
   loading,
   name,
+  onSearch,
   placeholder,
-  submitCount = 0,
+  renderSuggestion,
   showInvalidState = true,
   showValidState = true,
-  onSearch,
-  renderSuggestion,
+  submitCount = 0,
   suggestionLabel,
 }: IProperties<T>) => {
   const { control, getFieldState } = useFormContext();
@@ -60,11 +60,11 @@ export const Typeahead = <T extends Suggestion>({
 
   return (
     <Controller
-      name={name}
       control={control}
       defaultValue=""
+      name={name}
       render={({ field }) => {
-        const handleSearch = (value: string | number | readonly string[]) => {
+        const handleSearch = (value: number | readonly string[] | string) => {
           if (onSearch) {
             onSearch(value);
           }
@@ -78,24 +78,24 @@ export const Typeahead = <T extends Suggestion>({
 
         return (
           <BasicTypeahead
-            label={label}
-            name={name}
             className={className}
+            data={data}
+            debounceTime={debounceTime}
             disabled={disabled}
             emptyMessage={emptyMessage}
+            errorMessage={error?.message}
             forceSelect={forceSelect}
+            hasError={submitCount > 0 ? checkInvalidState() : undefined}
             helperText={helperText}
-            placeholder={placeholder}
-            data={data}
-            onChange={field.onChange}
-            value={field.value}
+            label={label}
             loading={loading}
-            debounceTime={debounceTime}
-            hasError={submitCount > 0 ? checkInvalidState() : undefined}
-            errorMessage={error?.message}
+            name={name}
+            onChange={field.onChange}
             onSearch={handleSearch}
+            placeholder={placeholder}
             renderSuggestion={renderSuggestion}
             suggestionLabel={suggestionLabel}
+            value={field.value}
           />
         );
       }}
diff --git a/packages/form/src/components/index.ts b/packages/form/src/components/index.ts
index 1a5bd203a..e5248a377 100644
--- a/packages/form/src/components/index.ts
+++ b/packages/form/src/components/index.ts
@@ -1,8 +1,8 @@
 export * from "./CheckboxInput";
 export * from "./CurrencyPicker";
+export * from "./DateInput";
 export * from "./DatePicker";
 export * from "./DaysInput";
-export * from "./DateInput";
 export * from "./Email";
 export * from "./ErrorMessage";
 export * from "./File";
@@ -13,7 +13,7 @@ export * from "./NumberInput";
 export * from "./Password";
 export * from "./RadioInput";
 export * from "./Select";
+export * from "./SwitchInput";
 export * from "./Textarea";
 export * from "./TextInput";
 export * from "./Typeahead";
-export * from "./SwitchInput";
diff --git a/packages/form/src/hooks/index.ts b/packages/form/src/hooks/index.ts
index 5804df374..78a596560 100644
--- a/packages/form/src/hooks/index.ts
+++ b/packages/form/src/hooks/index.ts
@@ -1,9 +1,9 @@
 import {
-  useFormState,
-  useFieldArray,
   useController,
+  useFieldArray,
   useForm,
   useFormContext,
+  useFormState,
   useWatch,
 } from "react-hook-form";
 
diff --git a/packages/form/src/schemas/Password.ts b/packages/form/src/schemas/Password.ts
index 87a7441d1..ae263f9b5 100644
--- a/packages/form/src/schemas/Password.ts
+++ b/packages/form/src/schemas/Password.ts
@@ -6,16 +6,16 @@ import type { PasswordErrorMessages, StrongPasswordOptions } from "../types";
 const defaultOptions = {
   minLength: 8,
   minLowercase: 0,
-  minUppercase: 0,
   minNumbers: 0,
   minSymbols: 0,
-  returnScore: false,
-  pointsPerUnique: 1,
-  pointsPerRepeat: 0.5,
+  minUppercase: 0,
   pointsForContainingLower: 10,
-  pointsForContainingUpper: 10,
   pointsForContainingNumber: 10,
   pointsForContainingSymbol: 10,
+  pointsForContainingUpper: 10,
+  pointsPerRepeat: 0.5,
+  pointsPerUnique: 1,
+  returnScore: false,
 };
 
 const schema = (
diff --git a/packages/form/src/types/index.ts b/packages/form/src/types/index.ts
index 2d6dcf83a..12e533af7 100644
--- a/packages/form/src/types/index.ts
+++ b/packages/form/src/types/index.ts
@@ -1,22 +1,36 @@
 import {
   FieldValues,
   UseFormClearErrors,
+  useFormContext,
   UseFormGetFieldState,
   UseFormRegister,
   UseFormReset,
   UseFormResetField,
   UseFormSetError,
-  useFormContext,
 } from "react-hook-form";
 
-interface EmailErrorMessages {
-  invalid?: string;
-  required?: string;
-}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AdditionalDefaultValues = Record<string, any>;
 
-interface PasswordErrorMessages {
-  required?: string;
-  weak?: string;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AdditionalFormSchema = Zod.ZodObject<any>;
+
+export type FormSubmitOptions<TFieldValues extends FieldValues = FieldValues> =
+  {
+    clearErrors?: UseFormClearErrors<TFieldValues>;
+    reset?: UseFormReset<TFieldValues>;
+    resetField?: UseFormResetField<TFieldValues>;
+    setError?: UseFormSetError<TFieldValues>;
+  };
+
+export type RenderAdditionalFormFields = (
+  formContext: typeof useFormContext,
+) => React.ReactNode;
+
+interface AdditionalFormFields {
+  defaultValues: AdditionalDefaultValues;
+  renderFields: RenderAdditionalFormFields;
+  schema: AdditionalFormSchema;
 }
 
 interface CustomInputProperties {
@@ -24,39 +38,25 @@ interface CustomInputProperties {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getFieldState?: UseFormGetFieldState<any>;
   helperText?: string;
-  label?: string | React.ReactNode;
+  label?: React.ReactNode | string;
   name: string;
   placeholder?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   register?: UseFormRegister<any>;
-  showValidState?: boolean;
   showInvalidState?: boolean;
+  showValidState?: boolean;
   submitCount?: number;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AdditionalFormSchema = Zod.ZodObject<any>;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AdditionalDefaultValues = Record<string, any>;
-
-export type RenderAdditionalFormFields = (
-  formContext: typeof useFormContext,
-) => React.ReactNode;
-
-interface AdditionalFormFields {
-  defaultValues: AdditionalDefaultValues;
-  schema: AdditionalFormSchema;
-  renderFields: RenderAdditionalFormFields;
+interface EmailErrorMessages {
+  invalid?: string;
+  required?: string;
 }
 
-export type FormSubmitOptions<TFieldValues extends FieldValues = FieldValues> =
-  {
-    clearErrors?: UseFormClearErrors<TFieldValues>;
-    reset?: UseFormReset<TFieldValues>;
-    resetField?: UseFormResetField<TFieldValues>;
-    setError?: UseFormSetError<TFieldValues>;
-  };
+interface PasswordErrorMessages {
+  required?: string;
+  weak?: string;
+}
 
 export type {
   AdditionalFormFields,
diff --git a/packages/form/src/types/validator/strong-password-options.ts b/packages/form/src/types/validator/strong-password-options.ts
index a002fac53..f021b9445 100644
--- a/packages/form/src/types/validator/strong-password-options.ts
+++ b/packages/form/src/types/validator/strong-password-options.ts
@@ -14,25 +14,25 @@ interface StrongPasswordOptions {
   minLowercase?: number | undefined;
 
   /**
-   * Minimum number of upercase letters
+   * Minimum number of numbers
    *
    * @default 1
    */
-  minUppercase?: number | undefined;
+  minNumbers?: number | undefined;
 
   /**
-   * Minimum number of numbers
+   * Minimum number of symbols
    *
    * @default 1
    */
-  minNumbers?: number | undefined;
+  minSymbols?: number | undefined;
 
   /**
-   * Minimum number of symbols
+   * Minimum number of upercase letters
    *
    * @default 1
    */
-  minSymbols?: number | undefined;
+  minUppercase?: number | undefined;
 
   /**
    * Whether or not the validator should return the score
@@ -42,25 +42,27 @@ interface StrongPasswordOptions {
   // returnScore?: false | undefined;
 
   /**
-   * Points earned for each unique character
+   * Points earned for containing lowercase characters
    *
-   * @default 1
+   * @default 10
    */
-  pointsPerUnique?: number | undefined;
+  pointsForContainingLower?: number | undefined;
 
   /**
-   *  Point earned for each repeated character
+   * Points earned for containing numbers
+   *
+   * @default 10
    *
-   * @default 0.5
    */
-  pointsPerRepeat?: number | undefined;
+  pointsForContainingNumber?: number | undefined;
 
   /**
-   * Points earned for containing lowercase characters
+   * Points earned for containing symbols
    *
    * @default 10
+   *
    */
-  pointsForContainingLower?: number | undefined;
+  pointsForContainingSymbol?: number | undefined;
 
   /**
    * Points earned for containing uppercase characters
@@ -70,20 +72,18 @@ interface StrongPasswordOptions {
   pointsForContainingUpper?: number | undefined;
 
   /**
-   * Points earned for containing numbers
-   *
-   * @default 10
+   *  Point earned for each repeated character
    *
+   * @default 0.5
    */
-  pointsForContainingNumber?: number | undefined;
+  pointsPerRepeat?: number | undefined;
 
   /**
-   * Points earned for containing symbols
-   *
-   * @default 10
+   * Points earned for each unique character
    *
+   * @default 1
    */
-  pointsForContainingSymbol?: number | undefined;
+  pointsPerUnique?: number | undefined;
 }
 
 export type { StrongPasswordOptions };
diff --git a/packages/form/stylelint.config.js b/packages/form/stylelint.config.js
new file mode 100644
index 000000000..832e143e4
--- /dev/null
+++ b/packages/form/stylelint.config.js
@@ -0,0 +1,3 @@
+import stylelintConfig from "@prefabs.tech/stylelint-config/index.js";
+
+export default stylelintConfig;
diff --git a/packages/form/vite.config.ts b/packages/form/vite.config.ts
index 62e8b0830..c0cea3e28 100644
--- a/packages/form/vite.config.ts
+++ b/packages/form/vite.config.ts
@@ -1,7 +1,6 @@
-import { resolve, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-
 import react from "@vitejs/plugin-react";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import { defineConfig, loadEnv } from "vite";
 
 import { dependencies, peerDependencies } from "./package.json";
@@ -25,10 +24,10 @@ export default defineConfig(({ mode }) => {
         output: {
           exports: "named",
           globals: {
-            "@prefabs.tech/react-config": "PrefabsTechReactConfig",
-            "@prefabs.tech/react-ui": "PrefabsTechReactUi",
             "@hookform/error-message": "HookFormErrorMessage",
             "@hookform/resolvers": "HookFormResolvers",
+            "@prefabs.tech/react-config": "PrefabsTechReactConfig",
+            "@prefabs.tech/react-ui": "PrefabsTechReactUi",
             react: "React",
             "react-debounce-input": "ReactDebounceInput",
             "react-dom": "ReactDom",
@@ -42,6 +41,9 @@ export default defineConfig(({ mode }) => {
       },
       target: "esnext",
     },
+    optimizeDeps: {
+      include: ["react/jsx-runtime"],
+    },
     plugins: [react()],
     resolve: {
       alias: {
@@ -51,8 +53,5 @@ export default defineConfig(({ mode }) => {
     server: {
       port: Number(process.env.VITE_APP_PORT) || 8889,
     },
-    optimizeDeps: {
-      include: ["react/jsx-runtime"],
-    },
   };
 });
diff --git a/packages/i18n/eslint.config.js b/packages/i18n/eslint.config.js
index 3a4d1020c..9fb397fb0 100644
--- a/packages/i18n/eslint.config.js
+++ b/packages/i18n/eslint.config.js
@@ -8,9 +8,9 @@ export default [
         "error",
         {
           cases: {
+            camelCase: true,
             kebabCase: true,
             pascalCase: true,
-            camelCase: true,
           },
         },
       ],
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index 21cca78e2..84f365a1b 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -23,6 +23,8 @@
     "lint:fix": "eslint . --fix",
     "snapshot:update": "vitest --environment jsdom run --update --passWithNoTests",
     "sort-package": "npx sort-package-json",
+    "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input",
+    "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input",
     "test": "vitest --environment jsdom run --coverage",
     "test:component": "vitest --environment jsdom run component/",
     "test:snapshot": "vitest --environment jsdom run snapshot/",
@@ -39,9 +41,10 @@
     "react-i18next": "15.4.1"
   },
   "devDependencies": {
-    "@prefabs.tech/eslint-config": "0.5.0",
+    "@prefabs.tech/eslint-config": "0.7.0",
     "@prefabs.tech/react-config": "0.72.1",
-    "@prefabs.tech/tsconfig": "0.6.0",
+    "@prefabs.tech/stylelint-config": "0.7.0",
+    "@prefabs.tech/tsconfig": "0.7.0",
     "@testing-library/react": "16.3.2",
     "@types/jsdom": "21.1.7",
     "@types/node": "25.3.5",
@@ -53,6 +56,9 @@
     "prettier": "3.8.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "stylelint": "17.9.1",
+    "stylelint-config-standard": "40.0.0",
+    "stylelint-order": "8.1.1",
     "typescript": "5.9.3",
     "vite": "7.3.2",
     "vitest": "3.0.9"
diff --git a/packages/i18n/src/assets/css/index.css b/packages/i18n/src/assets/css/index.css
index db99d73f4..15aafbf6a 100644
--- a/packages/i18n/src/assets/css/index.css
+++ b/packages/i18n/src/assets/css/index.css
@@ -1 +1 @@
-@import "./locale-badge.css";
+@import url("./locale-badge.css");
diff --git a/packages/i18n/src/components/LocaleSwitcher/index.tsx b/packages/i18n/src/components/LocaleSwitcher/index.tsx
index 09b6145cf..5af4f296b 100644
--- a/packages/i18n/src/components/LocaleSwitcher/index.tsx
+++ b/packages/i18n/src/components/LocaleSwitcher/index.tsx
@@ -25,9 +25,9 @@ const LocaleSwitcher = ({
       .filter((locale) => locale !== "cimode") // Filter out cimode from options. The mode shows key e.g. locale.english as value.
       .map((locale) => {
         return {
-          onClick: () => changeLocale(locale),
-          label: t(`locales.${locale}`),
           key: locale,
+          label: t(`locales.${locale}`),
+          onClick: () => changeLocale(locale),
         };
       });
 
diff --git a/packages/i18n/src/components/__test__/component/LocaleSwitcher.test.tsx b/packages/i18n/src/components/__test__/component/LocaleSwitcher.test.tsx
index 902cfd744..755929b42 100644
--- a/packages/i18n/src/components/__test__/component/LocaleSwitcher.test.tsx
+++ b/packages/i18n/src/components/__test__/component/LocaleSwitcher.test.tsx
@@ -1,4 +1,4 @@
-import { render, fireEvent, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { expect, test } from "vitest";
 
@@ -12,15 +12,15 @@ test.skip("Local switcher dropdown is displayed and locale is changed", async ()
     defaultNS: "app",
     fallbackLng: "en",
     lng: "en",
+    locales: "en:English,fr:Français",
+    react: {
+      useSuspense: false,
+    },
     resources: {
       en: {},
       fr: {},
     },
     supportedLngs: ["en", "fr"],
-    react: {
-      useSuspense: false,
-    },
-    locales: "en:English,fr:Français",
   };
 
   i18n(i18nConfig);
diff --git a/packages/i18n/src/components/__test__/snapshot/LocalSwitcher.snapshot.test.tsx b/packages/i18n/src/components/__test__/snapshot/LocalSwitcher.snapshot.test.tsx
index 0f0796076..6532112a3 100644
--- a/packages/i18n/src/components/__test__/snapshot/LocalSwitcher.snapshot.test.tsx
+++ b/packages/i18n/src/components/__test__/snapshot/LocalSwitcher.snapshot.test.tsx
@@ -11,15 +11,15 @@ test("Component matches snapshot", () => {
     defaultNS: "app",
     fallbackLng: "en",
     lng: "en",
+    locales: "en:English,fr:Français",
+    react: {
+      useSuspense: false,
+    },
     resources: {
       en: {},
       fr: {},
     },
     supportedLngs: ["en", "fr"],
-    react: {
-      useSuspense: false,
-    },
-    locales: "en:English,fr:Français",
   };
 
   i18n(i18nConfig);
diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts
index c1378f16b..55d2ca3cb 100644
--- a/packages/i18n/src/index.ts
+++ b/packages/i18n/src/index.ts
@@ -1,16 +1,16 @@
 import "./assets/css/index.css";
 
+/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+import type { AppConfig } from "@prefabs.tech/react-config";
+import type { InitOptions } from "i18next";
+
 import { default as i18n } from "i18next";
-import { useTranslation, Trans } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 import LocaleSwitcher from "./components/LocaleSwitcher";
 import plugin from "./plugin";
 import { registerTranslations } from "./utils/translations";
 
-/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-import type { AppConfig } from "@prefabs.tech/react-config";
-import type { InitOptions } from "i18next";
-
 declare module "@prefabs.tech/react-config" {
   export interface AppConfig {
     i18n: InitOptions;
@@ -19,4 +19,4 @@ declare module "@prefabs.tech/react-config" {
 
 export default plugin;
 
-export { i18n, LocaleSwitcher, Trans, useTranslation, registerTranslations };
+export { i18n, LocaleSwitcher, registerTranslations, Trans, useTranslation };
diff --git a/packages/i18n/src/plugin.ts b/packages/i18n/src/plugin.ts
index 30d36f7c9..4ef73a66b 100644
--- a/packages/i18n/src/plugin.ts
+++ b/packages/i18n/src/plugin.ts
@@ -1,5 +1,7 @@
 import "./assets/css/index.css";
 
+import type { InitOptions } from "i18next";
+
 import { default as i18n } from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import ChainedBackend from "i18next-chained-backend";
@@ -8,8 +10,6 @@ import { initReactI18next } from "react-i18next";
 import { translations } from "./locales";
 import { registerTranslations } from "./utils/translations";
 
-import type { InitOptions } from "i18next";
-
 const plugin = (options: InitOptions) => {
   i18n
     .use(LanguageDetector)
diff --git a/packages/i18n/stylelint.config.js b/packages/i18n/stylelint.config.js
new file mode 100644
index 000000000..832e143e4
--- /dev/null
+++ b/packages/i18n/stylelint.config.js
@@ -0,0 +1,3 @@
+import stylelintConfig from "@prefabs.tech/stylelint-config/index.js";
+
+export default stylelintConfig;
diff --git a/packages/i18n/vite.config.ts b/packages/i18n/vite.config.ts
index 019043584..512787bd2 100644
--- a/packages/i18n/vite.config.ts
+++ b/packages/i18n/vite.config.ts
@@ -1,7 +1,6 @@
-import { resolve, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-
 import react from "@vitejs/plugin-react";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import { defineConfig, loadEnv } from "vite";
 
 import { dependencies, peerDependencies } from "./package.json";
@@ -38,8 +37,11 @@ export default defineConfig(({ mode }) => {
           },
         },
       },
-      target: "esnext",
       sourcemap: true,
+      target: "esnext",
+    },
+    optimizeDeps: {
+      include: ["react/jsx-runtime"],
     },
     plugins: [react()],
     resolve: {
@@ -50,8 +52,5 @@ export default defineConfig(({ mode }) => {
     server: {
       port: Number(process.env.VITE_APP_PORT) || 8889,
     },
-    optimizeDeps: {
-      include: ["react/jsx-runtime"],
-    },
   };
 });
diff --git a/packages/layout/eslint.config.js b/packages/layout/eslint.config.js
index 3a4d1020c..9fb397fb0 100644
--- a/packages/layout/eslint.config.js
+++ b/packages/layout/eslint.config.js
@@ -8,9 +8,9 @@ export default [
         "error",
         {
           cases: {
+            camelCase: true,
             kebabCase: true,
             pascalCase: true,
-            camelCase: true,
           },
         },
       ],
diff --git a/packages/layout/package.json b/packages/layout/package.json
index 4415c570e..d5827f359 100644
--- a/packages/layout/package.json
+++ b/packages/layout/package.json
@@ -23,6 +23,8 @@
     "lint:fix": "eslint . --fix",
     "snapshot:update": "vitest --environment jsdom run --update --passWithNoTests",
     "sort-package": "npx sort-package-json",
+    "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input",
+    "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input",
     "test": "vitest --environment jsdom run --coverage",
     "test:component": "vitest --environment jsdom run component/",
     "test:snapshot": "vitest --environment jsdom run snapshot/",
@@ -31,11 +33,12 @@
     "typecheck": "tsc --noEmit -p tsconfig.vitest.json --composite false"
   },
   "devDependencies": {
-    "@prefabs.tech/eslint-config": "0.5.0",
+    "@prefabs.tech/eslint-config": "0.7.0",
     "@prefabs.tech/react-config": "0.72.1",
     "@prefabs.tech/react-i18n": "0.72.1",
     "@prefabs.tech/react-ui": "0.72.1",
-    "@prefabs.tech/tsconfig": "0.6.0",
+    "@prefabs.tech/stylelint-config": "0.7.0",
+    "@prefabs.tech/tsconfig": "0.7.0",
     "@testing-library/react": "16.3.2",
     "@types/jsdom": "21.1.7",
     "@types/node": "25.3.5",
@@ -50,6 +53,9 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "6.28.2",
+    "stylelint": "17.9.1",
+    "stylelint-config-standard": "40.0.0",
+    "stylelint-order": "8.1.1",
     "typescript": "5.9.3",
     "vite": "7.3.2",
     "vitest": "3.0.9"
diff --git a/packages/layout/setup-test.ts b/packages/layout/setup-test.ts
index dd2bf8773..a5afc778c 100644
--- a/packages/layout/setup-test.ts
+++ b/packages/layout/setup-test.ts
@@ -9,10 +9,10 @@ vi.mock("@prefabs.tech/react-i18n", async () => {
     ...actual,
     useTranslation: () => {
       return {
-        t: (string_) => string_,
         i18n: {
           changeLanguage: () => new Promise(() => {}),
         },
+        t: (string_) => string_,
       };
     },
   };
diff --git a/packages/layout/src/assets/css/components/layout/footer.css b/packages/layout/src/assets/css/components/layout/footer.css
index da557c47f..323bf6067 100644
--- a/packages/layout/src/assets/css/components/layout/footer.css
+++ b/packages/layout/src/assets/css/components/layout/footer.css
@@ -1,5 +1,5 @@
 .dz-layout > footer {
-  --_layout-footer-bg-color: #ffffff;
+  --_layout-footer-bg-color: #fff;
   --_layout-footer-border: var(
     --dz-layout-footer-border,
     1px solid var(--border-color, #e5e7eb)
@@ -20,7 +20,7 @@
   padding: var(--_layout-footer-padding-v) var(--_layout-footer-padding-h);
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .dz-layout > footer {
     flex-direction: row;
     justify-content: space-between;
diff --git a/packages/layout/src/assets/css/components/layout/header-menu.css b/packages/layout/src/assets/css/components/layout/header-menu.css
index 566c2fc11..bc6a4e410 100644
--- a/packages/layout/src/assets/css/components/layout/header-menu.css
+++ b/packages/layout/src/assets/css/components/layout/header-menu.css
@@ -5,18 +5,23 @@
     0.625rem
   );
 
-  display: flex;
-  flex-wrap: wrap;
   color: var(--_layout-header-color);
-  flex-direction: column;
+  display: flex;
+  flex-flow: column wrap;
   gap: 0.375rem;
 }
 
 .dz-layout .dz-header-menu > ul.dz-user-menu {
   display: flex;
+  flex-direction: column;
   gap: 0.375rem;
   padding: 0;
-  flex-direction: column;
+}
+
+.dz-layout .dz-header-menu span.dz-user-menu-item:hover,
+.dz-layout ul.dz-user-menu li > span.dz-user-menu-item:hover {
+  background-color: var(--dz-layout-nav-item-hover-bg);
+  font-weight: 500;
 }
 
 .dz-layout .dz-header-menu > ul.dz-user-menu li > span.dz-user-menu-item {
@@ -36,27 +41,21 @@
     var(--_layout-header-item-padding-h);
 }
 
-.dz-layout .dz-header-menu span.dz-user-menu-item > i,
-ul.dz-user-menu li span.dz-user-menu-item > i {
+ul.dz-user-menu li span.dz-user-menu-item > i,
+.dz-layout .dz-header-menu span.dz-user-menu-item > i {
   font-size: 12px;
   margin-right: 0.5rem;
 }
 
-.dz-layout ul.dz-user-menu li > span.dz-user-menu-item:hover,
-.dz-layout .dz-header-menu span.dz-user-menu-item:hover {
-  background-color: var(--dz-layout-nav-item-hover-bg);
-  font-weight: 500;
-}
-
 .dz-layout .dz-header-menu .dz-user-menu .dz-nav-item {
   border-radius: 0.25rem;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .dz-layout .dz-header-container > .dz-header-menu {
     align-items: center;
-    justify-content: space-between;
     flex-direction: row;
+    justify-content: space-between;
   }
 
   .dz-layout .dz-header-menu > ul.dz-user-menu {
@@ -67,10 +66,10 @@ ul.dz-user-menu li span.dz-user-menu-item > i {
     cursor: pointer;
   }
 
-  .dz-layout ul.dz-user-menu li > span.dz-user-menu-item:hover,
-  .dz-layout .dz-header-menu span.dz-user-menu-item:hover {
-    background-color: var(--dropdown-trigger-bg-hover, #e5e5e5);
+  .dz-layout .dz-header-menu span.dz-user-menu-item:hover,
+  .dz-layout ul.dz-user-menu li > span.dz-user-menu-item:hover {
     background: initial;
+    background-color: var(--dropdown-trigger-bg-hover, #e5e5e5);
     border-radius: 5px;
     font-weight: initial;
   }
diff --git a/packages/layout/src/assets/css/components/layout/header.css b/packages/layout/src/assets/css/components/layout/header.css
index adce8ecdf..c1d29f44b 100644
--- a/packages/layout/src/assets/css/components/layout/header.css
+++ b/packages/layout/src/assets/css/components/layout/header.css
@@ -1,9 +1,7 @@
 .dz-layout > header {
-  --_layout-header-color: var(--dz-layout-header-color, rgb(84, 84, 84));
-
+  --_layout-header-color: var(--dz-layout-header-color, rgb(84 84 84));
   --_layout-header-padding-h: var(--dz-layout-header-padding-h, 1.5rem);
   --_layout-header-padding-v: var(--dz-layout-header-padding-v, 1rem);
-
   --_layout-header-bg: var(--dz-layout-header-bg, transparent);
   --_layout-header-border: var(
     --dz-layout-header-border,
@@ -19,13 +17,13 @@
 }
 
 .dz-layout > header > .dz-header-container {
+  align-items: center;
   display: grid;
+  gap: 0.25rem;
   grid-template-areas: "logo toggle";
   grid-template-columns: 1fr auto;
   padding: var(--_layout-header-padding-v) var(--_layout-header-padding-h);
   width: 100%;
-  align-items: center;
-  gap: 0.25rem;
 }
 
 .dz-layout > header > .dz-header-container > .dz-logo {
@@ -57,22 +55,22 @@
   display: none;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .dz-layout > header > .dz-header-container {
     display: flex;
-    max-width: var(--_layout-header-max-width);
-    margin: auto;
     gap: var(--_layout-header-gap);
     justify-content: space-between;
+    margin: auto;
+    max-width: var(--_layout-header-max-width);
   }
 
   .dz-layout > header > .dz-header-container > .dz-header-title {
+    align-items: center;
     color: var(--_layout-header-color);
+    display: flex;
     font-size: 1rem;
     font-weight: bold;
     grid-area: title;
-    display: flex;
-    align-items: center;
   }
 
   .dz-layout
@@ -84,8 +82,8 @@
 
   .dz-layout > header > .dz-header-container > .dz-navigation-menu {
     display: flex;
-    grid-area: nav;
     flex-grow: 1;
+    grid-area: nav;
   }
 
   .dz-layout > header > .dz-header-container > .dz-toggle-menu {
@@ -94,8 +92,8 @@
 
   .dz-layout > header > .dz-header-container > .dz-header-menu {
     display: flex;
-    grid-area: menu;
     flex: 2;
+    grid-area: menu;
     justify-content: flex-end;
   }
 
diff --git a/packages/layout/src/assets/css/components/layout/index.css b/packages/layout/src/assets/css/components/layout/index.css
index 5fc5ae4ac..3b8ce4668 100644
--- a/packages/layout/src/assets/css/components/layout/index.css
+++ b/packages/layout/src/assets/css/components/layout/index.css
@@ -1,9 +1,9 @@
-@import "./footer.css";
-@import "./header.css";
-@import "./header-menu.css";
-@import "./layout.css";
-@import "./logo.css";
-@import "./sidebar.css";
-@import "./sticky-collapsible-footer.css";
-@import "./toggle-menu.css";
-@import "./vars.css";
+@import url("./footer.css");
+@import url("./header.css");
+@import url("./header-menu.css");
+@import url("./layout.css");
+@import url("./logo.css");
+@import url("./sidebar.css");
+@import url("./sticky-collapsible-footer.css");
+@import url("./toggle-menu.css");
+@import url("./vars.css");
diff --git a/packages/layout/src/assets/css/components/layout/layout.css b/packages/layout/src/assets/css/components/layout/layout.css
index 4296e6fca..9e5da8653 100644
--- a/packages/layout/src/assets/css/components/layout/layout.css
+++ b/packages/layout/src/assets/css/components/layout/layout.css
@@ -1,8 +1,7 @@
 .dz-layout {
   --_default-padding-h: 1rem;
   --_default-padding-v: 1.5rem;
-
-  --_layout-main-bg: var(--dz-layout-main-bg, #ffffff);
+  --_layout-main-bg: var(--dz-layout-main-bg, #fff);
   --_layout-main-padding-h: var(
     --dz-layout-main-padding-h,
     var(--_default-padding-h)
@@ -21,7 +20,7 @@
   padding: var(--_layout-main-padding-v) var(--_layout-main-padding-h);
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .dz-layout {
     --_default-padding-h: 2rem;
     --_default-padding-v: 2.5rem;
diff --git a/packages/layout/src/assets/css/components/layout/logo.css b/packages/layout/src/assets/css/components/layout/logo.css
index c9835198a..9528deca5 100644
--- a/packages/layout/src/assets/css/components/layout/logo.css
+++ b/packages/layout/src/assets/css/components/layout/logo.css
@@ -21,7 +21,7 @@
 
 .dz-layout .dz-logo .logo-default > span:first-child {
   align-items: center;
-  background: rgba(45, 45, 45, 0.25);
+  background: rgb(45 45 45 / 25%);
   border-radius: 50%;
   display: flex;
   flex-shrink: 0;
diff --git a/packages/layout/src/assets/css/components/layout/sidebar.css b/packages/layout/src/assets/css/components/layout/sidebar.css
index 66d3c555b..6f6ad6d36 100644
--- a/packages/layout/src/assets/css/components/layout/sidebar.css
+++ b/packages/layout/src/assets/css/components/layout/sidebar.css
@@ -1,7 +1,7 @@
 .dz-layout > .dz-sidebar {
   --_default-padding-h: 1rem;
   --_default-padding-v: 1.5rem;
-  --_layout-sidebar-bg: var(--dz-layout-sidebar-bg, #ffffff);
+  --_layout-sidebar-bg: var(--dz-layout-sidebar-bg, #fff);
   --_layout-sidebar-border: var(
     --dz-layout-sidebar-border,
     1px solid var(--border-color, #e5e7eb)
@@ -37,21 +37,22 @@
 }
 
 .dz-layout[aria-expanded="false"] > .dz-sidebar {
-  width: 0;
   overflow: hidden;
+  width: 0;
 }
 
 .dz-layout > .dz-sidebar > .dz-sidebar-header {
   align-items: center;
+  border-bottom: var(--_layout-sidebar-border);
   display: flex;
   gap: 1rem;
   justify-content: space-between;
   padding: var(--_layout-sidebar-padding-v) var(--_layout-sidebar-padding-h);
-  border-bottom: var(--_layout-sidebar-border);
 }
 
 .dz-layout > .dz-sidebar > .dz-sidebar-header > .dz-logo {
   --_layout-logo-max-width: var(--_layout-sidebar-logo-max-width);
+
   width: 100%;
 }
 
@@ -63,12 +64,12 @@
   --_layout-nav-item-padding-h: var(--_layout-sidebar-padding-h);
   --_layout-nav-menu-padding-v: var(--_layout-sidebar-padding-v);
   --_layout-nav-menu-separator-color: var(--_layout-sidebar-separator-color);
+
   flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
 }
 
-.dz-layout > .dz-sidebar > :not(.dz-sidebar-header):not(.dz-navigation-menu) {
+.dz-layout > .dz-sidebar > :not(.dz-sidebar-header, .dz-navigation-menu) {
   border-top: 1px solid var(--_layout-sidebar-separator-color);
 }
 
@@ -78,8 +79,8 @@
 
 .dz-layout > .dz-sidebar .dz-user-menu[aria-orientation="horizontal"] {
   display: flex;
-  justify-content: space-between;
   gap: 0.25rem;
+  justify-content: space-between;
   padding: var(--_layout-sidebar-padding-v) var(--_layout-sidebar-padding-h);
 }
 
@@ -100,15 +101,14 @@
   padding: var(--_layout-sidebar-padding-v) var(--_layout-sidebar-padding-h);
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .dz-layout > .dz-sidebar {
     border-right: var(--_layout-sidebar-border);
     display: flex;
     flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-    width: var(--_layout-sidebar-width);
+    overflow: hidden auto;
     transition: width var(--_layout-sidebar-transition-duration) ease-in;
+    width: var(--_layout-sidebar-width);
   }
 
   .dz-layout[aria-expanded="false"] > .dz-sidebar {
diff --git a/packages/layout/src/assets/css/components/layout/sticky-collapsible-footer.css b/packages/layout/src/assets/css/components/layout/sticky-collapsible-footer.css
index d86eafc32..af93f8855 100644
--- a/packages/layout/src/assets/css/components/layout/sticky-collapsible-footer.css
+++ b/packages/layout/src/assets/css/components/layout/sticky-collapsible-footer.css
@@ -4,7 +4,7 @@
   width: 100%;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .sticky-collapsible {
     background: transparent;
     bottom: 0;
diff --git a/packages/layout/src/assets/css/components/layout/toggle-menu.css b/packages/layout/src/assets/css/components/layout/toggle-menu.css
index ec7960356..746d5a83e 100644
--- a/packages/layout/src/assets/css/components/layout/toggle-menu.css
+++ b/packages/layout/src/assets/css/components/layout/toggle-menu.css
@@ -7,16 +7,18 @@
   line-height: 1;
   padding: 0.75rem;
   text-align: center;
-  width: 2.875rem;
   transition: background-color var(--transition-duration) ease;
+  width: 2.875rem;
 }
 
 .dz-layout .dz-toggle-menu:hover {
   background-color: color-mix(in srgb, var(--_background-color) 10%, white);
 }
+
 .dz-layout .dz-toggle-menu:focus {
   background-color: color-mix(in srgb, var(--_background-color) 10%, white);
 }
+
 .dz-layout .dz-toggle-menu:active {
   background-color: color-mix(in srgb, var(--_background-color) 20%, white);
 }
diff --git a/packages/layout/src/assets/css/components/layout/vars.css b/packages/layout/src/assets/css/components/layout/vars.css
index 6c497cacf..04ecb1e81 100644
--- a/packages/layout/src/assets/css/components/layout/vars.css
+++ b/packages/layout/src/assets/css/components/layout/vars.css
@@ -1,6 +1,5 @@
 :root {
   --dz-layout-logo-max-width: 8rem;
-
   --dz-layout-sidebar-bg: white;
   --dz-layout-sidebar-border: 1px solid var(--border-color, #e5e7eb);
   --dz-layout-sidebar-collapsed-width: 0;
@@ -10,17 +9,14 @@
   --dz-layout-sidebar-padding-v: 0.75rem;
   --dz-layout-sidebar-separator-color: var(--border-color, #e5e7eb);
   --dz-layout-sidebar-width: 16rem;
-
   --dz-layout-nav-item-padding-h: 2rem;
   --dz-layout-nav-item-padding-v: 0.5rem;
   --dz-layout-nav-menu-padding-h: 0;
   --dz-layout-nav-menu-padding-v: 1rem;
   --dz-layout-nav-menu-separator-color: var(--border-color, #e5e7eb);
-
-  --dz-layout-main-bg: #ffffff;
+  --dz-layout-main-bg: #fff;
   --dz-layout-main-padding-h: 1.5rem;
   --dz-layout-main-padding-v: 1.5rem;
-
   --dz-layout-header-bg: transparent;
   --dz-layout-header-border: 1px solid var(--border-color, #e5e7eb);
   --dz-layout-header-color: var(--color, #374151);
@@ -31,11 +27,10 @@
   --dz-layout-header-padding-v: 0.75rem;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   :root {
     --dz-layout-main-padding-h: 2rem;
     --dz-layout-main-padding-v: 1.25rem;
-
     --dz-layout-sidebar-padding-v: 0.5rem;
   }
 }
diff --git a/packages/layout/src/assets/css/index.css b/packages/layout/src/assets/css/index.css
index 273f08179..099627dc5 100644
--- a/packages/layout/src/assets/css/index.css
+++ b/packages/layout/src/assets/css/index.css
@@ -1,4 +1,4 @@
-@import "./components/layout/index.css";
-@import "./layouts/sidebar-only-layout.css";
-@import "./layouts/sidebar-header-layout.css";
-@import "./layouts/header-layout.css";
+@import url("./components/layout/index.css");
+@import url("./layouts/sidebar-only-layout.css");
+@import url("./layouts/sidebar-header-layout.css");
+@import url("./layouts/header-layout.css");
diff --git a/packages/layout/src/assets/css/layouts/header-layout.css b/packages/layout/src/assets/css/layouts/header-layout.css
index 2f71b6863..a9efaf538 100644
--- a/packages/layout/src/assets/css/layouts/header-layout.css
+++ b/packages/layout/src/assets/css/layouts/header-layout.css
@@ -1,10 +1,7 @@
 .dz-header-layout {
   display: grid;
-  grid-template-areas:
-    "header"
-    "main";
-  grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr;
+  grid-template:
+    "header" auto "main" 1fr / 1fr;
   width: 100%;
 }
 
@@ -17,6 +14,11 @@
   margin-right: -0.75rem;
 }
 
+.dz-header-layout > .dz-sidebar > .dz-sidebar-header > .dz-toggle-menu {
+  opacity: 1;
+  transition: opacity 0.5s ease-in;
+}
+
 .dz-header-layout[aria-expanded="false"]
   > .dz-sidebar
   > .dz-sidebar-header
@@ -24,17 +26,13 @@
   opacity: 0;
   transition: opacity 0.5s ease-in;
 }
-.dz-header-layout > .dz-sidebar > .dz-sidebar-header > .dz-toggle-menu {
-  opacity: 1;
-  transition: opacity 0.5s ease-in;
-}
 
 .dz-header-layout > .dz-sidebar {
   grid-area: sidebar;
+  height: 100%;
   position: fixed;
-  z-index: 999;
   width: 100%;
-  height: 100%;
+  z-index: 999;
 }
 
 .dz-header-layout > main {
@@ -53,16 +51,21 @@
   display: none;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .dz-header-layout > .dz-sidebar {
     display: none !important;
   }
 
   .dz-header-layout > header {
+    --_layout-header-padding-h: var(--_layout-main-padding-h);
+    
     display: block;
+    grid-area: header;
   }
+
   .dz-header-layout > footer {
     display: flex;
+    grid-area: footer;
   }
 
   .dz-header-layout {
@@ -75,12 +78,6 @@
     min-height: 100dvh;
   }
 
-  .dz-header-layout > header {
-    --_layout-header-padding-h: var(--_layout-main-padding-h);
-
-    grid-area: header;
-  }
-
   .dz-header-layout > header > .dz-header-container > .dz-toggle-menu {
     margin-right: -0.75rem;
   }
@@ -90,8 +87,4 @@
     max-width: 100%;
     min-width: 100%;
   }
-
-  .dz-header-layout > footer {
-    grid-area: footer;
-  }
 }
diff --git a/packages/layout/src/assets/css/layouts/sidebar-header-layout.css b/packages/layout/src/assets/css/layouts/sidebar-header-layout.css
index 2e0f14ecf..0bd5cd279 100644
--- a/packages/layout/src/assets/css/layouts/sidebar-header-layout.css
+++ b/packages/layout/src/assets/css/layouts/sidebar-header-layout.css
@@ -1,10 +1,7 @@
 .dz-sidebar-header-layout {
   display: grid;
-  grid-template-areas:
-    "header"
-    "main";
-  grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr;
+  grid-template:
+    "header" auto "main" 1fr / 1fr;
   width: 100%;
 }
 
@@ -17,6 +14,11 @@
   margin-right: -0.75rem;
 }
 
+.dz-sidebar-header-layout > .dz-sidebar > .dz-sidebar-header > .dz-toggle-menu {
+  opacity: 1;
+  transition: opacity 0.5s ease-in;
+}
+
 .dz-sidebar-header-layout[aria-expanded="false"]
   > .dz-sidebar
   > .dz-sidebar-header
@@ -24,17 +26,13 @@
   opacity: 0;
   transition: opacity 0.5s ease-in;
 }
-.dz-sidebar-header-layout > .dz-sidebar > .dz-sidebar-header > .dz-toggle-menu {
-  opacity: 1;
-  transition: opacity 0.5s ease-in;
-}
 
 .dz-sidebar-header-layout > .dz-sidebar {
   grid-area: sidebar;
+  height: 100%;
   position: fixed;
-  z-index: 999;
   width: 100%;
-  height: 100%;
+  z-index: 999;
 }
 
 .dz-sidebar-header-layout > main {
@@ -49,13 +47,10 @@
   padding: 0.5rem 0;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .dz-sidebar-header-layout {
-    grid-template-areas:
-      "header header"
-      "sidebar main";
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto 1fr;
+    grid-template:
+      "header header" auto "sidebar main" 1fr / auto 1fr;
     height: 100dvh;
   }
 
@@ -74,8 +69,8 @@
   .dz-sidebar-header-layout > .dz-sidebar {
     grid-area: sidebar;
     position: unset;
-    width: var(--_layout-sidebar-width);
     transition: width var(--_layout-sidebar-transition-duration) ease-in;
+    width: var(--_layout-sidebar-width);
   }
 
   .dz-layout[aria-expanded="false"] > .dz-sidebar {
diff --git a/packages/layout/src/assets/css/layouts/sidebar-only-layout.css b/packages/layout/src/assets/css/layouts/sidebar-only-layout.css
index 5a1698ccb..a1affcd43 100644
--- a/packages/layout/src/assets/css/layouts/sidebar-only-layout.css
+++ b/packages/layout/src/assets/css/layouts/sidebar-only-layout.css
@@ -24,7 +24,7 @@
   padding: 0.5rem 0;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .dz-sidebar-only-layout {
     display: grid;
     grid-template-areas: "sidebar main";
@@ -32,15 +32,13 @@
     height: 100dvh;
   }
 
-  .dz-sidebar-only-layout > .dz-sidebar {
-    grid-area: sidebar;
-  }
-
   .dz-sidebar-only-layout > .dz-sidebar {
     --_layout-sidebar-collapsed-width: var(
       --dz-layout-sidebar-collapsed-width,
       1.5rem
     );
+
+    grid-area: sidebar;
   }
 
   .dz-sidebar-only-layout > main {
diff --git a/packages/layout/src/components/Layout/Header/Header.tsx b/packages/layout/src/components/Layout/Header/Header.tsx
index df2a752dc..b534104d9 100644
--- a/packages/layout/src/components/Layout/Header/Header.tsx
+++ b/packages/layout/src/components/Layout/Header/Header.tsx
@@ -1,24 +1,24 @@
+import type { NavMenuType, UserMenuModeType } from "@prefabs.tech/react-ui";
+
 import { NavigationMenu } from "@prefabs.tech/react-ui";
 import React from "react";
 
 import { UserMenuType } from "@/types";
 
+import { Logo, ToggleMenuMobile } from "../common";
 import { HeaderMenu } from "./HeaderMenu";
 import { HeaderTitle } from "./HeaderTitle";
-import { Logo, ToggleMenuMobile } from "../common";
-
-import type { NavMenuType, UserMenuModeType } from "@prefabs.tech/react-ui";
 
 interface HeaderProperties {
   children?: React.ReactNode;
   displayNavIcons?: boolean;
   headerAddon?: React.ReactNode;
-  navigationMenu?: NavMenuType;
-  title?: string | React.ReactNode;
   menu?: UserMenuType;
+  navigationMenu?: NavMenuType;
   noLocaleSwitcher?: boolean;
   noLogo?: boolean;
   noToggle?: boolean;
+  title?: React.ReactNode | string;
   userMenuMode?: UserMenuModeType;
 }
 
@@ -26,12 +26,12 @@ export const Header = ({
   children,
   displayNavIcons,
   headerAddon,
-  title,
-  navigationMenu,
   menu,
+  navigationMenu,
   noLocaleSwitcher,
   noLogo,
   noToggle,
+  title,
   userMenuMode = "popup",
 }: HeaderProperties) => {
   const renderContent = () => {
@@ -43,9 +43,9 @@ export const Header = ({
         {headerAddon && headerAddon}
         {navigationMenu && (
           <NavigationMenu
-            navigationMenu={navigationMenu}
             displayIcons={displayNavIcons}
             horizontal
+            navigationMenu={navigationMenu}
           />
         )}
         {(menu || !noLocaleSwitcher) && (
diff --git a/packages/layout/src/components/Layout/Header/HeaderMenu.tsx b/packages/layout/src/components/Layout/Header/HeaderMenu.tsx
index 3d92f3b83..afc9beb04 100644
--- a/packages/layout/src/components/Layout/Header/HeaderMenu.tsx
+++ b/packages/layout/src/components/Layout/Header/HeaderMenu.tsx
@@ -1,3 +1,5 @@
+import type { UserMenuModeType } from "@prefabs.tech/react-ui";
+
 import { LocaleSwitcher } from "@prefabs.tech/react-i18n";
 
 import useConfig from "@/hooks/useConfig";
@@ -5,8 +7,6 @@ import { UserMenuType } from "@/types";
 
 import { UserMenu } from "../common/UserMenu";
 
-import type { UserMenuModeType } from "@prefabs.tech/react-ui";
-
 interface HeaderProperties {
   children?: React.ReactNode;
   menu?: UserMenuType;
diff --git a/packages/layout/src/components/Layout/Header/HeaderTitle.tsx b/packages/layout/src/components/Layout/Header/HeaderTitle.tsx
index 8285558fd..fd5a9677d 100644
--- a/packages/layout/src/components/Layout/Header/HeaderTitle.tsx
+++ b/packages/layout/src/components/Layout/Header/HeaderTitle.tsx
@@ -1,6 +1,6 @@
 interface HeaderTitleProperties {
   children?: React.ReactNode;
-  title?: string | React.ReactNode;
+  title?: React.ReactNode | string;
 }
 
 export const HeaderTitle = ({ children, title }: HeaderTitleProperties) => {
diff --git a/packages/layout/src/components/Layout/Layout.tsx b/packages/layout/src/components/Layout/Layout.tsx
index 67a9701e2..20b2d3467 100644
--- a/packages/layout/src/components/Layout/Layout.tsx
+++ b/packages/layout/src/components/Layout/Layout.tsx
@@ -7,7 +7,7 @@ type LayoutProperties = {
   className?: string;
   collapsible?: boolean;
   fixed?: boolean;
-  userMenuLocation?: "sidebar" | "header";
+  userMenuLocation?: "header" | "sidebar";
 };
 
 const LayoutComponent = ({
@@ -34,8 +34,8 @@ const LayoutComponent = ({
 
   return (
     <div
-      className={classNames}
       aria-expanded={isLargeScreen ? menuDesktopOpen : menuMobileOpen}
+      className={classNames}
       data-user-menu-location={userMenuLocation}
     >
       {children}
diff --git a/packages/layout/src/components/Layout/Sidebar/Sidebar.tsx b/packages/layout/src/components/Layout/Sidebar/Sidebar.tsx
index b671b8796..b753fd4a4 100644
--- a/packages/layout/src/components/Layout/Sidebar/Sidebar.tsx
+++ b/packages/layout/src/components/Layout/Sidebar/Sidebar.tsx
@@ -1,12 +1,12 @@
+import type { NavMenuType } from "@prefabs.tech/react-ui";
+
 import { NavigationMenu } from "@prefabs.tech/react-ui";
 
 import { UserMenuModeType, UserMenuType } from "@/types";
 
+import { UserMenu } from "../common/UserMenu";
 import { SidebarFooter } from "./Footer";
 import { SidebarHeader } from "./Header";
-import { UserMenu } from "../common/UserMenu";
-
-import type { NavMenuType } from "@prefabs.tech/react-ui";
 
 type SidebarProperties = {
   children?: React.ReactNode;
@@ -16,9 +16,9 @@ type SidebarProperties = {
   noFooter?: boolean;
   noHeader?: boolean;
   noLocaleSwitcher?: boolean;
+  trigger?: React.ReactNode;
   userMenu?: UserMenuType;
   userMenuMode?: UserMenuModeType;
-  trigger?: React.ReactNode;
 };
 
 export const Sidebar = ({
@@ -29,9 +29,9 @@ export const Sidebar = ({
   noFooter = false,
   noHeader = false,
   noLocaleSwitcher = false,
+  trigger,
   userMenu,
   userMenuMode,
-  trigger,
 }: SidebarProperties) => {
   const renderContent = () => {
     return (
diff --git a/packages/layout/src/components/Layout/common/Copyright.tsx b/packages/layout/src/components/Layout/common/Copyright.tsx
index 6918f4b0e..2957817e4 100644
--- a/packages/layout/src/components/Layout/common/Copyright.tsx
+++ b/packages/layout/src/components/Layout/common/Copyright.tsx
@@ -24,7 +24,7 @@ export const Copyright = ({
 
     if (_holder) {
       const holderElement = _url ? (
-        <a href={_url} target="_blank" rel="noreferrer">
+        <a href={_url} rel="noreferrer" target="_blank">
           {_holder}
         </a>
       ) : (
diff --git a/packages/layout/src/components/Layout/common/Logo.tsx b/packages/layout/src/components/Layout/common/Logo.tsx
index f27dd13b6..03dc547b7 100644
--- a/packages/layout/src/components/Layout/common/Logo.tsx
+++ b/packages/layout/src/components/Layout/common/Logo.tsx
@@ -29,7 +29,7 @@ export const Logo = ({ alt, children, route, src }: Properties) => {
 
   const renderLogo = () => {
     if (_source) {
-      return <img src={_source} alt={_alt} />;
+      return <img alt={_alt} src={_source} />;
     }
 
     return (
diff --git a/packages/layout/src/components/Layout/common/UserMenu/UserMenu.tsx b/packages/layout/src/components/Layout/common/UserMenu/UserMenu.tsx
index 2ba208de2..194ef4405 100644
--- a/packages/layout/src/components/Layout/common/UserMenu/UserMenu.tsx
+++ b/packages/layout/src/components/Layout/common/UserMenu/UserMenu.tsx
@@ -6,11 +6,11 @@ import { UserMenuModeType, UserMenuType } from "@/types";
 
 interface IProperties {
   menu: UserMenuType;
-  userMenuMode?: UserMenuModeType;
   trigger?: React.ReactNode;
+  userMenuMode?: UserMenuModeType;
 }
 
-export const UserMenu = ({ menu, userMenuMode, trigger }: IProperties) => {
+export const UserMenu = ({ menu, trigger, userMenuMode }: IProperties) => {
   const { label: userMenuLabel, menu: userMenu = [] } = menu;
 
   const navigate = useNavigate();
@@ -20,8 +20,8 @@ export const UserMenu = ({ menu, userMenuMode, trigger }: IProperties) => {
       userMenu.map((_menu) => {
         return {
           ..._menu,
-          label: _menu.label as string,
           icon: _menu.icon,
+          label: _menu.label as string,
           onClick: () => {
             if ("onClick" in _menu) {
               _menu.onClick();
@@ -49,7 +49,7 @@ export const UserMenu = ({ menu, userMenuMode, trigger }: IProperties) => {
     switch (userMenuMode) {
       case "horizontal":
         return (
-          <ul className="dz-user-menu" aria-orientation={userMenuMode}>
+          <ul aria-orientation={userMenuMode} className="dz-user-menu">
             {userMenu.map((_menuItem, index) => {
               return (
                 <li key={index}>
@@ -63,9 +63,9 @@ export const UserMenu = ({ menu, userMenuMode, trigger }: IProperties) => {
         return (
           <DropdownMenu
             className="dz-user-menu"
-            renderOption={template}
-            menu={refinedMenu || []}
             label={userMenuLabel}
+            menu={refinedMenu || []}
+            renderOption={template}
             trigger={trigger}
           />
         );
@@ -73,11 +73,11 @@ export const UserMenu = ({ menu, userMenuMode, trigger }: IProperties) => {
         return (
           <NavGroup
             className="dz-user-menu"
+            displayMode={userMenuMode}
             navGroup={{
               label: userMenuLabel,
               submenu: userMenu,
             }}
-            displayMode={userMenuMode}
           />
         );
     }
diff --git a/packages/layout/src/components/__test__/Copyright.snapshot.test.tsx b/packages/layout/src/components/__test__/Copyright.snapshot.test.tsx
index 3377f7f85..8d5ac4ec9 100644
--- a/packages/layout/src/components/__test__/Copyright.snapshot.test.tsx
+++ b/packages/layout/src/components/__test__/Copyright.snapshot.test.tsx
@@ -10,6 +10,10 @@ const appConfig: AppConfig = {
   appPort: "20072",
   appTitle: "Prefabs.tech Skeletons",
   appVersion: "0.0.1",
+  copyright: {
+    holder: "Prefabs.tech",
+    url: "www.prefabs-tech.com",
+  },
   features: {
     showVersion: true,
   },
@@ -18,17 +22,13 @@ const appConfig: AppConfig = {
     debug: true,
     defaultNS: "app",
     fallbackLng: "en",
-    supportedLngs: ["en", "fr"],
     react: {
       useSuspense: false,
     },
     resources: { en: {}, fr: {} },
+    supportedLngs: ["en", "fr"],
   },
   websiteDomain: "//",
-  copyright: {
-    holder: "Prefabs.tech",
-    url: "www.prefabs-tech.com",
-  },
 };
 
 test("Component matches snapshot", () => {
diff --git a/packages/layout/src/components/__test__/Version.snapshot.test.tsx b/packages/layout/src/components/__test__/Version.snapshot.test.tsx
index 0a787656d..5560d3cbe 100644
--- a/packages/layout/src/components/__test__/Version.snapshot.test.tsx
+++ b/packages/layout/src/components/__test__/Version.snapshot.test.tsx
@@ -10,6 +10,10 @@ const appConfig: AppConfig = {
   appPort: "20072",
   appTitle: "Prefabs.tech Skeletons",
   appVersion: "0.0.1",
+  copyright: {
+    holder: "Prefabs.tech",
+    url: "www.prefabs-tech.com",
+  },
   features: {
     showVersion: true,
   },
@@ -18,17 +22,13 @@ const appConfig: AppConfig = {
     debug: true,
     defaultNS: "app",
     fallbackLng: "en",
-    supportedLngs: ["en", "fr"],
     react: {
       useSuspense: false,
     },
     resources: { en: {}, fr: {} },
+    supportedLngs: ["en", "fr"],
   },
   websiteDomain: "//",
-  copyright: {
-    holder: "Prefabs.tech",
-    url: "www.prefabs-tech.com",
-  },
 };
 
 test("Component matches snapshot", () => {
diff --git a/packages/layout/src/index.ts b/packages/layout/src/index.ts
index 3d7caba38..067619628 100644
--- a/packages/layout/src/index.ts
+++ b/packages/layout/src/index.ts
@@ -1,5 +1,7 @@
 import "./assets/css/index.css";
 
+import type { PrefabsTechReactLayoutConfig } from "./types";
+
 import {
   Copyright,
   Header,
@@ -10,9 +12,9 @@ import {
   Sidebar,
   SidebarFooter,
   SidebarHeader,
+  StickyCollapsibleFooter,
   ToggleMenuMobile,
   Version,
-  StickyCollapsibleFooter,
 } from "./components/Layout";
 import {
   LayoutContext,
@@ -28,8 +30,6 @@ import {
   SidebarOnlyLayoutProperties,
 } from "./layouts";
 
-import type { PrefabsTechReactLayoutConfig } from "./types";
-
 declare module "@prefabs.tech/react-config" {
   export interface AppConfig {
     layout?: PrefabsTechReactLayoutConfig;
@@ -37,31 +37,28 @@ declare module "@prefabs.tech/react-config" {
 }
 
 export {
-  // layouts
-  SidebarHeaderLayout,
-  HeaderLayout,
-  SidebarOnlyLayout,
-
-  // wrapper
-  Layout,
-
   // components
   Copyright,
   Header,
+  HeaderLayout,
   HeaderMenu,
   HeaderTitle,
+  // wrapper
+  Layout,
+  // context
+  LayoutContext,
+  LayoutProvider,
   Logo,
+  Sidebar,
   SidebarFooter,
   SidebarHeader,
-  Sidebar,
+  // layouts
+  SidebarHeaderLayout,
+  SidebarOnlyLayout,
   StickyCollapsibleFooter,
   ToggleMenuMobile,
-  Version,
-
-  // context
-  LayoutContext,
-  LayoutProvider,
   useLayoutContext,
+  Version,
 };
 
 export type {
diff --git a/packages/layout/src/layouts/HeaderLayout.tsx b/packages/layout/src/layouts/HeaderLayout.tsx
index efbd8c4ad..b26e73ae6 100644
--- a/packages/layout/src/layouts/HeaderLayout.tsx
+++ b/packages/layout/src/layouts/HeaderLayout.tsx
@@ -1,37 +1,37 @@
-import { Layout, Header, Footer, Sidebar } from "@/components/Layout";
-import { UserMenuType } from "@/types";
-
 import type { NavMenuType, UserMenuModeType } from "@prefabs.tech/react-ui";
 
+import { Footer, Header, Layout, Sidebar } from "@/components/Layout";
+import { UserMenuType } from "@/types";
+
 export interface HeaderLayoutProperties {
-  className?: string;
   children?: React.ReactNode;
+  className?: string;
   customFooter?: React.ReactNode;
   customHeader?: React.ReactNode;
   displayNavIcons?: boolean;
   fixed?: boolean;
   headerAddon?: React.ReactNode;
-  navigationMenu?: NavMenuType;
   menu?: UserMenuType;
+  navigationMenu?: NavMenuType;
   noLocaleSwitcher?: boolean;
   noLogo?: boolean;
   noToggle?: boolean;
-  title?: string | React.ReactNode;
+  title?: React.ReactNode | string;
   userMenuMode?: UserMenuModeType;
 }
 
 export const HeaderLayout: React.FC<HeaderLayoutProperties> = ({
-  className,
   children,
+  className,
   customFooter,
   customHeader,
   displayNavIcons,
   fixed = true,
   headerAddon,
-  navigationMenu,
   menu,
-  noLogo,
+  navigationMenu,
   noLocaleSwitcher,
+  noLogo,
   noToggle,
   title,
   userMenuMode,
@@ -45,12 +45,12 @@ export const HeaderLayout: React.FC<HeaderLayoutProperties> = ({
         <Header
           displayNavIcons={displayNavIcons}
           headerAddon={headerAddon}
-          navigationMenu={navigationMenu}
-          title={title}
           menu={menu}
-          noLogo={noLogo}
+          navigationMenu={navigationMenu}
           noLocaleSwitcher={noLocaleSwitcher}
+          noLogo={noLogo}
           noToggle={noToggle}
+          title={title}
           userMenuMode={userMenuMode}
         ></Header>
       )}
diff --git a/packages/layout/src/layouts/SidebarHeaderLayout.tsx b/packages/layout/src/layouts/SidebarHeaderLayout.tsx
index ef22f455f..059f2e5b7 100644
--- a/packages/layout/src/layouts/SidebarHeaderLayout.tsx
+++ b/packages/layout/src/layouts/SidebarHeaderLayout.tsx
@@ -1,9 +1,9 @@
+import type { NavMenuType } from "@prefabs.tech/react-ui";
+
 import { UserMenuModeType, UserMenuType } from "@/types";
 
 import { Header, Layout, Sidebar } from "..";
 
-import type { NavMenuType } from "@prefabs.tech/react-ui";
-
 export interface SidebarHeaderLayoutProperties {
   children: React.ReactNode;
   className?: string;
@@ -14,10 +14,10 @@ export interface SidebarHeaderLayoutProperties {
   headerAddon?: React.ReactNode;
   navigationMenu?: NavMenuType;
   noLocaleSwitcher?: boolean;
-  title?: string | React.ReactNode;
+  title?: React.ReactNode | string;
   userMenu?: UserMenuType;
+  userMenuLocation?: "header" | "sidebar";
   userMenuMode?: UserMenuModeType;
-  userMenuLocation?: "sidebar" | "header";
   userMenuTrigger?: React.ReactNode;
 }
 
@@ -33,8 +33,8 @@ export const SidebarHeaderLayout = ({
   noLocaleSwitcher = false,
   title,
   userMenu,
-  userMenuMode,
   userMenuLocation = "header",
+  userMenuMode,
   userMenuTrigger,
 }: SidebarHeaderLayoutProperties) => {
   return (
@@ -59,9 +59,9 @@ export const SidebarHeaderLayout = ({
           displayNavIcons={displayNavIcons}
           navigationMenu={navigationMenu}
           noLocaleSwitcher={noLocaleSwitcher}
+          trigger={userMenuTrigger}
           userMenu={userMenu}
           userMenuMode={userMenuMode}
-          trigger={userMenuTrigger}
         ></Sidebar>
       )}
       <main>{children}</main>
diff --git a/packages/layout/src/layouts/SidebarOnlyLayout.tsx b/packages/layout/src/layouts/SidebarOnlyLayout.tsx
index e924b8d8d..b4c832234 100644
--- a/packages/layout/src/layouts/SidebarOnlyLayout.tsx
+++ b/packages/layout/src/layouts/SidebarOnlyLayout.tsx
@@ -1,32 +1,32 @@
+import type { NavMenuType } from "@prefabs.tech/react-ui";
+
 import { Layout, Sidebar } from "@/components/Layout";
 import { UserMenuModeType, UserMenuType } from "@/types";
 
-import type { NavMenuType } from "@prefabs.tech/react-ui";
-
 export interface SidebarOnlyLayoutProperties {
-  className?: string;
   children: React.ReactNode;
+  className?: string;
   collapsible?: boolean;
+  customSidebar?: React.ReactNode;
   displayNavIcons?: boolean;
   navigationMenu?: NavMenuType;
-  customSidebar?: React.ReactNode;
   noLocaleSwitcher?: boolean;
-  noSidebarHeader?: boolean;
   noSidebarFooter?: boolean;
+  noSidebarHeader?: boolean;
   userMenu?: UserMenuType;
   userMenuMode?: UserMenuModeType;
 }
 
 export const SidebarOnlyLayout: React.FC<SidebarOnlyLayoutProperties> = ({
-  className,
   children,
+  className,
   collapsible,
+  customSidebar,
   displayNavIcons,
   navigationMenu,
-  customSidebar,
   noLocaleSwitcher,
-  noSidebarHeader,
   noSidebarFooter,
+  noSidebarHeader,
   userMenu,
   userMenuMode,
 }) => {
@@ -37,8 +37,8 @@ export const SidebarOnlyLayout: React.FC<SidebarOnlyLayoutProperties> = ({
           collapsible={collapsible}
           displayNavIcons={displayNavIcons}
           navigationMenu={navigationMenu}
-          noHeader={noSidebarHeader}
           noFooter={noSidebarFooter}
+          noHeader={noSidebarHeader}
           noLocaleSwitcher={noLocaleSwitcher}
           userMenu={userMenu}
           userMenuMode={userMenuMode}
diff --git a/packages/layout/src/layouts/index.ts b/packages/layout/src/layouts/index.ts
index c5309a910..15c171865 100644
--- a/packages/layout/src/layouts/index.ts
+++ b/packages/layout/src/layouts/index.ts
@@ -1,3 +1,3 @@
-export * from "./SidebarHeaderLayout";
 export * from "./HeaderLayout";
+export * from "./SidebarHeaderLayout";
 export * from "./SidebarOnlyLayout";
diff --git a/packages/layout/src/types/user-menu.ts b/packages/layout/src/types/user-menu.ts
index 71c921e21..4be3a68a3 100644
--- a/packages/layout/src/types/user-menu.ts
+++ b/packages/layout/src/types/user-menu.ts
@@ -1,10 +1,10 @@
 import { NavGroupDisplayMode, NavItemType } from "@prefabs.tech/react-ui";
 
+export type UserMenuModeType = "horizontal" | "popup" | NavGroupDisplayMode;
+
 export type UserMenuType = {
-  label?: string;
-  id?: string;
   className?: string;
+  id?: string;
+  label?: string;
   menu: Array<NavItemType>;
 };
-
-export type UserMenuModeType = NavGroupDisplayMode | "horizontal" | "popup";
diff --git a/packages/layout/stylelint.config.js b/packages/layout/stylelint.config.js
new file mode 100644
index 000000000..832e143e4
--- /dev/null
+++ b/packages/layout/stylelint.config.js
@@ -0,0 +1,3 @@
+import stylelintConfig from "@prefabs.tech/stylelint-config/index.js";
+
+export default stylelintConfig;
diff --git a/packages/layout/vite.config.ts b/packages/layout/vite.config.ts
index 30ade228a..886597416 100644
--- a/packages/layout/vite.config.ts
+++ b/packages/layout/vite.config.ts
@@ -1,7 +1,6 @@
-import { resolve, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-
 import react from "@vitejs/plugin-react";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import { defineConfig, loadEnv } from "vite";
 
 import packageJson from "./package.json";
@@ -32,8 +31,8 @@ export default defineConfig(({ mode }) => {
         output: {
           exports: "named",
           globals: {
-            "@prefabs.tech/react-i18n": "PrefabsTechReactI18n",
             "@prefabs.tech/react-config": "PrefabsTechReactConfig",
+            "@prefabs.tech/react-i18n": "PrefabsTechReactI18n",
             "@prefabs.tech/react-ui": "PrefabsTechReactUi",
             "@prefabs.tech/react-user": "PrefabsTechReactUser",
             react: "React",
@@ -44,6 +43,9 @@ export default defineConfig(({ mode }) => {
       },
       target: "esnext",
     },
+    optimizeDeps: {
+      include: ["react/jsx-runtime"],
+    },
     plugins: [react()],
     resolve: {
       alias: {
@@ -53,8 +55,5 @@ export default defineConfig(({ mode }) => {
     server: {
       port: Number(process.env.VITE_APP_PORT) || 8889,
     },
-    optimizeDeps: {
-      include: ["react/jsx-runtime"],
-    },
   };
 });
diff --git a/packages/ui/package.json b/packages/ui/package.json
index ab57f3aa1..3328771cf 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -24,6 +24,8 @@
     "lint:fix": "eslint . --fix",
     "snapshot:update": "vitest --environment jsdom run --update --passWithNoTests",
     "sort-package": "npx sort-package-json",
+    "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input",
+    "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input",
     "test": "vitest --environment jsdom run --coverage",
     "test:component": "vitest --environment jsdom run component/",
     "test:snapshot": "vitest --environment jsdom run snapshot/",
@@ -41,8 +43,9 @@
   },
   "devDependencies": {
     "@dzangolab/flag-icon-css": "3.4.5",
-    "@prefabs.tech/eslint-config": "0.5.0",
-    "@prefabs.tech/tsconfig": "0.6.0",
+    "@prefabs.tech/eslint-config": "0.7.0",
+    "@prefabs.tech/stylelint-config": "0.7.0",
+    "@prefabs.tech/tsconfig": "0.7.0",
     "@testing-library/jest-dom": "6.6.4",
     "@testing-library/react": "16.3.2",
     "@types/file-saver": "2.0.7",
@@ -59,6 +62,9 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "6.28.2",
+    "stylelint": "17.9.1",
+    "stylelint-config-standard": "40.0.0",
+    "stylelint-order": "8.1.1",
     "typescript": "5.9.3",
     "vite": "7.3.2",
     "vitest": "3.0.9"
diff --git a/packages/ui/src/Accordion/Accordion.tsx b/packages/ui/src/Accordion/Accordion.tsx
index 15fd40087..2ec91e86f 100644
--- a/packages/ui/src/Accordion/Accordion.tsx
+++ b/packages/ui/src/Accordion/Accordion.tsx
@@ -1,24 +1,24 @@
-import React, { useId, useState } from "react";
-
 import type { ReactElement } from "react";
 
+import React, { useId, useState } from "react";
+
 type Properties = {
-  className?: string;
+  activeIcon?: React.ReactNode | string;
+  canSelfCollapse?: boolean;
   children: ReactElement | ReactElement[];
+  className?: string;
   defaultActiveIndex?: number;
   direction?: "horizontal" | "vertical";
-  activeIcon?: string | React.ReactNode;
-  canSelfCollapse?: boolean;
-  inactiveIcon?: string | React.ReactNode;
+  inactiveIcon?: React.ReactNode | string;
 };
 
 const Accordion: React.FC<Properties> = ({
-  className = "",
+  activeIcon,
+  canSelfCollapse = false,
   children,
+  className = "",
   defaultActiveIndex,
   direction = "vertical",
-  activeIcon,
-  canSelfCollapse = false,
   inactiveIcon,
 }) => {
   const id = useId();
@@ -37,7 +37,7 @@ const Accordion: React.FC<Properties> = ({
     throw new Error("Accordion needs at least one children");
   }
 
-  const renderIcon = (icon: string | React.ReactNode) => {
+  const renderIcon = (icon: React.ReactNode | string) => {
     if (!icon) {
       return null;
     }
@@ -51,8 +51,8 @@ const Accordion: React.FC<Properties> = ({
 
   return (
     <ul
-      className={`accordion ${direction} ${className}`}
       aria-orientation={direction}
+      className={`accordion ${direction} ${className}`}
     >
       {childNodes.map((item, index) => {
         const isActive = active === index;
@@ -65,11 +65,11 @@ const Accordion: React.FC<Properties> = ({
           <li className={isActive ? "active" : ""} key={key}>
             <button
               aria-controls={bodyId}
+              aria-disabled={!canSelfCollapse && isActive}
+              aria-expanded={isActive}
               aria-label={title}
               onClick={() => handleClick(index)}
               type="button"
-              aria-disabled={!canSelfCollapse && isActive}
-              aria-expanded={isActive}
             >
               {icon ? renderIcon(icon) : null}
               <span>{title}</span>
@@ -80,7 +80,7 @@ const Accordion: React.FC<Properties> = ({
                 : null}
             </button>
 
-            <div role="region" id={bodyId}>
+            <div id={bodyId} role="region">
               <div className="content-wrapper">{childNodes[index]}</div>
             </div>
           </li>
diff --git a/packages/ui/src/Accordion/__test__/Accordion.test.tsx b/packages/ui/src/Accordion/__test__/Accordion.test.tsx
index 7dc8a2424..8553a550d 100644
--- a/packages/ui/src/Accordion/__test__/Accordion.test.tsx
+++ b/packages/ui/src/Accordion/__test__/Accordion.test.tsx
@@ -6,21 +6,21 @@ import { SubPane } from "../../components/SubPane";
 import Accordion from "../Accordion";
 
 const accordionValues = {
-  activeIcon: "pi pi-chevron-up",
-  inactiveIcon: "pi pi-chevron-down",
   accordionId1: "test-accordion-1",
   accordionId2: "test-accordion-2",
+  activeIcon: "pi pi-chevron-up",
+  inactiveIcon: "pi pi-chevron-down",
 };
 
 const paneValues = {
   pane1: {
-    icon: "pi pi-home",
     content: "Pane 1 content",
+    icon: "pi pi-home",
     title: "Topic 1",
   },
   pane2: {
-    icon: "pi pi-list",
     content: "Pane 2 content",
+    icon: "pi pi-list",
     title: "Topic 2",
   },
 };
@@ -31,10 +31,10 @@ test("no subpane is active when defaultActiveKey prop is not passed", async () =
       activeIcon={accordionValues.activeIcon}
       inactiveIcon={accordionValues.inactiveIcon}
     >
-      <SubPane title={paneValues.pane1.title} icon={paneValues.pane1.icon}>
+      <SubPane icon={paneValues.pane1.icon} title={paneValues.pane1.title}>
         <p>{paneValues.pane1.content}</p>
       </SubPane>
-      <SubPane title={paneValues.pane2.title} icon={paneValues.pane2.icon}>
+      <SubPane icon={paneValues.pane2.icon} title={paneValues.pane2.title}>
         <p>{paneValues.pane2.content}</p>
       </SubPane>
     </Accordion>,
@@ -51,14 +51,14 @@ test("no subpane is active when defaultActiveKey prop is not passed", async () =
 test("correct subpane is active", async () => {
   render(
     <Accordion
-      defaultActiveIndex={1}
       activeIcon={accordionValues.activeIcon}
+      defaultActiveIndex={1}
       inactiveIcon={accordionValues.inactiveIcon}
     >
-      <SubPane title={paneValues.pane1.title} icon={paneValues.pane1.icon}>
+      <SubPane icon={paneValues.pane1.icon} title={paneValues.pane1.title}>
         <p>{paneValues.pane1.content}</p>
       </SubPane>
-      <SubPane title={paneValues.pane2.title} icon={paneValues.pane2.icon}>
+      <SubPane icon={paneValues.pane2.icon} title={paneValues.pane2.title}>
         <p>{paneValues.pane2.content}</p>
       </SubPane>
     </Accordion>,
diff --git a/packages/ui/src/Buttons/ButtonBasic/index.tsx b/packages/ui/src/Buttons/ButtonBasic/index.tsx
index 119d98311..aa29149f6 100644
--- a/packages/ui/src/Buttons/ButtonBasic/index.tsx
+++ b/packages/ui/src/Buttons/ButtonBasic/index.tsx
@@ -2,22 +2,22 @@ import { ButtonHTMLAttributes, FC, ReactNode } from "react";
 import { Link } from "react-router-dom";
 
 export interface IButtonProperties extends ButtonHTMLAttributes<HTMLButtonElement> {
-  children?: string | ReactNode;
-  iconLeft?: string | ReactNode;
-  iconRight?: string | ReactNode;
+  children?: ReactNode | string;
+  iconLeft?: ReactNode | string;
+  iconRight?: ReactNode | string;
   label?: string;
   loading?: boolean;
+  rounded?: boolean;
   severity?:
+    | "alternate"
+    | "danger"
     | "primary"
     | "secondary"
-    | "alternate"
     | "success"
-    | "danger"
     | "warning";
-  size?: "small" | "medium" | "large";
+  size?: "large" | "medium" | "small";
   to?: string;
-  variant?: "outlined" | "filled" | "textOnly";
-  rounded?: boolean;
+  variant?: "filled" | "outlined" | "textOnly";
 }
 
 export const Button: FC<IButtonProperties> = ({
@@ -29,12 +29,12 @@ export const Button: FC<IButtonProperties> = ({
   label,
   loading,
   onClick,
+  rounded = false,
   severity = "primary",
   size = "medium",
-  to,
   title,
+  to,
   variant = "filled",
-  rounded = false,
   ...otherProperties
 }) => {
   const buttonClassName = [
@@ -88,10 +88,10 @@ export const Button: FC<IButtonProperties> = ({
   const renderButton = (role: string) => {
     return (
       <button
-        role={role}
         className={buttonClassName}
         disabled={loading || disabled}
         onClick={onClick}
+        role={role}
         title={title}
         {...otherProperties}
       >
@@ -103,7 +103,7 @@ export const Button: FC<IButtonProperties> = ({
   };
 
   return to ? (
-    <Link to={to} className="dz-button-link">
+    <Link className="dz-button-link" to={to}>
       {renderButton("link")}
     </Link>
   ) : (
diff --git a/packages/ui/src/Buttons/ExportButton/index.tsx b/packages/ui/src/Buttons/ExportButton/index.tsx
index 7afc26bc8..575ee3221 100644
--- a/packages/ui/src/Buttons/ExportButton/index.tsx
+++ b/packages/ui/src/Buttons/ExportButton/index.tsx
@@ -7,30 +7,30 @@ import { Button } from "../ButtonBasic";
 
 export interface ExportButtonProperties extends ComponentProps<typeof Button> {
   filename?: string;
-  sheetName?: string;
-  sheetOptions?: WorkSheetOptions;
-  onExportStart?: () => void;
-  onExportEnd?: () => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getData: () => Array<Array<any>>;
+  onExportEnd?: () => void;
+  onExportStart?: () => void;
+  sheetName?: string;
+  sheetOptions?: WorkSheetOptions;
 }
 
 export const ExportButton: React.FC<ExportButtonProperties> = ({
-  label = "Export XLSX",
   filename,
-  sheetName,
-  sheetOptions,
   getData,
-  onExportStart,
+  label = "Export XLSX",
   onExportEnd,
+  onExportStart,
+  sheetName,
+  sheetOptions,
   ...buttonOptions
 }) => {
   const [exporting, triggerExport] = useExporter({
     filename,
+    onExportEnd,
+    onExportStart,
     sheetName,
     sheetOptions,
-    onExportStart,
-    onExportEnd,
   });
 
   const onExportButtonClick = useCallback(() => {
@@ -40,9 +40,9 @@ export const ExportButton: React.FC<ExportButtonProperties> = ({
 
   return (
     <Button
-      label={label}
       disabled={exporting}
       iconRight={exporting && <LoadingIcon />}
+      label={label}
       onClick={onExportButtonClick}
       {...buttonOptions}
     />
diff --git a/packages/ui/src/Buttons/SubmitButton/index.tsx b/packages/ui/src/Buttons/SubmitButton/index.tsx
index cde4b208f..037dd64cf 100644
--- a/packages/ui/src/Buttons/SubmitButton/index.tsx
+++ b/packages/ui/src/Buttons/SubmitButton/index.tsx
@@ -16,10 +16,10 @@ export const SubmitButton = ({
 }: SubmitButtonProperties) => {
   return (
     <Button
-      type="submit"
-      label={label}
       disabled={disabled || loading}
       iconRight={loading && <LoadingIcon />}
+      label={label}
+      type="submit"
     />
   );
 };
diff --git a/packages/ui/src/Buttons/index.ts b/packages/ui/src/Buttons/index.ts
index bbed1375f..ef8d4fd44 100644
--- a/packages/ui/src/Buttons/index.ts
+++ b/packages/ui/src/Buttons/index.ts
@@ -1,3 +1,3 @@
+export * from "./ButtonBasic";
 export * from "./ExportButton";
 export * from "./SubmitButton";
-export * from "./ButtonBasic";
diff --git a/packages/ui/src/Card/Card.tsx b/packages/ui/src/Card/Card.tsx
index 7a9d6fa57..62d306fcb 100644
--- a/packages/ui/src/Card/Card.tsx
+++ b/packages/ui/src/Card/Card.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 
 interface CardProperties {
+  children: React.ReactNode;
   className?: string;
   outlined?: boolean;
-  children: React.ReactNode;
 }
 
 export const Card: React.FC<CardProperties> = ({
-  className = "",
   children,
+  className = "",
   outlined = false,
 }) => {
   return (
diff --git a/packages/ui/src/ConfirmationModal/__test__/ConfirmationModal.test.tsx b/packages/ui/src/ConfirmationModal/__test__/ConfirmationModal.test.tsx
index 7f02a9e1e..7bba944fd 100644
--- a/packages/ui/src/ConfirmationModal/__test__/ConfirmationModal.test.tsx
+++ b/packages/ui/src/ConfirmationModal/__test__/ConfirmationModal.test.tsx
@@ -1,15 +1,14 @@
+import { fireEvent, render, screen } from "@testing-library/react";
 import { describe } from "node:test";
-
-import { render, screen, fireEvent } from "@testing-library/react";
 import React from "react";
-import { expect, test, vi, beforeAll } from "vitest";
+import { beforeAll, expect, test, vi } from "vitest";
 
 import { ConfirmationModal } from "..";
 
 const confirmationModalData = {
+  closeIcon: "pi pi-times",
   header: "Confirmation required",
   message: "Are you sure?",
-  closeIcon: "pi pi-times",
 };
 
 describe("Confirmation modal", () => {
@@ -21,9 +20,9 @@ describe("Confirmation modal", () => {
   test("should render the confirmation modal when visible is true", () => {
     render(
       <ConfirmationModal
-        visible={true}
         header={confirmationModalData.header}
         message={confirmationModalData.message}
+        visible={true}
       />,
     );
 
@@ -34,9 +33,9 @@ describe("Confirmation modal", () => {
   test("should not render the confirmation modal when visible is false", () => {
     render(
       <ConfirmationModal
-        visible={false}
         header={confirmationModalData.header}
         message={confirmationModalData.message}
+        visible={false}
       />,
     );
 
@@ -47,10 +46,10 @@ describe("Confirmation modal", () => {
   test("should render icon passed as ReactNode correctly", () => {
     render(
       <ConfirmationModal
-        visible={true}
         header={confirmationModalData.header}
-        message={confirmationModalData.message}
         icon={<span>!</span>}
+        message={confirmationModalData.message}
+        visible={true}
       />,
     );
     expect(screen.getByText("!")).toBeInTheDocument();
@@ -59,11 +58,11 @@ describe("Confirmation modal", () => {
   test("should render close button when closable is true", () => {
     render(
       <ConfirmationModal
-        visible={true}
         closable={true}
+        closeIcon={confirmationModalData.closeIcon}
         header={confirmationModalData.header}
         message={confirmationModalData.message}
-        closeIcon={confirmationModalData.closeIcon}
+        visible={true}
       />,
     );
 
@@ -74,11 +73,11 @@ describe("Confirmation modal", () => {
   test("should not render close button when closable is false", () => {
     render(
       <ConfirmationModal
-        visible={true}
         closable={false}
+        closeIcon={confirmationModalData.closeIcon}
         header={confirmationModalData.header}
         message={confirmationModalData.message}
-        closeIcon={confirmationModalData.closeIcon}
+        visible={true}
       />,
     );
 
@@ -90,11 +89,11 @@ describe("Confirmation modal", () => {
     const hanldeAccept = vi.fn();
     render(
       <ConfirmationModal
-        visible={true}
+        accept={hanldeAccept}
         header={confirmationModalData.header}
         message={confirmationModalData.message}
-        accept={hanldeAccept}
         onHide={vi.fn()}
+        visible={true}
       />,
     );
     fireEvent.click(screen.getByText("Yes"));
@@ -105,11 +104,11 @@ describe("Confirmation modal", () => {
     const handleReject = vi.fn();
     render(
       <ConfirmationModal
-        visible={true}
         header={confirmationModalData.header}
         message={confirmationModalData.message}
-        reject={handleReject}
         onHide={vi.fn()}
+        reject={handleReject}
+        visible={true}
       />,
     );
     fireEvent.click(screen.getByText("No"));
@@ -120,11 +119,11 @@ describe("Confirmation modal", () => {
     const handleHide = vi.fn();
     render(
       <ConfirmationModal
-        visible={true}
+        closeIcon={confirmationModalData.closeIcon}
         header={confirmationModalData.header}
         message={confirmationModalData.message}
-        closeIcon={confirmationModalData.closeIcon}
         onHide={handleHide}
+        visible={true}
       />,
     );
 
diff --git a/packages/ui/src/ConfirmationModal/index.tsx b/packages/ui/src/ConfirmationModal/index.tsx
index 945e243e6..142778f3f 100644
--- a/packages/ui/src/ConfirmationModal/index.tsx
+++ b/packages/ui/src/ConfirmationModal/index.tsx
@@ -3,35 +3,35 @@ import { DialogHTMLAttributes, ReactNode, useEffect, useRef } from "react";
 import { Button, IButtonProperties } from "..";
 
 export interface IModalProperties extends DialogHTMLAttributes<HTMLDialogElement> {
+  accept?: () => void;
   acceptButtonOptions?: IButtonProperties;
   cancelButtonOptions?: IButtonProperties;
   closable?: boolean;
-  closeIcon?: string | ReactNode;
+  closeIcon?: ReactNode | string;
   footer?: ReactNode | string;
   header?: ReactNode | string;
   icon?: ReactNode | string;
   message?: ReactNode | string;
-  visible?: boolean;
-  accept?: () => void;
   onHide?: () => void;
   reject?: () => void;
+  visible?: boolean;
 }
 
 export const ConfirmationModal = ({
   accept,
   acceptButtonOptions,
-  reject,
   cancelButtonOptions,
+  children,
+  className = "",
   closable = true,
   closeIcon = "pi pi-times",
-  className = "",
-  message,
+  footer,
   header,
   icon = "pi pi-exclamation-triangle",
-  visible,
+  message,
   onHide,
-  footer,
-  children,
+  reject,
+  visible,
   ...dialogOptions
 }: IModalProperties) => {
   const dialogReference = useRef<HTMLDialogElement>(null);
@@ -59,9 +59,6 @@ export const ConfirmationModal = ({
         {closable && (
           <Button
             data-testid="close-button"
-            variant="textOnly"
-            size="small"
-            severity="secondary"
             iconLeft={
               typeof closeIcon === "string" ? (
                 <i className={closeIcon} />
@@ -71,6 +68,9 @@ export const ConfirmationModal = ({
             }
             onClick={onHide}
             rounded
+            severity="secondary"
+            size="small"
+            variant="textOnly"
           />
         )}
       </div>
@@ -86,9 +86,9 @@ export const ConfirmationModal = ({
       <div className="dz-dialog-footer">
         <Button
           label="No"
-          variant="outlined"
-          severity="secondary"
           onClick={reject || onHide}
+          severity="secondary"
+          variant="outlined"
           {...cancelButtonOptions}
         />
         <Button
@@ -115,9 +115,9 @@ export const ConfirmationModal = ({
 
   return visible ? (
     <dialog
-      ref={dialogReference}
       className={`dz-dialog ${className}`.trimEnd()}
       onClose={onHide}
+      ref={dialogReference}
       {...dialogOptions}
     >
       {renderHeader()}
diff --git a/packages/ui/src/CountryDisplay/index.tsx b/packages/ui/src/CountryDisplay/index.tsx
index 0b99e0d79..1d9237908 100644
--- a/packages/ui/src/CountryDisplay/index.tsx
+++ b/packages/ui/src/CountryDisplay/index.tsx
@@ -1,9 +1,8 @@
 import React, { useMemo } from "react";
 
-import { getFallbackTranslation, getFlagClass } from "../utils/country-picker";
-
 import type { Locales } from "../types";
 
+import { getFallbackTranslation, getFlagClass } from "../utils/country-picker";
 import "../assets/css/country-display.css";
 
 import("@dzangolab/flag-icon-css/css/flag-icon.min.css");
@@ -17,8 +16,8 @@ interface CountryDisplayProperties {
   flagsStyle?: "circle" | "rectangular" | "square";
   locale?: string;
   locales?: Locales;
-  showFlag?: boolean;
   renderOption?: (code: string, label: string) => React.ReactNode;
+  showFlag?: boolean;
 }
 
 export const Country: React.FC<CountryDisplayProperties> = ({
@@ -30,8 +29,8 @@ export const Country: React.FC<CountryDisplayProperties> = ({
   flagsStyle = "rectangular",
   locale = "en",
   locales = {},
-  showFlag = true,
   renderOption,
+  showFlag = true,
 }) => {
   const countryCode = code?.trim();
 
diff --git a/packages/ui/src/Data/__test__/Data.snapshot.test.tsx b/packages/ui/src/Data/__test__/Data.snapshot.test.tsx
index b27bcc648..ecd8a56fb 100644
--- a/packages/ui/src/Data/__test__/Data.snapshot.test.tsx
+++ b/packages/ui/src/Data/__test__/Data.snapshot.test.tsx
@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 import React from "react";
-import { expect, test, describe } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import { Data } from "..";
 
@@ -12,14 +12,14 @@ describe("Data Component", () => {
 
   test("matches the snapshot with 'stat' mode", () => {
     const { container } = render(
-      <Data caption="Name" value="John" mode="stat" />,
+      <Data caption="Name" mode="stat" value="John" />,
     );
     expect(container).toMatchSnapshot();
   });
 
   test("matches the snapshot with custom className", () => {
     const { container } = render(
-      <Data caption="Name" value="John" className="custom-class" />,
+      <Data caption="Name" className="custom-class" value="John" />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/ui/src/Data/index.tsx b/packages/ui/src/Data/index.tsx
index 369f00119..bcc18f239 100644
--- a/packages/ui/src/Data/index.tsx
+++ b/packages/ui/src/Data/index.tsx
@@ -3,15 +3,15 @@ import { FC, ReactNode } from "react";
 type DataProperties = {
   caption: ReactNode;
   className?: string;
-  value: ReactNode;
   mode?: "attr" | "stat";
+  value: ReactNode;
 };
 
 export const Data: FC<DataProperties> = ({
-  className = "",
   caption,
-  value,
+  className = "",
   mode = "attr",
+  value,
 }) => {
   return (
     <div
diff --git a/packages/ui/src/Divider/index.tsx b/packages/ui/src/Divider/index.tsx
index 3043b1d80..a71729920 100644
--- a/packages/ui/src/Divider/index.tsx
+++ b/packages/ui/src/Divider/index.tsx
@@ -7,9 +7,9 @@ interface IProperties {
 const Divider: React.FC<IProperties> = ({ orientation = "horizontal" }) => {
   return (
     <div
-      role="separator"
       className="divider"
       data-aria-orientation={orientation}
+      role="separator"
     />
   );
 };
diff --git a/packages/ui/src/DropdownMenu/Menu.tsx b/packages/ui/src/DropdownMenu/Menu.tsx
index 4f444eb56..d9e6b24f4 100644
--- a/packages/ui/src/DropdownMenu/Menu.tsx
+++ b/packages/ui/src/DropdownMenu/Menu.tsx
@@ -4,18 +4,18 @@ export interface MenuItem {
   className?: string;
   disabled?: boolean;
   display?: boolean;
+  icon?: React.ReactNode;
   key?: string;
   label?: string;
-  icon?: React.ReactNode;
+  onClick?: () => void;
   severity?:
+    | "alternate"
+    | "danger"
     | "primary"
     | "secondary"
-    | "alternate"
     | "success"
-    | "danger"
     | "warning"
     | undefined;
-  onClick?: () => void;
 }
 
 export interface MenuProperties {
@@ -37,20 +37,20 @@ const Menu: React.FC<MenuProperties> = ({
         const {
           className,
           disabled,
-          icon,
-          onClick,
           display = true,
+          icon,
           key,
           label,
+          onClick,
           severity,
         } = item;
 
         return display ? (
           <li
+            aria-disabled={disabled}
+            className={`${className || ""} ${highlightItem === (key || `menu-item-${index}`) ? "highlight" : ""} ${severity}`.trim()}
             key={key || `menu-item-${index}`}
             onClick={disabled ? undefined : onClick}
-            className={`${className || ""} ${highlightItem === (key || `menu-item-${index}`) ? "highlight" : ""} ${severity}`.trim()}
-            aria-disabled={disabled}
           >
             {renderOption ? (
               renderOption(item)
diff --git a/packages/ui/src/DropdownMenu/__test__/DropdownMenu.snapshot.test.tsx b/packages/ui/src/DropdownMenu/__test__/DropdownMenu.snapshot.test.tsx
index ccd008d09..377948d56 100644
--- a/packages/ui/src/DropdownMenu/__test__/DropdownMenu.snapshot.test.tsx
+++ b/packages/ui/src/DropdownMenu/__test__/DropdownMenu.snapshot.test.tsx
@@ -37,14 +37,14 @@ describe("DropdownMenu", () => {
 
   test("should match snapshot with hideDropdownIcon set to true", () => {
     const { container } = render(
-      <DropdownMenu menu={menuItems} hideDropdownIcon />,
+      <DropdownMenu hideDropdownIcon menu={menuItems} />,
     );
     expect(container).toMatchSnapshot();
   });
 
   test("should match snapshot with custom className", () => {
     const { container } = render(
-      <DropdownMenu menu={menuItems} className="custom-class" />,
+      <DropdownMenu className="custom-class" menu={menuItems} />,
     );
     expect(container).toMatchSnapshot();
   });
@@ -58,7 +58,7 @@ describe("DropdownMenu", () => {
 
   test("should match snapshot with a custom label", () => {
     const { container } = render(
-      <DropdownMenu menu={menuItems} label="Custom Label" />,
+      <DropdownMenu label="Custom Label" menu={menuItems} />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/ui/src/DropdownMenu/index.tsx b/packages/ui/src/DropdownMenu/index.tsx
index b972ef56b..82a3724b1 100644
--- a/packages/ui/src/DropdownMenu/index.tsx
+++ b/packages/ui/src/DropdownMenu/index.tsx
@@ -1,24 +1,24 @@
 import React, { useMemo } from "react";
 
-import Menu, { MenuProperties } from "./Menu";
 import { Popup, PopupProperties } from "../Popup";
+import Menu, { MenuProperties } from "./Menu";
 
 export interface DropdownMenuProperties
   extends MenuProperties, Partial<Omit<PopupProperties, "content">> {
-  label?: React.ReactNode;
   hideDropdownIcon?: boolean;
+  label?: React.ReactNode;
 }
 
 const DropdownMenu: React.FC<DropdownMenuProperties> = ({
-  label,
-  isControlled,
-  toggle,
   close,
+  hideDropdownIcon = false,
+  isControlled,
   isOpen,
-  trigger,
-  position = "bottom-start",
+  label,
   offset,
-  hideDropdownIcon = false,
+  position = "bottom-start",
+  toggle,
+  trigger,
   ...others
 }) => {
   const defaultTrigger = useMemo(() => {
@@ -35,14 +35,14 @@ const DropdownMenu: React.FC<DropdownMenuProperties> = ({
   return (
     <Popup
       className={`dropdown-menu ${others.className || ""}`.trimEnd()}
-      trigger={trigger || defaultTrigger}
+      close={close}
       content={<Menu {...others} />}
-      position={position}
       isControlled={isControlled}
-      toggle={toggle}
-      close={close}
       isOpen={isOpen}
       offset={offset}
+      position={position}
+      toggle={toggle}
+      trigger={trigger || defaultTrigger}
     />
   );
 };
diff --git a/packages/ui/src/EditableTitle/index.tsx b/packages/ui/src/EditableTitle/index.tsx
index 9276c6ed6..6cbec90cd 100644
--- a/packages/ui/src/EditableTitle/index.tsx
+++ b/packages/ui/src/EditableTitle/index.tsx
@@ -1,10 +1,10 @@
 import React, {
   ChangeEvent,
+  cloneElement,
+  createElement,
   FocusEvent,
   HTMLAttributes,
   KeyboardEvent,
-  cloneElement,
-  createElement,
   useState,
 } from "react";
 
@@ -14,10 +14,10 @@ import { Input } from "../FormWidgets";
 interface IProperties extends Omit<HTMLAttributes<HTMLHeadElement>, "onClick"> {
   allowEdit?: boolean;
   className?: string;
-  showToggler?: boolean;
-  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   handleUpdate?: (title: string) => void;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   placeholder?: string;
+  showToggler?: boolean;
   title: string;
   titleLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
   toggler?: JSX.Element;
@@ -26,18 +26,18 @@ interface IProperties extends Omit<HTMLAttributes<HTMLHeadElement>, "onClick"> {
 export const EditableTitle = ({
   allowEdit = true,
   className = "",
-  showToggler = true,
-  onChange,
   handleUpdate,
+  onChange,
   placeholder,
+  showToggler = true,
   title,
   titleLevel = "h1",
   toggler = (
     <Button
-      variant="textOnly"
-      severity="secondary"
       iconLeft="pi pi-pencil"
       rounded
+      severity="secondary"
+      variant="textOnly"
     ></Button>
   ),
   ...others
@@ -103,12 +103,12 @@ export const EditableTitle = ({
       {isEditModeOn ? (
         <Input
           autoFocus
-          name="title"
-          placeholder={placeholder}
           defaultValue={onChange ? title : titleValue}
-          onChange={onChange}
+          name="title"
           onBlur={handleBlur}
+          onChange={onChange}
           onKeyUp={handleKeyPress}
+          placeholder={placeholder}
         />
       ) : (
         renderTitle()
diff --git a/packages/ui/src/FileCard/ConfirmationFileActions.tsx b/packages/ui/src/FileCard/ConfirmationFileActions.tsx
index f97bfb6c7..01d468614 100644
--- a/packages/ui/src/FileCard/ConfirmationFileActions.tsx
+++ b/packages/ui/src/FileCard/ConfirmationFileActions.tsx
@@ -1,76 +1,76 @@
 import React, { ComponentProps, FC } from "react";
 
-import { ConfirmationModal } from "..";
-
 import type { IFile } from "..";
 
+import { ConfirmationModal } from "..";
+
 type ConfirmationFileActionsType = {
-  visibleArchiveConfirmation: boolean;
-  visibleDeleteConfirmation: boolean;
-  onArchive?: (arguments_: IFile) => void | Promise<void>;
-  onDelete?: (arguments_: IFile) => void | Promise<void>;
-  file: IFile;
-  setVisibleArchiveConfirmation: (isVisible: boolean) => void;
-  setVisibleDeleteConfirmation: (isVisible: boolean) => void;
-  archiveConfirmationProps?: ComponentProps<typeof ConfirmationModal>;
   archiveConfirmationHeader?: string;
   archiveConfirmationMessage?: string;
+  archiveConfirmationProps?: ComponentProps<typeof ConfirmationModal>;
   deleteConfirmationHeader?: string;
   deleteConfirmationMessage?: string;
   deleteConfirmationProps?: ComponentProps<typeof ConfirmationModal>;
+  file: IFile;
+  onArchive?: (arguments_: IFile) => Promise<void> | void;
+  onDelete?: (arguments_: IFile) => Promise<void> | void;
+  setVisibleArchiveConfirmation: (isVisible: boolean) => void;
+  setVisibleDeleteConfirmation: (isVisible: boolean) => void;
+  visibleArchiveConfirmation: boolean;
+  visibleDeleteConfirmation: boolean;
 };
 
 const ConfirmationFileActions: FC<ConfirmationFileActionsType> = ({
-  visibleArchiveConfirmation,
-  visibleDeleteConfirmation,
-  onArchive,
-  onDelete,
-  file,
-  setVisibleArchiveConfirmation,
-  setVisibleDeleteConfirmation,
-  archiveConfirmationProps,
   archiveConfirmationHeader,
   archiveConfirmationMessage,
+  archiveConfirmationProps,
   deleteConfirmationHeader,
   deleteConfirmationMessage,
   deleteConfirmationProps,
+  file,
+  onArchive,
+  onDelete,
+  setVisibleArchiveConfirmation,
+  setVisibleDeleteConfirmation,
+  visibleArchiveConfirmation,
+  visibleDeleteConfirmation,
 }) => {
   return (
     <>
       <ConfirmationModal
-        visible={visibleArchiveConfirmation}
         accept={async () => {
           await onArchive?.(file);
 
           setVisibleArchiveConfirmation(false);
         }}
-        reject={() => {
-          setVisibleArchiveConfirmation(false);
-        }}
-        onHide={() => {
-          setVisibleArchiveConfirmation(false);
-        }}
+        header={archiveConfirmationHeader || "Archive file?"}
         message={
           archiveConfirmationMessage ||
           "Are you sure you want to archive this file?"
         }
-        header={archiveConfirmationHeader || "Archive file?"}
+        onHide={() => {
+          setVisibleArchiveConfirmation(false);
+        }}
+        reject={() => {
+          setVisibleArchiveConfirmation(false);
+        }}
+        visible={visibleArchiveConfirmation}
         {...archiveConfirmationProps}
       />
       <ConfirmationModal
-        visible={visibleDeleteConfirmation}
         accept={async () => {
           await onDelete?.(file);
 
           setVisibleDeleteConfirmation(false);
         }}
-        reject={() => setVisibleDeleteConfirmation(false)}
-        onHide={() => setVisibleDeleteConfirmation(false)}
+        header={deleteConfirmationHeader || "Delete file?"}
         message={
           deleteConfirmationMessage ||
           "Are you sure you want to delete this file?"
         }
-        header={deleteConfirmationHeader || "Delete file?"}
+        onHide={() => setVisibleDeleteConfirmation(false)}
+        reject={() => setVisibleDeleteConfirmation(false)}
+        visible={visibleDeleteConfirmation}
         {...deleteConfirmationProps}
       />
     </>
diff --git a/packages/ui/src/FileCard/index.tsx b/packages/ui/src/FileCard/index.tsx
index 7329818c5..50d79a80d 100644
--- a/packages/ui/src/FileCard/index.tsx
+++ b/packages/ui/src/FileCard/index.tsx
@@ -1,83 +1,83 @@
 import { ComponentProps, ReactNode, useState } from "react";
 
 import { Card, ConfirmationModal, formatDate, formatDateTime } from "..";
-import ConfirmationFileActions from "./ConfirmationFileActions";
 import { Button } from "../Buttons/ButtonBasic";
 import { IFile } from "../FilesTable";
 import { useColumnsMap } from "../utils";
+import ConfirmationFileActions from "./ConfirmationFileActions";
 
 export type FileMessages = {
   archiveAction?: string;
   archiveConfirmationHeader?: string;
   archiveConfirmationMessage?: string;
-  downloadAction?: string;
-  editDescriptionAction?: string;
   deleteAction?: string;
   deleteConfirmationHeader?: string;
   deleteConfirmationMessage?: string;
+  downloadAction?: string;
   downloadCountHeader?: string;
+  editDescriptionAction?: string;
   lastDownloadedAtHeader?: string;
   renameAction?: string;
   shareAction?: string;
-  uploadedByHeader?: string;
   uploadedAtHeader?: string;
+  uploadedByHeader?: string;
   viewAction?: string;
 };
 
 export type VisibleFileDetails =
-  | "originalFileName"
-  | "size"
+  | "actions"
   | "description"
-  | "uploadedBy"
-  | "uploadedAt"
   | "downloadCount"
   | "lastDownloadedAt"
-  | "actions"
+  | "originalFileName"
+  | "size"
+  | "uploadedAt"
+  | "uploadedBy"
   | string;
 
 type FileCardType = {
+  archiveButtonProps?: ComponentProps<typeof Button>;
+  archiveConfirmationProps?: ComponentProps<typeof ConfirmationModal>;
+  deleteButtonProps?: ComponentProps<typeof Button>;
+  deleteConfirmationProps?: ComponentProps<typeof ConfirmationModal>;
+  downloadButtonProps?: ComponentProps<typeof Button>;
+  editDescriptionButtonProps?: ComponentProps<typeof Button>;
   file: IFile;
   locale?: string;
   messages?: FileMessages;
   onArchive?: (arguments_: IFile) => void;
-  archiveButtonProps?: ComponentProps<typeof Button>;
-  archiveConfirmationProps?: ComponentProps<typeof ConfirmationModal>;
   onDelete?: (arguments_: IFile) => void;
-  deleteButtonProps?: ComponentProps<typeof Button>;
-  deleteConfirmationProps?: ComponentProps<typeof ConfirmationModal>;
   onDownload?: (arguments_: IFile) => void;
-  downloadButtonProps?: ComponentProps<typeof Button>;
   onEditDescription?: (arguments_: IFile) => void;
-  editDescriptionButtonProps?: ComponentProps<typeof Button>;
   onShare?: (arguments_: IFile) => void;
-  shareButtonProps?: ComponentProps<typeof Button>;
   onView?: (arguments_: IFile) => void;
-  viewButtonProps?: ComponentProps<typeof Button>;
   renderThumbnail?: (arguments_: IFile) => ReactNode;
+  shareButtonProps?: ComponentProps<typeof Button>;
   showThumbnail?: boolean;
+  viewButtonProps?: ComponentProps<typeof Button>;
   visibleFileDetails?: VisibleFileDetails[];
 };
 
 export const FileCard = ({
+  archiveButtonProps,
+  archiveConfirmationProps,
+  deleteButtonProps,
+  deleteConfirmationProps,
+  downloadButtonProps,
+  editDescriptionButtonProps,
   file,
   locale,
   messages,
   onArchive,
-  archiveButtonProps,
-  archiveConfirmationProps,
   onDelete,
-  deleteButtonProps,
-  deleteConfirmationProps,
   onDownload,
-  downloadButtonProps,
+  onEditDescription,
   onShare,
-  shareButtonProps,
   onView,
-  viewButtonProps,
-  onEditDescription,
-  editDescriptionButtonProps,
   renderThumbnail: pRenderThumbnail,
+  shareButtonProps,
   showThumbnail = true,
+  viewButtonProps,
   visibleFileDetails = [
     "originalFileName",
     "size",
@@ -132,10 +132,10 @@ export const FileCard = ({
         {!!onArchive && (
           <>
             <Button
-              size="small"
               iconLeft="pi pi-book"
               label="Archive"
               onClick={() => setVisibleArchiveConfirmation(true)}
+              size="small"
               {...archiveButtonProps}
             />
           </>
@@ -143,45 +143,53 @@ export const FileCard = ({
         {!!onDelete && (
           <>
             <Button
-              size="small"
               iconLeft="pi pi-trash"
               label="Delete"
               onClick={() => setVisibleDeleteConfirmation(true)}
+              size="small"
               {...deleteButtonProps}
             />
           </>
         )}
         {!!onDownload && (
           <Button
-            size="small"
             iconLeft="pi pi-download"
             label="Download"
             onClick={() => onDownload?.(file)}
+            size="small"
             {...downloadButtonProps}
           />
         )}
         {!!onShare && (
           <Button
-            size="small"
             iconLeft="pi pi-share-alt"
             label="Share"
             onClick={() => onShare?.(file)}
+            size="small"
             {...shareButtonProps}
           />
         )}
         {!!onView && (
           <Button
-            size="small"
             iconLeft="pi pi-eye"
             label="View"
-            severity="secondary"
             onClick={() => onView?.(file)}
+            severity="secondary"
+            size="small"
             {...viewButtonProps}
           />
         )}
 
         <ConfirmationFileActions
+          archiveConfirmationHeader={messages?.archiveConfirmationHeader}
+          archiveConfirmationMessage={messages?.archiveConfirmationMessage}
+          archiveConfirmationProps={archiveConfirmationProps}
+          deleteConfirmationHeader={messages?.deleteConfirmationHeader}
+          deleteConfirmationMessage={messages?.deleteConfirmationMessage}
+          deleteConfirmationProps={deleteConfirmationProps}
           file={file}
+          onArchive={onArchive}
+          onDelete={onDelete}
           setVisibleArchiveConfirmation={(isVisible) =>
             setVisibleArchiveConfirmation(isVisible)
           }
@@ -190,14 +198,6 @@ export const FileCard = ({
           }
           visibleArchiveConfirmation={visibleArchiveConfirmation}
           visibleDeleteConfirmation={visibleDeleteConfirmation}
-          archiveConfirmationProps={archiveConfirmationProps}
-          deleteConfirmationProps={deleteConfirmationProps}
-          archiveConfirmationHeader={messages?.archiveConfirmationHeader}
-          archiveConfirmationMessage={messages?.archiveConfirmationMessage}
-          deleteConfirmationHeader={messages?.deleteConfirmationHeader}
-          deleteConfirmationMessage={messages?.deleteConfirmationMessage}
-          onArchive={onArchive}
-          onDelete={onDelete}
         />
       </div>
     );
@@ -225,8 +225,8 @@ export const FileCard = ({
                   {!!onEditDescription && (
                     <Button
                       iconLeft="pi pi-pencil"
-                      size="small"
                       onClick={() => onEditDescription?.(file)}
+                      size="small"
                       {...editDescriptionButtonProps}
                     />
                   )}
diff --git a/packages/ui/src/FilesList/index.tsx b/packages/ui/src/FilesList/index.tsx
index f9cd89da3..ba69d61e1 100644
--- a/packages/ui/src/FilesList/index.tsx
+++ b/packages/ui/src/FilesList/index.tsx
@@ -1,46 +1,44 @@
 import { ComponentProps, ReactNode } from "react";
 
 import {
+  ConfirmationModal,
   FileCard,
-  IFile,
   FileMessages,
+  IFile,
   VisibleFileDetails,
-  ConfirmationModal,
 } from "..";
 import { Button } from "../Buttons/ButtonBasic";
 
 export type FilesListType = {
-  files: IFile[];
-  locale?: string;
-  messages?: FileMessages;
   archiveButtonProps?: ComponentProps<typeof Button>;
   archiveConfirmationProps?: ComponentProps<typeof ConfirmationModal>;
-  deleteConfirmationProps?: ComponentProps<typeof ConfirmationModal>;
   deleteButtonProps?: ComponentProps<typeof Button>;
+  deleteConfirmationProps?: ComponentProps<typeof ConfirmationModal>;
   downloadButtonProps?: ComponentProps<typeof Button>;
   editDescriptionButtonProps?: ComponentProps<typeof Button>;
-  shareButtonProps?: ComponentProps<typeof Button>;
-  viewButtonProps?: ComponentProps<typeof Button>;
+  files: IFile[];
+  locale?: string;
+  messages?: FileMessages;
+  onEditDescription?: (arguments_: IFile) => void;
   onFileArchive?: (arguments_: IFile) => void;
   onFileDelete?: (arguments_: IFile) => void;
   onFileDownload?: (arguments_: IFile) => void;
-  onEditDescription?: (arguments_: IFile) => void;
   onFileShare?: (arguments_: IFile) => void;
   onFileView?: (arguments_: IFile) => void;
   renderFileThumbnail?: (arguments_: IFile) => ReactNode;
+  shareButtonProps?: ComponentProps<typeof Button>;
   showFileThumbnail?: boolean;
+  viewButtonProps?: ComponentProps<typeof Button>;
   visibleFileDetails?: VisibleFileDetails[];
 };
 
 export const FilesList = ({
   archiveButtonProps,
   archiveConfirmationProps,
-  deleteConfirmationProps,
   deleteButtonProps,
+  deleteConfirmationProps,
   downloadButtonProps,
   editDescriptionButtonProps,
-  shareButtonProps,
-  viewButtonProps,
   files,
   locale,
   messages,
@@ -51,16 +49,24 @@ export const FilesList = ({
   onFileShare,
   onFileView,
   renderFileThumbnail,
-  visibleFileDetails,
+  shareButtonProps,
   showFileThumbnail,
+  viewButtonProps,
+  visibleFileDetails,
 }: FilesListType) => {
   return (
     <div className="file-list-wrapper">
       {files.map((file: IFile) => {
         return (
           <FileCard
-            key={file.originalFileName}
+            archiveButtonProps={archiveButtonProps}
+            archiveConfirmationProps={archiveConfirmationProps}
+            deleteButtonProps={deleteButtonProps}
+            deleteConfirmationProps={deleteConfirmationProps}
+            downloadButtonProps={downloadButtonProps}
+            editDescriptionButtonProps={editDescriptionButtonProps}
             file={file}
+            key={file.originalFileName}
             locale={locale}
             messages={messages}
             onArchive={onFileArchive}
@@ -70,16 +76,10 @@ export const FilesList = ({
             onShare={onFileShare}
             onView={onFileView}
             renderThumbnail={renderFileThumbnail}
-            showThumbnail={showFileThumbnail}
-            visibleFileDetails={visibleFileDetails}
-            archiveButtonProps={archiveButtonProps}
-            archiveConfirmationProps={archiveConfirmationProps}
-            deleteButtonProps={deleteButtonProps}
-            deleteConfirmationProps={deleteConfirmationProps}
-            downloadButtonProps={downloadButtonProps}
-            editDescriptionButtonProps={editDescriptionButtonProps}
             shareButtonProps={shareButtonProps}
+            showThumbnail={showFileThumbnail}
             viewButtonProps={viewButtonProps}
+            visibleFileDetails={visibleFileDetails}
           />
         );
       })}
diff --git a/packages/ui/src/FilesPresentation/index.tsx b/packages/ui/src/FilesPresentation/index.tsx
index f35239061..432442c5b 100644
--- a/packages/ui/src/FilesPresentation/index.tsx
+++ b/packages/ui/src/FilesPresentation/index.tsx
@@ -1,43 +1,43 @@
+import type { ComponentProps, FC } from "react";
+
 import {
-  FilesTable,
   FilesList,
+  FilesTable,
   IFile,
   TableMessages,
   VisibleFileDetails,
 } from "..";
 
-import type { ComponentProps, FC } from "react";
-
 export interface IFilesPresentationProperties {
-  presentation?: "list" | "table";
   files: Array<IFile>;
+  listProps?: Partial<ComponentProps<typeof FilesList>>;
   locale?: string;
   messages?: TableMessages;
+  onEditDescription?: (arguments_: IFile) => void;
   onFileArchive?: (arguments_: IFile) => void;
-  onFileDownload?: (arguments_: IFile) => void;
   onFileDelete?: (arguments_: IFile) => void;
-  onEditDescription?: (arguments_: IFile) => void;
+  onFileDownload?: (arguments_: IFile) => void;
   onFileShare?: (arguments_: IFile) => void;
   onFileView?: (arguments_: IFile) => void;
-  visibleFileDetails?: VisibleFileDetails[];
-  listProps?: Partial<ComponentProps<typeof FilesList>>;
+  presentation?: "list" | "table";
   tableProps?: Partial<ComponentProps<typeof FilesTable>>;
+  visibleFileDetails?: VisibleFileDetails[];
 }
 
 export const FilesPresentation: FC<IFilesPresentationProperties> = ({
-  presentation = "list",
   files = [],
+  listProps,
   locale,
   messages,
+  onEditDescription,
   onFileArchive,
-  onFileDownload,
   onFileDelete,
+  onFileDownload,
   onFileShare,
   onFileView,
-  onEditDescription,
-  visibleFileDetails,
-  listProps,
+  presentation = "list",
   tableProps,
+  visibleFileDetails,
 }) => {
   if (presentation === "list") {
     return (
@@ -45,10 +45,10 @@ export const FilesPresentation: FC<IFilesPresentationProperties> = ({
         files={files}
         locale={locale}
         messages={messages}
+        onEditDescription={onEditDescription}
         onFileArchive={onFileArchive}
         onFileDelete={onFileDelete}
         onFileDownload={onFileDownload}
-        onEditDescription={onEditDescription}
         onFileShare={onFileShare}
         onFileView={onFileView}
         visibleFileDetails={visibleFileDetails}
@@ -62,10 +62,10 @@ export const FilesPresentation: FC<IFilesPresentationProperties> = ({
       files={files}
       locale={locale}
       messages={messages}
+      onEditDescription={onEditDescription}
       onFileArchive={onFileArchive}
       onFileDelete={onFileDelete}
       onFileDownload={onFileDownload}
-      onEditDescription={onEditDescription}
       onFileShare={onFileShare}
       onFileView={onFileView}
       visibleColumns={visibleFileDetails}
diff --git a/packages/ui/src/FilesTable/index.tsx b/packages/ui/src/FilesTable/index.tsx
index f36f98f83..b81bf32f0 100644
--- a/packages/ui/src/FilesTable/index.tsx
+++ b/packages/ui/src/FilesTable/index.tsx
@@ -1,3 +1,5 @@
+import type { ColumnDef } from "@tanstack/react-table";
+
 import React from "react";
 
 import {
@@ -9,59 +11,57 @@ import {
 } from "../index";
 import { DataActionsMenuItem } from "../Table/TableDataActions";
 
-import type { ColumnDef } from "@tanstack/react-table";
-
-export type TableMessages = {
-  searchPlaceholder?: string;
-  tableEmpty?: string;
-  fileSizeHeader?: string;
-} & FileMessages;
-
-export interface IFile {
-  id: number | string;
-  originalFileName: string;
-  description?: string;
-  size?: number;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  uploadedBy: any;
-  uploadedAt: number;
-  downloadCount?: number;
-  lastDownloadedAt?: number;
-}
-
 export type FilesTableProperties = Partial<
-  Omit<TDataTableProperties<IFile>, "data" | "visibleColumns" | "fetchData">
+  Omit<TDataTableProperties<IFile>, "data" | "fetchData" | "visibleColumns">
 > & {
+  fetchFiles?: (arguments_: TRequestJSON) => void;
   files: Array<IFile>;
   locale?: string;
   messages?: TableMessages;
-  visibleColumns?: VisibleFileDetails[];
-  fetchFiles?: (arguments_: TRequestJSON) => void;
+  onEditDescription?: (arguments_: IFile) => void;
   onFileArchive?: (arguments_: IFile) => void;
-  onFileDownload?: (arguments_: IFile) => void;
   onFileDelete?: (arguments_: IFile) => void;
-  onEditDescription?: (arguments_: IFile) => void;
+  onFileDownload?: (arguments_: IFile) => void;
   onFileShare?: (arguments_: IFile) => void;
   onFileView?: (arguments_: IFile) => void;
+  visibleColumns?: VisibleFileDetails[];
+};
+
+export interface IFile {
+  description?: string;
+  downloadCount?: number;
+  id: number | string;
+  lastDownloadedAt?: number;
+  originalFileName: string;
+  size?: number;
+  uploadedAt: number;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  uploadedBy: any;
+}
+
+export type TableMessages = FileMessages & {
+  fileSizeHeader?: string;
+  searchPlaceholder?: string;
+  tableEmpty?: string;
 };
 
 export const FilesTable = ({
   className = "table-files",
   columns = [],
+  fetchFiles,
+  files,
   id = "table-files",
   isLoading,
   locale,
-  files,
-  totalRecords,
-  fetchFiles,
   messages,
-  visibleColumns = ["originalFileName", "uploadedBy", "uploadedAt", "actions"],
+  onEditDescription,
   onFileArchive,
-  onFileDownload,
   onFileDelete,
+  onFileDownload,
   onFileShare,
   onFileView,
-  onEditDescription,
+  totalRecords,
+  visibleColumns = ["originalFileName", "uploadedBy", "uploadedAt", "actions"],
   ...tableProperties
 }: FilesTableProperties) => {
   const getActionsItem = () => {
@@ -69,68 +69,68 @@ export const FilesTable = ({
 
     if (onFileArchive) {
       actionItems.push({
-        label: messages?.archiveAction || "Archive",
-        icon: "pi pi-book",
-        requireConfirmationModal: true,
         confirmationOptions: {
           header: messages?.archiveConfirmationHeader || "Archive file",
           message:
             messages?.archiveConfirmationMessage ||
             "Are you sure you want to archive this file?",
         },
+        icon: "pi pi-book",
+        label: messages?.archiveAction || "Archive",
         onClick: (file) => {
           onFileArchive(file);
         },
+        requireConfirmationModal: true,
       });
     }
 
     if (onFileDownload) {
       actionItems.push({
-        label: messages?.downloadAction || "Download",
         icon: "pi pi-download",
+        label: messages?.downloadAction || "Download",
         onClick: (file) => onFileDownload?.(file),
       });
     }
 
     if (visibleColumns.includes("description") && onEditDescription) {
       actionItems.push({
-        label: messages?.editDescriptionAction || "Edit description",
         icon: "pi pi-pencil",
+        label: messages?.editDescriptionAction || "Edit description",
         onClick: (file) => onEditDescription?.(file),
       });
     }
 
     if (onFileShare) {
       actionItems.push({
-        label: messages?.shareAction || "Share",
         icon: "pi pi-share-alt",
+        label: messages?.shareAction || "Share",
         onClick: (file) => onFileShare?.(file),
       });
     }
 
     if (onFileView) {
       actionItems.push({
-        label: messages?.viewAction || "Share",
         icon: "pi pi-eye",
+        label: messages?.viewAction || "Share",
         onClick: (file) => onFileView?.(file),
       });
     }
 
     if (onFileDelete) {
       actionItems.push({
-        label: messages?.deleteAction || "Delete",
-        icon: "pi pi-trash",
         className: "danger",
-        requireConfirmationModal: true,
         confirmationOptions: {
           header: messages?.deleteConfirmationHeader || "Delete file",
           message:
             messages?.deleteConfirmationMessage ||
             "Are you sure you want to delete this file?",
         },
+        icon: "pi pi-trash",
+        label: messages?.deleteAction || "Delete",
         onClick: (file) => {
           onFileDelete(file);
         },
+        requireConfirmationModal: true,
       });
     }
 
@@ -140,40 +140,38 @@ export const FilesTable = ({
   const defaultColumns: Array<ColumnDef<IFile>> = [
     {
       accessorKey: "originalFileName",
-      header: "File",
       enableColumnFilter: true,
-      enableSorting: true,
       enableGlobalFilter: true,
+      enableSorting: true,
       filterPlaceholder: "Search",
+      header: "File",
     },
     {
       accessorKey: "description",
-      header: "Description",
-      tooltip: true,
-      enableGlobalFilter: true,
       enableColumnFilter: true,
+      enableGlobalFilter: true,
       enableSorting: true,
       filterPlaceholder: "Search",
+      header: "Description",
+      tooltip: true,
     },
     {
       accessorKey: "size",
-      header: "Size",
-      enableSorting: true,
       enableColumnFilter: true,
+      enableSorting: true,
       filterPlaceholder: "Min, Max",
+      header: "Size",
       meta: {
         filterVariant: "range",
       },
     },
     {
-      id: "uploadedBy",
-      header: "Uploaded by",
       accessorFn: (row) => {
         if (!row.uploadedBy) {
           return "";
         }
 
-        const { givenName, surname, email } = row.uploadedBy;
+        const { email, givenName, surname } = row.uploadedBy;
 
         if (givenName || surname) {
           return `${givenName || ""} ${surname || ""}`.trim();
@@ -186,40 +184,42 @@ export const FilesTable = ({
 
         return value ? value : <code>&#8212;</code>;
       },
-      enableSorting: true,
       enableColumnFilter: true,
+      enableSorting: true,
       filterPlaceholder: "Search",
+      header: "Uploaded by",
+      id: "uploadedBy",
     },
     {
       accessorKey: "uploadedAt",
-      header: "Uploaded at",
       dataType: "datetime",
-      enableSorting: true,
       enableColumnFilter: true,
+      enableSorting: true,
       filterPlaceholder: "Select date",
+      header: "Uploaded at",
       meta: {
         filterVariant: "dateRange",
         serverFilterFn: "between",
       },
     },
     {
-      align: "right",
       accessorKey: "downloadCount",
-      header: "Download count",
-      enableSorting: true,
+      align: "right",
       enableColumnFilter: true,
+      enableSorting: true,
       filterPlaceholder: "Min, Max",
+      header: "Download count",
       meta: {
         filterVariant: "range",
       },
     },
     {
       accessorKey: "lastDownloadedAt",
-      header: "Last downloaded at",
+      dataType: "datetime",
       enableColumnFilter: true,
       enableSorting: true,
-      dataType: "datetime",
       filterPlaceholder: "Select date",
+      header: "Last downloaded at",
       meta: {
         filterVariant: "dateRange",
         serverFilterFn: "between",
@@ -233,6 +233,9 @@ export const FilesTable = ({
         className={className}
         columns={[...defaultColumns, ...columns]}
         data={files}
+        dataActionsMenu={{
+          actions: [...getActionsItem()],
+        }}
         emptyTableMessage={messages?.tableEmpty || "The table is empty"}
         fetchData={fetchFiles}
         id={id}
@@ -240,9 +243,6 @@ export const FilesTable = ({
         locale={locale}
         totalRecords={totalRecords}
         visibleColumns={visibleColumns}
-        dataActionsMenu={{
-          actions: [...getActionsItem()],
-        }}
         {...tableProperties}
       ></DataTable>
     </>
diff --git a/packages/ui/src/FormWidgets/Checkbox/__test__/Checkbox.test.tsx b/packages/ui/src/FormWidgets/Checkbox/__test__/Checkbox.test.tsx
index 8c3e3204e..933f69e19 100644
--- a/packages/ui/src/FormWidgets/Checkbox/__test__/Checkbox.test.tsx
+++ b/packages/ui/src/FormWidgets/Checkbox/__test__/Checkbox.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
-import { expect, test, describe, vi } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 
 import { Checkbox } from "..";
 
@@ -13,14 +13,14 @@ describe("Checkbox component", () => {
   });
 
   test("should render the checkbox with the provided label", () => {
-    render(<Checkbox name="agree" label="I agree to the terms" />);
+    render(<Checkbox label="I agree to the terms" name="agree" />);
 
     const checkbox = screen.getByLabelText("I agree to the terms");
     expect(checkbox).toBeInTheDocument();
   });
 
   test("should set the correct name, id attributes", () => {
-    render(<Checkbox name="agree" label="I agree to the terms" />);
+    render(<Checkbox label="I agree to the terms" name="agree" />);
 
     const checkbox = screen.getByRole("checkbox");
     expect(checkbox).toHaveAttribute("name", "agree");
@@ -46,7 +46,7 @@ describe("Checkbox component", () => {
 
   test("should render an error message if errorMessage prop is provided", () => {
     render(
-      <Checkbox name="agree" errorMessage="You must agree to the terms" />,
+      <Checkbox errorMessage="You must agree to the terms" name="agree" />,
     );
 
     const errorMessage = screen.getByText("You must agree to the terms");
diff --git a/packages/ui/src/FormWidgets/Checkbox/index.tsx b/packages/ui/src/FormWidgets/Checkbox/index.tsx
index 09175a0e5..62ae3cb35 100644
--- a/packages/ui/src/FormWidgets/Checkbox/index.tsx
+++ b/packages/ui/src/FormWidgets/Checkbox/index.tsx
@@ -3,7 +3,7 @@ import { InputHTMLAttributes } from "react";
 interface IProperties extends InputHTMLAttributes<HTMLInputElement> {
   errorMessage?: string;
   helperText?: string;
-  label?: string | React.ReactNode;
+  label?: React.ReactNode | string;
 }
 
 export const Checkbox: React.FC<IProperties> = ({
diff --git a/packages/ui/src/FormWidgets/CheckboxInput/__test__/CheckboxInput.test.tsx b/packages/ui/src/FormWidgets/CheckboxInput/__test__/CheckboxInput.test.tsx
index 5313c6164..cf9d22a2a 100644
--- a/packages/ui/src/FormWidgets/CheckboxInput/__test__/CheckboxInput.test.tsx
+++ b/packages/ui/src/FormWidgets/CheckboxInput/__test__/CheckboxInput.test.tsx
@@ -1,4 +1,4 @@
-import { render, fireEvent, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import React, { useState } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
@@ -6,8 +6,8 @@ import { CheckboxInput } from "../index";
 
 describe("CheckboxInput", () => {
   const options = [
-    { value: "option1", label: "Option 1" },
-    { value: "option2", label: "Option 2" },
+    { label: "Option 1", value: "option1" },
+    { label: "Option 2", value: "option2" },
   ];
 
   const onChangeMock = vi.fn();
@@ -16,8 +16,8 @@ describe("CheckboxInput", () => {
     return render(
       <CheckboxInput
         name="test-checkbox"
-        options={options}
         onChange={onChangeMock}
+        options={options}
         {...properties}
       />,
     );
@@ -60,12 +60,12 @@ describe("CheckboxInput", () => {
       return (
         <CheckboxInput
           name="test-checkbox"
-          options={options}
-          value={selectedValues}
           onChange={(newValue) => {
             setSelectedValues(newValue as string[]);
             onChangeMock(newValue);
           }}
+          options={options}
+          value={selectedValues}
         />
       );
     };
@@ -99,8 +99,8 @@ describe("CheckboxInput", () => {
 
   it("renders helper text and error message when provided", () => {
     renderCheckboxInput({
-      helperText: "Helper text",
       errorMessage: "Error message",
+      helperText: "Helper text",
     });
 
     expect(screen.getByText("Helper text")).toBeInTheDocument();
@@ -108,7 +108,7 @@ describe("CheckboxInput", () => {
   });
 
   it("renders custom labels for options when renderOptionsLabel is provided", () => {
-    const renderOptionsLabel = (option: { value: string; label: string }) => (
+    const renderOptionsLabel = (option: { label: string; value: string }) => (
       <span>Custom {option.label}</span>
     );
 
@@ -127,7 +127,7 @@ describe("CheckboxInput", () => {
   });
 
   it("initializes with default checked state for single checkbox", () => {
-    renderCheckboxInput({ options: [], checked: true });
+    renderCheckboxInput({ checked: true, options: [] });
 
     const checkbox = screen.getByRole("checkbox");
     expect(checkbox).toBeChecked();
diff --git a/packages/ui/src/FormWidgets/CheckboxInput/index.tsx b/packages/ui/src/FormWidgets/CheckboxInput/index.tsx
index 577799e9b..296043b69 100644
--- a/packages/ui/src/FormWidgets/CheckboxInput/index.tsx
+++ b/packages/ui/src/FormWidgets/CheckboxInput/index.tsx
@@ -2,11 +2,6 @@ import React from "react";
 
 import { Checkbox } from "../Checkbox";
 
-interface Option<T> {
-  value: T;
-  label: string;
-}
-
 export interface ICheckboxInputProperties<T> {
   checked?: boolean;
   className?: string;
@@ -14,21 +9,26 @@ export interface ICheckboxInputProperties<T> {
   disabled?: boolean;
   errorMessage?: string;
   helperText?: string;
-  inputLabel?: string | React.ReactNode;
-  label?: string | React.ReactNode;
+  inputLabel?: React.ReactNode | string;
+  label?: React.ReactNode | string;
   name: string;
-  onChange?: (newValue: T[] | boolean) => void;
-  renderOptionsLabel?: (option: Option<T>) => React.ReactNode;
+  onChange?: (newValue: boolean | T[]) => void;
   options?: Option<T>[];
   placeholder?: string;
+  renderOptionsLabel?: (option: Option<T>) => React.ReactNode;
   value?: T[];
 }
 
-export const CheckboxInput = <T extends string | number>({
+interface Option<T> {
+  label: string;
+  value: T;
+}
+
+export const CheckboxInput = <T extends number | string>({
   checked = false,
   className = "",
-  disabled,
   direction = "vertical",
+  disabled,
   errorMessage,
   helperText,
   inputLabel,
@@ -36,8 +36,8 @@ export const CheckboxInput = <T extends string | number>({
   name,
   onChange,
   options = [],
-  value = [],
   renderOptionsLabel,
+  value = [],
 }: ICheckboxInputProperties<T>) => {
   const hasOptions = Array.isArray(options) && options.length > 0;
 
@@ -71,23 +71,23 @@ export const CheckboxInput = <T extends string | number>({
         <div className={`checkbox-group direction-${direction}`}>
           {options.map((option, index) => (
             <Checkbox
-              key={option.value}
+              checked={isOptionChecked(option.value)}
               disabled={disabled}
+              key={option.value}
               label={
                 renderOptionsLabel ? renderOptionsLabel(option) : option.label
               }
-              checked={isOptionChecked(option.value)}
-              value={option.value}
               name={`${name}-${index}`}
               onChange={() => handleSelectOption(option.value)}
+              value={option.value}
             />
           ))}
         </div>
       ) : (
         <Checkbox
+          checked={checked}
           disabled={disabled}
           label={inputLabel}
-          checked={checked}
           name={name}
           onChange={handleSingleCheckboxChange}
         />
diff --git a/packages/ui/src/FormWidgets/CountryPicker/__test__/CountryPicker.snapshot.test.tsx b/packages/ui/src/FormWidgets/CountryPicker/__test__/CountryPicker.snapshot.test.tsx
index 40057a844..3d47160f8 100644
--- a/packages/ui/src/FormWidgets/CountryPicker/__test__/CountryPicker.snapshot.test.tsx
+++ b/packages/ui/src/FormWidgets/CountryPicker/__test__/CountryPicker.snapshot.test.tsx
@@ -7,10 +7,10 @@ describe("CountryPicker Component", () => {
   test("should render correctly with a limited list of countries", () => {
     const { container } = render(
       <CountryPicker
-        name="simple-country-picker"
         include={["NP", "US", "GB"]}
-        value="NP"
+        name="simple-country-picker"
         onChange={() => {}}
+        value="NP"
       />,
     );
 
@@ -20,14 +20,14 @@ describe("CountryPicker Component", () => {
   test("should render correctly with favorites and localization", () => {
     const { container } = render(
       <CountryPicker
-        name="favorites-picker"
-        locale="fr"
-        include={["NP", "US", "FR", "DE"]}
         favorites={["FR", "DE"]}
-        labels={{ favorites: "Principaux", allCountries: "Autres" }}
-        value={["FR"]}
+        include={["NP", "US", "FR", "DE"]}
+        labels={{ allCountries: "Autres", favorites: "Principaux" }}
+        locale="fr"
         multiple
+        name="favorites-picker"
         onChange={() => {}}
+        value={["FR"]}
       />,
     );
 
diff --git a/packages/ui/src/FormWidgets/CountryPicker/index.tsx b/packages/ui/src/FormWidgets/CountryPicker/index.tsx
index 047fbbc77..ce63454d8 100644
--- a/packages/ui/src/FormWidgets/CountryPicker/index.tsx
+++ b/packages/ui/src/FormWidgets/CountryPicker/index.tsx
@@ -1,20 +1,20 @@
 import React, { useCallback, useMemo } from "react";
 
-import {
-  getFallbackTranslation,
-  getFlagClass,
-  getLabel,
-  sortByLabel,
-} from "../../utils/country-picker";
-import { Select, ISelectProperties } from "../Select";
-
 import type {
   CountryPickerProperties,
   Groups,
   Locales,
   Translation,
 } from "../../types/country-picker";
-import type { GroupedOption as OptionGroup, Option } from "../Select";
+import type { Option, GroupedOption as OptionGroup } from "../Select";
+
+import {
+  getFallbackTranslation,
+  getFlagClass,
+  getLabel,
+  sortByLabel,
+} from "../../utils/country-picker";
+import { ISelectProperties, Select } from "../Select";
 
 import("@dzangolab/flag-icon-css/css/flag-icon.min.css");
 
@@ -31,8 +31,8 @@ const getFavoriteOptions = <T,>(
 
   const options = favorites.map((code) => {
     return {
-      value: code as unknown as T,
       label: getLabel(code, locale, locales, fallbackTranslation),
+      value: code as unknown as T,
     };
   });
 
@@ -73,8 +73,8 @@ const getFullList = <T,>(
       })
       .map((code) => {
         return {
-          value: code as unknown as T,
           label: getLabel(code, locale, locales, fallbackTranslation),
+          value: code as unknown as T,
         };
       });
 
@@ -94,8 +94,8 @@ const getFullList = <T,>(
     options = Object.entries(groups).map(([key, codes]) => {
       const countries = codes.map((code) => {
         return {
-          value: code as unknown as T,
           label: getLabel(code, locale, locales, fallbackTranslation),
+          value: code as unknown as T,
         };
       });
 
@@ -179,7 +179,7 @@ const getOptions = <T,>({
   return options;
 };
 
-export const CountryPicker = <T extends string | number>({
+export const CountryPicker = <T extends number | string>({
   autoSortOptions = true,
   exclude,
   fallbackLocale = "en",
@@ -189,11 +189,11 @@ export const CountryPicker = <T extends string | number>({
   flagsPosition = "left",
   flagsStyle = "rectangular",
   groups,
-  locales,
   include,
   includeFavorites = true,
   labels,
   locale = "en",
+  locales,
   ...properties
 }: CountryPickerProperties<T>) => {
   const options = useMemo(() => {
@@ -264,9 +264,9 @@ export const CountryPicker = <T extends string | number>({
     <Select
       {...(properties as ISelectProperties<T>)}
       autoSortOptions={false}
+      onChange={handleOnChange}
       options={options}
       renderOption={properties.renderOption ?? handleRenderOption}
-      onChange={handleOnChange}
     />
   );
 };
diff --git a/packages/ui/src/FormWidgets/CurrencyPicker/index.tsx b/packages/ui/src/FormWidgets/CurrencyPicker/index.tsx
index 5f688e310..ef1717c63 100644
--- a/packages/ui/src/FormWidgets/CurrencyPicker/index.tsx
+++ b/packages/ui/src/FormWidgets/CurrencyPicker/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Select, ISelectProperties, Option } from "../Select";
+import { ISelectProperties, Option, Select } from "../Select";
 
 export type CurrencyOption<T> = Option<T> & {
   code?: string;
@@ -9,24 +9,25 @@ export type CurrencyOption<T> = Option<T> & {
 
 export type CurrencyPickerProperties<T> = Omit<
   ISelectProperties<T>,
-  "options" | "renderOption" | "multiple" | "value" | "onChange"
-> & {
-  options: CurrencyOption<T>[];
-  renderOption?: (option: CurrencyOption<T>) => React.ReactNode;
-} & (
+  "multiple" | "onChange" | "options" | "renderOption" | "value"
+> &
+  (
     | {
         multiple: true;
-        value: T[];
         onChange: (newValue: T[]) => void;
+        value: T[];
       }
     | {
         multiple?: false;
-        value: T;
         onChange: (newValue: T) => void;
+        value: T;
       }
-  );
+  ) & {
+    options: CurrencyOption<T>[];
+    renderOption?: (option: CurrencyOption<T>) => React.ReactNode;
+  };
 
-export const CurrencyPicker = <T extends string | number>({
+export const CurrencyPicker = <T extends number | string>({
   options,
   renderOption,
   ...properties
@@ -55,7 +56,7 @@ export const CurrencyPicker = <T extends string | number>({
   const _customSearch = (searchInput: string) => {
     searchInput = searchInput.toLowerCase();
 
-    return selectOptions.filter(({ label, code, symbol }) => {
+    return selectOptions.filter(({ code, label, symbol }) => {
       return [label, code, symbol].some((field) =>
         field?.toLowerCase().includes(searchInput),
       );
@@ -65,10 +66,10 @@ export const CurrencyPicker = <T extends string | number>({
   return (
     <Select
       className="currency-picker"
+      customSearchFn={_customSearch}
       menuOptions={{
         className: "currency-picker-menu",
       }}
-      customSearchFn={_customSearch}
       options={selectOptions}
       renderOption={_renderOption}
       {...properties}
diff --git a/packages/ui/src/FormWidgets/DatePicker/index.tsx b/packages/ui/src/FormWidgets/DatePicker/index.tsx
index 0e98257f2..467f94d78 100644
--- a/packages/ui/src/FormWidgets/DatePicker/index.tsx
+++ b/packages/ui/src/FormWidgets/DatePicker/index.tsx
@@ -5,13 +5,13 @@ import { FC } from "react";
 
 export interface DatePickerProperties extends Omit<
   CalendarProps,
-  "value" | "onChange"
+  "onChange" | "value"
 > {
   className?: string;
   error?: string;
   label?: string;
   name: string;
-  onChange: (value: Nullable<string | Date | Date[]>) => void;
+  onChange: (value: Nullable<Date | Date[] | string>) => void;
   value: Date | Date[] | null;
 }
 
@@ -30,11 +30,11 @@ export const DatePicker: FC<DatePickerProperties> = ({
       {label && <label htmlFor={`input-field-${name}`}>{label}</label>}
 
       <Calendar
-        id={name}
-        value={value}
-        onChange={(event) => onChange(event.value)}
         className={classNames({ "p-invalid": error })}
         dateFormat={dateFormat}
+        id={name}
+        onChange={(event) => onChange(event.value)}
+        value={value}
         {...others}
       />
 
diff --git a/packages/ui/src/FormWidgets/DebouncedInput/index.tsx b/packages/ui/src/FormWidgets/DebouncedInput/index.tsx
index 4928b4ffd..b30325119 100644
--- a/packages/ui/src/FormWidgets/DebouncedInput/index.tsx
+++ b/packages/ui/src/FormWidgets/DebouncedInput/index.tsx
@@ -1,17 +1,17 @@
 import {
+  type ChangeEvent,
   forwardRef,
   useEffect,
   useRef,
   useState,
-  type ChangeEvent,
 } from "react";
 
 import { useDebouncedValue } from "../../utils";
 import { IInputProperties, Input } from "../Input";
 
 export interface DebouncedInputProperties extends IInputProperties {
-  onInputChange: (value: string | number | readonly string[]) => void;
   debounceTime?: number;
+  onInputChange: (value: number | readonly string[] | string) => void;
 }
 
 export const DebouncedInput = forwardRef<
@@ -20,11 +20,11 @@ export const DebouncedInput = forwardRef<
 >(
   (
     {
-      onInputChange,
-      debounceTime = 500,
-      type = "text",
       className = "",
+      debounceTime = 500,
       defaultValue = "",
+      onInputChange,
+      type = "text",
       ...inputProperties
     },
     reference,
@@ -34,7 +34,7 @@ export const DebouncedInput = forwardRef<
     const isMounted = useRef(false);
 
     const debouncedValue = useDebouncedValue<
-      string | number | readonly string[]
+      number | readonly string[] | string
     >(inputValue, debounceTime);
 
     useEffect(() => {
@@ -56,11 +56,11 @@ export const DebouncedInput = forwardRef<
     return (
       <Input
         className={`debounced-input ${className}`}
+        name="debounced-input"
         onChange={handleInputChange}
+        ref={reference}
         type={type}
         value={inputValue}
-        ref={reference}
-        name="debounced-input"
         {...inputProperties}
       />
     );
diff --git a/packages/ui/src/FormWidgets/Input/__test__/Input.test.tsx b/packages/ui/src/FormWidgets/Input/__test__/Input.test.tsx
index 93fd6d480..f8c2ebbc2 100644
--- a/packages/ui/src/FormWidgets/Input/__test__/Input.test.tsx
+++ b/packages/ui/src/FormWidgets/Input/__test__/Input.test.tsx
@@ -1,6 +1,6 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
-import { expect, test, describe, vi } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 
 import { Input } from "..";
 
@@ -20,7 +20,7 @@ describe("Input", () => {
   });
 
   test("should have the correct initial value when defaultValue is provided", () => {
-    render(<Input label="username" name="username" defaultValue="john" />);
+    render(<Input defaultValue="john" label="username" name="username" />);
 
     expect(screen.getByDisplayValue("john")).toBeInTheDocument();
   });
@@ -28,9 +28,9 @@ describe("Input", () => {
   test("should display helper text", () => {
     render(
       <Input
+        helperText="Please enter your username"
         label="username"
         name="username"
-        helperText="Please enter your username"
       />,
     );
 
@@ -40,7 +40,7 @@ describe("Input", () => {
 
   test("should display error message", () => {
     render(
-      <Input label="username" name="username" errorMessage="Required field" />,
+      <Input errorMessage="Required field" label="username" name="username" />,
     );
 
     const errorMessage = screen.getByText("Required field");
@@ -59,7 +59,7 @@ describe("Input", () => {
   });
 
   test("should disable the input field when disabled is true", () => {
-    render(<Input label="username" name="username" disabled={true} />);
+    render(<Input disabled={true} label="username" name="username" />);
 
     const input = screen.getByLabelText("username");
     expect(input).toBeDisabled();
@@ -73,14 +73,14 @@ describe("Input", () => {
   });
 
   test("should apply aria-invalid when hasError is true", () => {
-    render(<Input label="username" name="username" hasError={true} />);
+    render(<Input hasError={true} label="username" name="username" />);
 
     const input = screen.getByLabelText("username");
     expect(input).toHaveAttribute("aria-invalid", "true");
   });
 
   test("should set the correct input type when type is passed", () => {
-    render(<Input name="age" label="age" type="number" />);
+    render(<Input label="age" name="age" type="number" />);
 
     const input = screen.getByLabelText("age");
     expect(input).toHaveAttribute("type", "number");
@@ -88,7 +88,7 @@ describe("Input", () => {
 
   test("should render custom className", () => {
     const { container } = render(
-      <Input label="username" name="username" className="custom-class" />,
+      <Input className="custom-class" label="username" name="username" />,
     );
 
     expect(container.querySelector("div")).toHaveClass("custom-class");
diff --git a/packages/ui/src/FormWidgets/Input/index.tsx b/packages/ui/src/FormWidgets/Input/index.tsx
index 8750d219f..06ff5a868 100644
--- a/packages/ui/src/FormWidgets/Input/index.tsx
+++ b/packages/ui/src/FormWidgets/Input/index.tsx
@@ -2,10 +2,10 @@ import { forwardRef, InputHTMLAttributes } from "react";
 
 export interface IInputProperties extends InputHTMLAttributes<HTMLInputElement> {
   errorMessage?: string;
-  helperText?: string;
   hasError?: boolean;
-  label?: string | React.ReactNode;
-  type?: "text" | "number" | "email";
+  helperText?: string;
+  label?: React.ReactNode | string;
+  type?: "email" | "number" | "text";
 }
 
 export const Input = forwardRef<HTMLInputElement, IInputProperties>(
@@ -15,14 +15,14 @@ export const Input = forwardRef<HTMLInputElement, IInputProperties>(
       defaultValue,
       disabled,
       errorMessage,
-      helperText,
       hasError,
+      helperText,
       label,
       name = "",
+      onChange,
       placeholder,
       readOnly,
       type,
-      onChange,
       ...others
     },
     reference,
@@ -32,17 +32,17 @@ export const Input = forwardRef<HTMLInputElement, IInputProperties>(
         {label && <label htmlFor={name}>{label}</label>}
         <input
           {...others}
-          id={name}
-          className={`input-field ${name}`}
           aria-invalid={hasError}
+          className={`input-field ${name}`}
+          defaultValue={defaultValue}
+          disabled={disabled}
+          id={name}
           name={name}
           onChange={onChange}
           placeholder={placeholder}
-          type={type}
-          defaultValue={defaultValue}
-          disabled={disabled}
           readOnly={readOnly}
           ref={reference}
+          type={type}
         />
         {helperText && <span className="helper-text">{helperText}</span>}
         {errorMessage && <span className="error-message">{errorMessage}</span>}
diff --git a/packages/ui/src/FormWidgets/RadioInput/__test__/RadioInput.snapshot.test.tsx b/packages/ui/src/FormWidgets/RadioInput/__test__/RadioInput.snapshot.test.tsx
index 291aad63f..9097d59bd 100644
--- a/packages/ui/src/FormWidgets/RadioInput/__test__/RadioInput.snapshot.test.tsx
+++ b/packages/ui/src/FormWidgets/RadioInput/__test__/RadioInput.snapshot.test.tsx
@@ -14,7 +14,7 @@ describe("RadioInput", () => {
 
   const renderRadioInput = (properties = {}) => {
     return render(
-      <RadioInput options={options} onChange={onChangeMock} {...properties} />,
+      <RadioInput onChange={onChangeMock} options={options} {...properties} />,
     );
   };
 
@@ -55,8 +55,8 @@ describe("RadioInput", () => {
   test("should match snapshot with all props set", () => {
     const { container } = renderRadioInput({
       className: "radio-input",
-      name: "radioInput",
       label: "Custom Label",
+      name: "radioInput",
     });
 
     expect(container).toMatchSnapshot();
diff --git a/packages/ui/src/FormWidgets/RadioInput/index.tsx b/packages/ui/src/FormWidgets/RadioInput/index.tsx
index c8b1b2a9e..4bdefbb10 100644
--- a/packages/ui/src/FormWidgets/RadioInput/index.tsx
+++ b/packages/ui/src/FormWidgets/RadioInput/index.tsx
@@ -1,20 +1,20 @@
 import { InputHTMLAttributes } from "react";
 
-interface IOption {
-  label: string | number;
-  value: string | number;
-}
-
 export interface IRadioInputProperties extends InputHTMLAttributes<HTMLInputElement> {
   disabled?: boolean;
   errorMessage?: string;
   hasError?: boolean;
   helperText?: string;
-  label?: string | React.ReactNode;
+  label?: React.ReactNode | string;
   name?: string;
   options: IOption[];
 }
 
+interface IOption {
+  label: number | string;
+  value: number | string;
+}
+
 export const RadioInput: React.FC<IRadioInputProperties> = ({
   className = "",
   disabled,
@@ -25,8 +25,8 @@ export const RadioInput: React.FC<IRadioInputProperties> = ({
   name,
   onChange,
   options,
-  value,
   type,
+  value,
   ...others
 }) => {
   return (
diff --git a/packages/ui/src/FormWidgets/Select/__test__/Select.snapshot.test.tsx b/packages/ui/src/FormWidgets/Select/__test__/Select.snapshot.test.tsx
index c0db5b721..fefc05711 100644
--- a/packages/ui/src/FormWidgets/Select/__test__/Select.snapshot.test.tsx
+++ b/packages/ui/src/FormWidgets/Select/__test__/Select.snapshot.test.tsx
@@ -4,8 +4,8 @@ import { describe, expect, test } from "vitest";
 import { Select } from "..";
 
 const options = [
-  { value: "np", label: "Nepali" },
-  { value: "en", label: "English" },
+  { label: "Nepali", value: "np" },
+  { label: "English", value: "en" },
 ];
 
 describe("Select Component", () => {
@@ -13,9 +13,9 @@ describe("Select Component", () => {
     const { container } = render(
       <Select
         name="single-select"
+        onChange={() => {}}
         options={options}
         value="en"
-        onChange={() => {}}
       />,
     );
 
@@ -25,11 +25,11 @@ describe("Select Component", () => {
   test("should render correctly with multiple selection", () => {
     const { container } = render(
       <Select
+        multiple
         name="multi-select"
+        onChange={() => {}}
         options={options}
         value={["np", "en"]}
-        multiple
-        onChange={() => {}}
       />,
     );
 
@@ -40,10 +40,10 @@ describe("Select Component", () => {
     const { container } = render(
       <Select
         name="placeholder-select"
+        onChange={() => {}}
         options={options}
-        value=""
         placeholder="Select a language"
-        onChange={() => {}}
+        value=""
       />,
     );
 
@@ -53,12 +53,12 @@ describe("Select Component", () => {
   test("should render correctly with an error message", () => {
     const { container } = render(
       <Select
+        errorMessage="This field is required"
+        hasError
         name="error-select"
+        onChange={() => {}}
         options={options}
         value="en"
-        hasError
-        errorMessage="This field is required"
-        onChange={() => {}}
       />,
     );
 
@@ -68,11 +68,11 @@ describe("Select Component", () => {
   test("should render correctly with helper text", () => {
     const { container } = render(
       <Select
+        helperText="Please select an option"
         name="helper-text-select"
+        onChange={() => {}}
         options={options}
         value="np"
-        helperText="Please select an option"
-        onChange={() => {}}
       />,
     );
 
@@ -82,11 +82,11 @@ describe("Select Component", () => {
   test("should render correctly when disabled", () => {
     const { container } = render(
       <Select
+        disabled
         name="disabled-select"
+        onChange={() => {}}
         options={options}
         value="en"
-        disabled
-        onChange={() => {}}
       />,
     );
 
@@ -96,11 +96,11 @@ describe("Select Component", () => {
   test("should render correctly when auto-select single option is enabled", () => {
     const { container } = render(
       <Select
+        autoSelectSingleOption
         name="auto-select-single"
+        onChange={() => {}}
         options={options}
         value="np"
-        autoSelectSingleOption
-        onChange={() => {}}
       />,
     );
 
@@ -110,11 +110,11 @@ describe("Select Component", () => {
   test("should render correctly when hide if single option is enabled", () => {
     const { container } = render(
       <Select
+        hideIfSingleOption
         name="hide-if-single"
+        onChange={() => {}}
         options={options}
         value="np"
-        hideIfSingleOption
-        onChange={() => {}}
       />,
     );
 
diff --git a/packages/ui/src/FormWidgets/Select/index.tsx b/packages/ui/src/FormWidgets/Select/index.tsx
index eff8869c6..4d6098400 100644
--- a/packages/ui/src/FormWidgets/Select/index.tsx
+++ b/packages/ui/src/FormWidgets/Select/index.tsx
@@ -8,29 +8,16 @@ import { Tooltip, TooltipProperties } from "../../Tooltip";
 import { Checkbox } from "../Checkbox";
 import { DebouncedInput } from "../DebouncedInput";
 
-export type Option<T> = {
-  disabled?: boolean;
-  label?: string;
-  value?: T;
-  [key: string]: unknown;
-};
-
 export type GroupedOption<T> = {
   label: string;
   options: Option<T>[];
 };
 
-type MenuOptions = Partial<Omit<PopupMenuProperties, "referenceElement">>;
-
-type TooltipOptions = Omit<
-  TooltipProperties,
-  "elementRef" | "children" | "className"
->;
-
 export type ISelectProperties<T> = {
   autoSelectSingleOption?: boolean;
   autoSortOptions?: boolean;
   className?: string;
+  customSearchFn?: (searchInput: string) => Option<T>[];
   disabled?: boolean;
   disableGroupSelect?: boolean;
   disableSearch?: boolean;
@@ -39,7 +26,7 @@ export type ISelectProperties<T> = {
   hasError?: boolean;
   helperText?: string;
   hideIfSingleOption?: boolean;
-  label?: string | React.ReactNode;
+  label?: React.ReactNode | string;
   labelKey?: string;
   loading?: boolean;
   matchMenuTriggerWidth?: boolean;
@@ -47,42 +34,56 @@ export type ISelectProperties<T> = {
   multiple?: boolean;
   name: string;
   noOptionsMessage?: string;
-  options: Option<T>[] | GroupedOption<T>[];
+  options: GroupedOption<T>[] | Option<T>[];
   placeholder?: string;
-  serverSearchHelperText?: string;
+  renderOption?: (option: GroupedOption<T> | Option<T>) => React.ReactNode;
+  renderValue?: (
+    value?: T | T[],
+    options?: GroupedOption<T>[] | Option<T>[],
+  ) => React.ReactNode;
   selectAllLabel?: string;
+  serverSearchFn?: (searchInput: string) => void;
+  serverSearchHelperText?: string;
   showRemoveSelection?: boolean;
   tooltipOptions?: TooltipOptions;
   valueKey?: string;
-  customSearchFn?: (searchInput: string) => Option<T>[];
-  serverSearchFn?: (searchInput: string) => void;
-  renderOption?: (option: Option<T> | GroupedOption<T>) => React.ReactNode;
-  renderValue?: (
-    value?: T | T[],
-    options?: Option<T>[] | GroupedOption<T>[],
-  ) => React.ReactNode;
 } & (
   | {
       multiple: true;
-      value: T[];
       onChange: (newValue: T[]) => void;
+      value: T[];
     }
   | {
       multiple?: false;
-      value: T;
       onChange: (newValue: T) => void;
+      value: T;
     }
 );
 
-export const Select = <T extends string | number>({
+export type Option<T> = {
+  [key: string]: unknown;
+  disabled?: boolean;
+  label?: string;
+  value?: T;
+};
+
+type MenuOptions = Partial<Omit<PopupMenuProperties, "referenceElement">>;
+
+type TooltipOptions = Omit<
+  TooltipProperties,
+  "children" | "className" | "elementRef"
+>;
+
+export const Select = <T extends number | string>({
   autoSelectSingleOption = false,
   autoSortOptions = true,
   className = "",
+  customSearchFn,
   disabled: selectFieldDisabled,
   disableGroupSelect,
   disableSearch = false,
-  errorMessage,
   enableTooltip = true,
+  errorMessage,
   hasError,
   helperText,
   hideIfSingleOption = false,
@@ -94,24 +95,23 @@ export const Select = <T extends string | number>({
   multiple,
   name,
   noOptionsMessage = "No options available",
+  onChange,
   options,
   placeholder,
-  serverSearchHelperText = "Please type to search...",
+  renderOption,
+  renderValue,
   selectAllLabel = "Select all",
+  serverSearchFn,
+  serverSearchHelperText = "Please type to search...",
   showRemoveSelection = true,
   tooltipOptions,
   value,
   valueKey,
-  customSearchFn,
-  serverSearchFn,
-  onChange,
-  renderOption,
-  renderValue,
 }: ISelectProperties<T>) => {
   const [showOptions, setShowOptions] = useState(false);
   const [searchInput, setSearchInput] = useState<string>("");
   const [focused, setFocused] = useState(false);
-  const [focusedOptionIndex, setFocusedOptionIndex] = useState<number | null>(
+  const [focusedOptionIndex, setFocusedOptionIndex] = useState<null | number>(
     null,
   );
   const selectReference = useRef<HTMLDivElement>(null);
@@ -132,7 +132,7 @@ export const Select = <T extends string | number>({
     }
 
     const isGroupedOptionArray = (
-      options: Option<T>[] | GroupedOption<T>[],
+      options: GroupedOption<T>[] | Option<T>[],
     ): options is GroupedOption<T>[] => {
       return (
         options.length > 0 &&
@@ -367,7 +367,7 @@ export const Select = <T extends string | number>({
 
   const handleRemoveOption = (
     option: T | T[] | undefined,
-    event: React.MouseEvent | React.KeyboardEvent,
+    event: React.KeyboardEvent | React.MouseEvent,
   ) => {
     event.stopPropagation();
 
@@ -438,8 +438,8 @@ export const Select = <T extends string | number>({
     };
 
     switch (event.key) {
-      case "Enter":
       case " ":
+      case "Enter":
         event.preventDefault();
         showOptions ? selectFocusedOption() : openDropdown();
         break;
@@ -454,6 +454,11 @@ export const Select = <T extends string | number>({
         setFocusedOptionIndex((previous) => previousIndex(previous as number));
         break;
 
+      case "End":
+      case "PageDown":
+        event.preventDefault();
+        focusLastEnabled();
+        break;
       case "Escape":
         event.preventDefault();
         setShowOptions(false);
@@ -466,12 +471,6 @@ export const Select = <T extends string | number>({
         event.preventDefault();
         focusFirstEnabledOption();
         break;
-
-      case "End":
-      case "PageDown":
-        event.preventDefault();
-        focusLastEnabled();
-        break;
     }
   };
 
@@ -507,7 +506,7 @@ export const Select = <T extends string | number>({
 
     return filteredOptions.reduce(
       (
-        accumulator: Record<string | number | symbol, typeof filteredOptions>,
+        accumulator: Record<number | string | symbol, typeof filteredOptions>,
         item,
       ) => {
         const group = item.groupLabel as string;
@@ -532,9 +531,6 @@ export const Select = <T extends string | number>({
 
     return (
       <li
-        key={index}
-        ref={(element) => (optionReference.current[index] = element)}
-        role="option"
         className={
           `${!multiple && value === option.value ? "selected" : ""}
           ${isGrouped ? "group-option" : ""}
@@ -542,6 +538,7 @@ export const Select = <T extends string | number>({
           ${index === focusedOptionIndex ? "focused" : ""}
           `.trim() || undefined
         }
+        key={index}
         onClick={() => {
           if (!disabled) {
             handleSelectedOption(option.value as T);
@@ -551,13 +548,15 @@ export const Select = <T extends string | number>({
             setShowOptions(false);
           }
         }}
+        ref={(element) => (optionReference.current[index] = element)}
+        role="option"
       >
         {multiple ? (
           <Checkbox
-            name={label}
             checked={value.includes(option.value as T)}
-            onChange={() => handleSelectedOption(option.value as T)}
             disabled={disabled}
+            name={label}
+            onChange={() => handleSelectedOption(option.value as T)}
           />
         ) : null}
         <span>{renderOption ? renderOption(option) : label}</span>
@@ -584,7 +583,7 @@ export const Select = <T extends string | number>({
               {selectedOptions}
             </Tooltip>
           )}
-          <span ref={menuTooltipReference} className="selected-options">
+          <span className="selected-options" ref={menuTooltipReference}>
             {_options}
           </span>
           {hasSelectedOptions && <Divider />}
@@ -603,7 +602,7 @@ export const Select = <T extends string | number>({
         ) : (
           <ul aria-multiselectable={multiple} role="listbox">
             {multiple && (
-              <li role="option" onClick={toggleSelectAll}>
+              <li onClick={toggleSelectAll} role="option">
                 <Checkbox
                   checked={isAllSelected}
                   disabled={activeOptions.length === 0}
@@ -658,7 +657,7 @@ export const Select = <T extends string | number>({
           {!renderValue && !selectedOptions?.length ? (
             <span className="placeholder">{placeholder}</span>
           ) : (
-            <span ref={selectTooltipReference} className="selected-options">
+            <span className="selected-options" ref={selectTooltipReference}>
               {renderValue
                 ? renderValue(value, normalizedOptions)
                 : selectedOptions}
@@ -670,18 +669,19 @@ export const Select = <T extends string | number>({
 
     return (
       <div
+        aria-invalid={hasError}
         className={`label-container ${disabled ? "disabled" : ""} ${
           focused ? "focused" : ""
         }`.trimEnd()}
-        aria-invalid={hasError}
         onClick={toggleOptionsMenu}
         onKeyDown={handleKeyDown}
         tabIndex={0}
       >
         {!disableSearch && (!selectedOptions.length || showOptions) ? (
           <DebouncedInput
-            ref={searchInputReference}
-            placeholder={placeholder}
+            defaultValue={searchInput}
+            disabled={disabled}
+            name={name}
             onInputChange={(debouncedValue) => {
               setSearchInput(debouncedValue as string);
 
@@ -689,9 +689,8 @@ export const Select = <T extends string | number>({
                 setShowOptions(true);
               }
             }}
-            disabled={disabled}
-            defaultValue={searchInput}
-            name={name}
+            placeholder={placeholder}
+            ref={searchInputReference}
             tabIndex={-1}
           />
         ) : (
@@ -726,7 +725,7 @@ export const Select = <T extends string | number>({
   }
 
   return (
-    <div ref={selectReference} className={`field ${className}`.trimEnd()}>
+    <div className={`field ${className}`.trimEnd()} ref={selectReference}>
       {label &&
         (!disableSearch && (!selectedOptions.length || showOptions) ? (
           <label htmlFor={name}>{label}</label>
diff --git a/packages/ui/src/FormWidgets/SwitchInput/index.tsx b/packages/ui/src/FormWidgets/SwitchInput/index.tsx
index dc8eab534..f290d854c 100644
--- a/packages/ui/src/FormWidgets/SwitchInput/index.tsx
+++ b/packages/ui/src/FormWidgets/SwitchInput/index.tsx
@@ -5,7 +5,7 @@ export interface ISwitchInputProperties extends InputHTMLAttributes<HTMLInputEle
   errorMessage?: string;
   hasError?: boolean;
   helperText?: string;
-  label?: string | React.ReactNode;
+  label?: React.ReactNode | string;
   name?: string;
 }
 
@@ -23,10 +23,10 @@ export const SwitchInput: React.FC<ISwitchInputProperties> = ({
     <div className={`field switch-toggle ${className}`.trim()}>
       {label && <label htmlFor={name}>{label}</label>}
       <input
+        aria-invalid={hasError}
+        disabled={disabled}
         id={name}
         type="checkbox"
-        disabled={disabled}
-        aria-invalid={hasError}
         {...others}
       ></input>
       {helperText && <span className="helper-text">{helperText}</span>}
diff --git a/packages/ui/src/FormWidgets/TextArea/__test__/TextArea.test.tsx b/packages/ui/src/FormWidgets/TextArea/__test__/TextArea.test.tsx
index b63a46ae1..504a59a3f 100644
--- a/packages/ui/src/FormWidgets/TextArea/__test__/TextArea.test.tsx
+++ b/packages/ui/src/FormWidgets/TextArea/__test__/TextArea.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
-import { expect, test, describe, vi } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 
 import { Textarea } from "..";
 
diff --git a/packages/ui/src/FormWidgets/TextArea/index.tsx b/packages/ui/src/FormWidgets/TextArea/index.tsx
index 1acb8a8ed..ec40a1542 100644
--- a/packages/ui/src/FormWidgets/TextArea/index.tsx
+++ b/packages/ui/src/FormWidgets/TextArea/index.tsx
@@ -4,7 +4,7 @@ export interface ITextareaProperties extends TextareaHTMLAttributes<HTMLTextArea
   errorMessage?: string;
   hasError?: boolean;
   helperText?: string;
-  label?: string | React.ReactNode;
+  label?: React.ReactNode | string;
 }
 
 export const Textarea = ({
@@ -16,24 +16,24 @@ export const Textarea = ({
   helperText,
   label,
   name = "",
+  onChange,
   placeholder,
   readOnly,
-  onChange,
   ...others
 }: ITextareaProperties) => {
   return (
     <div className={`field ${className}`.trimEnd()}>
       {label && <label htmlFor={name}>{label}</label>}
       <textarea
-        id={name}
-        className={`textarea-field ${name}`.trimEnd()}
         aria-invalid={hasError}
+        className={`textarea-field ${name}`.trimEnd()}
+        disabled={disabled}
+        id={name}
         name={name}
         onChange={onChange}
         placeholder={placeholder}
-        value={defaultValue}
-        disabled={disabled}
         readOnly={readOnly}
+        value={defaultValue}
         {...others}
       />
       {helperText && <span className="helper-text">{helperText}</span>}
diff --git a/packages/ui/src/FormWidgets/Typeahead/index.tsx b/packages/ui/src/FormWidgets/Typeahead/index.tsx
index a4e00d630..98aad90a9 100644
--- a/packages/ui/src/FormWidgets/Typeahead/index.tsx
+++ b/packages/ui/src/FormWidgets/Typeahead/index.tsx
@@ -5,52 +5,52 @@ import { PopupMenu } from "../../Popup";
 import { DebouncedInput } from "../DebouncedInput";
 import { IInputProperties } from "../Input";
 
-type Suggestion = string | number | object;
-
-interface SuggestionOption<T> {
-  suggestionLabel?: T extends object ? keyof T : undefined;
-}
-
 interface IProperties<T>
   extends Omit<IInputProperties, "onChange">, SuggestionOption<T> {
   data?: T[];
   debounceTime?: number;
-  errorMessage?: string;
   emptyMessage?: string;
+  errorMessage?: string;
   forceSelect?: boolean;
   hasError?: boolean;
   helperText?: string;
-  label?: string | React.ReactNode;
+  label?: React.ReactNode | string;
   loading?: boolean;
-  onSearch?: (value: string | number | readonly string[]) => void;
   onChange?: (value?: T) => void;
+  onSearch?: (value: number | readonly string[] | string) => void;
   renderSuggestion?: (suggestion: T) => React.ReactNode;
 }
 
+type Suggestion = number | object | string;
+
+interface SuggestionOption<T> {
+  suggestionLabel?: T extends object ? keyof T : undefined;
+}
+
 export const Typeahead = <T extends Suggestion>({
   className = "",
   data,
-  disabled,
   debounceTime = 300,
-  value = "",
-  errorMessage,
+  disabled,
   emptyMessage,
+  errorMessage,
   forceSelect = true,
   hasError,
   helperText,
   label,
   loading,
   name,
-  placeholder,
-  type = "text",
   onChange,
   onSearch,
+  placeholder,
   renderSuggestion,
   suggestionLabel,
+  type = "text",
+  value = "",
 }: IProperties<T>) => {
   const [suggestions, setSuggestions] = useState<T[]>([]);
   const [inputValue, setInputValue] = useState<
-    string | number | readonly string[]
+    number | readonly string[] | string
   >(value);
   const isSuggestionSelected = useRef(false);
   const suggestionReference = useRef<HTMLUListElement>(null);
@@ -102,7 +102,7 @@ export const Typeahead = <T extends Suggestion>({
     setSuggestions([]);
   };
 
-  const handleInputChange = (value: string | number | readonly string[]) => {
+  const handleInputChange = (value: number | readonly string[] | string) => {
     if (value === inputValue) {
       return;
     }
@@ -196,17 +196,17 @@ export const Typeahead = <T extends Suggestion>({
     <div className={`field ${className}`.trimEnd()}>
       {label && <label htmlFor={name}>{label}</label>}
       <div
-        className={`typeahead ${disabled ? "disabled" : ""}`}
         aria-invalid={hasError}
+        className={`typeahead ${disabled ? "disabled" : ""}`}
         ref={setReferenceElement}
       >
         <DebouncedInput
-          type={type}
-          defaultValue={inputValue}
           debounceTime={debounceTime}
+          defaultValue={inputValue}
+          disabled={disabled}
           onInputChange={handleInputChange}
           placeholder={placeholder}
-          disabled={disabled}
+          type={type}
         />
         {loading && <LoadingIcon color="#ccc" />}
         {renderSuggestions()}
diff --git a/packages/ui/src/FormWidgets/index.tsx b/packages/ui/src/FormWidgets/index.tsx
index 780179af8..1972335bc 100644
--- a/packages/ui/src/FormWidgets/index.tsx
+++ b/packages/ui/src/FormWidgets/index.tsx
@@ -1,7 +1,7 @@
 export * from "./Checkbox";
 export * from "./CheckboxInput";
-export * from "./CurrencyPicker";
 export * from "./CountryPicker";
+export * from "./CurrencyPicker";
 export * from "./DatePicker";
 export * from "./DebouncedInput";
 export * from "./Input";
diff --git a/packages/ui/src/GridContainer/index.tsx b/packages/ui/src/GridContainer/index.tsx
index 9832f1d0b..7d167e39d 100644
--- a/packages/ui/src/GridContainer/index.tsx
+++ b/packages/ui/src/GridContainer/index.tsx
@@ -1,11 +1,11 @@
 interface GridContainerProperties {
-  className?: string;
   children?: React.ReactNode;
+  className?: string;
 }
 
 const GridContainer: React.FC<GridContainerProperties> = ({
-  className,
   children,
+  className,
 }) => {
   return (
     <div className={`dz-grid-container ${className}`.trim()}>{children}</div>
diff --git a/packages/ui/src/InlineLink/__test__/InlineLink.test.tsx b/packages/ui/src/InlineLink/__test__/InlineLink.test.tsx
index a3a710578..2769bfcbd 100644
--- a/packages/ui/src/InlineLink/__test__/InlineLink.test.tsx
+++ b/packages/ui/src/InlineLink/__test__/InlineLink.test.tsx
@@ -1,6 +1,5 @@
-import { describe } from "node:test";
-
 import { render, screen } from "@testing-library/react";
+import { describe } from "node:test";
 import React from "react";
 import { MemoryRouter } from "react-router-dom";
 import { expect, test } from "vitest";
@@ -31,7 +30,7 @@ describe("Inline link component", () => {
   });
 
   test("should render anchor (<a>) when 'external' is true", () => {
-    render(<InlineLink label="Dashboard" to="/dashboard" external={true} />);
+    render(<InlineLink external={true} label="Dashboard" to="/dashboard" />);
 
     expect(screen.getByTestId("external-link")).toBeInTheDocument();
   });
@@ -40,9 +39,9 @@ describe("Inline link component", () => {
     render(
       <MemoryRouter>
         <InlineLink
+          className="custom-class"
           label="Dashboard"
           to="/dashboard"
-          className="custom-class"
         />
       </MemoryRouter>,
     );
@@ -53,10 +52,10 @@ describe("Inline link component", () => {
   test("should apply 'target' prop correctly for external links", () => {
     render(
       <InlineLink
-        label="Dashboard"
-        to="https://www.prefabs-tech.com/"
         external
+        label="Dashboard"
         target="_blank"
+        to="https://www.prefabs-tech.com/"
       />,
     );
 
diff --git a/packages/ui/src/InlineLink/index.tsx b/packages/ui/src/InlineLink/index.tsx
index 8e6fc2c43..f188d4a36 100644
--- a/packages/ui/src/InlineLink/index.tsx
+++ b/packages/ui/src/InlineLink/index.tsx
@@ -26,11 +26,11 @@ const InlineLink = ({
   if (external) {
     return (
       <a
-        href={to}
-        target={target || "_blank"}
-        rel="noopener noreferrer"
         className={linkClassName}
         data-testid="external-link"
+        href={to}
+        rel="noopener noreferrer"
+        target={target || "_blank"}
       >
         {label}
       </a>
@@ -38,7 +38,7 @@ const InlineLink = ({
   }
 
   return (
-    <Link to={to} className={linkClassName} data-testid="internal-link">
+    <Link className={linkClassName} data-testid="internal-link" to={to}>
       {label}
     </Link>
   );
diff --git a/packages/ui/src/LoadingIcon/index.tsx b/packages/ui/src/LoadingIcon/index.tsx
index 3b7bc3036..927d7fe98 100644
--- a/packages/ui/src/LoadingIcon/index.tsx
+++ b/packages/ui/src/LoadingIcon/index.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 
 const LoadingIcon = ({
-  fontSize,
   color,
-}: Pick<React.CSSProperties, "fontSize" | "color">) => {
+  fontSize,
+}: Pick<React.CSSProperties, "color" | "fontSize">) => {
   return (
     <div
-      data-testid="loading"
       className="loading"
-      style={{ fontSize, color }}
+      data-testid="loading"
+      style={{ color, fontSize }}
     />
   );
 };
diff --git a/packages/ui/src/LoadingPage/index.tsx b/packages/ui/src/LoadingPage/index.tsx
index 1aa6e91cd..4b3c60929 100644
--- a/packages/ui/src/LoadingPage/index.tsx
+++ b/packages/ui/src/LoadingPage/index.tsx
@@ -4,7 +4,7 @@ import LoadingIcon from "../LoadingIcon";
 
 export interface LoadingPageProperties extends Pick<
   React.CSSProperties,
-  "fontSize" | "color"
+  "color" | "fontSize"
 > {
   pageType?: "container" | "overlay";
 }
@@ -16,7 +16,7 @@ const LoadingPage = ({
 }: LoadingPageProperties) => {
   return (
     <div className={`loading-${pageType}`}>
-      <LoadingIcon fontSize={fontSize} color={color} />
+      <LoadingIcon color={color} fontSize={fontSize} />
     </div>
   );
 };
diff --git a/packages/ui/src/Message/__test__/Message.test.tsx b/packages/ui/src/Message/__test__/Message.test.tsx
index 2cce3aaae..9968a58a5 100644
--- a/packages/ui/src/Message/__test__/Message.test.tsx
+++ b/packages/ui/src/Message/__test__/Message.test.tsx
@@ -1,6 +1,5 @@
-import { describe } from "node:test";
-
 import { render, screen } from "@testing-library/react";
+import { describe } from "node:test";
 import React from "react";
 import { expect, test } from "vitest";
 
@@ -14,19 +13,19 @@ describe("Message", () => {
   });
 
   test("should render <i> element when icon is passed as string", () => {
-    render(<Message message="Message" icon="icon" />);
+    render(<Message icon="icon" message="Message" />);
 
     expect(screen.getByTestId("icon").querySelector("i")).toBeInTheDocument();
   });
 
   test("should render icon passed as ReactNode correctly", () => {
-    render(<Message message="Message" icon={<span>!</span>} />);
+    render(<Message icon={<span>!</span>} message="Message" />);
 
     expect(screen.getByText("!")).toBeInTheDocument();
   });
 
   test("should render both icon and message correctly", () => {
-    render(<Message message="Message" icon={<span>!</span>} />);
+    render(<Message icon={<span>!</span>} message="Message" />);
 
     expect(screen.getByText("Message")).toBeInTheDocument();
     expect(screen.getByText("!")).toBeInTheDocument();
diff --git a/packages/ui/src/Message/index.tsx b/packages/ui/src/Message/index.tsx
index fcd132778..4eda16b7d 100644
--- a/packages/ui/src/Message/index.tsx
+++ b/packages/ui/src/Message/index.tsx
@@ -3,17 +3,17 @@ import { ReactNode, useState } from "react";
 type MessageProperties = {
   enableClose?: boolean;
   icon?: ReactNode;
-  message: string[] | ReactNode;
+  message: ReactNode | string[];
   onClose?: () => void;
-  severity?: "info" | "success" | "warning" | "danger" | "tip";
+  severity?: "danger" | "info" | "success" | "tip" | "warning";
   showIcon?: boolean;
 };
 
 const Message = ({
-  onClose,
   enableClose = true,
-  message,
   icon,
+  message,
+  onClose,
   severity = "info",
   showIcon = true,
 }: MessageProperties) => {
@@ -23,8 +23,8 @@ const Message = ({
     danger: "pi pi-exclamation-triangle",
     info: "pi pi-info-circle",
     success: "pi pi-check-circle",
-    warning: "pi pi-exclamation-triangle",
     tip: "pi pi-lightbulb",
+    warning: "pi pi-exclamation-triangle",
   };
 
   const handleClose = () => {
diff --git a/packages/ui/src/Modal/__test__/Modal.test.tsx b/packages/ui/src/Modal/__test__/Modal.test.tsx
index a0103917a..7356f088d 100644
--- a/packages/ui/src/Modal/__test__/Modal.test.tsx
+++ b/packages/ui/src/Modal/__test__/Modal.test.tsx
@@ -1,6 +1,5 @@
+import { fireEvent, render, screen } from "@testing-library/react";
 import { describe } from "node:test";
-
-import { render, screen, fireEvent } from "@testing-library/react";
 import React from "react";
 import { expect, test, vi } from "vitest";
 
@@ -11,7 +10,7 @@ describe("Modal", () => {
 
   test("should render modal when visible is true", () => {
     render(
-      <Modal visible={true} onHide={handleHide}>
+      <Modal onHide={handleHide} visible={true}>
         Modal content
       </Modal>,
     );
@@ -21,7 +20,7 @@ describe("Modal", () => {
 
   test("should not render modal when visible is false", () => {
     render(
-      <Modal visible={false} onHide={handleHide}>
+      <Modal onHide={handleHide} visible={false}>
         Modal content
       </Modal>,
     );
@@ -31,7 +30,7 @@ describe("Modal", () => {
 
   test("should call onHide when the close button is clicked", () => {
     render(
-      <Modal visible={true} onHide={handleHide}>
+      <Modal onHide={handleHide} visible={true}>
         Modal content
       </Modal>,
     );
@@ -44,7 +43,7 @@ describe("Modal", () => {
 
   test("should apply custom className", () => {
     render(
-      <Modal visible={true} className="custom-class" onHide={handleHide}>
+      <Modal className="custom-class" onHide={handleHide} visible={true}>
         Modal content
       </Modal>,
     );
@@ -56,7 +55,7 @@ describe("Modal", () => {
 
   test("should display header content correctly", () => {
     render(
-      <Modal visible={true} header="Modal header" onHide={handleHide}>
+      <Modal header="Modal header" onHide={handleHide} visible={true}>
         Modal content
       </Modal>,
     );
@@ -67,7 +66,7 @@ describe("Modal", () => {
   test("should render JSX header correctly", () => {
     const headerContent = <div>Header content</div>;
     render(
-      <Modal visible={true} header={headerContent} onHide={handleHide}>
+      <Modal header={headerContent} onHide={handleHide} visible={true}>
         Modal content
       </Modal>,
     );
@@ -78,7 +77,7 @@ describe("Modal", () => {
   test("should render footer content if passed", () => {
     const footerContent = <div>Footer content</div>;
     render(
-      <Modal visible={true} footer={footerContent} onHide={handleHide}>
+      <Modal footer={footerContent} onHide={handleHide} visible={true}>
         Modal content
       </Modal>,
     );
@@ -89,7 +88,7 @@ describe("Modal", () => {
   test("should render children content", () => {
     const modalContent = <p>Modal content</p>;
     render(
-      <Modal visible={true} onHide={handleHide}>
+      <Modal onHide={handleHide} visible={true}>
         {modalContent}
       </Modal>,
     );
diff --git a/packages/ui/src/Modal/index.tsx b/packages/ui/src/Modal/index.tsx
index e7b21cf57..0062177fa 100644
--- a/packages/ui/src/Modal/index.tsx
+++ b/packages/ui/src/Modal/index.tsx
@@ -6,9 +6,9 @@ interface ModalProperties {
   children: React.ReactNode;
   className?: string;
   footer?: React.ReactNode;
-  header?: string | JSX.Element;
+  header?: JSX.Element | string;
   onHide: () => void;
-  size?: "auto" | "medium" | "large";
+  size?: "auto" | "large" | "medium";
   visible: boolean;
 }
 
@@ -28,7 +28,7 @@ const Modal: React.FC<ModalProperties> = ({
   const modalClassName = ["dz-modal", className, size].join(" ");
 
   return (
-    <div role="dialog" className="dz-modal-overlay">
+    <div className="dz-modal-overlay" role="dialog">
       <div className={modalClassName}>
         <div className="dz-modal-header">
           {typeof header === "string" ? (
diff --git a/packages/ui/src/NavigationMenu/NavGroup.tsx b/packages/ui/src/NavigationMenu/NavGroup.tsx
index 71976d421..fff43b028 100644
--- a/packages/ui/src/NavigationMenu/NavGroup.tsx
+++ b/packages/ui/src/NavigationMenu/NavGroup.tsx
@@ -5,21 +5,21 @@ import { NavItem } from "./NavItem";
 import { NavGroupDisplayMode, NavGroupType } from "./types";
 
 export type NavGroupProperties = {
-  initialVisible?: boolean;
+  className?: string;
   displayIcon?: boolean;
+  displayMode?: NavGroupDisplayMode;
   horizontal?: boolean;
+  initialVisible?: boolean;
   navGroup: NavGroupType;
-  className?: string;
-  displayMode?: NavGroupDisplayMode;
 };
 
 export const NavGroup = ({
-  displayMode = "collapsible",
-  initialVisible = false,
+  className = "",
   displayIcon = true,
+  displayMode = "collapsible",
   horizontal,
+  initialVisible = false,
   navGroup,
-  className = "",
 }: NavGroupProperties) => {
   const [showSubmenu, setShowSubmenu] = useState(initialVisible);
 
@@ -32,9 +32,9 @@ export const NavGroup = ({
               <li key={_index}>
                 {
                   <Navigation
-                    nav={nav}
-                    horizontal={horizontal}
                     displayIcon={displayIcon}
+                    horizontal={horizontal}
+                    nav={nav}
                   />
                 }
               </li>
@@ -46,18 +46,18 @@ export const NavGroup = ({
 
   return (
     <div
-      className={`dz-nav-group ${displayMode} ${className}`.trim()}
       aria-expanded={showSubmenu || displayMode === "expanded"}
+      className={`dz-nav-group ${displayMode} ${className}`.trim()}
     >
       <NavItem
+        displayIcon={displayIcon}
+        isGroupHeader
         navItem={{
-          label: navGroup.label,
           icon: navGroup.icon,
+          label: navGroup.label,
           onClick: () =>
             displayMode !== "expanded" && setShowSubmenu(!showSubmenu),
         }}
-        displayIcon={displayIcon}
-        isGroupHeader
       ></NavItem>
       {renderSubmenu()}
     </div>
diff --git a/packages/ui/src/NavigationMenu/NavItem.tsx b/packages/ui/src/NavigationMenu/NavItem.tsx
index 6f60a0af7..c2b8c54cb 100644
--- a/packages/ui/src/NavigationMenu/NavItem.tsx
+++ b/packages/ui/src/NavigationMenu/NavItem.tsx
@@ -4,14 +4,14 @@ import { NavItemType } from "./types";
 
 export type NavItemProperties = {
   displayIcon?: boolean;
-  navItem: NavItemType;
   isGroupHeader?: boolean;
+  navItem: NavItemType;
 };
 
 export const NavItem = ({
-  navItem,
   displayIcon = true,
   isGroupHeader,
+  navItem,
 }: NavItemProperties) => {
   const hasRouterContext = useInRouterContext();
 
@@ -25,7 +25,7 @@ export const NavItem = ({
 
   if (navItem.disabled) {
     return (
-      <div className={_className} aria-disabled={navItem.disabled}>
+      <div aria-disabled={navItem.disabled} className={_className}>
         {displayIcon && navItem.icon && <i className={navItem.icon}></i>}
         <span>{navItem.label}</span>
       </div>
@@ -57,7 +57,7 @@ export const NavItem = ({
 
   if (hasRouterContext) {
     return (
-      <NavLink to={navItem.route || ""} end className={_className}>
+      <NavLink className={_className} end to={navItem.route || ""}>
         {displayIcon && navItem.icon && <i className={navItem.icon}></i>}
         <span>{navItem.label}</span>
       </NavLink>
@@ -68,9 +68,9 @@ export const NavItem = ({
 
   return (
     <a
-      href={navItem.route}
-      className={isActive ? `${_className} active` : _className}
       aria-current={isActive ? "page" : undefined}
+      className={isActive ? `${_className} active` : _className}
+      href={navItem.route}
     >
       {displayIcon && navItem.icon && <i className={navItem.icon}></i>}
       {navItem.label}
diff --git a/packages/ui/src/NavigationMenu/Navigation.tsx b/packages/ui/src/NavigationMenu/Navigation.tsx
index 5aa5d278c..6b7054574 100644
--- a/packages/ui/src/NavigationMenu/Navigation.tsx
+++ b/packages/ui/src/NavigationMenu/Navigation.tsx
@@ -5,17 +5,17 @@ import { NavGroupType, NavItemType } from "./types";
 interface IProperties {
   displayIcon?: boolean;
   horizontal?: boolean;
-  nav: NavItemType | NavGroupType;
+  nav: NavGroupType | NavItemType;
 }
 
 export const Navigation = ({ displayIcon, horizontal, nav }: IProperties) => {
   return "submenu" in nav ? (
     <NavGroup
-      navGroup={nav}
       displayIcon={displayIcon}
       horizontal={horizontal}
+      navGroup={nav}
     />
   ) : (
-    <NavItem navItem={nav} displayIcon={displayIcon} />
+    <NavItem displayIcon={displayIcon} navItem={nav} />
   );
 };
diff --git a/packages/ui/src/NavigationMenu/NavigationMenu.tsx b/packages/ui/src/NavigationMenu/NavigationMenu.tsx
index c8172b6ae..d9d651833 100644
--- a/packages/ui/src/NavigationMenu/NavigationMenu.tsx
+++ b/packages/ui/src/NavigationMenu/NavigationMenu.tsx
@@ -1,5 +1,5 @@
 import { Navigation } from "./Navigation";
-import { NavMenuType, NavMenuItemType } from "./types";
+import { NavMenuItemType, NavMenuType } from "./types";
 
 export type NavigationMenuProperties = {
   displayIcons?: boolean;
@@ -29,9 +29,9 @@ export const NavigationMenu = ({
               <li key={_index}>
                 {
                   <Navigation
-                    nav={nav}
-                    horizontal={horizontal}
                     displayIcon={displayIcons}
+                    horizontal={horizontal}
+                    nav={nav}
                   />
                 }
               </li>
diff --git a/packages/ui/src/NavigationMenu/types.ts b/packages/ui/src/NavigationMenu/types.ts
index 61e9db19e..65a725b8d 100644
--- a/packages/ui/src/NavigationMenu/types.ts
+++ b/packages/ui/src/NavigationMenu/types.ts
@@ -1,29 +1,29 @@
-export type NavItemType = {
-  className?: string;
-  disabled?: boolean;
-  display?: boolean;
-  icon?: string;
-  label: string | React.ReactNode;
-} & ({ route: string } | { onClick: () => void });
+export type NavGroupDisplayMode =
+  | "collapsible"
+  | "collapsible-reverse"
+  | "expanded";
 
 export type NavGroupType = {
-  label: string | React.ReactNode;
   icon?: string;
+  label: React.ReactNode | string;
   submenu: NavItemType[];
 };
 
+export type NavItemType = {
+  className?: string;
+  disabled?: boolean;
+  display?: boolean;
+  icon?: string;
+  label: React.ReactNode | string;
+} & ({ onClick: () => void } | { route: string });
+
 export type NavMenuItemType = {
-  label?: string;
-  id?: string;
   className?: string;
-  menu: Array<NavItemType | NavGroupType>;
+  id?: string;
+  label?: string;
+  menu: Array<NavGroupType | NavItemType>;
 };
 
-export type NavMenuType = NavMenuItemType | Array<NavMenuItemType>;
-
-export type NavGroupDisplayMode =
-  | "collapsible"
-  | "collapsible-reverse"
-  | "expanded";
+export type NavMenuType = Array<NavMenuItemType> | NavMenuItemType;
 
-export type UserMenuModeType = NavGroupDisplayMode | "horizontal" | "popup";
+export type UserMenuModeType = "horizontal" | "popup" | NavGroupDisplayMode;
diff --git a/packages/ui/src/Page/Header.tsx b/packages/ui/src/Page/Header.tsx
index e12a2d8d8..6c5ed99d4 100644
--- a/packages/ui/src/Page/Header.tsx
+++ b/packages/ui/src/Page/Header.tsx
@@ -1,17 +1,17 @@
 interface IHeaderProperties {
   breadcrumb?: React.ReactNode;
-  titleTag?: string | React.ReactNode;
   subtitle?: React.ReactNode | string;
+  title?: React.ReactNode | string;
+  titleTag?: React.ReactNode | string;
   toolbar?: React.ReactNode;
-  title?: string | React.ReactNode;
 }
 
 export const PageHeader = ({
   breadcrumb,
-  titleTag,
   subtitle,
-  toolbar,
   title,
+  titleTag,
+  toolbar,
 }: IHeaderProperties) => {
   const renderTitle = () => {
     if (!title) {
@@ -35,16 +35,16 @@ export const PageHeader = ({
       <div className="dz-page-title-wrapper">
         {renderTitle()}
         {subtitle && (
-          <div data-testid="page-subtitle" className="dz-page-subtitle">
+          <div className="dz-page-subtitle" data-testid="page-subtitle">
             {subtitle}
           </div>
         )}
       </div>
       {(breadcrumb || toolbar) && (
         <div
-          data-testid="page-toolbar"
           className="dz-page-toolbar"
           data-breadcrumb={!!breadcrumb}
+          data-testid="page-toolbar"
         >
           {breadcrumb}
           {toolbar}
diff --git a/packages/ui/src/Page/__test__/Page.snapsot.test.tsx b/packages/ui/src/Page/__test__/Page.snapsot.test.tsx
index 7021e04c3..d42df0cd3 100644
--- a/packages/ui/src/Page/__test__/Page.snapsot.test.tsx
+++ b/packages/ui/src/Page/__test__/Page.snapsot.test.tsx
@@ -5,13 +5,13 @@ import { expect, test } from "vitest";
 import Page from "../index";
 
 const pageData = {
-  title: "This is the title",
   subtitle: "This is the subtitle",
+  title: "This is the title",
 };
 
 test("Component matches snapshot", () => {
   const { container } = render(
-    <Page title={pageData.title} subtitle={pageData.subtitle}>
+    <Page subtitle={pageData.subtitle} title={pageData.title}>
       <p>This is the content</p>
     </Page>,
   );
diff --git a/packages/ui/src/Page/__test__/Page.test.tsx b/packages/ui/src/Page/__test__/Page.test.tsx
index 720fcc533..0e1229025 100644
--- a/packages/ui/src/Page/__test__/Page.test.tsx
+++ b/packages/ui/src/Page/__test__/Page.test.tsx
@@ -6,24 +6,24 @@ import { Button } from "../../Buttons/ButtonBasic";
 import Page from "../index";
 
 const pageData = {
-  title: "This is the title",
-  subtitle: "This is the subtitle",
-  toolbar: <Button label="Click me" />,
   breadcrumb: (
     <>
       <Button label="Click" />
       <Button label="Reload" />
     </>
   ),
+  subtitle: "This is the subtitle",
+  title: "This is the title",
+  toolbar: <Button label="Click me" />,
 };
 
 test("when breadcrumb, title, subtitle, toolbar and content are provided", async () => {
   render(
     <Page
-      title={pageData.title}
+      breadcrumb={pageData.breadcrumb}
       subtitle={pageData.subtitle}
+      title={pageData.title}
       toolbar={pageData.toolbar}
-      breadcrumb={pageData.breadcrumb}
     >
       <p>This is the content</p>
     </Page>,
diff --git a/packages/ui/src/Page/index.tsx b/packages/ui/src/Page/index.tsx
index e61a97a4e..da1c6a5cd 100644
--- a/packages/ui/src/Page/index.tsx
+++ b/packages/ui/src/Page/index.tsx
@@ -1,38 +1,38 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 
-import { PageHeader } from "./Header";
 import LoadingPage, { LoadingPageProperties } from "../LoadingPage";
+import { PageHeader } from "./Header";
 
 interface PageProperties extends Pick<
   DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
   "aria-orientation"
 > {
   breadcrumb?: React.ReactNode;
+  centered?: boolean;
   children?: React.ReactNode;
   className?: string;
-  centered?: boolean;
   errorMessage?: string;
-  titleTag?: string | React.ReactNode;
   loading?: boolean;
   loadingComponent?: React.ReactElement;
   loadingPageStyle?: LoadingPageProperties;
   subtitle?: React.ReactNode | string;
-  title?: string | React.ReactNode;
+  title?: React.ReactNode | string;
+  titleTag?: React.ReactNode | string;
   toolbar?: React.ReactNode;
 }
 
 const Page: React.FC<PageProperties> = ({
   breadcrumb,
+  centered = false,
   children,
   className,
-  centered = false,
   errorMessage,
-  titleTag,
   loading = false,
   loadingComponent,
   loadingPageStyle,
   subtitle,
   title,
+  titleTag,
   toolbar,
   ...others
 }) => {
@@ -59,8 +59,8 @@ const Page: React.FC<PageProperties> = ({
 
   return (
     <div className={_className} data-centered={centered}>
-      <PageHeader {...{ title, titleTag, subtitle, toolbar, breadcrumb }} />
-      <div data-testid="page-content" className="dz-page-content" {...others}>
+      <PageHeader {...{ breadcrumb, subtitle, title, titleTag, toolbar }} />
+      <div className="dz-page-content" data-testid="page-content" {...others}>
         {child ? child : children}
       </div>
     </div>
diff --git a/packages/ui/src/Pagination/index.tsx b/packages/ui/src/Pagination/index.tsx
index 03ddcbaa8..b79e67b8f 100644
--- a/packages/ui/src/Pagination/index.tsx
+++ b/packages/ui/src/Pagination/index.tsx
@@ -1,41 +1,41 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { Button, DebouncedInput } from "..";
 
 export interface PaginationProperties {
+  className?: string;
   currentPage: number;
-  totalItems: number;
-  onPageChange: (page: number) => void;
-  onItemsPerPageChange?: (itemsPerPage: number) => void;
-  itemsPerPageOptions?: number[];
-  itemsPerPageControlLabel?: string;
-  inputDebounceTime?: number;
   defaultItemsPerPage?: number;
-  showFirstLastButtons?: boolean;
-  showPreviousNextButtons?: boolean;
-  showPageButtons?: boolean;
-  className?: string;
+  inputDebounceTime?: number;
+  itemsPerPageControlLabel?: string;
+  itemsPerPageOptions?: number[];
+  onItemsPerPageChange?: (itemsPerPage: number) => void;
+  onPageChange: (page: number) => void;
   pageInputLabel?: string;
+  showFirstLastButtons?: boolean;
   showItemsPerPageControl?: boolean;
+  showPageButtons?: boolean;
   showPageInput?: boolean;
+  showPreviousNextButtons?: boolean;
+  totalItems: number;
 }
 
 export const Pagination: React.FC<PaginationProperties> = ({
+  className,
   currentPage,
-  totalItems,
-  onPageChange,
-  onItemsPerPageChange,
   itemsPerPageOptions = [5, 10, 20, 30],
-  itemsPerPageControlLabel = "Items per page",
+  defaultItemsPerPage = itemsPerPageOptions[0],
   inputDebounceTime,
+  itemsPerPageControlLabel = "Items per page",
+  onItemsPerPageChange,
+  onPageChange,
   pageInputLabel = "Go to page:",
-  defaultItemsPerPage = itemsPerPageOptions[0],
   showFirstLastButtons = true,
-  showPageButtons = false,
-  showPreviousNextButtons = true,
-  className,
   showItemsPerPageControl = true,
+  showPageButtons = false,
   showPageInput = false,
+  showPreviousNextButtons = true,
+  totalItems,
 }) => {
   const [itemsPerPage, setItemsPerPage] = useState<number>(defaultItemsPerPage);
 
@@ -55,7 +55,7 @@ export const Pagination: React.FC<PaginationProperties> = ({
   };
 
   const handlePageInputChange = useCallback(
-    (value: string | number | readonly string[]) => {
+    (value: number | readonly string[] | string) => {
       const newPage = parseInt(value.toString(), 10) - 1;
 
       if (!isNaN(newPage) && newPage >= 0 && newPage < lastPage) {
@@ -72,7 +72,7 @@ export const Pagination: React.FC<PaginationProperties> = ({
       {showItemsPerPageControl && (
         <div className="items-per-page-control">
           <span>{itemsPerPageControlLabel}</span>
-          <select value={itemsPerPage} onChange={handleItemsPerPageChange}>
+          <select onChange={handleItemsPerPageChange} value={itemsPerPage}>
             {itemsPerPageOptions.map((option) => (
               <option key={option} value={option}>
                 {option}
@@ -86,9 +86,9 @@ export const Pagination: React.FC<PaginationProperties> = ({
         <div className="page-input-control">
           <span>{pageInputLabel}</span>
           <DebouncedInput
-            type="number"
             debounceTime={inputDebounceTime}
             onInputChange={handlePageInputChange}
+            type="number"
           />
         </div>
       )}
@@ -99,9 +99,9 @@ export const Pagination: React.FC<PaginationProperties> = ({
               {showFirstLastButtons && (
                 <Button
                   className="first-page"
-                  onClick={() => onPageChange(0)}
                   disabled={!(currentPage > 0)}
                   iconLeft={<i className="pi pi-angle-double-left" />}
+                  onClick={() => onPageChange(0)}
                   size="small"
                 />
               )}
@@ -109,9 +109,9 @@ export const Pagination: React.FC<PaginationProperties> = ({
               {showPreviousNextButtons && (
                 <Button
                   className="previous-page"
-                  onClick={() => onPageChange(currentPage - 1)}
                   disabled={!(currentPage > 0)}
                   iconLeft={<i className="pi pi-angle-left" />}
+                  onClick={() => onPageChange(currentPage - 1)}
                   size="small"
                 />
               )}
@@ -122,14 +122,14 @@ export const Pagination: React.FC<PaginationProperties> = ({
             {showPageButtons
               ? pages.map((page) => (
                   <Button
-                    key={page}
                     className={`page-button ${
                       page === currentPage + 1 ? "active" : ""
                     }`}
-                    variant={page === currentPage + 1 ? "filled" : "outlined"}
-                    onClick={() => onPageChange(page - 1)}
+                    key={page}
                     label={`${page}`}
+                    onClick={() => onPageChange(page - 1)}
                     size="small"
+                    variant={page === currentPage + 1 ? "filled" : "outlined"}
                   />
                 ))
               : pageStatics}
@@ -140,9 +140,9 @@ export const Pagination: React.FC<PaginationProperties> = ({
               {showPreviousNextButtons && (
                 <Button
                   className="next-page"
-                  onClick={() => onPageChange(currentPage + 1)}
                   disabled={!(currentPage < lastPage - 1)}
                   iconLeft={<i className="pi pi-angle-right" />}
+                  onClick={() => onPageChange(currentPage + 1)}
                   size="small"
                 />
               )}
@@ -150,9 +150,9 @@ export const Pagination: React.FC<PaginationProperties> = ({
               {showFirstLastButtons && (
                 <Button
                   className="last-page"
-                  onClick={() => onPageChange(lastPage - 1)}
                   disabled={!(currentPage < lastPage - 1)}
                   iconLeft={<i className="pi pi-angle-double-right" />}
+                  onClick={() => onPageChange(lastPage - 1)}
                   size="small"
                 />
               )}
diff --git a/packages/ui/src/Popup/Popup.tsx b/packages/ui/src/Popup/Popup.tsx
index 9092b0eb8..30a88ab04 100644
--- a/packages/ui/src/Popup/Popup.tsx
+++ b/packages/ui/src/Popup/Popup.tsx
@@ -10,31 +10,31 @@ import {
 
 import { PopupMenu } from "./PopupMenu";
 
+export type PopupProperties = UncontrolledProperties & {
+  close?: () => void;
+  isControlled?: boolean;
+  isOpen?: boolean;
+  toggle?: () => void;
+};
+
 interface UncontrolledProperties {
-  trigger: ReactNode;
+  className?: string;
   content: JSX.Element;
-  position?: Placement;
   offset?: number;
-  className?: string;
+  position?: Placement;
+  trigger: ReactNode;
 }
 
-export type PopupProperties = {
-  isControlled?: boolean;
-  toggle?: () => void;
-  close?: () => void;
-  isOpen?: boolean;
-} & UncontrolledProperties;
-
 export const Popup: FC<PopupProperties> = ({
   className = "",
-  isControlled = false,
-  toggle,
   close,
-  isOpen: isOpenControlled,
-  trigger,
   content,
-  position,
+  isControlled = false,
+  isOpen: isOpenControlled,
   offset = 10,
+  position,
+  toggle,
+  trigger,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [referenceElement, setReferenceElement] = useState<Element | null>(
@@ -82,20 +82,20 @@ export const Popup: FC<PopupProperties> = ({
   return (
     <div className={`popup-container ${className}`.trim()}>
       <div
-        className="popup-trigger"
-        ref={setReferenceElement as LegacyRef<HTMLDivElement>}
-        onClick={togglePopup}
         aria-controls="popup-content"
         aria-expanded={isControlled ? isOpenControlled : isOpen}
+        className="popup-trigger"
+        onClick={togglePopup}
+        ref={setReferenceElement as LegacyRef<HTMLDivElement>}
       >
         {trigger}
       </div>
       {(isControlled ? isOpenControlled : isOpen) ? (
         <PopupMenu
-          referenceElement={referenceElement}
           content={content}
-          position={position}
           offset={offset}
+          position={position}
+          referenceElement={referenceElement}
           toggle={togglePopup}
         />
       ) : null}
diff --git a/packages/ui/src/Popup/PopupMenu.tsx b/packages/ui/src/Popup/PopupMenu.tsx
index 26a5603b1..67776165c 100644
--- a/packages/ui/src/Popup/PopupMenu.tsx
+++ b/packages/ui/src/Popup/PopupMenu.tsx
@@ -1,11 +1,11 @@
+import type { FC, LegacyRef, ReactNode } from "react";
+
 import { Placement } from "@popperjs/core";
 import { OffsetsFunction } from "@popperjs/core/lib/modifiers/offset";
 import { useCallback, useState } from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 
-import type { FC, LegacyRef, ReactNode } from "react";
-
 export interface PopupMenuProperties {
   className?: string;
   content: ReactNode;
@@ -32,7 +32,7 @@ export const PopupMenu: FC<PopupMenuProperties> = ({
     return [0, offset];
   }, [offset]);
 
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+  const { attributes, styles } = usePopper(referenceElement, popperElement, {
     modifiers: [
       {
         name: "offset",
@@ -52,14 +52,14 @@ export const PopupMenu: FC<PopupMenuProperties> = ({
   return createPortal(
     <div
       className={`popup-menu ${className}`.trim()}
+      onClick={toggle}
       ref={setPopperElement as LegacyRef<HTMLDivElement>}
       style={{
         ...styles.popper,
         ...styles,
-        width: matchReferenceWidth ? referenceElementWidth : "auto",
         maxWidth: referenceElementWidth ? referenceElementWidth * 1.5 : "auto",
+        width: matchReferenceWidth ? referenceElementWidth : "auto",
       }}
-      onClick={toggle}
       {...attributes.popper}
     >
       {content}
diff --git a/packages/ui/src/SSOButtons/BaseButton/index.tsx b/packages/ui/src/SSOButtons/BaseButton/index.tsx
index 7f95b740a..1ee043f80 100644
--- a/packages/ui/src/SSOButtons/BaseButton/index.tsx
+++ b/packages/ui/src/SSOButtons/BaseButton/index.tsx
@@ -8,7 +8,7 @@ export interface BaseButtonProperties {
   handleClick?: () => void;
   imageSource: string;
   title?: string;
-  variant?: "light" | "dark";
+  variant?: "dark" | "light";
 }
 
 const BaseButton: React.FC<BaseButtonProperties> = ({
@@ -23,14 +23,14 @@ const BaseButton: React.FC<BaseButtonProperties> = ({
 }) => {
   return (
     <button
-      onClick={handleClick}
       className={`sso-button ${className} ${variant} ${borderRadiusType} ${
         alignCenter ? "center" : ""
       }`}
+      onClick={handleClick}
     >
       <img
-        src={imageSource}
         alt={alternativeText ? alternativeText : `${className} logo`}
+        src={imageSource}
       />
       <span>{title}</span>
     </button>
diff --git a/packages/ui/src/SSOButtons/FacebookButton/index.tsx b/packages/ui/src/SSOButtons/FacebookButton/index.tsx
index 8693e73fc..74f0ed204 100644
--- a/packages/ui/src/SSOButtons/FacebookButton/index.tsx
+++ b/packages/ui/src/SSOButtons/FacebookButton/index.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import FacebookIcon from "../../assets/images/facebook-icon.svg";
 import BaseButton, { BaseButtonProperties } from "../BaseButton";
 
-type IProperties = Omit<BaseButtonProperties, "imageSource" | "className">;
+type IProperties = Omit<BaseButtonProperties, "className" | "imageSource">;
 
 const FacebookButton: React.FC<IProperties> = (properties) => {
   return (
diff --git a/packages/ui/src/SSOButtons/GoogleButton/index.tsx b/packages/ui/src/SSOButtons/GoogleButton/index.tsx
index c6cf4f067..94fedc5b0 100644
--- a/packages/ui/src/SSOButtons/GoogleButton/index.tsx
+++ b/packages/ui/src/SSOButtons/GoogleButton/index.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import GoogleIcon from "../../assets/images/google-icon.svg";
 import BaseButton, { BaseButtonProperties } from "../BaseButton";
 
-type IProperties = Omit<BaseButtonProperties, "imageSource" | "className">;
+type IProperties = Omit<BaseButtonProperties, "className" | "imageSource">;
 
 const GoogleButton: React.FC<IProperties> = (properties) => {
   return (
diff --git a/packages/ui/src/SortableList/SortableList.tsx b/packages/ui/src/SortableList/SortableList.tsx
index d7a002888..f20b0b2c1 100644
--- a/packages/ui/src/SortableList/SortableList.tsx
+++ b/packages/ui/src/SortableList/SortableList.tsx
@@ -1,31 +1,31 @@
-import { useState } from "react";
-
 import type { FC, ReactNode } from "react";
 
+import { useState } from "react";
+
 export interface SortableListProperties {
+  className?: string;
+  grabHandleIcon?: ReactNode;
+  itemClassName?: string;
   items: {
-    id: number;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     data: any;
+    id: number;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     render?: (data: any) => ReactNode;
   }[];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onSort?: (sortedItems: { id: number; data: any }[]) => void;
-  itemClassName?: string;
-  className?: string;
-  grabHandleIcon?: ReactNode;
+  onSort?: (sortedItems: { data: any; id: number }[]) => void;
 }
 
 export const SortableList: FC<SortableListProperties> = ({
-  items,
-  onSort,
-  itemClassName = "",
   className = "",
   grabHandleIcon,
+  itemClassName = "",
+  items,
+  onSort,
 }) => {
   const [sortedItems, setSortedItems] = useState(items);
-  const [draggedItem, setDraggedItem] = useState<number | null>(null);
+  const [draggedItem, setDraggedItem] = useState<null | number>(null);
   const [droppedOver, setDroppedOver] = useState<number>(-1);
 
   const handleDragStart = (index: number) => {
@@ -72,12 +72,12 @@ export const SortableList: FC<SortableListProperties> = ({
           className={`${itemClassName} ${
             draggedItem === index ? "dragged-item" : ""
           }`.trim()}
-          key={item.id}
+          data-drag-direction={getDragDirection(index)}
           draggable
-          onDragStart={() => handleDragStart(index)}
-          onDragOver={() => handleDragOver(index)}
+          key={item.id}
           onDragEnd={handleDragEnd}
-          data-drag-direction={getDragDirection(index)}
+          onDragOver={() => handleDragOver(index)}
+          onDragStart={() => handleDragStart(index)}
         >
           {grabHandleIcon ? (
             grabHandleIcon
diff --git a/packages/ui/src/Stepper/Step.tsx b/packages/ui/src/Stepper/Step.tsx
index 631dbba76..8080e2cb9 100644
--- a/packages/ui/src/Stepper/Step.tsx
+++ b/packages/ui/src/Stepper/Step.tsx
@@ -1,35 +1,35 @@
 import { FC, MouseEvent, ReactNode } from "react";
 
 export interface IStepEvent extends MouseEvent<HTMLElement> {
-  label?: string;
   index?: number;
+  label?: string;
 }
 
-export type LineStyleType = "solid" | "dashed";
+export type LineStyleType = "dashed" | "solid";
 
 interface IStepProperties {
-  isCompleted: boolean;
-  isActive: boolean;
-  completedStepIcon?: string | ReactNode;
-  onClick: (event: IStepEvent) => void;
+  activeContent?: ReactNode | string;
+  completedStepIcon?: ReactNode | string;
   index: number;
+  isActive: boolean;
+  isCompleted: boolean;
   label?: string;
   lineStyle?: LineStyleType;
-  step?: number | string | ReactNode;
-  activeContent?: string | ReactNode;
+  onClick: (event: IStepEvent) => void;
+  step?: number | ReactNode | string;
   subtitle?: string;
 }
 
 export const Step: FC<IStepProperties> = ({
-  isCompleted,
-  isActive,
+  activeContent,
   completedStepIcon,
-  onClick,
   index,
+  isActive,
+  isCompleted,
   label,
   lineStyle,
+  onClick,
   step,
-  activeContent,
   subtitle,
 }) => {
   const renderLabel = (label?: string) => {
@@ -56,7 +56,7 @@ export const Step: FC<IStepProperties> = ({
 
   const renderStep = (
     index: number,
-    completedStepIcon?: string | ReactNode,
+    completedStepIcon?: ReactNode | string,
   ) => {
     const renderContent = () => {
       if (isCompleted && completedStepIcon) {
diff --git a/packages/ui/src/Stepper/index.tsx b/packages/ui/src/Stepper/index.tsx
index 8748f8e30..829d36932 100644
--- a/packages/ui/src/Stepper/index.tsx
+++ b/packages/ui/src/Stepper/index.tsx
@@ -3,42 +3,42 @@ import { ReactNode, useEffect, useState } from "react";
 import { Button, IButtonProperties } from "../Buttons";
 import { IStepEvent, LineStyleType, Step } from "./Step";
 
-type AlignType = "start" | "center" | "end";
-
-type StepItem = {
-  activeStepIcon?: string | ReactNode;
-  content?: string | ReactNode;
-  label?: string;
-  step?: number | string | ReactNode;
-  subtitle?: string;
-};
+type AlignType = "center" | "end" | "start";
 
 interface IProperties {
   activeIndex?: number;
+  align?: AlignType;
   direction?: "horizontal" | "vertical";
   hideButtons?: boolean;
+  lineStyle?: LineStyleType;
+  nextButtonProperties?: IButtonProperties;
+  onActiveIndexUpdate?: (index: number) => void;
   onChange?: (event: IStepEvent) => void;
+  onComplete?: () => void;
   previousButtonProperties?: IButtonProperties;
-  nextButtonProperties?: IButtonProperties;
   readOnly?: boolean;
-  lineStyle?: LineStyleType;
   steps: StepItem[];
-  align?: AlignType;
-  onComplete?: () => void;
-  onActiveIndexUpdate?: (index: number) => void;
 }
 
+type StepItem = {
+  activeStepIcon?: ReactNode | string;
+  content?: ReactNode | string;
+  label?: string;
+  step?: number | ReactNode | string;
+  subtitle?: string;
+};
+
 export const Stepper: React.FC<IProperties> = ({
   activeIndex,
   align = "center",
   direction = "horizontal",
   hideButtons = false,
   lineStyle = "solid",
+  nextButtonProperties,
+  onActiveIndexUpdate,
   onChange,
   onComplete,
-  onActiveIndexUpdate,
   previousButtonProperties,
-  nextButtonProperties,
   readOnly = true,
   steps = [],
 }) => {
@@ -100,8 +100,8 @@ export const Stepper: React.FC<IProperties> = ({
         <Button
           disabled={activeStepIndex === 0}
           label="Previous"
-          variant="outlined"
           onClick={handlePrevious}
+          variant="outlined"
           {...previousButtonProperties}
         />
         <Button
@@ -137,16 +137,16 @@ export const Stepper: React.FC<IProperties> = ({
             <Step
               key={index}
               {...element}
-              index={index}
-              lineStyle={lineStyle}
-              onClick={onClick}
-              isCompleted={activeStepIndex > index ? true : false}
-              isActive={activeStepIndex === index ? true : false}
               activeContent={
                 direction === "vertical" && activeStepIndex === index
                   ? renderActiveContent()
                   : null
               }
+              index={index}
+              isActive={activeStepIndex === index ? true : false}
+              isCompleted={activeStepIndex > index ? true : false}
+              lineStyle={lineStyle}
+              onClick={onClick}
             />
           );
         })}
diff --git a/packages/ui/src/TabView/index.tsx b/packages/ui/src/TabView/index.tsx
index 31a681980..680909235 100644
--- a/packages/ui/src/TabView/index.tsx
+++ b/packages/ui/src/TabView/index.tsx
@@ -1,24 +1,24 @@
 import React, { useEffect, useMemo, useState } from "react";
 
+import type { Properties, Tab } from "./types";
+
 import { getStorage } from "../utils";
 import { getOrientation } from "./utilities";
 
-import type { Properties, Tab } from "./types";
-
 const TabView: React.FC<Properties> = ({
   activeKey,
   controlled = false,
   enableHashRouting = false,
   id = "",
   lazy = true,
+  onActiveTabChange,
+  onTabClose,
+  onVisibleTabsChange,
   persistState = true,
   persistStateStorage = "localStorage",
   position = "top",
   tabs,
   visibleTabs: _visibleTabs,
-  onActiveTabChange,
-  onVisibleTabsChange,
-  onTabClose,
 }) => {
   const [initialized, setInitialized] = useState(false);
   const [visibleTabs, setVisibleTabs] = useState(
@@ -183,7 +183,7 @@ const TabView: React.FC<Properties> = ({
 
   return (
     <div className={`tabbed-panel ${position}`}>
-      <div role="tablist" aria-orientation={getOrientation(position)}>
+      <div aria-orientation={getOrientation(position)} role="tablist">
         {filteredTabs.map((item, index) => {
           const isActive = currentActiveKey === item.key;
           const title = item.label;
@@ -192,23 +192,23 @@ const TabView: React.FC<Properties> = ({
 
           return (
             <button
-              onClick={() => handleTabSwitch(item.key)}
-              key={key}
-              role="tab"
               aria-label={title}
               aria-selected={isActive}
-              tabIndex={0}
               className={isActive ? "active" : ""}
+              key={key}
+              onClick={() => handleTabSwitch(item.key)}
+              role="tab"
+              tabIndex={0}
             >
               {icon && <i className={icon} />}
               <span title={title}>{title}</span>
               {item.closable ? (
                 <i
+                  className="pi pi-times"
                   onClick={(event) => {
                     event.stopPropagation();
                     handleTabClose(item.key);
                   }}
-                  className="pi pi-times"
                 ></i>
               ) : null}
             </button>
@@ -223,10 +223,10 @@ const TabView: React.FC<Properties> = ({
         ) : (
           filteredTabs.map((tab) => (
             <div
-              key={tab.key}
               className={`tab-panel-content ${
                 tab.key === currentActiveKey ? "active" : "hidden"
               }`.trimEnd()}
+              key={tab.key}
             >
               {tab.children}
             </div>
diff --git a/packages/ui/src/TabView/types.ts b/packages/ui/src/TabView/types.ts
index 712f502d7..6815b9c34 100644
--- a/packages/ui/src/TabView/types.ts
+++ b/packages/ui/src/TabView/types.ts
@@ -1,11 +1,19 @@
-type TKeymap = {
-  [key: string]: () => void;
+type Properties = {
+  activeKey?: string;
+  controlled?: boolean;
+  enableHashRouting?: boolean;
+  id?: string;
+  lazy?: boolean;
+  onActiveTabChange?: (activeTab: string) => void;
+  onTabClose?: (activeTab: string) => void;
+  onVisibleTabsChange?: (visibleTabs: string[]) => void;
+  persistState?: boolean;
+  persistStateStorage?: StorageType;
+  position?: TPosition;
+  tabs: Tab[];
+  visibleTabs?: string[];
 };
 
-type TOrientation = "horizontal" | "vertical";
-
-type TPosition = "top" | "left" | "bottom" | "right";
-
 type StorageType = "localStorage" | "sessionStorage";
 
 type Tab = {
@@ -16,20 +24,12 @@ type Tab = {
   label: string;
 };
 
-type Properties = {
-  activeKey?: string;
-  controlled?: boolean;
-  enableHashRouting?: boolean;
-  id?: string;
-  lazy?: boolean;
-  persistState?: boolean;
-  persistStateStorage?: StorageType;
-  position?: TPosition;
-  tabs: Tab[];
-  visibleTabs?: string[];
-  onActiveTabChange?: (activeTab: string) => void;
-  onTabClose?: (activeTab: string) => void;
-  onVisibleTabsChange?: (visibleTabs: string[]) => void;
+type TKeymap = {
+  [key: string]: () => void;
 };
 
-export type { TKeymap, TOrientation, TPosition, Properties, StorageType, Tab };
+type TOrientation = "horizontal" | "vertical";
+
+type TPosition = "bottom" | "left" | "right" | "top";
+
+export type { Properties, StorageType, Tab, TKeymap, TOrientation, TPosition };
diff --git a/packages/ui/src/TabView/utilities.ts b/packages/ui/src/TabView/utilities.ts
index 2773e9c27..996f66516 100644
--- a/packages/ui/src/TabView/utilities.ts
+++ b/packages/ui/src/TabView/utilities.ts
@@ -1,13 +1,13 @@
-import { getStorage } from "../utils";
+import type { StorageType, TOrientation, TPosition } from "./types";
 
-import type { TOrientation, TPosition, StorageType } from "./types";
+import { getStorage } from "../utils";
 
 const getOrientation = (position: TPosition) => {
   let orientation: TOrientation;
 
   switch (position) {
-    case "top":
     case "bottom":
+    case "top":
       orientation = "horizontal";
       break;
 
@@ -33,4 +33,4 @@ const clearSavedTabState = (
   storage.removeItem(key);
 };
 
-export { getOrientation, clearSavedTabState };
+export { clearSavedTabState, getOrientation };
diff --git a/packages/ui/src/TabbedPanel/TabbedPanel.tsx b/packages/ui/src/TabbedPanel/TabbedPanel.tsx
index 227d12632..3ade4bc40 100644
--- a/packages/ui/src/TabbedPanel/TabbedPanel.tsx
+++ b/packages/ui/src/TabbedPanel/TabbedPanel.tsx
@@ -1,19 +1,19 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 
+import type { Properties } from "./types";
+
 import { getStorage } from "../utils";
 import { getOrientation, onTabDown } from "./utilities";
 
-import type { Properties } from "./types";
-
 const TabbedPanel: React.FC<Properties> = ({
   children,
   defaultActiveIndex = 0,
-  position = "top",
   id = "",
   persistState = true,
   persistStateStorage = "localStorage",
+  position = "top",
 }) => {
-  const [active, setActive] = useState<number | null>(null);
+  const [active, setActive] = useState<null | number>(null);
   const tabReferences = useRef<(HTMLButtonElement | null)[]>([]);
   const childNodes = Array.isArray(children) ? children : [children];
 
@@ -61,7 +61,7 @@ const TabbedPanel: React.FC<Properties> = ({
 
   return (
     <div className={`tabbed-panel ${position}`}>
-      <div role="tablist" aria-orientation={getOrientation(position)}>
+      <div aria-orientation={getOrientation(position)} role="tablist">
         {childNodes.map((item, index) => {
           const isActive = active === index;
           const title = item.props.title;
@@ -70,6 +70,13 @@ const TabbedPanel: React.FC<Properties> = ({
 
           return (
             <button
+              aria-disabled={isActive}
+              aria-label={title}
+              aria-selected={isActive}
+              className={isActive ? "active" : ""}
+              key={key}
+              onClick={() => setActive(index)}
+              onFocus={() => setActive(index)}
               onKeyDown={(event) => {
                 onTabDown(
                   active,
@@ -79,19 +86,12 @@ const TabbedPanel: React.FC<Properties> = ({
                   getOrientation(position),
                 );
               }}
-              onFocus={() => setActive(index)}
               ref={(element) => (tabReferences.current[index] = element)}
-              onClick={() => setActive(index)}
-              key={key}
               role="tab"
-              aria-label={title}
-              aria-disabled={isActive}
-              aria-selected={isActive}
               tabIndex={isActive ? 0 : -1}
-              className={isActive ? "active" : ""}
             >
               {icon ? (
-                <img src={icon} alt="title icon" aria-hidden="true" />
+                <img alt="title icon" aria-hidden="true" src={icon} />
               ) : null}
               <span>{title}</span>
             </button>
diff --git a/packages/ui/src/TabbedPanel/__test__/TabbedPanel.test.tsx b/packages/ui/src/TabbedPanel/__test__/TabbedPanel.test.tsx
index fa1832291..0da777c00 100644
--- a/packages/ui/src/TabbedPanel/__test__/TabbedPanel.test.tsx
+++ b/packages/ui/src/TabbedPanel/__test__/TabbedPanel.test.tsx
@@ -6,21 +6,21 @@ import { SubPane } from "../../components/SubPane";
 import TabbedPanel from "../TabbedPanel";
 
 const values = {
-  titleOne: "Topic 1",
   bodyOne: "Pane 1 content",
-  iconOne: "icon1.jpg",
-  titleTwo: "Topic 2",
   bodyTwo: "Pane 2 content",
+  iconOne: "icon1.jpg",
   iconTwo: "icon2.jpg",
+  titleOne: "Topic 1",
+  titleTwo: "Topic 2",
 };
 
 test("tabs are rendered", async () => {
   render(
     <TabbedPanel>
-      <SubPane title={values.titleOne} icon={values.iconOne}>
+      <SubPane icon={values.iconOne} title={values.titleOne}>
         <p>{values.bodyOne}</p>
       </SubPane>
-      <SubPane title={values.titleTwo} icon={values.iconTwo}>
+      <SubPane icon={values.iconTwo} title={values.titleTwo}>
         <p>{values.bodyTwo}</p>
       </SubPane>
     </TabbedPanel>,
@@ -33,10 +33,10 @@ test("tabs are rendered", async () => {
 test("correct tab is rendered", async () => {
   render(
     <TabbedPanel>
-      <SubPane title={values.titleOne} icon={values.iconOne}>
+      <SubPane icon={values.iconOne} title={values.titleOne}>
         <p>{values.bodyOne}</p>
       </SubPane>
-      <SubPane title={values.titleTwo} icon={values.iconTwo}>
+      <SubPane icon={values.iconTwo} title={values.titleTwo}>
         <p>{values.bodyTwo}</p>
       </SubPane>
     </TabbedPanel>,
diff --git a/packages/ui/src/TabbedPanel/index.ts b/packages/ui/src/TabbedPanel/index.ts
index e4929c389..f81b78f2a 100644
--- a/packages/ui/src/TabbedPanel/index.ts
+++ b/packages/ui/src/TabbedPanel/index.ts
@@ -1,4 +1,4 @@
 import TabbedPanel from "./TabbedPanel";
 import { clearSavedTabState } from "./utilities";
 
-export { TabbedPanel, clearSavedTabState };
+export { clearSavedTabState, TabbedPanel };
diff --git a/packages/ui/src/TabbedPanel/types.ts b/packages/ui/src/TabbedPanel/types.ts
index 708cf44d9..1135d764b 100644
--- a/packages/ui/src/TabbedPanel/types.ts
+++ b/packages/ui/src/TabbedPanel/types.ts
@@ -1,23 +1,23 @@
 import type { ReactElement } from "react";
 
-type TKeymap = {
-  [key: string]: () => void;
-};
-
-type TOrientation = "horizontal" | "vertical";
-
-type TPosition = "top" | "left" | "bottom" | "right";
-
-type StorageType = "localStorage" | "sessionStorage";
-
 type Properties = {
   children: ReactElement | ReactElement[];
   defaultActiveIndex?: number;
   id?: string;
   onTabChange?: (index: number) => void;
-  position?: TPosition;
   persistState?: boolean;
   persistStateStorage?: StorageType;
+  position?: TPosition;
+};
+
+type StorageType = "localStorage" | "sessionStorage";
+
+type TKeymap = {
+  [key: string]: () => void;
 };
 
-export type { TKeymap, TOrientation, TPosition, Properties, StorageType };
+type TOrientation = "horizontal" | "vertical";
+
+type TPosition = "bottom" | "left" | "right" | "top";
+
+export type { Properties, StorageType, TKeymap, TOrientation, TPosition };
diff --git a/packages/ui/src/TabbedPanel/utilities.ts b/packages/ui/src/TabbedPanel/utilities.ts
index c49e1effb..43549d2ba 100644
--- a/packages/ui/src/TabbedPanel/utilities.ts
+++ b/packages/ui/src/TabbedPanel/utilities.ts
@@ -1,14 +1,15 @@
-import { getStorage } from "../utils";
-
-import type { TKeymap, TOrientation, TPosition, StorageType } from "./types";
 import type { KeyboardEvent } from "react";
 
+import type { StorageType, TKeymap, TOrientation, TPosition } from "./types";
+
+import { getStorage } from "../utils";
+
 const getOrientation = (position: TPosition) => {
   let orientation: TOrientation;
 
   switch (position) {
-    case "top":
     case "bottom":
+    case "top":
       orientation = "horizontal";
       break;
 
@@ -41,12 +42,12 @@ const onTabDown = (
 
   // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
   const keyMap: TKeymap = {
-    ArrowRight: orientation === "horizontal" ? nextTab : doNothing,
     ArrowDown: orientation === "vertical" ? nextTab : doNothing,
     ArrowLeft: orientation === "horizontal" ? previousTab : doNothing,
+    ArrowRight: orientation === "horizontal" ? nextTab : doNothing,
     ArrowUp: orientation === "vertical" ? previousTab : doNothing,
-    Home: firstTab,
     End: lastTab,
+    Home: firstTab,
   };
 
   const action = keyMap[event.key];
@@ -65,4 +66,4 @@ const clearSavedTabState = (
   storage.removeItem(key);
 };
 
-export { getOrientation, onTabDown, clearSavedTabState };
+export { clearSavedTabState, getOrientation, onTabDown };
diff --git a/packages/ui/src/Table/Table.tsx b/packages/ui/src/Table/Table.tsx
index 2ea350ccf..a20e507b8 100644
--- a/packages/ui/src/Table/Table.tsx
+++ b/packages/ui/src/Table/Table.tsx
@@ -1,42 +1,43 @@
+import type { ColumnDef, RowData } from "@tanstack/react-table";
+
 import {
+  ColumnFiltersState,
   getCoreRowModel,
-  useReactTable,
+  getFilteredRowModel,
   getPaginationRowModel,
-  SortingState,
   getSortedRowModel,
-  ColumnFiltersState,
-  getFilteredRowModel,
-  VisibilityState,
   PaginationState,
+  SortingState,
   Updater,
+  useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 
+import type { PersistentTableState, TDataTableProperties } from "./types";
+
+import { Checkbox } from "../FormWidgets";
+import LoadingIcon from "../LoadingIcon";
+import { Pagination } from "../Pagination";
 import { getStorage } from "../utils";
 import {
   DEFAULT_PAGE_INDEX,
   DEFAULT_PAGE_PER_OPTIONS,
   DEFAULT_PAGE_SIZE,
 } from "./constants";
+import { FILTER_FUNCTIONS_ENUM } from "./enums";
 import { TableBody } from "./TableBody";
 import { DataActionsMenu } from "./TableDataActions";
 import { Table, TableFooter } from "./TableElements";
 import { TableHeader } from "./TableHeader";
 import { TableToolbar } from "./TableToolbar";
 import {
-  getRequestJSON,
   getParsedColumns,
-  saveTableState,
+  getRequestJSON,
   getSavedTableState,
   isDefined,
+  saveTableState,
 } from "./utilities";
-import { Checkbox } from "../FormWidgets";
-import LoadingIcon from "../LoadingIcon";
-import { Pagination } from "../Pagination";
-import { FILTER_FUNCTIONS_ENUM } from "./enums";
-
-import type { PersistentTableState, TDataTableProperties } from "./types";
-import type { ColumnDef, RowData } from "@tanstack/react-table";
 
 const DataTable = <TData extends RowData>({
   className = "",
@@ -48,6 +49,7 @@ const DataTable = <TData extends RowData>({
   emptyTableMessage,
   enableRowSelection = false,
   enableSortingRemoval = false,
+  fetchData,
   highlightHeader,
   id,
   initialFilters = [],
@@ -55,10 +57,15 @@ const DataTable = <TData extends RowData>({
   inputDebounceTime,
   isLoading = false,
   locale,
+  onRowSelectChange,
   paginated = true,
   paginationOptions,
   persistState = true,
   persistStateStorage = "localStorage",
+  renderCustomPagination,
+  renderSortIcons,
+  renderTableFooterContent,
+  renderToolbarItems,
   resetStateActionBtnLabel: resetStateActionButtonLabel = "Reset all",
   rowClassName,
   rowPerPage,
@@ -68,12 +75,6 @@ const DataTable = <TData extends RowData>({
   title,
   totalRecords = 0,
   visibleColumns = [],
-  fetchData,
-  onRowSelectChange,
-  renderCustomPagination,
-  renderSortIcons,
-  renderTableFooterContent,
-  renderToolbarItems,
   ...tableOptions
 }: TDataTableProperties<TData>) => {
   // Try to synchronously hydrate persisted state to avoid a visual "flash"
@@ -83,13 +84,13 @@ const DataTable = <TData extends RowData>({
 
   const computeInitialPersistentState = (): PersistentTableState => {
     const base: PersistentTableState = {
-      sorting: initialSorting,
       columnFilters: initialFilters,
       columnVisibility: {},
       pagination: {
         pageIndex: DEFAULT_PAGE_INDEX,
         pageSize: rowPerPage || DEFAULT_PAGE_SIZE,
       },
+      sorting: initialSorting,
     };
 
     if (!persistState || !id) {
@@ -139,13 +140,13 @@ const DataTable = <TData extends RowData>({
       }
 
       return {
-        sorting: savedSorting ?? base.sorting,
         columnFilters: savedColumnFilters ?? base.columnFilters,
         columnVisibility: savedColumnVisibility ?? base.columnVisibility,
         pagination: {
           pageIndex,
           pageSize,
         },
+        sorting: savedSorting ?? base.sorting,
       };
 
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -238,37 +239,37 @@ const DataTable = <TData extends RowData>({
 
   const parsedColumns = useMemo(() => {
     let parsedColumns: ColumnDef<TData, unknown>[] = getParsedColumns({
-      visibleColumns,
       columns,
+      visibleColumns,
     });
 
     if (enableRowSelection) {
       parsedColumns = [
         {
-          id: "select",
+          align: "center",
+          cell: ({ row }) => (
+            <Checkbox
+              aria-label="Select row"
+              checked={row.getIsSelected()}
+              onChange={() => row.toggleSelected(!row.getIsSelected())}
+            />
+          ),
+          enableColumnFilter: false,
+          enableGlobalFilter: false,
+          enableHiding: false,
+          enableSorting: false,
           header: ({ table }) => (
             <Checkbox
+              aria-label="Select all"
               checked={table.getIsAllPageRowsSelected()}
               onChange={() =>
                 table.toggleAllPageRowsSelected(
                   !table.getIsAllPageRowsSelected(),
                 )
               }
-              aria-label="Select all"
             />
           ),
-          cell: ({ row }) => (
-            <Checkbox
-              checked={row.getIsSelected()}
-              onChange={() => row.toggleSelected(!row.getIsSelected())}
-              aria-label="Select row"
-            />
-          ),
-          enableSorting: false,
-          enableHiding: false,
-          enableColumnFilter: false,
-          enableGlobalFilter: false,
-          align: "center",
+          id: "select",
         },
         ...parsedColumns,
       ];
@@ -279,8 +280,6 @@ const DataTable = <TData extends RowData>({
       (dataActionsMenu && visibleColumns.includes("actions"))
     ) {
       const defaultActionColumn: ColumnDef<TData, unknown> = {
-        id: "actions",
-        header: () => <i className="pi pi-cog"></i>,
         align: "center",
         cell: ({ row: { original } }) => {
           const actionsMenu =
@@ -306,6 +305,8 @@ const DataTable = <TData extends RowData>({
 
           return <DataActionsMenu {...actionsMenu} data={original} />;
         },
+        header: () => <i className="pi pi-cog"></i>,
+        id: "actions",
       };
 
       parsedColumns = [...parsedColumns, defaultActionColumn];
@@ -331,7 +332,7 @@ const DataTable = <TData extends RowData>({
             return true;
           }
 
-          const rowValue = row.getValue<string | Date | number>(columnId);
+          const rowValue = row.getValue<Date | number | string>(columnId);
           if (!rowValue) {
             return false;
           }
@@ -378,12 +379,16 @@ const DataTable = <TData extends RowData>({
   }, [visibleColumns, columns]);
 
   const table = useReactTable<TData>({
-    data,
     columns: parsedColumns,
+    data,
+    enableSortingRemoval: enableSortingRemoval,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    manualFiltering: !!fetchData,
+    manualPagination: !!fetchData,
+    manualSorting: !!fetchData,
     onColumnFiltersChange: handleColumnFilterChange,
     onColumnVisibilityChange: setColumnVisibility,
     onPaginationChange: setPagination,
@@ -396,10 +401,6 @@ const DataTable = <TData extends RowData>({
       rowSelection,
       sorting,
     },
-    enableSortingRemoval: enableSortingRemoval,
-    manualFiltering: !!fetchData,
-    manualSorting: !!fetchData,
-    manualPagination: !!fetchData,
     ...(!!fetchData && {
       pageCount: Math.ceil(totalRecords / pagination.pageSize),
     }),
@@ -429,10 +430,10 @@ const DataTable = <TData extends RowData>({
     // Records the table state change without any rerender
     if (persistState && id) {
       persistentStateReference.current = {
-        sorting,
         columnFilters,
         columnVisibility,
         pagination,
+        sorting,
       };
     }
   }, [id, pagination, persistState, sorting, columnFilters, columnVisibility]);
@@ -546,42 +547,42 @@ const DataTable = <TData extends RowData>({
   ]);
 
   return (
-    <div id={id} className={("table-container " + className).trimEnd()}>
+    <div className={("table-container " + className).trimEnd()} id={id}>
       {title ? (
         <span children={title.text} data-align={title.align || "center"} />
       ) : null}
 
       {showColumnsAction || renderToolbarItems || showResetStateAction ? (
         <TableToolbar
-          table={table}
-          showColumnsAction={showColumnsAction}
           columnActionButtonLabel={columnActionButtonLabel}
           dataActionsMenu={dataActionsMenu}
-          showResetStateAction={showResetStateAction}
+          enableRowSelection={enableRowSelection}
+          handleResetState={handleResetState}
           renderToolbarItems={renderToolbarItems}
           resetActionButtonLabel={resetStateActionButtonLabel}
-          handleResetState={handleResetState}
-          enableRowSelection={enableRowSelection}
+          showColumnsAction={showColumnsAction}
+          showResetStateAction={showResetStateAction}
+          table={table}
         />
       ) : null}
 
       <Table>
         <TableHeader
-          table={table}
-          renderSortIcons={renderSortIcons}
-          inputDebounceTime={inputDebounceTime}
           highlight={highlightHeader}
+          inputDebounceTime={inputDebounceTime}
+          renderSortIcons={renderSortIcons}
+          table={table}
         />
 
         <TableBody
           customFormatters={customFormatters}
           emptyTableMessage={emptyTableMessage}
           enableRowSelection={enableRowSelection}
+          isLoading={isLoading}
           locale={locale}
           parsedColumnsLength={parsedColumns.length}
           rowClassName={rowClassName}
           table={table}
-          isLoading={isLoading}
         />
 
         {renderTableFooterContent ? (
@@ -597,14 +598,14 @@ const DataTable = <TData extends RowData>({
             <Pagination
               currentPage={pagination.pageIndex}
               defaultItemsPerPage={pagination.pageSize}
-              onPageChange={(currentPage) => {
-                table.setPageIndex(currentPage);
-              }}
               itemsPerPageOptions={rowPerPageOptions}
               onItemsPerPageChange={(itemsPerPage) => {
                 table.setPageSize(itemsPerPage);
                 table.setPageIndex(0);
               }}
+              onPageChange={(currentPage) => {
+                table.setPageIndex(currentPage);
+              }}
               totalItems={totalItems}
               {...paginationOptions}
             ></Pagination>
diff --git a/packages/ui/src/Table/TableBody.tsx b/packages/ui/src/Table/TableBody.tsx
index bf6662321..e23bf01ec 100644
--- a/packages/ui/src/Table/TableBody.tsx
+++ b/packages/ui/src/Table/TableBody.tsx
@@ -1,13 +1,15 @@
 import {
   Cell,
   flexRender,
-  Table,
   NoInfer,
   Row,
   RowData,
+  Table,
 } from "@tanstack/react-table";
 import React from "react";
 
+import type { TDataTableProperties } from "./types";
+
 import { formatDate, formatDateTime } from "..";
 import {
   TableCell,
@@ -17,15 +19,13 @@ import {
 } from "./TableElements";
 import { formatNumber, getAlignValue } from "./utilities";
 
-import type { TDataTableProperties } from "./types";
-
 interface TableBodyProperties<TData extends RowData> extends Pick<
   TDataTableProperties<TData>,
-  "enableRowSelection" | "customFormatters" | "emptyTableMessage" | "isLoading"
+  "customFormatters" | "emptyTableMessage" | "enableRowSelection" | "isLoading"
 > {
   locale?: string;
   parsedColumnsLength: number;
-  rowClassName?: string | ((options: { row: Row<TData> }) => string);
+  rowClassName?: ((options: { row: Row<TData> }) => string) | string;
   table: Table<TData>;
 }
 
@@ -94,8 +94,8 @@ export const TableBody = <TData extends RowData>({
                         {
                           ...defaultDateOptions,
                           hour: "2-digit",
-                          minute: "2-digit",
                           hour12: false,
+                          minute: "2-digit",
                         };
                       const numberOptions = cell.column.columnDef.numberOptions;
 
@@ -106,11 +106,16 @@ export const TableBody = <TData extends RowData>({
                           (value: any) => NoInfer<never>
                         > = {
                           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                          number: (value: any) =>
+                          currency: (value: any) =>
                             formatNumber({
-                              value: Number(value),
+                              formatOptions: {
+                                currency: "USD",
+                                style: "currency",
+                                ...(numberOptions?.formatOptions &&
+                                  numberOptions.formatOptions),
+                              },
                               locale: numberOptions?.locale ?? locale,
-                              formatOptions: numberOptions?.formatOptions,
+                              value: Number(value),
                             }) as NoInfer<never>,
                           // eslint-disable-next-line @typescript-eslint/no-explicit-any
                           date: (value: any) =>
@@ -128,16 +133,11 @@ export const TableBody = <TData extends RowData>({
                                 defaultDateTimeOptions,
                             ) as NoInfer<never>,
                           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                          currency: (value: any) =>
+                          number: (value: any) =>
                             formatNumber({
-                              value: Number(value),
+                              formatOptions: numberOptions?.formatOptions,
                               locale: numberOptions?.locale ?? locale,
-                              formatOptions: {
-                                style: "currency",
-                                currency: "USD",
-                                ...(numberOptions?.formatOptions &&
-                                  numberOptions.formatOptions),
-                              },
+                              value: Number(value),
                             }) as NoInfer<never>,
                           ...customFormatters,
                         };
@@ -154,40 +154,40 @@ export const TableBody = <TData extends RowData>({
 
                       return {
                         ...cellContext,
-                        renderValue: () => getFormattedValue(),
                         getValue: () => getFormattedValue(),
+                        renderValue: () => getFormattedValue(),
                       };
                     };
 
                   return (
                     <TableCell
-                      key={cell.id}
-                      data-label={cell.column.id}
-                      data-align={getAlignValue({
-                        align: cell.column.columnDef.align,
-                        dataType: cell.column.columnDef.dataType,
-                      })}
                       className={`${
                         cell.column.id ? `cell-${cell.column.id}` : ``
                       } ${cell.column.columnDef.className || ""}`
                         .replace(/\s\s/, " ")
                         .trimEnd()}
+                      data-align={getAlignValue({
+                        align: cell.column.columnDef.align,
+                        dataType: cell.column.columnDef.dataType,
+                      })}
+                      data-label={cell.column.id}
+                      key={cell.id}
                       style={{
-                        width: cell.column.columnDef.width,
                         maxWidth: cell.column.columnDef.maxWidth,
                         minWidth: cell.column.columnDef.minWidth,
+                        width: cell.column.columnDef.width,
                       }}
                     >
                       {cell.column.columnDef.tooltip ? (
                         <TooltipWrapper
-                          tooltipOptions={{
-                            children: renderTooltipContent(cell),
-                            ...cell.column.columnDef?.tooltipOptions,
-                          }}
                           cellContent={flexRender(
                             cell.column.columnDef.cell,
                             getFormattedValueContext(),
                           )}
+                          tooltipOptions={{
+                            children: renderTooltipContent(cell),
+                            ...cell.column.columnDef?.tooltipOptions,
+                          }}
                         ></TooltipWrapper>
                       ) : (
                         flexRender(
diff --git a/packages/ui/src/Table/TableDataActions.tsx b/packages/ui/src/Table/TableDataActions.tsx
index b02eb54f6..4a0b75cd4 100644
--- a/packages/ui/src/Table/TableDataActions.tsx
+++ b/packages/ui/src/Table/TableDataActions.tsx
@@ -7,23 +7,23 @@ export interface DataActionsMenuItem extends Omit<
   MenuItem,
   "disabled" | "display" | "onClick"
 > {
-  requireConfirmationModal?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onClick?: (arguments_: any) => void | Promise<void>;
+  confirmationOptions?: ((data: any) => IModalProperties) | IModalProperties;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  confirmationOptions?: IModalProperties | ((data: any) => IModalProperties);
+  disabled?: ((data: any) => boolean) | boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  disabled?: boolean | ((data: any) => boolean);
+  display?: ((data: any) => boolean) | boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  display?: boolean | ((data: any) => boolean);
+  onClick?: (arguments_: any) => Promise<void> | void;
+  requireConfirmationModal?: boolean;
 }
 
 export interface DataActionsMenuProperties<TData> {
   actions?: DataActionsMenuItem[];
   autoModeCount?: number;
   data?: TData;
+  displayActions?: ((data: TData) => boolean) | boolean;
   mode?: "auto" | "buttons" | "dropdown";
-  displayActions?: boolean | ((data: TData) => boolean);
 }
 
 export const DataActionsMenu = ({
@@ -71,12 +71,12 @@ export const DataActionsMenu = ({
                 ...(typeof action.confirmationOptions === "function"
                   ? action.confirmationOptions(data)
                   : action.confirmationOptions),
-                onHide: () => setConfirmation(null),
                 accept: async () => {
                   await action.onClick?.(data);
 
                   setConfirmation(null);
                 },
+                onHide: () => setConfirmation(null),
               });
             } else {
               action.onClick && action.onClick(data);
@@ -103,17 +103,17 @@ export const DataActionsMenu = ({
         .filter((item) => item?.display !== false)
         .map((item, index) => (
           <Button
-            key={`action-${item?.key ?? index}`}
-            iconLeft={item.icon}
             data-pr-tooltip={item.label}
             disabled={item.disabled}
-            variant="textOnly"
-            size="small"
-            severity={item.severity}
+            iconLeft={item.icon}
+            key={`action-${item?.key ?? index}`}
             label={!item.icon ? item.label : ""}
-            title={item.label}
             onClick={() => item.onClick?.()}
             rounded
+            severity={item.severity}
+            size="small"
+            title={item.label}
+            variant="textOnly"
           />
         ));
     }
@@ -121,9 +121,9 @@ export const DataActionsMenu = ({
     if (showDropdown) {
       return (
         <DropdownMenu
+          hideDropdownIcon
           label={<i className="pi pi-cog"></i>}
           menu={items}
-          hideDropdownIcon
         />
       );
     }
diff --git a/packages/ui/src/Table/TableDateFilter.tsx b/packages/ui/src/Table/TableDateFilter.tsx
index 22eca8442..5de116016 100644
--- a/packages/ui/src/Table/TableDateFilter.tsx
+++ b/packages/ui/src/Table/TableDateFilter.tsx
@@ -12,7 +12,7 @@ export const TableDateFilter = <TData,>({
 }: DateFilterProperties<TData>) => {
   const [dates, setDates] = useState<string[] | undefined>(undefined);
 
-  const filterValue = column.getFilterValue() as string[] | null;
+  const filterValue = column.getFilterValue() as null | string[];
 
   const getFormattedDate = (date: Date | null) => {
     if (!date) {
@@ -26,7 +26,7 @@ export const TableDateFilter = <TData,>({
     return `${year}-${month}-${day}`;
   };
 
-  const convertFilterValueToDate = (value: string[] | null) => {
+  const convertFilterValueToDate = (value: null | string[]) => {
     if (Array.isArray(filterValue)) {
       return filterValue.map((value) => new Date(value));
     }
@@ -59,9 +59,9 @@ export const TableDateFilter = <TData,>({
           formatteddates.length === 2 ? formatteddates : null,
         );
       }}
-      value={convertFilterValueToDate(dates as string[])}
-      selectionMode="range"
       placeholder={column.columnDef.filterPlaceholder || ""}
+      selectionMode="range"
+      value={convertFilterValueToDate(dates as string[])}
     />
   );
 };
diff --git a/packages/ui/src/Table/TableElements.tsx b/packages/ui/src/Table/TableElements.tsx
index 5306ce1ac..c26b9a352 100644
--- a/packages/ui/src/Table/TableElements.tsx
+++ b/packages/ui/src/Table/TableElements.tsx
@@ -52,11 +52,11 @@ TableRow.displayName = "TableRow";
 const ColumnHeader = React.forwardRef<
   HTMLTableCellElement,
   React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, children, ...properties }, reference) => (
+>(({ children, className, ...properties }, reference) => (
   <th
+    children={children}
     className={className || ""}
     ref={reference}
-    children={children}
     {...properties}
   />
 ));
@@ -65,7 +65,7 @@ ColumnHeader.displayName = "ColumnHeader";
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
   React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, children, ...properties }, reference) => (
+>(({ children, className, ...properties }, reference) => (
   <td
     className={className || ""}
     ref={reference}
@@ -88,11 +88,11 @@ const TableCaption = React.forwardRef<
 TableCaption.displayName = "TableCaption";
 
 const TooltipWrapper = ({
-  tooltipOptions,
   cellContent,
+  tooltipOptions,
 }: {
+  cellContent: JSX.Element | React.ReactNode;
   tooltipOptions: Omit<React.ComponentProps<typeof Tooltip>, "elementRef">;
-  cellContent: React.ReactNode | JSX.Element;
 }) => {
   const reference = useRef<HTMLDivElement>(null);
 
@@ -105,14 +105,14 @@ const TooltipWrapper = ({
 };
 
 export {
+  ColumnHeader,
   Table,
   TableBody,
+  TableCaption,
+  TableCell,
   TableFooter,
   TableHeader,
+  TableRow,
   TableToolbar,
   TooltipWrapper,
-  ColumnHeader,
-  TableRow,
-  TableCell,
-  TableCaption,
 };
diff --git a/packages/ui/src/Table/TableHeader.tsx b/packages/ui/src/Table/TableHeader.tsx
index 7656a8e3a..11a8ebca8 100644
--- a/packages/ui/src/Table/TableHeader.tsx
+++ b/packages/ui/src/Table/TableHeader.tsx
@@ -3,30 +3,30 @@ import React, { SyntheticEvent, useCallback, useState } from "react";
 
 import { DebouncedInput, Select } from "@/FormWidgets";
 
+import type { TDataTableProperties } from "./types";
+
 import { TableDateFilter } from "./TableDateFilter";
 import {
   ColumnHeader,
-  TableHeader as TTableHeader,
   TableRow,
+  TableHeader as TTableHeader,
 } from "./TableElements";
 import { TableRangeFilter } from "./TableRangeFilter";
 import { getAlignValue } from "./utilities";
 
-import type { TDataTableProperties } from "./types";
-
 interface THeaderProperty<T> extends Pick<
   TDataTableProperties<T>,
-  "renderSortIcons" | "inputDebounceTime"
+  "inputDebounceTime" | "renderSortIcons"
 > {
-  table: Table<T>;
   highlight?: boolean;
+  table: Table<T>;
 }
 
 export const TableHeader = <TData extends RowData>({
+  highlight = false,
   inputDebounceTime,
   renderSortIcons,
   table,
-  highlight = false,
 }: THeaderProperty<TData>) => {
   const [isFilterRowVisible, setIsFilterRowVisible] = useState(false);
 
@@ -42,9 +42,9 @@ export const TableHeader = <TData extends RowData>({
 
   const renderHeaderRow = () =>
     table.getHeaderGroups().map((headerGroup) => (
-      <TableRow key={headerGroup.id} className="header-row">
+      <TableRow className="header-row" key={headerGroup.id}>
         {headerGroup.headers.map(
-          ({ column, getContext, id, isPlaceholder, colSpan }) => {
+          ({ colSpan, column, getContext, id, isPlaceholder }) => {
             const {
               columnDef,
               getCanSort,
@@ -76,8 +76,6 @@ export const TableHeader = <TData extends RowData>({
 
             return (
               <ColumnHeader
-                key={id}
-                colSpan={colSpan}
                 className={`column-${id} ${
                   columnDef.className || ""
                 } ${activeColumnClass} ${
@@ -85,20 +83,22 @@ export const TableHeader = <TData extends RowData>({
                 }`
                   .replace(/\s\s/, " ")
                   .trimEnd()}
+                colSpan={colSpan}
                 data-align={getAlignValue({
                   align: columnDef.align,
                   dataType: columnDef.dataType,
                 })}
-                style={{
-                  width: columnDef.width,
-                  maxWidth: columnDef.maxWidth,
-                  minWidth: columnDef.minWidth,
-                }}
+                key={id}
                 onClick={(event) => {
                   if (getCanSort()) {
                     handleSort(event, getToggleSortingHandler());
                   }
                 }}
+                style={{
+                  maxWidth: columnDef.maxWidth,
+                  minWidth: columnDef.minWidth,
+                  width: columnDef.width,
+                }}
               >
                 <>
                   {isPlaceholder ? null : (
@@ -130,17 +130,17 @@ export const TableHeader = <TData extends RowData>({
     if (variant === "select") {
       return (
         <Select
+          enableTooltip
           matchMenuTriggerWidth={false}
           name="select"
           onChange={(value) => column.setFilterValue(value)}
           options={column.columnDef.meta?.filterOptions || []}
           placeholder={column.columnDef.filterPlaceholder || ""}
-          value={(columnFilterValue as string) || ""}
-          enableTooltip
           tooltipOptions={{
-            position: "top",
             offset: 15,
+            position: "top",
           }}
+          value={(columnFilterValue as string) || ""}
         />
       );
     }
@@ -148,6 +148,7 @@ export const TableHeader = <TData extends RowData>({
     if (variant === "multiselect") {
       return (
         <Select
+          enableTooltip
           matchMenuTriggerWidth={false}
           multiple
           name="multiselect"
@@ -160,12 +161,11 @@ export const TableHeader = <TData extends RowData>({
           }}
           options={column.columnDef.meta?.filterOptions || []}
           placeholder={column.columnDef.filterPlaceholder || ""}
-          value={(columnFilterValue as string[]) || []}
-          enableTooltip
           tooltipOptions={{
-            position: "top",
             offset: 15,
+            position: "top",
           }}
+          value={(columnFilterValue as string[]) || []}
         />
       );
     }
@@ -185,10 +185,10 @@ export const TableHeader = <TData extends RowData>({
 
     return (
       <DebouncedInput
+        debounceTime={inputDebounceTime}
         defaultValue={columnFilterValue as string}
         onInputChange={(value) => column.setFilterValue(value)}
         placeholder={column.columnDef.filterPlaceholder || ""}
-        debounceTime={inputDebounceTime}
       />
     );
   };
@@ -199,7 +199,7 @@ export const TableHeader = <TData extends RowData>({
     }
 
     return (
-      <TableRow key="filters" className="header-row filters">
+      <TableRow className="header-row filters" key="filters">
         {table.getVisibleLeafColumns().map((column) => {
           if (!column.getCanFilter()) {
             return <ColumnHeader key={"filter" + column.id}></ColumnHeader>;
@@ -214,24 +214,24 @@ export const TableHeader = <TData extends RowData>({
 
           return (
             <ColumnHeader
-              key={"filter" + column.id}
-              data-label={column.id}
+              className={`${
+                column.id ? `column-${column.id}` : ``
+              } ${activeColumnClass} ${
+                column.columnDef.className || ""
+              } ${filterColumnClass}`
+                .replace(/\s\s/, " ")
+                .trimEnd()}
               data-align={getAlignValue({
                 align: column.columnDef.align,
                 dataType: column.columnDef.dataType,
               })}
+              data-label={column.id}
+              key={"filter" + column.id}
               style={{
-                width: column.columnDef.width,
                 maxWidth: column.columnDef.maxWidth,
                 minWidth: column.columnDef.minWidth,
+                width: column.columnDef.width,
               }}
-              className={`${
-                column.id ? `column-${column.id}` : ``
-              } ${activeColumnClass} ${
-                column.columnDef.className || ""
-              } ${filterColumnClass}`
-                .replace(/\s\s/, " ")
-                .trimEnd()}
             >
               {renderColumnFilter(column)}
             </ColumnHeader>
diff --git a/packages/ui/src/Table/TableRangeFilter.tsx b/packages/ui/src/Table/TableRangeFilter.tsx
index 197406921..bf2d0246f 100644
--- a/packages/ui/src/Table/TableRangeFilter.tsx
+++ b/packages/ui/src/Table/TableRangeFilter.tsx
@@ -16,7 +16,7 @@ export const TableRangeFilter = <TData,>({
   const updateRangeFilter = (
     column: Column<TData, unknown>,
     index: number,
-    value: string | number | readonly string[],
+    value: number | readonly string[] | string,
   ): void => {
     const filterValue = column.getFilterValue();
 
@@ -39,12 +39,12 @@ export const TableRangeFilter = <TData,>({
   return (
     <div className="number-range-filter">
       <DebouncedInput
+        debounceTime={inputDebounceTime}
         defaultValue={
           Array.isArray(filterValue) && isDefined(filterValue[0])
             ? filterValue[0]
             : ""
         }
-        debounceTime={inputDebounceTime}
         name={`range-start-${key}`}
         onInputChange={(value) => updateRangeFilter(column, 0, value)}
         placeholder={
@@ -54,12 +54,12 @@ export const TableRangeFilter = <TData,>({
         type="number"
       />
       <DebouncedInput
+        debounceTime={inputDebounceTime}
         defaultValue={
           Array.isArray(filterValue) && isDefined(filterValue[1])
             ? filterValue[1]
             : ""
         }
-        debounceTime={inputDebounceTime}
         name={`range-end-${key}`}
         onInputChange={(value) => updateRangeFilter(column, 1, value)}
         placeholder={
diff --git a/packages/ui/src/Table/TableToolbar.tsx b/packages/ui/src/Table/TableToolbar.tsx
index 0f81c3f08..40a8e6144 100644
--- a/packages/ui/src/Table/TableToolbar.tsx
+++ b/packages/ui/src/Table/TableToolbar.tsx
@@ -1,11 +1,12 @@
-import { TableToolbar as TTableToolbar } from "./TableElements";
+import type { RowData, Table } from "@tanstack/react-table";
+
+import type { TDataTableProperties } from "./types";
+
 import { Button } from "../Buttons";
 import { Checkbox } from "../FormWidgets";
 import { Popup } from "../Popup";
 import { SortableList } from "../SortableList";
-
-import type { TDataTableProperties } from "./types";
-import type { RowData, Table } from "@tanstack/react-table";
+import { TableToolbar as TTableToolbar } from "./TableElements";
 
 interface TToolbar<T> extends Pick<
   TDataTableProperties<T>,
@@ -25,19 +26,19 @@ export const TableToolbar = <TData extends RowData>({
   columnActionButtonLabel,
   dataActionsMenu,
   enableRowSelection,
+  handleResetState,
   renderToolbarItems,
-  showResetStateAction,
   resetActionButtonLabel,
-  handleResetState,
   showColumnsAction,
+  showResetStateAction,
   table,
 }: TToolbar<TData>) => {
   const items = table
     .getAllLeafColumns()
     .filter((column) => column.id !== "select" && column.id !== "actions")
     .map((column, index) => ({
-      id: index,
       data: column,
+      id: index,
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       render: (data: any) => {
         let header = data.columnDef.header;
@@ -64,20 +65,13 @@ export const TableToolbar = <TData extends RowData>({
             <Button
               label={resetActionButtonLabel}
               onClick={handleResetState}
-              variant="outlined"
               severity="secondary"
+              variant="outlined"
             />
           ) : null}
 
           {showColumnsAction ? (
             <Popup
-              trigger={
-                <Button
-                  label={columnActionButtonLabel}
-                  variant="outlined"
-                  severity="secondary"
-                />
-              }
               content={
                 <SortableList
                   items={items}
@@ -90,6 +84,13 @@ export const TableToolbar = <TData extends RowData>({
                   }}
                 />
               }
+              trigger={
+                <Button
+                  label={columnActionButtonLabel}
+                  severity="secondary"
+                  variant="outlined"
+                />
+              }
             />
           ) : null}
 
diff --git a/packages/ui/src/Table/__test__/TestTableData.tsx b/packages/ui/src/Table/__test__/TestTableData.tsx
index 81728b49e..b850c4851 100644
--- a/packages/ui/src/Table/__test__/TestTableData.tsx
+++ b/packages/ui/src/Table/__test__/TestTableData.tsx
@@ -38,4 +38,4 @@ const columns = [
   },
 ];
 
-export { columns, data, fetcher, biggerData };
+export { biggerData, columns, data, fetcher };
diff --git a/packages/ui/src/Table/__test__/unit/utilities.test.ts b/packages/ui/src/Table/__test__/unit/utilities.test.ts
index 8bd98bd07..20af543d7 100644
--- a/packages/ui/src/Table/__test__/unit/utilities.test.ts
+++ b/packages/ui/src/Table/__test__/unit/utilities.test.ts
@@ -7,14 +7,14 @@ describe("FormatNumber unit test", () => {
     const value = 10_000_000;
     const locale = "en-US";
 
-    expect(formatNumber({ value, locale })).toBe("10,000,000");
+    expect(formatNumber({ locale, value })).toBe("10,000,000");
   });
 
   test("Should return a Indian locale based formatted number", () => {
     const value = 10_000_000;
     const locale = "en-IN";
 
-    expect(formatNumber({ value, locale })).toBe("1,00,00,000");
+    expect(formatNumber({ locale, value })).toBe("1,00,00,000");
   });
 
   test("Should return a USD currency formatted number", () => {
@@ -23,12 +23,12 @@ describe("FormatNumber unit test", () => {
 
     expect(
       formatNumber({
-        value,
-        locale,
         formatOptions: {
-          style: "currency",
           currency: "USD",
+          style: "currency",
         },
+        locale,
+        value,
       }),
     ).toBe("$10,000,000.00");
   });
@@ -38,7 +38,7 @@ describe("FormatNumber unit test", () => {
     const locale = "ne-N";
 
     try {
-      formatNumber({ value, locale });
+      formatNumber({ locale, value });
     } catch (error) {
       expect(() => {
         throw error;
diff --git a/packages/ui/src/Table/enums.ts b/packages/ui/src/Table/enums.ts
index 2e1d34bfb..d0d1bb2e5 100644
--- a/packages/ui/src/Table/enums.ts
+++ b/packages/ui/src/Table/enums.ts
@@ -1,37 +1,37 @@
 export enum FILTER_FUNCTIONS_ENUM {
+  BETWEEN = "between",
   CONTAINS = "contains",
-  STARTS_WITH = "startsWith",
   ENDS_WITH = "endsWith",
   EQUALS = "equals",
-  NOT_EQUAL = "notEqual",
   GREATER_THAN = "greaterThan",
   GREATER_THAN_OR_EQUAL = "greaterThanOrEqual",
-  LESS_THAN = "lessThan",
-  LESS_THAN_OR_EQUAL = "lessThanOrEqual",
-  IS_NULL = "isNull",
-  IS_NOT_NULL = "isNotNull",
+  IN = "in",
   IS_EMPTY = "isEmpty",
   IS_NOT_EMPTY = "isNotEmpty",
+  IS_NOT_NULL = "isNotNull",
+  IS_NULL = "isNull",
+  LESS_THAN = "lessThan",
+  LESS_THAN_OR_EQUAL = "lessThanOrEqual",
   LIKE = "like",
-  NOT_LIKE = "notLike",
-  IN = "in",
-  NOT_IN = "notIn",
-  BETWEEN = "between",
   NOT_BETWEEN = "notBetween",
+  NOT_EQUAL = "notEqual",
+  NOT_IN = "notIn",
+  NOT_LIKE = "notLike",
+  STARTS_WITH = "startsWith",
 }
 
 export enum FILTER_OPERATORS_ENUM {
+  BETWEEN = "bt",
   CONTAINS = "ct",
-  STARTS_WITH = "sw",
+  EMPTY = "empty",
   ENDS_WITH = "ew",
   EQUALS = "eq",
   GREATER_THAN = "gt",
   GREATER_THAN_OR_EQUAL = "gte",
+  IN = "in",
   LESS_THAN = "lt",
   LESS_THAN_OR_EQUAL = "lte",
-  NULL = "null",
-  EMPTY = "empty",
   LIKE = "like",
-  IN = "in",
-  BETWEEN = "bt",
+  NULL = "null",
+  STARTS_WITH = "sw",
 }
diff --git a/packages/ui/src/Table/index.ts b/packages/ui/src/Table/index.ts
index a48b5f82b..8cbacb452 100644
--- a/packages/ui/src/Table/index.ts
+++ b/packages/ui/src/Table/index.ts
@@ -4,13 +4,13 @@ import { clearSavedTableStates, getParsedColumns } from "./utilities";
 
 export { clearSavedTableStates, getParsedColumns, TDataTable, TTableElements };
 
+export type { DataActionsMenuProperties } from "./TableDataActions";
+
 export type {
-  TableColumnDefinition,
-  TRequestJSON,
-  TDataTableProperties,
   FilterFunction,
   FilterFunctions,
   FilterOption,
+  TableColumnDefinition,
+  TDataTableProperties,
+  TRequestJSON,
 } from "./types";
-
-export type { DataActionsMenuProperties } from "./TableDataActions";
diff --git a/packages/ui/src/Table/types.ts b/packages/ui/src/Table/types.ts
index 53fc18f3a..19e42d4fb 100644
--- a/packages/ui/src/Table/types.ts
+++ b/packages/ui/src/Table/types.ts
@@ -1,57 +1,67 @@
-import { DataActionsMenuProperties } from "./TableDataActions";
-import { Pagination } from "../Pagination";
-import { Tooltip } from "../Tooltip";
-
 import type {
   Cell,
+  Column,
   ColumnFilter,
+  ColumnFiltersState,
   PaginationState,
+  Row,
+  RowData,
   SortDirection,
+  SortingState,
   Table,
   TableOptions,
-  ColumnFiltersState,
-  Column,
-  RowData,
-  SortingState,
   VisibilityState,
-  Row,
 } from "@tanstack/react-table";
 import type { ComponentProps, ReactNode } from "react";
 
-declare module "@tanstack/react-table" {
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-  interface ColumnMeta<TData extends RowData, TValue> {
-    filterOptions?: FilterOption[];
-    filterVariant?: TFilterVariant;
-    serverFilterFn?: TFilterFn;
-  }
+import { Pagination } from "../Pagination";
+import { Tooltip } from "../Tooltip";
+import { DataActionsMenuProperties } from "./TableDataActions";
 
+declare module "@tanstack/react-table" {
   // eslint-disable-next-line unicorn/prevent-abbreviations
   interface ColumnDefBase<TData, TValue> {
     accessorKey?: string;
     align?: CellAlignmentType;
-    dataType?: CellDataType;
     className?: string;
+    customFilterComponent?: (column: Column<TData, TValue>) => ReactNode;
+    dataType?: CellDataType;
     dateOptions?: Omit<FormatDateType, "date">;
     filterPlaceholder?: string;
     maxWidth?: string;
     minWidth?: string;
     numberOptions?: Omit<FormatNumberType, "value">;
-    tooltip?: boolean | string | ((cell: Cell<TData, TValue>) => ReactNode);
+    tooltip?: ((cell: Cell<TData, TValue>) => ReactNode) | boolean | string;
     tooltipOptions?: Partial<
       Omit<ComponentProps<typeof Tooltip>, "elementRef">
     >;
     width?: string;
-    customFilterComponent?: (column: Column<TData, TValue>) => ReactNode;
   }
 
   interface ColumnFilter {
     filterFn?: TFilterFn;
   }
+
+  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+  interface ColumnMeta<TData extends RowData, TValue> {
+    filterOptions?: FilterOption[];
+    filterVariant?: TFilterVariant;
+    serverFilterFn?: TFilterFn;
+  }
 }
 
 export type { ColumnDef as TableColumnDefinition } from "@tanstack/react-table";
 
+export type CellAlignmentType = "center" | "left" | "right";
+
+export type CellDataType =
+  | "currency"
+  | "date"
+  | "datetime"
+  | "number"
+  | "text"
+  | string;
+
 /**
  * Change the type of Keys of T from NewType
  */
@@ -66,117 +76,48 @@ export type ChangeTypeOfKeys<
   [key in keyof T]: key extends Keys ? NewType : T[key];
 };
 
-export type TSortDirection = "ASC" | "DESC" | "";
-
-type TSingleFilter = {
-  key: string;
-  operator: string;
-  value: string;
-};
-
-type TFilterRequest =
-  | TSingleFilter
-  | {
-      AND: TFilterRequest[];
-    }
-  | {
-      OR: TFilterRequest[];
-    }
-  | null;
-
-type TSingleSort = {
-  key: string;
-  direction: TSortDirection;
-};
-
-type TLimit = number | null;
-
-type TOffset = number | null;
-
-type TSortRequest = TSingleSort[] | null;
-
 export type FilterOption = {
-  value: string;
   label: string;
+  value: string;
 };
 
-export type TRequestJSON = {
-  filter: TFilterRequest;
-  sort: TSortRequest;
-  offset: TOffset;
-  limit: TLimit;
-};
-
-export type TSortIcons = {
-  asc: string;
-  desc: string;
-  default: string;
-};
-
-export interface TBaseTable {
-  header: ReactNode;
-  body: ReactNode;
-  footer: ReactNode;
-}
-
 export interface FilterProperties {
+  columnFilterValue?: TFilterValue;
+  columnType: number | string;
   filterFn?: TFilterFn;
   filterVariant?: TFilterVariant;
+  handleChange: ({ filterFn, value }: TFilterValue) => void;
   placeholder?: string;
-  selectOptions?: TSelectOption[];
-  columnFilterValue?: TFilterValue;
-  columnType: number | string;
 
-  handleChange: ({ value, filterFn }: TFilterValue) => void;
-}
-
-export interface TFooterProperties {
-  paginationComponent?: ReactNode;
-  detailComponent?: ReactNode;
+  selectOptions?: TSelectOption[];
 }
 
-export interface TTableDetail {
-  detail: string;
-  showPrefix: string;
-}
+export type FormatDateType = {
+  date: Date | number | string;
+  formatOptions?: Intl.DateTimeFormatOptions;
+  locale?: string;
+};
 
-/* eslint-disable-next-line unicorn/prevent-abbreviations */
-export type TFilterFn =
-  | "contains"
-  | "equals"
-  | "startsWith"
-  | "endsWith"
-  | "greaterThan"
-  | "lessThan"
-  | "greaterThanOrEqual"
-  | "lessThanOrEqual"
-  | "in"
-  | "notEqual"
-  | "notIn"
-  | "between"
-  | "notBetween"
-  | "isNull"
-  | "isNotNull"
-  | "isEmpty"
-  | "isNotEmpty"
-  | "like"
-  | "notLike";
+export type FormatNumberType = {
+  formatOptions?: Intl.NumberFormatOptions;
+  locale?: string;
+  value: number;
+};
 
-export type TFilterVariant =
-  | "text"
-  | "select"
-  | "multiselect"
-  | "date"
-  | "dateRange"
-  | "range"
-  | "checkBox";
+export interface PersistentTableState {
+  columnFilters: ColumnFiltersState;
+  columnVisibility: VisibilityState;
+  pagination: PaginationState;
+  sorting: SortingState;
+}
 
-export type TSelectOption = { label: string; value: string };
+export type StorageType = "localStorage" | "sessionStorage";
 
-export type TFilterValue = {
-  filterFn: TFilterFn;
-  value: boolean | string | number;
-};
+export interface TBaseTable {
+  body: ReactNode;
+  footer: ReactNode;
+  header: ReactNode;
+}
 
 export type TCustomColumnFilter = ChangeTypeOfKeys<
   ColumnFilter,
@@ -184,79 +125,54 @@ export type TCustomColumnFilter = ChangeTypeOfKeys<
   TFilterValue
 >;
 
-//TDataTable props
-
-export type CellAlignmentType = "left" | "center" | "right";
-export type CellDataType =
-  | "text"
-  | "number"
-  | "date"
-  | "currency"
-  | "datetime"
-  | string;
-
-export type FormatNumberType = {
-  value: number;
-  locale?: string;
-  formatOptions?: Intl.NumberFormatOptions;
-};
-
-export type FormatDateType = {
-  date: Date | string | number;
-  locale?: string;
-  formatOptions?: Intl.DateTimeFormatOptions;
-};
-
-export type StorageType = "localStorage" | "sessionStorage";
-
 export interface TDataTableProperties<TData extends RowData> extends Partial<
-  Omit<TableOptions<TData>, "getCoreRowModel" | "data">
+  Omit<TableOptions<TData>, "data" | "getCoreRowModel">
 > {
   className?: string;
   columnActionBtnLabel?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   customFormatters?: Record<string, (value: any) => string>;
+  data: TData[];
   dataActionsMenu?:
     | ((data: TData) => DataActionsMenuProperties<TData>)
     | DataActionsMenuProperties<TData>;
-  data: TData[];
   emptyTableMessage?: string;
   enableRowSelection?: boolean;
+  fetchData?: (data: TRequestJSON) => void;
   globalFilter?: {
     key: string;
-    value: string;
     placeholder: string;
+    value: string;
   };
+  handleResetState?: () => void;
   highlightHeader?: boolean;
   id?: string;
   initialFilters?: ColumnFiltersState;
   initialSorting?: SortingState;
-  isLoading?: boolean;
   inputDebounceTime?: number;
+  isLoading?: boolean;
   locale?: string;
+  onRowSelectChange?: (table: Table<TData>) => void;
   paginated?: boolean;
   paginationOptions?: Omit<
     ComponentProps<typeof Pagination>,
     | "currentPage"
-    | "totalItems"
-    | "onPageChange"
-    | "onItemsPerPageChange"
-    | "itemsPerPageOptions"
     | "defaultItemsPerPage"
+    | "itemsPerPageOptions"
+    | "onItemsPerPageChange"
+    | "onPageChange"
+    | "totalItems"
   >;
   persistState?: boolean;
   persistStateStorage?: StorageType;
+  renderCustomPagination?: (table: Table<TData>) => React.ReactNode;
+  renderSortIcons?: (direction: false | SortDirection) => React.ReactNode;
+  renderTableFooterContent?: (table: Table<TData>) => React.ReactNode;
+  renderToolbarItems?: (table: Table<TData>) => React.ReactNode;
   resetStateActionBtnLabel?: string;
-  rowClassName?: string | ((options: { row: Row<TData> }) => string);
+  rowClassName?: ((options: { row: Row<TData> }) => string) | string;
   rowPerPage?: number;
   rowPerPageOptions?: number[];
-  showResetStateAction?: boolean;
-  totalRecords?: number;
-  visibleColumns?: string[];
-  title?: {
-    text: string;
-    align?: "left" | "center" | "right";
-  };
   /**
    * Determines whether row for column-specific actions
    * should be displayed for the table columns.
@@ -267,23 +183,107 @@ export interface TDataTableProperties<TData extends RowData> extends Partial<
    * @default false
    */
   showColumnsAction?: boolean;
-  fetchData?: (data: TRequestJSON) => void;
-  handleResetState?: () => void;
-  onRowSelectChange?: (table: Table<TData>) => void;
-  renderCustomPagination?: (table: Table<TData>) => React.ReactNode;
-  renderSortIcons?: (direction: false | SortDirection) => React.ReactNode;
-  renderTableFooterContent?: (table: Table<TData>) => React.ReactNode;
-  renderToolbarItems?: (table: Table<TData>) => React.ReactNode;
+  showResetStateAction?: boolean;
+  title?: {
+    align?: "center" | "left" | "right";
+    text: string;
+  };
+  totalRecords?: number;
+  visibleColumns?: string[];
+}
+
+/* eslint-disable-next-line unicorn/prevent-abbreviations */
+export type TFilterFn =
+  | "between"
+  | "contains"
+  | "endsWith"
+  | "equals"
+  | "greaterThan"
+  | "greaterThanOrEqual"
+  | "in"
+  | "isEmpty"
+  | "isNotEmpty"
+  | "isNotNull"
+  | "isNull"
+  | "lessThan"
+  | "lessThanOrEqual"
+  | "like"
+  | "notBetween"
+  | "notEqual"
+  | "notIn"
+  | "notLike"
+  | "startsWith";
+
+export type TFilterValue = {
+  filterFn: TFilterFn;
+  value: boolean | number | string;
+};
+
+export type TFilterVariant =
+  | "checkBox"
+  | "date"
+  | "dateRange"
+  | "multiselect"
+  | "range"
+  | "select"
+  | "text";
+
+export interface TFooterProperties {
+  detailComponent?: ReactNode;
+  paginationComponent?: ReactNode;
+}
+
+export type TRequestJSON = {
+  filter: TFilterRequest;
+  limit: TLimit;
+  offset: TOffset;
+  sort: TSortRequest;
+};
+
+export type TSelectOption = { label: string; value: string };
+
+export type TSortDirection = "" | "ASC" | "DESC";
+
+export type TSortIcons = {
+  asc: string;
+  default: string;
+  desc: string;
+};
+
+//TDataTable props
+
+export interface TTableDetail {
+  detail: string;
+  showPrefix: string;
 }
+type TFilterRequest =
+  | null
+  | TSingleFilter
+  | {
+      AND: TFilterRequest[];
+    }
+  | {
+      OR: TFilterRequest[];
+    };
+
+type TLimit = null | number;
+
+type TOffset = null | number;
+
+type TSingleFilter = {
+  key: string;
+  operator: string;
+  value: string;
+};
+
+type TSingleSort = {
+  direction: TSortDirection;
+  key: string;
+};
 
 export type {
   FilterFn as FilterFunction,
   FilterFns as FilterFunctions,
 } from "@tanstack/react-table";
 
-export interface PersistentTableState {
-  columnFilters: ColumnFiltersState;
-  columnVisibility: VisibilityState;
-  sorting: SortingState;
-  pagination: PaginationState;
-}
+type TSortRequest = null | TSingleSort[];
diff --git a/packages/ui/src/Table/utilities.ts b/packages/ui/src/Table/utilities.ts
index d1ce52c35..6e59dff65 100644
--- a/packages/ui/src/Table/utilities.ts
+++ b/packages/ui/src/Table/utilities.ts
@@ -1,6 +1,9 @@
-import { TABLE_STATE_PREFIX } from "./constants";
-import { getStorage } from "../utils";
-import { FILTER_FUNCTIONS_ENUM, FILTER_OPERATORS_ENUM } from "./enums";
+import type {
+  ColumnFilter,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+} from "@tanstack/react-table";
 
 import type {
   CellAlignmentType,
@@ -12,12 +15,10 @@ import type {
   TRequestJSON,
   TSortDirection,
 } from "./types";
-import type {
-  ColumnFilter,
-  ColumnFiltersState,
-  PaginationState,
-  SortingState,
-} from "@tanstack/react-table";
+
+import { getStorage } from "../utils";
+import { TABLE_STATE_PREFIX } from "./constants";
+import { FILTER_FUNCTIONS_ENUM, FILTER_OPERATORS_ENUM } from "./enums";
 
 /**
  * Maps filter functions to their corresponding operators
@@ -26,44 +27,44 @@ import type {
  */
 export const getFilterOperator = (filterFunction: TFilterFunction_) => {
   switch (filterFunction) {
+    case FILTER_FUNCTIONS_ENUM.BETWEEN:
+      return { operator: FILTER_OPERATORS_ENUM.BETWEEN };
     case FILTER_FUNCTIONS_ENUM.CONTAINS:
       return { operator: FILTER_OPERATORS_ENUM.CONTAINS };
-    case FILTER_FUNCTIONS_ENUM.STARTS_WITH:
-      return { operator: FILTER_OPERATORS_ENUM.STARTS_WITH };
     case FILTER_FUNCTIONS_ENUM.ENDS_WITH:
       return { operator: FILTER_OPERATORS_ENUM.ENDS_WITH };
     case FILTER_FUNCTIONS_ENUM.EQUALS:
       return { operator: FILTER_OPERATORS_ENUM.EQUALS };
-    case FILTER_FUNCTIONS_ENUM.NOT_EQUAL:
-      return { operator: FILTER_OPERATORS_ENUM.EQUALS, not: true };
     case FILTER_FUNCTIONS_ENUM.GREATER_THAN:
       return { operator: FILTER_OPERATORS_ENUM.GREATER_THAN };
     case FILTER_FUNCTIONS_ENUM.GREATER_THAN_OR_EQUAL:
       return { operator: FILTER_OPERATORS_ENUM.GREATER_THAN_OR_EQUAL };
+    case FILTER_FUNCTIONS_ENUM.IN:
+      return { operator: FILTER_OPERATORS_ENUM.IN };
+    case FILTER_FUNCTIONS_ENUM.IS_EMPTY:
+      return { operator: FILTER_OPERATORS_ENUM.EMPTY };
+    case FILTER_FUNCTIONS_ENUM.IS_NOT_EMPTY:
+      return { not: true, operator: FILTER_OPERATORS_ENUM.EMPTY };
+    case FILTER_FUNCTIONS_ENUM.IS_NOT_NULL:
+      return { not: true, operator: FILTER_OPERATORS_ENUM.NULL };
+    case FILTER_FUNCTIONS_ENUM.IS_NULL:
+      return { operator: FILTER_OPERATORS_ENUM.NULL };
     case FILTER_FUNCTIONS_ENUM.LESS_THAN:
       return { operator: FILTER_OPERATORS_ENUM.LESS_THAN };
     case FILTER_FUNCTIONS_ENUM.LESS_THAN_OR_EQUAL:
       return { operator: FILTER_OPERATORS_ENUM.LESS_THAN_OR_EQUAL };
-    case FILTER_FUNCTIONS_ENUM.IS_NULL:
-      return { operator: FILTER_OPERATORS_ENUM.NULL };
-    case FILTER_FUNCTIONS_ENUM.IS_NOT_NULL:
-      return { operator: FILTER_OPERATORS_ENUM.NULL, not: true };
-    case FILTER_FUNCTIONS_ENUM.IS_EMPTY:
-      return { operator: FILTER_OPERATORS_ENUM.EMPTY };
-    case FILTER_FUNCTIONS_ENUM.IS_NOT_EMPTY:
-      return { operator: FILTER_OPERATORS_ENUM.EMPTY, not: true };
     case FILTER_FUNCTIONS_ENUM.LIKE:
       return { operator: FILTER_OPERATORS_ENUM.LIKE };
-    case FILTER_FUNCTIONS_ENUM.NOT_LIKE:
-      return { operator: FILTER_OPERATORS_ENUM.LIKE, not: true };
-    case FILTER_FUNCTIONS_ENUM.IN:
-      return { operator: FILTER_OPERATORS_ENUM.IN };
-    case FILTER_FUNCTIONS_ENUM.NOT_IN:
-      return { operator: FILTER_OPERATORS_ENUM.IN, not: true };
-    case FILTER_FUNCTIONS_ENUM.BETWEEN:
-      return { operator: FILTER_OPERATORS_ENUM.BETWEEN };
     case FILTER_FUNCTIONS_ENUM.NOT_BETWEEN:
-      return { operator: FILTER_OPERATORS_ENUM.BETWEEN, not: true };
+      return { not: true, operator: FILTER_OPERATORS_ENUM.BETWEEN };
+    case FILTER_FUNCTIONS_ENUM.NOT_EQUAL:
+      return { not: true, operator: FILTER_OPERATORS_ENUM.EQUALS };
+    case FILTER_FUNCTIONS_ENUM.NOT_IN:
+      return { not: true, operator: FILTER_OPERATORS_ENUM.IN };
+    case FILTER_FUNCTIONS_ENUM.NOT_LIKE:
+      return { not: true, operator: FILTER_OPERATORS_ENUM.LIKE };
+    case FILTER_FUNCTIONS_ENUM.STARTS_WITH:
+      return { operator: FILTER_OPERATORS_ENUM.STARTS_WITH };
 
     default:
       throw new Error(`Unhandled filter function: ${filterFunction}`);
@@ -72,14 +73,14 @@ export const getFilterOperator = (filterFunction: TFilterFunction_) => {
 
 export const isRangeFilter = (filterFunction: TFilterFunction_) => {
   return [
-    FILTER_FUNCTIONS_ENUM.IN,
-    FILTER_FUNCTIONS_ENUM.NOT_IN,
     FILTER_FUNCTIONS_ENUM.BETWEEN,
+    FILTER_FUNCTIONS_ENUM.IN,
     FILTER_FUNCTIONS_ENUM.NOT_BETWEEN,
+    FILTER_FUNCTIONS_ENUM.NOT_IN,
   ].includes(filterFunction as FILTER_FUNCTIONS_ENUM);
 };
 
-export const isDefined = <T>(value: T | undefined | null) => {
+export const isDefined = <T>(value: null | T | undefined) => {
   return value !== undefined && value !== null;
 };
 
@@ -217,15 +218,15 @@ export const getRequestJSON = (
 
     if (sortingState.length > 1) {
       return sortingState.map((state) => ({
-        key: state.id,
         direction: getSortDirection(state.desc),
+        key: state.id,
       }));
     }
 
     return [
       {
-        key: sortingState[0].id,
         direction: getSortDirection(sortingState[0].desc),
+        key: sortingState[0].id,
       },
     ];
   };
@@ -233,20 +234,20 @@ export const getRequestJSON = (
   return {
     filter: getFilter(),
     limit: getLimit(),
-    sort: getSort(),
     offset: getOffset(),
+    sort: getSort(),
   };
 };
 
 export const getParsedColumns = ({
+  childColumns,
   columns,
   visibleColumns,
-  childColumns,
 }: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  columns: Array<any>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   childColumns?: Array<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columns: Array<any>;
   visibleColumns: string[];
 }) => {
   const parsedColumns = new Map();
@@ -262,27 +263,27 @@ export const getParsedColumns = ({
 
   const updateColumn = ({
     enableColumnFilter,
-    enableSorting,
     enableGlobalFilter,
     enableMultiSort,
+    enableSorting,
   }: {
     enableColumnFilter?: boolean;
-    enableSorting?: boolean;
     enableGlobalFilter?: boolean;
     enableMultiSort?: boolean;
+    enableSorting?: boolean;
   }) => {
     return {
       enableColumnFilter:
         typeof enableColumnFilter === "undefined" ? false : enableColumnFilter,
 
-      enableSorting:
-        typeof enableSorting === "undefined" ? false : enableSorting,
-
       enableGlobalFilter:
         typeof enableGlobalFilter === "undefined" ? false : enableGlobalFilter,
 
       enableMultiSort:
         typeof enableMultiSort === "undefined" ? false : enableMultiSort,
+
+      enableSorting:
+        typeof enableSorting === "undefined" ? false : enableSorting,
     };
   };
 
@@ -297,9 +298,9 @@ export const getParsedColumns = ({
           ...column,
           columns: [
             ...getParsedColumns({
+              childColumns: parsedColumns.get(columnIdentifier).columns || [],
               columns: column.columns,
               visibleColumns,
-              childColumns: parsedColumns.get(columnIdentifier).columns || [],
             }),
           ],
         });
@@ -357,9 +358,9 @@ export const getParsedColumns = ({
 };
 
 export const formatNumber = ({
-  value,
-  locale = "en-GB",
   formatOptions,
+  locale = "en-GB",
+  value,
 }: FormatNumberType) => {
   // for detail use case visit- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
 
@@ -396,7 +397,7 @@ export const getAlignValue = ({
 export const getSavedTableState = (
   id: string,
   storage: Storage,
-): PersistentTableState | null => {
+): null | PersistentTableState => {
   try {
     const savedState = storage.getItem(`${TABLE_STATE_PREFIX}-${id}`);
 
diff --git a/packages/ui/src/Tag/index.tsx b/packages/ui/src/Tag/index.tsx
index d40ac6c64..f43296120 100644
--- a/packages/ui/src/Tag/index.tsx
+++ b/packages/ui/src/Tag/index.tsx
@@ -1,17 +1,20 @@
-import { ReactNode, forwardRef } from "react";
+import { forwardRef, ReactNode } from "react";
 
 import { tagColors } from "./TagColors";
 
-type TagProperties = {
+type TagProperties = Omit<
+  React.HTMLAttributes<HTMLSpanElement>,
+  "class" | "color" | "style"
+> & {
   className?: string;
   color?: string;
   fullWidth?: boolean;
   icon?: string;
   label?: string;
+  renderContent?: () => ReactNode;
   rounded?: boolean;
   style?: React.CSSProperties;
-  renderContent?: () => ReactNode;
-} & Omit<React.HTMLAttributes<HTMLSpanElement>, "style" | "class" | "color">;
+};
 
 export const Tag = forwardRef<HTMLSpanElement, TagProperties>(
   (
@@ -21,9 +24,9 @@ export const Tag = forwardRef<HTMLSpanElement, TagProperties>(
       fullWidth,
       icon,
       label,
+      renderContent,
       rounded,
       style,
-      renderContent,
       ...properties
     },
     reference,
@@ -35,10 +38,10 @@ export const Tag = forwardRef<HTMLSpanElement, TagProperties>(
 
     return (
       <span
-        ref={reference}
         className={`dz-tag ${className} ${rounded ? "rounded" : ""} ${
           fullWidth ? "full-width" : ""
         }`.trimEnd()}
+        ref={reference}
         style={tagStyle}
         {...properties}
       >
diff --git a/packages/ui/src/Tooltip/ConfigureTooltip.ts b/packages/ui/src/Tooltip/ConfigureTooltip.ts
index bb3fa8cb9..d2cc320ed 100644
--- a/packages/ui/src/Tooltip/ConfigureTooltip.ts
+++ b/packages/ui/src/Tooltip/ConfigureTooltip.ts
@@ -1,8 +1,8 @@
 export interface ConfigureTooltipOptions {
   delay?: number;
-  offset?: number;
-  position?: "top" | "bottom" | "right" | "left";
   mouseTrack?: boolean;
+  offset?: number;
+  position?: "bottom" | "left" | "right" | "top";
 }
 
 const tooltipConfiguration = (): {
@@ -11,9 +11,9 @@ const tooltipConfiguration = (): {
 } => {
   const tooltipOptions: ConfigureTooltipOptions = {
     delay: 100,
+    mouseTrack: false,
     offset: 10,
     position: "right",
-    mouseTrack: false,
   };
 
   return {
diff --git a/packages/ui/src/Tooltip/Tooltip.tsx b/packages/ui/src/Tooltip/Tooltip.tsx
index 93c7851c3..7d2a1e970 100644
--- a/packages/ui/src/Tooltip/Tooltip.tsx
+++ b/packages/ui/src/Tooltip/Tooltip.tsx
@@ -1,24 +1,19 @@
 import { VirtualElement } from "@popperjs/core";
 import { OffsetsFunction } from "@popperjs/core/lib/modifiers/offset";
 import React, {
-  RefObject,
   FC,
-  useEffect,
+  RefObject,
   useCallback,
-  useState,
+  useEffect,
   useMemo,
   useRef,
+  useState,
 } from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 
 import { getTooltipConfig } from "./ConfigureTooltip";
 
-type Position = {
-  top?: number;
-  left?: number;
-};
-
 export type TooltipProperties = {
   children: React.ReactNode;
   className?: string;
@@ -26,7 +21,12 @@ export type TooltipProperties = {
   elementRef: RefObject<HTMLElement>;
   mouseTrack?: boolean;
   offset?: number;
-  position?: "top" | "bottom" | "right" | "left";
+  position?: "bottom" | "left" | "right" | "top";
+};
+
+type Position = {
+  left?: number;
+  top?: number;
 };
 
 export const Tooltip: FC<TooltipProperties> = (tooltipProperties) => {
@@ -62,7 +62,7 @@ export const Tooltip: FC<TooltipProperties> = (tooltipProperties) => {
 
   const onMouseMove = (event: MouseEvent) => {
     if (mouseTrack) {
-      setMousePosition({ top: event.clientY, left: event.clientX });
+      setMousePosition({ left: event.clientX, top: event.clientY });
     }
   };
 
@@ -101,17 +101,17 @@ export const Tooltip: FC<TooltipProperties> = (tooltipProperties) => {
   const virtualElement = useMemo(() => {
     return {
       getBoundingClientRect: () => ({
-        width: 0,
-        height: 0,
-        top: mousePosition.top,
-        right: mousePosition.left,
         bottom: mousePosition.top,
+        height: 0,
         left: mousePosition.left,
+        right: mousePosition.left,
+        top: mousePosition.top,
+        width: 0,
       }),
     };
   }, [mousePosition]);
 
-  const { styles, attributes } = usePopper(
+  const { attributes, styles } = usePopper(
     mouseTrack
       ? (virtualElement as VirtualElement)
       : (elementRef.current as Element),
@@ -140,8 +140,8 @@ export const Tooltip: FC<TooltipProperties> = (tooltipProperties) => {
     <>
       {createPortal(
         <div
-          ref={setTooltipReference}
           className={className ? className : renderedClassName}
+          ref={setTooltipReference}
           style={styles.popper}
           {...attributes}
         >
diff --git a/packages/ui/src/Tooltip/index.tsx b/packages/ui/src/Tooltip/index.tsx
index eff827ff1..8259f20b0 100644
--- a/packages/ui/src/Tooltip/index.tsx
+++ b/packages/ui/src/Tooltip/index.tsx
@@ -1,5 +1,5 @@
-export * from "./Tooltip";
 export {
-  type ConfigureTooltipOptions,
   configureTooltip,
+  type ConfigureTooltipOptions,
 } from "./ConfigureTooltip";
+export * from "./Tooltip";
diff --git a/packages/ui/src/assets/css/accordion-theme.css b/packages/ui/src/assets/css/accordion-theme.css
index 21bca17ac..14b7d1bba 100644
--- a/packages/ui/src/assets/css/accordion-theme.css
+++ b/packages/ui/src/assets/css/accordion-theme.css
@@ -30,6 +30,10 @@
   border-radius: var(--_border-radius);
 }
 
+.accordion.horizontal > li {
+  min-height: var(--accordion-horizontal-height, 30rem);
+}
+
 .accordion.horizontal > li:not(:last-child) {
   border-right: 1px solid var(--border-color);
 }
@@ -46,14 +50,14 @@
   padding: var(--_padding);
 }
 
-.accordion > li > button > i:first-child {
-  margin-right: 0.5rem;
-}
-
 .accordion > li > button > i {
   color: var(--color);
 }
 
+.accordion > li > button > i:first-child {
+  margin-right: 0.5rem;
+}
+
 .accordion > li > button > span {
   color: var(--color);
   flex-grow: 1;
@@ -68,17 +72,22 @@
   width: 100%;
 }
 
-.accordion.vertical > li.active > div[role="region"] {
-  max-height: var(--accordion-height, 30rem);
-  overflow-y: auto;
-}
-
 .accordion.horizontal > li > div[role="region"] {
+  height: 100%;
   max-width: 0;
   opacity: 0;
   overflow: hidden;
   transition: max-width var(--transition-duration) ease, opacity var(--transition-duration) ease;
-  height: 100%;
+}
+
+.accordion > li.active,
+.accordion > li.active > div[role="region"] {
+  width: 100%;
+}
+
+.accordion.vertical > li.active > div[role="region"] {
+  max-height: var(--accordion-height, 30rem);
+  overflow-y: auto;
 }
 
 .accordion.horizontal > li.active > div[role="region"] {
@@ -91,15 +100,6 @@
   padding: var(--_padding);
 }
 
-.accordion > li.active,
-.accordion > li.active > div[role="region"] {
-  width: 100%;
-}
-
-.accordion.horizontal > li {
-  min-height: var(--accordion-horizontal-height, 30rem);
-}
-
 .accordion.horizontal > li > button {
   padding: var(--_padding);
   width: min-content;
diff --git a/packages/ui/src/assets/css/accordion.css b/packages/ui/src/assets/css/accordion.css
index d91a9b17e..a7e77243c 100644
--- a/packages/ui/src/assets/css/accordion.css
+++ b/packages/ui/src/assets/css/accordion.css
@@ -19,7 +19,9 @@
 }
 
 .accordion.horizontal > li > button {
-  flex-direction: column;
+  align-items: center;
+  flex-direction: column-reverse;
+  justify-content: space-between;
 }
 
 .accordion.horizontal {
@@ -31,15 +33,9 @@
   flex-direction: row;
 }
 
-.accordion.horizontal > li > button {
-  align-items: center;
-  flex-direction: column-reverse;
-  justify-content: space-between;
-}
-
 .accordion.horizontal > li > button > span {
   margin: var(--accordion-title-margin, 0 0 4px 0);
-  text-orientation: sideways-right;
+  text-orientation: sideways;
   transform: rotate(180deg);
   writing-mode: vertical-rl;
 }
diff --git a/packages/ui/src/assets/css/auth-page.css b/packages/ui/src/assets/css/auth-page.css
index 92520b525..c0b533bf4 100644
--- a/packages/ui/src/assets/css/auth-page.css
+++ b/packages/ui/src/assets/css/auth-page.css
@@ -1,5 +1,6 @@
 .dz-auth-page {
   --_auth-page-gap: var(--dz-auth-page-gap, 2rem);
+
   display: flex;
   flex-direction: column;
   gap: var(--_auth-page-gap);
diff --git a/packages/ui/src/assets/css/button.css b/packages/ui/src/assets/css/button.css
index a90cec95f..27d3439ad 100644
--- a/packages/ui/src/assets/css/button.css
+++ b/packages/ui/src/assets/css/button.css
@@ -6,9 +6,9 @@
 
   align-items: center;
   background-color: var(--_button-color);
-  border-radius: var(--_button-border-radius);
   border: none;
-  color: #ffffff;
+  border-radius: var(--_button-border-radius);
+  color: #fff;
   cursor: pointer;
   display: flex;
   font-size: var(--_button-font-size);
@@ -52,25 +52,28 @@
 }
 
 .dz-button:focus {
-  outline-offset: 2px;
   outline: 2px solid var(--_button-color);
+  outline-offset: 2px;
 }
 
 .dz-button:disabled {
   cursor: not-allowed;
-  pointer-events: none;
   opacity: 0.6;
+  pointer-events: none;
 }
 
 .dz-button.filled {
   border: 1px solid var(--_button-color);
 }
+
 .dz-button.filled:hover:not(:disabled) {
   background-color: color-mix(in srgb, var(--_button-color) 75%, black);
 }
+
 .dz-button.filled:focus:not(:disabled) {
   background-color: color-mix(in srgb, var(--_button-color) 75%, black);
 }
+
 .dz-button.filled:active:not(:disabled) {
   background-color: color-mix(in srgb, var(--_button-color) 50%, black);
 }
@@ -80,12 +83,15 @@
   border: 1px solid var(--_button-color);
   color: var(--_button-color);
 }
+
 .dz-button.outlined:hover:not(:disabled) {
   background-color: color-mix(in srgb, var(--_button-color) 10%, white);
 }
+
 .dz-button.outlined:focus:not(:disabled) {
   background-color: color-mix(in srgb, var(--_button-color) 10%, white);
 }
+
 .dz-button.outlined:active:not(:disabled) {
   background-color: color-mix(in srgb, var(--_button-color) 20%, white);
 }
@@ -96,14 +102,17 @@
   color: var(--_button-color);
   font-weight: normal;
 }
+
 .dz-button.text-only:hover:not(:disabled) {
   background-color: color-mix(in srgb, var(--_button-color) 10%, white);
   border: 1px solid color-mix(in srgb, var(--_button-color) 10%, white);
 }
+
 .dz-button.text-only:focus:not(:disabled) {
   background-color: color-mix(in srgb, var(--_button-color) 10%, white);
   border: 1px solid color-mix(in srgb, var(--_button-color) 10%, white);
 }
+
 .dz-button.text-only:active:not(:disabled) {
   background-color: color-mix(in srgb, var(--_button-color) 20%, white);
   border: 1px solid color-mix(in srgb, var(--_button-color) 20%, white);
diff --git a/packages/ui/src/assets/css/card.css b/packages/ui/src/assets/css/card.css
index c9a0bbed9..85479edd5 100644
--- a/packages/ui/src/assets/css/card.css
+++ b/packages/ui/src/assets/css/card.css
@@ -1,18 +1,18 @@
 .dz-card {
-  --_card-text-color: rgba(0, 0, 0, 0.87);
+  --_card-text-color: rgb(0 0 0 / 87%);
+
   background-color: #fff;
   border-radius: 5px;
-  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
+    0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
   color: var(--_card-text-color);
-  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   overflow: hidden;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 }
 
 .dz-card[data-variant-outlined="true"] {
+  border: 1px solid rgb(0 0 0 / 12%);
   box-shadow: none;
-  border: 1px solid rgba(0, 0, 0, 0.12);
 }
 
 .dz-card-body,
diff --git a/packages/ui/src/assets/css/confirmation-modal.css b/packages/ui/src/assets/css/confirmation-modal.css
index 5f9a47a84..2526fd3b8 100644
--- a/packages/ui/src/assets/css/confirmation-modal.css
+++ b/packages/ui/src/assets/css/confirmation-modal.css
@@ -1,12 +1,12 @@
 :root {
-  --dz-dialog-background-color: rgba(255, 255, 255, 1);
-  --dz-dialog-overlay-color: rgba(0, 0, 0, 0.3);
+  --dz-dialog-background-color: rgb(255 255 255 / 100%);
+  --dz-dialog-overlay-color: rgb(0 0 0 / 30%);
 }
 
 .dz-dialog {
   background-color: var(--dz-dialog-background-color);
-  border-radius: 0.3rem;
   border: none;
+  border-radius: 0.3rem;
   box-shadow: 0 1px 3px var(--dz-dialog-overlay-color);
   flex-direction: column;
   gap: 1rem;
@@ -53,8 +53,8 @@
 
 .dz-dialog > .dz-dialog-footer {
   display: flex;
-  justify-content: flex-end;
   gap: 1rem;
+  justify-content: flex-end;
 }
 
 @keyframes open {
@@ -62,6 +62,7 @@
     opacity: 0;
     transform: scale(0);
   }
+
   to {
     opacity: 1;
     transform: scale(1);
diff --git a/packages/ui/src/assets/css/data.css b/packages/ui/src/assets/css/data.css
index 82f8559c5..204b6f892 100644
--- a/packages/ui/src/assets/css/data.css
+++ b/packages/ui/src/assets/css/data.css
@@ -7,10 +7,9 @@
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
-  
   min-width: var(--_min-width);
-  padding-inline: var(--_padding-inline);
   padding-block: var(--_padding-block);
+  padding-inline: var(--_padding-inline);
   width: max-content;
 }
 
diff --git a/packages/ui/src/assets/css/divider.css b/packages/ui/src/assets/css/divider.css
index 7e120f1ed..905bc319a 100644
--- a/packages/ui/src/assets/css/divider.css
+++ b/packages/ui/src/assets/css/divider.css
@@ -1,13 +1,13 @@
 .divider[role="separator"][data-aria-orientation="horizontal"] {
+  border-top: 1px solid #d0d0d0;
   height: 0;
   margin: 1rem 0;
   width: 100%;
-  border-top: 1px solid #d0d0d0;
 }
 
 .divider[role="separator"][data-aria-orientation="vertical"] {
+  border-left: 1px solid #d0d0d0;
   height: 100%;
   margin: 0 1rem;
   width: 0;
-  border-left: 1px solid #d0d0d0;
 }
diff --git a/packages/ui/src/assets/css/dropdown-menu.css b/packages/ui/src/assets/css/dropdown-menu.css
index 636fa0d63..6c83f370c 100644
--- a/packages/ui/src/assets/css/dropdown-menu.css
+++ b/packages/ui/src/assets/css/dropdown-menu.css
@@ -21,8 +21,8 @@
 .dropdown-menu-trigger .dropdown-icon {
   display: inline-block;
   margin-left: 0.5rem;
-  transition: transform 0.3s ease;
   transform-origin: center;
+  transition: transform 0.3s ease;
 }
 
 .popup-trigger[aria-expanded="true"]
@@ -48,8 +48,8 @@ ul.dropdown-menu-list {
 ul.dropdown-menu-list li {
   --_color: var(--color);
 
-  color: var(--_color);
   background-color: white;
+  color: var(--_color);
   cursor: pointer;
   padding: 0.7rem 1.25rem;
   transition: all var(--transition-duration) ease 0s;
@@ -103,7 +103,7 @@ ul.dropdown-menu-list li .menu-item {
   gap: 0.5rem;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .dropdown-menu-trigger:hover {
     background-color: var(--dropdown-trigger-bg-hover, #e5e5e5);
     border-radius: 5px;
diff --git a/packages/ui/src/assets/css/file-card.css b/packages/ui/src/assets/css/file-card.css
index 3343b076e..eec0b426f 100644
--- a/packages/ui/src/assets/css/file-card.css
+++ b/packages/ui/src/assets/css/file-card.css
@@ -1,15 +1,15 @@
 .file-card {
-  box-shadow: -1px -1px 29px -14px rgba(0, 0, 0, 0.28);
+  box-shadow: -1px -1px 29px -14px rgb(0 0 0 / 28%);
   max-width: 100%;
 }
 
 .file-thumbnail-details-wrapper {
+  align-items: flex-start;
   display: flex;
-  padding: 1rem;
   flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: flex-start;
   gap: 1rem;
+  justify-content: flex-start;
+  padding: 1rem;
 }
 
 .file-card .file-thumbnail {
@@ -56,8 +56,8 @@
 
 .file-card .file-upload-download-details-wrapper {
   display: flex;
-  gap: 1rem;
   flex-wrap: wrap;
+  gap: 1rem;
 }
 
 .file-card .file-upload-details {
@@ -96,8 +96,8 @@
 
 .file-card .file-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 1rem;
   justify-content: flex-end;
-  flex-wrap: wrap;
-  padding: 0rem 1rem 1rem 1rem;
+  padding: 0 1rem 1rem;
 }
diff --git a/packages/ui/src/assets/css/files-list.css b/packages/ui/src/assets/css/files-list.css
index 8f714c733..6895f4333 100644
--- a/packages/ui/src/assets/css/files-list.css
+++ b/packages/ui/src/assets/css/files-list.css
@@ -1,5 +1,5 @@
 .file-list-wrapper {
   display: flex;
-  gap: 1rem;
   flex-direction: column;
+  gap: 1rem;
 }
diff --git a/packages/ui/src/assets/css/form-widgets/checkbox-input.css b/packages/ui/src/assets/css/form-widgets/checkbox-input.css
index b8ccdfb30..da0b6edcd 100644
--- a/packages/ui/src/assets/css/form-widgets/checkbox-input.css
+++ b/packages/ui/src/assets/css/form-widgets/checkbox-input.css
@@ -9,7 +9,6 @@
 }
 
 .field.checkbox > .checkbox-group.direction-horizontal {
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   gap: 1.5rem;
 }
diff --git a/packages/ui/src/assets/css/form-widgets/checkbox.css b/packages/ui/src/assets/css/form-widgets/checkbox.css
index b234b2aba..a4d523f1b 100644
--- a/packages/ui/src/assets/css/form-widgets/checkbox.css
+++ b/packages/ui/src/assets/css/form-widgets/checkbox.css
@@ -1,12 +1,12 @@
 .checkbox-wrapper {
+  align-items: baseline;
   display: flex;
   gap: 0.5rem;
-  align-items: baseline;
 }
 
 .checkbox-wrapper > input[type="checkbox"] {
+  accent-color: var(--dz-primary-color);
   cursor: pointer;
-  width: auto;
   transform: scale(1.5);
-  accent-color: var(--dz-primary-color);
+  width: auto;
 }
diff --git a/packages/ui/src/assets/css/form-widgets/date-picker.css b/packages/ui/src/assets/css/form-widgets/date-picker.css
index 138272c9f..4d716623e 100644
--- a/packages/ui/src/assets/css/form-widgets/date-picker.css
+++ b/packages/ui/src/assets/css/form-widgets/date-picker.css
@@ -17,6 +17,6 @@
 .field .p-calendar .p-inputtext:disabled {
   --_background-color: var(--field-bg-color-disabled, #f8f8f8);
 
-  opacity: 0.8;
   cursor: not-allowed;
+  opacity: 0.8;
 }
diff --git a/packages/ui/src/assets/css/form-widgets/editable-title.css b/packages/ui/src/assets/css/form-widgets/editable-title.css
index 90de6d694..08aa05ffd 100644
--- a/packages/ui/src/assets/css/form-widgets/editable-title.css
+++ b/packages/ui/src/assets/css/form-widgets/editable-title.css
@@ -1,8 +1,8 @@
 .dz-editable-title {
-  display: flex;
   align-items: center;
-  justify-content: flex-start;
+  display: flex;
   gap: 0.5rem;
+  justify-content: flex-start;
 }
 
 .dz-editable-title > i {
diff --git a/packages/ui/src/assets/css/form-widgets/field.css b/packages/ui/src/assets/css/form-widgets/field.css
index ec84dd6b4..777e5b4e1 100644
--- a/packages/ui/src/assets/css/form-widgets/field.css
+++ b/packages/ui/src/assets/css/form-widgets/field.css
@@ -40,6 +40,6 @@ fieldset {
 
 fieldset legend {
   font-size: var(--form-label-font-size, 1em);
-  margin-bottom: 0.75rem;
   font-weight: 500;
+  margin-bottom: 0.75rem;
 }
diff --git a/packages/ui/src/assets/css/form-widgets/index.css b/packages/ui/src/assets/css/form-widgets/index.css
index e7ecc2546..e76743699 100644
--- a/packages/ui/src/assets/css/form-widgets/index.css
+++ b/packages/ui/src/assets/css/form-widgets/index.css
@@ -1,13 +1,12 @@
-@import "./field.css";
-
-@import "./checkbox-input.css";
-@import "./checkbox.css";
-@import "./country-picker.css";
-@import "./date-picker.css";
-@import "./editable-title.css";
-@import "./input.css";
-@import "./radio-input.css";
-@import "./select.css";
-@import "./switch-input.css";
-@import "./textarea.css";
-@import "./typeahead.css";
+@import url("./field.css");
+@import url("./checkbox-input.css");
+@import url("./checkbox.css");
+@import url("./country-picker.css");
+@import url("./date-picker.css");
+@import url("./editable-title.css");
+@import url("./input.css");
+@import url("./radio-input.css");
+@import url("./select.css");
+@import url("./switch-input.css");
+@import url("./textarea.css");
+@import url("./typeahead.css");
diff --git a/packages/ui/src/assets/css/form-widgets/input.css b/packages/ui/src/assets/css/form-widgets/input.css
index 2f646c962..70f9268e2 100644
--- a/packages/ui/src/assets/css/form-widgets/input.css
+++ b/packages/ui/src/assets/css/form-widgets/input.css
@@ -8,8 +8,8 @@
 
 .input-field {
   background-color: var(--_background-color);
-  border-radius: var(--_border-radius);
   border: 1px solid var(--_border-color);
+  border-radius: var(--_border-radius);
   padding-block: var(--_padding-block);
   padding-inline: var(--_padding-inline);
   width: 100%;
@@ -19,8 +19,8 @@
   --_border-color: var(--dz-danger-color);
 
   background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/></svg>");
-  background-repeat: no-repeat;
   background-position: right calc(0.75 * var(--_padding-inline, 0.5rem)) center;
+  background-repeat: no-repeat;
   background-size: 1rem;
 }
 
@@ -28,8 +28,8 @@
   --_border-color: var(--dz-success-color);
 
   background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
-  background-repeat: no-repeat;
   background-position: right calc(0.75 * var(--_padding-inline, 0.5rem)) center;
+  background-repeat: no-repeat;
   background-size: 1rem;
 }
 
@@ -40,6 +40,6 @@
 .input-field:disabled {
   --_background-color: var(--field-bg-color-disabled, #f8f8f8);
 
-  opacity: 0.8;
   cursor: not-allowed;
+  opacity: 0.8;
 }
diff --git a/packages/ui/src/assets/css/form-widgets/radio-input.css b/packages/ui/src/assets/css/form-widgets/radio-input.css
index 270c5cd4c..9c4d07d47 100644
--- a/packages/ui/src/assets/css/form-widgets/radio-input.css
+++ b/packages/ui/src/assets/css/form-widgets/radio-input.css
@@ -5,8 +5,8 @@
 }
 
 .radio-button-wrapper input[type="radio"] {
+  accent-color: var(--dz-primary-color);
   outline: none;
   transform: scale(1.5);
   width: auto;
-  accent-color: var(--dz-primary-color);
 }
diff --git a/packages/ui/src/assets/css/form-widgets/select.css b/packages/ui/src/assets/css/form-widgets/select.css
index 21b2d4e0f..94a9fab0b 100644
--- a/packages/ui/src/assets/css/form-widgets/select.css
+++ b/packages/ui/src/assets/css/form-widgets/select.css
@@ -7,7 +7,7 @@
   --_padding-block: var(--field-padding-block, 0.5rem);
   --_padding-inline: var(--field-padding-inline, 0.75rem);
   --_placeholder-color: var(--field-placeholder-color, #7b7676);
-  --_options-menu-background-color: var(--list-menu-bg-color, #ffffff);
+  --_options-menu-background-color: var(--list-menu-bg-color, #fff);
   --_option-background-color-hover: var(--list-item-bg-hover, #ededed);
   --_option-background-color-active: var(--list-item-bg-active, #ededed);
 }
@@ -18,7 +18,7 @@
   --_icon-color: var(--field-icon-color, #7b7676);
   --_padding-block: var(--field-padding-block, 0.5rem);
   --_padding-inline: var(--field-padding-inline, 0.75rem);
-  --_options-menu-background-color: var(--list-menu-bg-color, #ffffff);
+  --_options-menu-background-color: var(--list-menu-bg-color, #fff);
   --_option-background-color-hover: var(--list-item-bg-hover, #ededed);
   --_option-background-color-active: var(--list-item-bg-active, #ededed);
 }
@@ -31,8 +31,8 @@
 .select > .label-container {
   align-items: center;
   background-color: var(--_background-color);
-  border-radius: var(--_border-radius);
   border: 1px solid var(--_border-color);
+  border-radius: var(--_border-radius);
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
@@ -127,7 +127,7 @@
   white-space: nowrap;
 }
 
-.select-menu .selected-options-wrapper .divider[role=separator] {
+.select-menu .selected-options-wrapper .divider[role="separator"] {
   margin: 0.65rem 0;
 }
 
@@ -169,6 +169,11 @@
   margin-left: 0.5rem;
 }
 
+.select-menu ul[aria-multiselectable="true"] > li {
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
 .select-menu ul > li:hover:not(.group-label),
 .select-menu ul > li.focused:not(.group-label) {
   background-color: var(--_option-background-color-hover);
@@ -179,13 +184,8 @@
 }
 
 .select-menu ul > li.disabled {
-  opacity: 0.8;
   cursor: not-allowed;
-}
-
-.select-menu ul[aria-multiselectable="true"] > li {
-  gap: 0.5rem;
-  align-items: baseline;
+  opacity: 0.8;
 }
 
 .select-menu ul > li > span {
diff --git a/packages/ui/src/assets/css/form-widgets/switch-input.css b/packages/ui/src/assets/css/form-widgets/switch-input.css
index 1a137aba1..104e1a6c9 100644
--- a/packages/ui/src/assets/css/form-widgets/switch-input.css
+++ b/packages/ui/src/assets/css/form-widgets/switch-input.css
@@ -12,7 +12,7 @@
   border: 1px solid var(--field-invalid-border-color);
 }
 
-.switch-toggle input:before {
+.switch-toggle input::before {
   background-color: white;
   border-radius: 50%;
   bottom: 0.25rem;
@@ -30,7 +30,7 @@
   opacity: 0.5;
 }
 
-.switch-toggle input:checked:before {
+.switch-toggle input:checked::before {
   transform: translateX(2rem);
 }
 
diff --git a/packages/ui/src/assets/css/form-widgets/textarea.css b/packages/ui/src/assets/css/form-widgets/textarea.css
index 43db0a37e..6fead3c25 100644
--- a/packages/ui/src/assets/css/form-widgets/textarea.css
+++ b/packages/ui/src/assets/css/form-widgets/textarea.css
@@ -23,8 +23,8 @@
   --_border-color: var(--dz-danger-color);
 
   background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/></svg>");
-  background-repeat: no-repeat;
   background-position: right calc(0.75 * var(--_padding-inline, 0.5rem)) center;
+  background-repeat: no-repeat;
   background-size: 1rem;
 }
 
@@ -32,7 +32,7 @@
   --_border-color: var(--dz-success-color);
 
   background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
-  background-repeat: no-repeat;
   background-position: right calc(0.75 * var(--_padding-inline, 0.5rem)) center;
+  background-repeat: no-repeat;
   background-size: 1rem;
 }
diff --git a/packages/ui/src/assets/css/form-widgets/typeahead.css b/packages/ui/src/assets/css/form-widgets/typeahead.css
index 039636666..f974d3a37 100644
--- a/packages/ui/src/assets/css/form-widgets/typeahead.css
+++ b/packages/ui/src/assets/css/form-widgets/typeahead.css
@@ -7,7 +7,7 @@
   --_padding-block: var(--field-padding-block, 0.5rem);
   --_padding-inline: var(--field-padding-inline, 0.75rem);
   --_placeholder-color: var(--field-placeholder-color, #7b7676);
-  --_options-menu-background-color: var(--list-menu-bg-color, #ffffff);
+  --_options-menu-background-color: var(--list-menu-bg-color, #fff);
   --_option-background-color-hover: var(--list-item-bg-hover, #ededed);
   --_option-background-color-active: var(--list-item-bg-active, #ededed);
 }
@@ -18,7 +18,7 @@
   --_icon-color: var(--field-icon-color, #7b7676);
   --_padding-block: var(--field-padding-block, 0.5rem);
   --_padding-inline: var(--field-padding-inline, 0.75rem);
-  --_options-menu-background-color: var(--list-menu-bg-color, #ffffff);
+  --_options-menu-background-color: var(--list-menu-bg-color, #fff);
   --_option-background-color-hover: var(--list-item-bg-hover, #ededed);
   --_option-background-color-active: var(--list-item-bg-active, #ededed);
 }
@@ -55,8 +55,8 @@
 }
 
 .typeahead-menu ul > li.disabled {
-  opacity: 0.8;
   cursor: not-allowed;
+  opacity: 0.8;
 }
 
 .typeahead > .loading {
diff --git a/packages/ui/src/assets/css/grid-container.css b/packages/ui/src/assets/css/grid-container.css
index 23587879d..2ff0b692c 100644
--- a/packages/ui/src/assets/css/grid-container.css
+++ b/packages/ui/src/assets/css/grid-container.css
@@ -1,10 +1,10 @@
 .dz-grid-container {
   display: grid;
-  grid-template-columns: 1fr;
   gap: 1rem;
+  grid-template-columns: 1fr;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .dz-grid-container {
     grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
   }
diff --git a/packages/ui/src/assets/css/index.css b/packages/ui/src/assets/css/index.css
index 3e1b4dc9f..8167212d7 100644
--- a/packages/ui/src/assets/css/index.css
+++ b/packages/ui/src/assets/css/index.css
@@ -1,43 +1,41 @@
-@import "./reset.css";
-
-@import "./accordion.css";
-@import "./auth-page.css";
-@import "./button.css";
-@import "./card.css";
-@import "./confirmation-modal.css";
-@import "./currency-picker.css";
-@import "./country-display.css";
-@import "./data.css";
-@import "./divider.css";
-@import "./dropdown-menu.css";
-@import "./file-card.css";
-@import "./files-list.css";
-@import "./files-table.css";
-@import "./form-widgets/index.css";
-@import "./social-button.css";
-@import "./grid-container.css";
-@import "./inline-link.css";
-@import "./loading-icon.css";
-@import "./loading-page.css";
-@import "./message.css";
-@import "./modal.css";
-@import "./navigation/index.css";
-@import "./page.css";
-@import "./pagination.css";
-@import "./popup.css";
-@import "./sortable.css";
-@import "./sso-button.css";
-@import "./stepper.css";
-@import "./submenu.css";
-@import "./subpane.css";
-@import "./tab-view.css";
-@import "./table.css";
-@import "./tabs.css";
-@import "./tag.css";
-@import "./tooltip.css";
-
-@import "./vars.css";
+@import url("./reset.css");
+@import url("./accordion.css");
+@import url("./auth-page.css");
+@import url("./button.css");
+@import url("./card.css");
+@import url("./confirmation-modal.css");
+@import url("./currency-picker.css");
+@import url("./country-display.css");
+@import url("./data.css");
+@import url("./divider.css");
+@import url("./dropdown-menu.css");
+@import url("./file-card.css");
+@import url("./files-list.css");
+@import url("./files-table.css");
+@import url("./form-widgets/index.css");
+@import url("./social-button.css");
+@import url("./grid-container.css");
+@import url("./inline-link.css");
+@import url("./loading-icon.css");
+@import url("./loading-page.css");
+@import url("./message.css");
+@import url("./modal.css");
+@import url("./navigation/index.css");
+@import url("./page.css");
+@import url("./pagination.css");
+@import url("./popup.css");
+@import url("./sortable.css");
+@import url("./sso-button.css");
+@import url("./stepper.css");
+@import url("./submenu.css");
+@import url("./subpane.css");
+@import url("./tab-view.css");
+@import url("./table.css");
+@import url("./tabs.css");
+@import url("./tag.css");
+@import url("./tooltip.css");
+@import url("./vars.css");
 
 /* Theme CSS */
-@import "./accordion-theme.css";
-@import "./tab-theme.css";
+@import url("./accordion-theme.css");
+@import url("./tab-theme.css");
diff --git a/packages/ui/src/assets/css/inline-link.css b/packages/ui/src/assets/css/inline-link.css
index 71e0ec31f..200c0b6da 100644
--- a/packages/ui/src/assets/css/inline-link.css
+++ b/packages/ui/src/assets/css/inline-link.css
@@ -1,9 +1,8 @@
 a.inline-link {
   --_color: var(--dz-primary-color, --color)
-}
 
-a.inline-link {
   color: var(--_color);
+
   cursor: pointer;
   text-decoration: none;
 }
diff --git a/packages/ui/src/assets/css/loading-icon.css b/packages/ui/src/assets/css/loading-icon.css
index f2b2d9a2b..030c0eb60 100644
--- a/packages/ui/src/assets/css/loading-icon.css
+++ b/packages/ui/src/assets/css/loading-icon.css
@@ -1,23 +1,20 @@
 .loading {
-  color: var(--loading-icon-color, #ffffff);
+  animation: load4 1.3s infinite linear;
+  border-radius: 50%;
+  color: var(--loading-icon-color, #fff);
   font-size: 0.2rem;
-  margin: 0 1.5rem;
-  width: 1em;
   height: 1em;
-  border-radius: 50%;
+  margin: 0 1.5rem;
   position: relative;
   text-indent: -9999em;
-  -webkit-animation: load4 1.3s infinite linear;
-  animation: load4 1.3s infinite linear;
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
   transform: translateZ(0);
+  width: 1em;
 }
 
-@-webkit-keyframes load4 {
+@keyframes load4 {
   0%,
   100% {
-    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em,
+    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0, 3em 0 0 -1em, 2em 2em 0 -1em,
       0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
   }
 
@@ -32,13 +29,13 @@
   }
 
   37.5% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em,
-      0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 0, 2em 2em 0 0.2em,
+      0 3em 0 0, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
   }
 
   50% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em,
-      0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0,
+      0 3em 0 0.2em, -2em 2em 0 0, -3em 0 0 -1em, -2em -2em 0 -1em;
   }
 
   62.5% {
@@ -47,20 +44,20 @@
   }
 
   75% {
-    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em,
-      0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
+      0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0.2em, -2em -2em 0 0;
   }
 
   87.5% {
-    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
-      0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+    box-shadow: 0 -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
+      0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0, -2em -2em 0 0.2em;
   }
 }
 
 @keyframes load4 {
   0%,
   100% {
-    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em,
+    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0, 3em 0 0 -1em, 2em 2em 0 -1em,
       0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
   }
 
@@ -75,13 +72,13 @@
   }
 
   37.5% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em,
-      0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 0, 2em 2em 0 0.2em,
+      0 3em 0 0, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
   }
 
   50% {
-    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em,
-      0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0,
+      0 3em 0 0.2em, -2em 2em 0 0, -3em 0 0 -1em, -2em -2em 0 -1em;
   }
 
   62.5% {
@@ -90,12 +87,12 @@
   }
 
   75% {
-    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em,
-      0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
+      0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0.2em, -2em -2em 0 0;
   }
 
   87.5% {
-    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
-      0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+    box-shadow: 0 -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
+      0 3em 0 -1em, -2em 2em 0 0, -3em 0 0 0, -2em -2em 0 0.2em;
   }
 }
diff --git a/packages/ui/src/assets/css/loading-page.css b/packages/ui/src/assets/css/loading-page.css
index 44854d617..6fe003d57 100644
--- a/packages/ui/src/assets/css/loading-page.css
+++ b/packages/ui/src/assets/css/loading-page.css
@@ -1,31 +1,28 @@
 .loading-container {
-  display: flex;
-  justify-content: center;
   align-items: center;
+  display: flex;
   height: 50%;
+  justify-content: center;
 }
 
 .loading-container > .loading {
-  font-size: 0.5rem;
   color: black;
+  font-size: 0.5rem;
 }
 
 .loading-overlay {
-  position: fixed;
+  align-items: center;
+  background-color: rgb(0 0 0 / 50%);
   display: flex;
-  width: 100%;
   height: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 300;
+  inset: 0;
   justify-content: center;
-  align-items: center;
+  position: fixed;
+  width: 100%;
+  z-index: 300;
 }
 
 .loading-overlay > .loading {
+  color: var(--loading-icon-color, #fff);
   font-size: 0.5rem;
-  color: var(--loading-icon-color, #ffffff);
 }
diff --git a/packages/ui/src/assets/css/message.css b/packages/ui/src/assets/css/message.css
index 683df67b0..806fba90b 100644
--- a/packages/ui/src/assets/css/message.css
+++ b/packages/ui/src/assets/css/message.css
@@ -1,7 +1,7 @@
 .message {
   background-color: color-mix(in srgb, var(--_background-color) 10%, #fff);
-  border-radius: 0.5rem;
   border: 1px solid var(--_border-color);
+  border-radius: 0.5rem;
   color: var(--_color);
   display: flex;
   gap: 1rem;
diff --git a/packages/ui/src/assets/css/modal.css b/packages/ui/src/assets/css/modal.css
index 4a55e353c..7b3a48283 100644
--- a/packages/ui/src/assets/css/modal.css
+++ b/packages/ui/src/assets/css/modal.css
@@ -1,20 +1,17 @@
 .dz-modal-overlay {
+  align-items: center;
+  background-color: rgb(0 0 0 / 50%);
   display: flex;
+  inset: 0;
   justify-content: center;
-  align-items: center;
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
   z-index: 1000;
 }
 
 .dz-modal {
   background-color: #fff;
   border-radius: 5px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
   color: var(--color);
   max-height: 80%;
   min-width: 300px;
@@ -32,8 +29,8 @@
 }
 
 .dz-modal .dz-modal-header span[role="heading"] {
-  font-weight: bold;
   font-size: 1.5rem;
+  font-weight: bold;
 }
 
 .dz-modal .dz-modal-content {
@@ -49,11 +46,11 @@
 }
 
 .dz-modal .dz-close-button {
-  padding: 0.75rem;
   margin-left: auto;
+  padding: 0.75rem;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .dz-modal.medium {
     max-width: 32rem;
     min-width: 32rem;
diff --git a/packages/ui/src/assets/css/navigation/index.css b/packages/ui/src/assets/css/navigation/index.css
index 7b409c5d4..4e5eb12fd 100644
--- a/packages/ui/src/assets/css/navigation/index.css
+++ b/packages/ui/src/assets/css/navigation/index.css
@@ -1,3 +1,3 @@
-@import "./nav-item.css";
-@import "./nav-group.css";
-@import "./navigation-menu.css";
+@import url("./nav-item.css");
+@import url("./nav-group.css");
+@import url("./navigation-menu.css");
diff --git a/packages/ui/src/assets/css/navigation/nav-group.css b/packages/ui/src/assets/css/navigation/nav-group.css
index 4ac1b3704..f42178243 100644
--- a/packages/ui/src/assets/css/navigation/nav-group.css
+++ b/packages/ui/src/assets/css/navigation/nav-group.css
@@ -1,18 +1,19 @@
 .dz-nav-group {
-  --_collapsible-reverse-submenu-bg: var(--dz-nav-collapsible-reverse-submenu-bg, #ffffff);
+  --_collapsible-reverse-submenu-bg: var(--dz-nav-collapsible-reverse-submenu-bg, #fff);
+
   display: flex;
   flex-direction: column;
   padding: 0;
 }
 
 .dz-nav-group > .dz-group-submenu {
-  display: flex;
   align-items: start;
+  display: flex;
   flex-direction: column;
-  padding: 0;
   margin: 0;
-  overflow: hidden;
   max-height: 0;
+  overflow: hidden;
+  padding: 0;
 }
 
 .dz-nav-group[aria-expanded="true"] > ul.dz-group-submenu {
@@ -40,6 +41,14 @@
   transform: rotate(90deg);
 }
 
+.dz-nav-group.collapsible-reverse > .dz-group-header .dz-nav-group-toggle {
+  transform: rotate(-90deg);
+}
+
+.dz-nav-group.expanded > .dz-nav-item .dz-nav-group-toggle {
+  display: none;
+}
+
 .dz-nav-group.collapsible[aria-expanded="true"]
   > .dz-group-header
   .dz-nav-group-toggle {
@@ -52,16 +61,17 @@
 }
 
 .dz-nav-group.collapsible-reverse ul.dz-group-submenu {
-  position: absolute;
   background: var(--_collapsible-reverse-submenu-bg);
   bottom: 100%;
   margin: 1px 0;
+  position: absolute;
   width: 100%;
   z-index: 2;
 }
 
 .dz-nav-group.collapsible-reverse[aria-expanded="true"] ul.dz-group-submenu {
-  box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 -2px 12px 0 rgb(0 0 0 / 10%);
+
   /* animation: levitate 1s ease forwards; */
 }
 
@@ -69,21 +79,12 @@
   padding-left: var(--_nav-item-padding-h);
 }
 
-.dz-nav-group.collapsible-reverse > .dz-group-header .dz-nav-group-toggle {
-  transform: rotate(-90deg);
-}
-
 .dz-nav-group.collapsible-reverse[aria-expanded="true"]
   > .dz-group-header
   .dz-nav-group-toggle {
   transform: rotate(90deg);
 }
 
-/* Expanded */
-.dz-nav-group.expanded > .dz-nav-item .dz-nav-group-toggle {
-  display: none;
-}
-
 .dz-nav-group.expanded > .dz-nav-item.dz-group-header {
   background: unset;
   cursor: default;
@@ -93,9 +94,11 @@
   0% {
     transform: translateY(0);
   }
+
   50% {
     transform: translateY(-3px);
   }
+
   100% {
     transform: translateY(0);
   }
diff --git a/packages/ui/src/assets/css/navigation/nav-item.css b/packages/ui/src/assets/css/navigation/nav-item.css
index 0c2c82385..a8ea2ef42 100644
--- a/packages/ui/src/assets/css/navigation/nav-item.css
+++ b/packages/ui/src/assets/css/navigation/nav-item.css
@@ -6,15 +6,14 @@
   --_nav-item-border-radius: var(--dz-nav-item-border-radius, 0);
   --_nav-item-hover-bg: var(--dz-nav-item-hover-bg, #f0f2f7ad);
   --_nav-item-active-bg: var(--dz-nav-item-active-bg, #eff6ff);
-
   --_nav-item-padding-h: var(--dz-nav-item-padding-h, 1rem);
   --_nav-item-padding-v: var(--dz-nav-item-padding-v, 0.5rem);
   --_nav-item-transition-duration: var(--transition-duration, 150ms);
 
   align-items: baseline;
   border-radius: var(--_nav-item-border-radius);
-  cursor: pointer;
   color: var(--_nav-item-color);
+  cursor: pointer;
   display: flex;
   gap: 0.75rem;
   padding: var(--_nav-item-padding-v) var(--_nav-item-padding-h);
@@ -47,6 +46,6 @@
 
 .dz-nav-item > span {
   flex: 1;
-  text-wrap: nowrap;
   text-overflow: ellipsis;
+  text-wrap: nowrap;
 }
diff --git a/packages/ui/src/assets/css/navigation/navigation-menu.css b/packages/ui/src/assets/css/navigation/navigation-menu.css
index bf4372ae8..84bc906aa 100644
--- a/packages/ui/src/assets/css/navigation/navigation-menu.css
+++ b/packages/ui/src/assets/css/navigation/navigation-menu.css
@@ -2,25 +2,22 @@
 .dz-navigation-menu {
   --nav-menu-label-color: var(
     --dz-nav-menu-label-color,
-    #ffffff
+    #fff
   );
   --_nav-menu-label-padding-h: var(--dz-nav-item-padding-h, 1rem);
   --_nav-menu-label-padding-v: var(
     --dz-nav-item-padding-v,
     0.625rem
   );
-
   --_nav-menu-padding-h: var(--dz-nav-menu-padding-h, 0);
   --_nav-menu-padding-v: var(--dz-nav-menu-padding-v, 1rem);
-
   --_nav-menu-separator-color: var(
     --dz-nav-menu-separator-color,
     #dbdbdb
   );
-
   --_nav-item-overlay-menu-background-color: var(
     --dz-nav-item-overlay-menu-background-color,
-    #ffffff
+    #fff
   );
 
   display: flex;
@@ -56,7 +53,7 @@
   flex: 1;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (width >= 576px) {
   .dz-navigation-menu[data-horizontal="true"] {
     align-items: center;
     flex-direction: row;
diff --git a/packages/ui/src/assets/css/page.css b/packages/ui/src/assets/css/page.css
index fa8ac835d..2ac3b7ff7 100644
--- a/packages/ui/src/assets/css/page.css
+++ b/packages/ui/src/assets/css/page.css
@@ -3,8 +3,8 @@
   --_page-max-width: var(--dz-page-centered-max-width, 954px);
 
   display: flex;
-  gap: var(--_page-gap);
   flex-direction: column;
+  gap: var(--_page-gap);
 }
 
 .dz-page > .dz-page-header {
@@ -15,8 +15,12 @@
 
 .dz-page[data-centered="true"] {
   justify-items: center;
-  max-width: var(--_page-max-width);
   margin: auto;
+  max-width: var(--_page-max-width);
+}
+
+.dz-page > .dz-page-header > .dz-page-title-wrapper > h1 > span {
+  margin-left: 0.5rem;
 }
 
 .dz-page > .dz-page-content > div[role="alert"].error > span {
@@ -31,30 +35,26 @@
 }
 
 .dz-page > .dz-page-header > .dz-page-toolbar {
-  display: flex;
-  justify-content: flex-start;
   align-items: center;
-  gap: 0.5rem;
+  display: flex;
   flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-start;
 }
 
 .dz-page-toolbar[data-breadcrumb="true"] > :first-child {
   display: none;
 }
 
-.dz-page > .dz-page-header > .dz-page-title-wrapper > h1 > span {
-  margin-left: 0.5rem;
-}
-
-@media (min-width: 576px) {
+@media (width >= 576px) {
   .dz-page > .dz-page-header {
     grid-template-columns: repeat(2, minmax(0, auto));
   }
 
   .dz-page > .dz-page-header > .dz-page-toolbar {
-    margin-left: auto;
     height: fit-content;
     justify-content: flex-end;
+    margin-left: auto;
   }
 
   .dz-page > .dz-page-header > .dz-page-title-wrapper > h1 > span {
diff --git a/packages/ui/src/assets/css/pagination.css b/packages/ui/src/assets/css/pagination.css
index be4f1a4af..2ce5b91f5 100644
--- a/packages/ui/src/assets/css/pagination.css
+++ b/packages/ui/src/assets/css/pagination.css
@@ -51,8 +51,8 @@
 
 .items-per-page-control select {
   background-color: #f8f9fa;
-  border-radius: 4px;
   border: 1px solid var(--border-color);
+  border-radius: 4px;
 }
 
 .items-per-page-control select:focus {
diff --git a/packages/ui/src/assets/css/popup.css b/packages/ui/src/assets/css/popup.css
index d1d7db6a2..7d947cc6d 100644
--- a/packages/ui/src/assets/css/popup.css
+++ b/packages/ui/src/assets/css/popup.css
@@ -9,10 +9,10 @@
 }
 
 .popup-menu {
-  background-color: #ffffff;
-  border-radius: calc(var(--border-radius) * 1.5);
+  background-color: #fff;
   border: 1px solid var(--border-color);
-  box-shadow: 1px 1px 5px 1px #cccccc;
+  border-radius: calc(var(--border-radius) * 1.5);
+  box-shadow: 1px 1px 5px 1px #ccc;
   display: inline-block;
   margin-top: 4px;
   min-width: 12rem;
diff --git a/packages/ui/src/assets/css/reset.css b/packages/ui/src/assets/css/reset.css
index 91fbb9d39..0190f09aa 100644
--- a/packages/ui/src/assets/css/reset.css
+++ b/packages/ui/src/assets/css/reset.css
@@ -1,4 +1,5 @@
 /* https://andy-bell.co.uk/a-modern-css-reset/ */
+
 /* Box sizing rules */
 *,
 *::before,
@@ -27,6 +28,10 @@ ol:not([role="list"]) {
   margin: 0;
 }
 
+html {
+  font-size: 1rem;
+}
+
 /* Set core root defaults */
 html:focus-within {
   scroll-behavior: smooth;
@@ -40,7 +45,7 @@ body {
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Oxygen, Ubuntu;
   line-height: 1.5;
   min-height: 100vh;
-  text-rendering: optimizeSpeed;
+  text-rendering: optimizespeed;
 }
 
 /* A elements that don't have a class get default styles */
@@ -69,8 +74,8 @@ a[target="_blank"]::after {
 /* Make images easier to work with */
 img,
 picture {
-  max-width: 100%;
   display: block;
+  max-width: 100%;
 }
 
 /* Inherit fonts for inputs and buttons */
@@ -92,11 +97,7 @@ select {
   *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
   }
 }
-
-html {
-  font-size: 1rem;
-}
diff --git a/packages/ui/src/assets/css/social-button.css b/packages/ui/src/assets/css/social-button.css
index 9d15c3be2..b7d9304af 100644
--- a/packages/ui/src/assets/css/social-button.css
+++ b/packages/ui/src/assets/css/social-button.css
@@ -1,7 +1,7 @@
 .facebook.dark {
   background-color: #1877F2 !important;
   border: none;
-  color: #ffffff !important;
+  color: #fff !important;
   padding: 6px 8px;
   width: 100%;
 }
@@ -14,7 +14,7 @@
 }
 
 .google.dark {
-  background-color: #FFFFFF !important;
+  background-color: #FFF !important;
   border: 1px solid #747775;
   color: #1F1F1F !important;
   width: 100%;
diff --git a/packages/ui/src/assets/css/sortable.css b/packages/ui/src/assets/css/sortable.css
index 316af1e57..07939bcdd 100644
--- a/packages/ui/src/assets/css/sortable.css
+++ b/packages/ui/src/assets/css/sortable.css
@@ -12,28 +12,28 @@
 }
 
 .dz-sortable-list > li {
+  align-items: center;
   background-color: var(--sortable-item-bg-color);
   display: flex;
+  flex-wrap: wrap;
   justify-content: flex-start;
-  align-items: center;
   transition: all 0.2s ease-in-out;
-  flex-wrap: wrap;
 }
 
 .dz-sortable-list > li .grab-icon {
-  cursor: grab;
   color: var(--sortable-item-grab-icon-color);
+  cursor: grab;
   font-size: 0.6rem;
 }
 
 .dz-sortable-list > li > div {
-  padding: 0.5rem;
+  align-items: center;
   border-left: 1px solid var(--sortable-item-border-color);
-  margin: 2px 0;
   display: flex;
-  justify-content: center;
-  align-items: center;
   gap: 0.5rem;
+  justify-content: center;
+  margin: 2px 0;
+  padding: 0.5rem;
 }
 
 .dz-sortable-list > li:hover {
diff --git a/packages/ui/src/assets/css/sso-button.css b/packages/ui/src/assets/css/sso-button.css
index 4a3e22629..dda642c42 100644
--- a/packages/ui/src/assets/css/sso-button.css
+++ b/packages/ui/src/assets/css/sso-button.css
@@ -1,11 +1,15 @@
 .sso-button {
+  align-items: center;
   background-image: none;
-  border-radius: 6px;
   border: 1px solid #dadce0;
+  border-radius: 6px;
   box-sizing: border-box;
   color: #3c4043;
   cursor: pointer;
-  font-family: "Roboto", sans-serif;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  font-family: Roboto, sans-serif;
   font-size: 14px;
   height: 40px;
   letter-spacing: 0.25px;
@@ -16,12 +20,8 @@
   text-align: center;
   transition: all 0.218s ease-in-out;
   vertical-align: middle;
-  width: 100%;
   white-space: nowrap;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex: 1;
+  width: 100%;
 }
 
 .sso-button.light.center {
@@ -31,15 +31,15 @@
 .sso-button.dark:hover,
 .sso-button.dark:focus,
 .sso-button.dark:active {
-  box-shadow: none;
   border-color: #d2e3fc;
+  box-shadow: none;
   opacity: 0.9;
 }
 
 .sso-button.light:active,
 .sso-button.light:focus,
 .sso-button.light:hover {
-  background-color: rgba(66, 133, 244, 0.04);
+  background-color: rgb(66 133 244 / 4%);
 }
 
 .sso-button.pill {
@@ -47,13 +47,13 @@
 }
 
 .sso-button > img {
-  border-top-left-radius: 3px;
+  align-items: center;
+  background-color: #fff;
   border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: #ffffff;
   height: 36px;
+  justify-content: center;
   min-width: 36px;
   width: 36px;
 }
diff --git a/packages/ui/src/assets/css/stepper.css b/packages/ui/src/assets/css/stepper.css
index a7d33c099..0d2bcccc8 100644
--- a/packages/ui/src/assets/css/stepper.css
+++ b/packages/ui/src/assets/css/stepper.css
@@ -2,10 +2,10 @@
   --stepper-active-color: var(--dz-primary-color);
   --stepper-completed-border-color: var(--dz-primary-color);
   --stepper-line-border-color: var(--border-color, #e5e7eb);
-  --stepper-number-color: #ffffff;
+  --stepper-number-color: #fff;
   --stepper-number-border-color: var(--border-color, #e5e7eb);
   --stepper-label-color: #6b7280;
-  --stepper-label-active-color: #000000;
+  --stepper-label-active-color: #000;
 }
 
 .stepper {
@@ -15,10 +15,10 @@
 }
 
 .stepper .actions {
-  margin-top: 2rem;
   display: flex;
-  justify-content: flex-start;
   gap: 1rem;
+  justify-content: flex-start;
+  margin-top: 2rem;
   position: relative;
 }
 
@@ -27,10 +27,26 @@
   padding-block: 2rem;
 }
 
+.steps {
+  display: flex;
+  justify-content: space-between;
+  list-style: none;
+  padding: 0;
+}
+
 .stepper.vertical > .steps {
   flex-direction: column;
 }
 
+.steps > .step {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 7rem;
+  position: relative;
+}
+
 .stepper.vertical > .steps > .step {
   flex-direction: row;
   gap: 1rem;
@@ -40,20 +56,20 @@
   flex: unset;
 }
 
-.steps {
+.steps > .step .step-label {
+  align-items: center;
+  color: var(--stepper-label-color);
   display: flex;
-  justify-content: space-between;
-  list-style: none;
-  padding: 0;
+  margin-top: 0.5rem;
+  overflow-wrap: break-word;
+  text-align: center;
+  transition: all 0.4s ease;
 }
 
-.steps > .step {
+.steps > .step .step-content-wrapper {
+  align-items: center;
   display: flex;
-  min-height: 7rem;
   flex-direction: column;
-  flex: 1;
-  align-items: center;
-  position: relative;
 }
 
 .stepper.start .steps > .step,
@@ -99,25 +115,9 @@
   display: flex;
   height: 3rem;
   justify-content: center;
-  transition: all 0.4s ease;
   min-width: 3rem;
-  z-index: 1;
-}
-
-.steps > .step .step-content-wrapper {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-}
-
-.steps > .step .step-label {
-  color: var(--stepper-label-color);
-  display: flex;
-  align-items: center;
-  margin-top: 0.5rem;
-  word-break: break-word;
-  text-align: center;
   transition: all 0.4s ease;
+  z-index: 1;
 }
 
 .steps > .step > .step-number:hover,
@@ -149,34 +149,37 @@
   border-top: 1px dashed var(--stepper-line-border-color);
 }
 
-.stepper.horizontal.center .steps > .step:first-child::before {
-  left: 50%;
+.steps > .step:only-child::before {
+  display: none;
 }
 
 .stepper.vertical > .steps > .step::before {
   border: 0;
   border-left: 1px solid var(--stepper-line-border-color);
-  left: 1.5rem;
-  top: unset;
   bottom: 0;
   height: 100%;
+  left: 1.5rem;
+  top: unset;
+}
+
+.stepper.start .steps > .step:last-child::before,
+.stepper.end .steps > .step:first-child::before {
+  display: none;
 }
 
 .stepper.center .steps > .step:last-child::before {
   left: -50%;
 }
 
-.stepper.start .steps > .step:last-child::before,
-.stepper.end .steps > .step:first-child::before,
-.steps > .step:only-child::before {
-  display: none;
+.stepper.horizontal.center .steps > .step:first-child::before {
+  left: 50%;
 }
 
-@media screen and (max-width: 576px) {
+@media screen and (width <= 576px) {
   .steps > .step > .step-number {
+    font-size: 0.8rem;
     height: 2rem;
     min-width: 2rem;
-    font-size: 0.8rem;
   }
 
   .steps > .step > .step-number > i {
@@ -187,11 +190,11 @@
     font-size: 0.8rem;
   }
 
-  .stepper.vertical>.steps>.step:before {
-    left: 1rem;
-  }
-
   .steps > .step::before {
     top: 15%;
   }
+
+  .stepper.vertical>.steps>.step::before {
+    left: 1rem;
+  }
 }
diff --git a/packages/ui/src/assets/css/submenu.css b/packages/ui/src/assets/css/submenu.css
index 68f26faec..7fdca917e 100644
--- a/packages/ui/src/assets/css/submenu.css
+++ b/packages/ui/src/assets/css/submenu.css
@@ -1,44 +1,45 @@
-.sidebar[aria-expanded="false"] > .dz-responsive-menu > ul > li > .dz-submenu {
-  display: none;
-}
-
-.dz-responsive-menu > ul > li[aria-expanded="true"] > .dz-submenu {
-  display: flex;
-}
-
 .dz-submenu {
+  animation: submenu-open var(--transition-duration);
   display: none;
   flex-direction: column;
   padding-left: 3rem;
-  animation: submenu-open var(--transition-duration);
 }
 
 .dz-submenu:hover {
   background: none !important;
 }
 
+.dz-responsive-menu > ul > li[aria-expanded="true"] > .dz-submenu {
+  display: flex;
+}
+
+.sidebar[aria-expanded="false"] > .dz-responsive-menu > ul > li > .dz-submenu {
+  display: none;
+}
+
 @keyframes submenu-open {
   from {
     transform: translateY(-0.6rem);
   }
+
   to {
     transform: translateY(0);
   }
 }
 
 .dz-submenu > li > a {
-  display: block;
-  width: 100%;
-  text-decoration: none;
-  color: inherit;
   background: none !important;
+  color: inherit;
+  display: block;
   padding: 0.5rem;
+  text-decoration: none;
+  width: 100%;
 }
 
 .dz-submenu > li > a > span[role="label"],
 .dz-submenu > li > a > span[role="icon"] > i {
-  transition: all var(--transition-duration) ease;
   padding: 0 !important;
+  transition: all var(--transition-duration) ease;
 }
 
 .dz-submenu > li > a.active,
diff --git a/packages/ui/src/assets/css/tab-theme.css b/packages/ui/src/assets/css/tab-theme.css
index 346828fa2..bb1999465 100644
--- a/packages/ui/src/assets/css/tab-theme.css
+++ b/packages/ui/src/assets/css/tab-theme.css
@@ -4,8 +4,8 @@
 }
 
 .tabbed-panel > div[role="tabpanel"] {
-  width: 100%;
   padding: 1.5rem 0.25rem;
+  width: 100%;
 }
 
 .tabbed-panel > div > button {
@@ -17,13 +17,13 @@
   display: flex;
   outline: 0;
   padding: var(--tab-padding, 1rem);
-  width: 100%;
   transition: border-color 200ms ease;
+  width: 100%;
 }
 
 .tabbed-panel > div > button:focus-visible {
-  outline-offset: -1px;
   outline: 1px solid var(--dz-primary-color);
+  outline-offset: -1px;
 }
 
 .tabbed-panel > div > button span {
diff --git a/packages/ui/src/assets/css/tab-view.css b/packages/ui/src/assets/css/tab-view.css
index a96007e80..20ee3b07a 100644
--- a/packages/ui/src/assets/css/tab-view.css
+++ b/packages/ui/src/assets/css/tab-view.css
@@ -1,20 +1,20 @@
-.tabbed-panel > div[role=tablist] > button {
+.tabbed-panel > div[role="tablist"] > button {
   align-items: center;
   display: flex;
   gap: 1rem;
   max-width: 250px;
 }
 
-.tabbed-panel > div[role=tablist] > button span {
-  text-wrap: nowrap;
-  text-overflow: ellipsis;
+.tabbed-panel > div[role="tablist"] > button span {
   overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
 }
 
-.tabbed-panel > div[role=tablist] > button i {
+.tabbed-panel > div[role="tablist"] > button i {
   color: var(--dz-secondary-color);
-  font-weight: 500;
   font-size: 14px;
+  font-weight: 500;
 }
 
 .tabbed-panel > div > button.active i {
diff --git a/packages/ui/src/assets/css/table.css b/packages/ui/src/assets/css/table.css
index b95d274c5..3ce6d1a91 100644
--- a/packages/ui/src/assets/css/table.css
+++ b/packages/ui/src/assets/css/table.css
@@ -6,7 +6,7 @@
   --table-column-padding: 0.75rem;
   --table-header-footer-bg: transparent;
   --table-header-highlight-bg: transparent;
-  --table-loading-overlay-bg: rgba(255, 255, 255, 0.6);
+  --table-loading-overlay-bg: rgb(255 255 255 / 60%);
   --table-row-hover-bg: var(--hover-bg);
   --table-row-selected-bg: var(--highlight-bg);
   --table-stripe-color: transparent;
@@ -15,16 +15,16 @@
 .table-container {
   display: flex;
   flex-direction: column;
-  width: 100%;
   position: relative;
+  width: 100%;
 }
 
 .table-container > span {
+  font-size: 1rem;
   font-weight: 500;
-  text-align: center;
-  padding: 0.2rem 0;
   margin: 0;
-  font-size: 1rem;
+  padding: 0.2rem 0;
+  text-align: center;
 }
 
 .table-container > span[data-align="left"] {
@@ -36,21 +36,18 @@
 }
 
 .table-container .loading-overlay {
+  background: var(--table-loading-overlay-bg);
+  inset: 0;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   z-index: 1;
-  background: var(--table-loading-overlay-bg);
 }
 
 .table-container .toolbar {
   align-items: center;
   background: var(--table-header-footer-bg);
+  border-bottom: none;
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   gap: 1rem;
   justify-content: flex-end;
   padding: var(--table-column-padding);
@@ -58,21 +55,22 @@
 }
 
 .table-container .table-wrapper {
-  width: 100%;
   overflow-x: auto;
+  width: 100%;
 }
 
 .table-container .table-wrapper > table {
-  min-width: 100%;
   border-collapse: collapse;
+  min-width: 100%;
 }
 
 .table-container .table-wrapper > table > tbody {
   background: var(--table-body-bg);
 }
 
-.table-container .table-wrapper > table > tfoot > tr {
-  background: var(--table-header-footer-bg, transparent);
+.table-container .table-wrapper > table tr > th {
+  font-weight: 500;
+  text-align: left;
 }
 
 .table-container .toolbar,
@@ -84,18 +82,19 @@
   border: var(--table-border);
 }
 
+.table-container .table-wrapper > table > tfoot > tr {
+  background: var(--table-header-footer-bg, transparent);
+}
+
 .table-container .pagination {
   background: var(--table-header-footer-bg);
   border-top: none;
 }
 
-.table-container .toolbar {
-  border-bottom: none;
-}
-
 .table-container .table-wrapper > table > tbody > tr > td,
 .table-container .table-wrapper > table > thead > tr > th {
   overflow: hidden;
+  padding: var(--table-column-padding);
 }
 
 .table-container .table-wrapper > table > thead > tr > th.filter.multiselect,
@@ -107,19 +106,14 @@
   margin: auto;
 }
 
-.table-container .table-wrapper > table tr > th {
-  text-align: left;
-  font-weight: 500;
-}
-
 .table-container .table-wrapper > table tr > td[data-align="center"],
 .table-container .table-wrapper > table tr > th[data-align="center"] {
   text-align: center;
 }
 
 .table-container .table-wrapper > table tr > td[data-align="right"] {
-  text-align: right;
   padding-right: 2rem;
+  text-align: right;
 }
 
 .table-container .table-wrapper > table tr > th[data-align="right"] {
@@ -144,10 +138,6 @@
   background: var(--table-header-highlight-bg);
 }
 
-.table-container .table-wrapper > table > tbody > tr:nth-child(even) {
-  background: var(--table-stripe-color);
-}
-
 .table-container .table-wrapper > table > tbody > tr[data-selected="true"] {
   background: var(--table-row-selected-bg) !important;
 }
@@ -162,16 +152,20 @@
   transition: background var(--transition-duration) ease;
 }
 
+.table-container .table-wrapper > table > tbody > tr:nth-child(even) {
+  background: var(--table-stripe-color);
+}
+
 .table-wrapper > table .header-row {
   background: var(--table-header-footer-bg);
   font-size: 1rem;
 }
 
 .table-wrapper > table tr.filters > th > div > input {
-  width: 100%;
-  min-width: 7rem;
+  background: #fff;
   font-weight: normal;
-  background: #ffffff;
+  min-width: 7rem;
+  width: 100%;
 }
 
 .table-wrapper
@@ -188,7 +182,7 @@
   > div
   > .select
   > .label-container {
-  background: #ffffff;
+  background: #fff;
   font-weight: normal;
 }
 
@@ -201,26 +195,21 @@
   min-width: 80px;
 }
 
+.table-container .pagination .page-input-control input {
+  background: #fff;
+}
+
 .table-wrapper > table tr.filters > th > .number-range-filter .field input {
-  background: #ffffff;
+  background: #fff;
   font-weight: normal;
   width: 100%;
 }
 
-.table-container .table-wrapper > table > tbody > tr > td,
-.table-container .table-wrapper > table > thead > tr > th {
-  padding: var(--table-column-padding);
-}
-
 .table-container .table-wrapper > table > thead > tr > th.column-actions,
 .table-container .table-wrapper > table > thead > tr > th.column-select {
-  width: var(--table-actions-column-width);
   max-width: var(--table-actions-column-width);
   min-width: var(--table-actions-column-width);
-}
-
-.table-container .pagination .page-input-control input {
-  background: #ffffff;
+  width: var(--table-actions-column-width);
 }
 
 .table-container
diff --git a/packages/ui/src/assets/css/tabs.css b/packages/ui/src/assets/css/tabs.css
index 282d24fc2..61db41709 100644
--- a/packages/ui/src/assets/css/tabs.css
+++ b/packages/ui/src/assets/css/tabs.css
@@ -1,7 +1,8 @@
 .tabbed-panel {
   --_tab-border: var(--tab-border, 1px solid #ddd);
-  --_tab-active-border: var(--tab-active-border, 1px solid #000000);
-  --_tab-hover-border: var(--tab-hover-border, 1px solid #000000);
+  --_tab-active-border: var(--tab-active-border, 1px solid #000);
+  --_tab-hover-border: var(--tab-hover-border, 1px solid #000);
+
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -44,6 +45,7 @@
 }
 
 .tabbed-panel.left > div[role="tablist"] {
+  align-items: flex-start;
   border-right:  var(--_tab-border);
   margin-right: 1rem;
 }
@@ -56,10 +58,6 @@
   width: max-content;
 }
 
-.tabbed-panel.left > div[role="tablist"] {
-  align-items: flex-start;
-}
-
 .tabbed-panel.left > div[role="tablist"] > button,
 .tabbed-panel.right > div[role="tablist"] > button {
   width: 100%;
diff --git a/packages/ui/src/assets/css/tooltip.css b/packages/ui/src/assets/css/tooltip.css
index 4d7b81c47..88a902c89 100644
--- a/packages/ui/src/assets/css/tooltip.css
+++ b/packages/ui/src/assets/css/tooltip.css
@@ -7,9 +7,9 @@
   background-color: var(--tooltip-bg-color);
   border-radius: 0.25rem;
   color: var(--tooltip-color);
+  max-width: 20rem;
   padding: 0.25rem;
   position: absolute;
-  max-width: 20rem;
   z-index: 1100;
 }
 
@@ -20,8 +20,8 @@
   content: "";
   left: 50%;
   position: absolute;
-  transform: translateX(-50%);
   top: 100%;
+  transform: translateX(-50%);
 }
 
 .tooltip-container.left::after {
@@ -53,6 +53,6 @@
   content: "";
   position: absolute;
   right:100%;
-  transform: translateY(-50%);
   top: 50%;
+  transform: translateY(-50%);
 }
diff --git a/packages/ui/src/assets/css/vars.css b/packages/ui/src/assets/css/vars.css
index 571616afc..7e2ca1446 100644
--- a/packages/ui/src/assets/css/vars.css
+++ b/packages/ui/src/assets/css/vars.css
@@ -1,7 +1,6 @@
 :root {
   --border-color: #e5e7eb;
   --border-radius: 0.375rem;
-
   --button-border-radius: 0.375rem;
   --button-primary-color: var(--dz-primary-color);
   --button-secondary-color: var(--dz-secondary-color);
@@ -13,18 +12,14 @@
   --button-medium-padding: 0.75rem 1.25rem;
   --button-large-padding: 0.875rem 1.75rem;
   --button-transition-duration: var(--transition-duration, 150ms);
-
   --color: #2c2c2c;
-
   --data-caption-color: var(--color);
   --data-stat-padding-block: 0.5rem;
   --data-stat-padding-inline: 0.75rem;
   --data-stat-min-width: 13rem;
-
   --dropdown-bg-hover: var(--hover-bg);
   --dropdown-trigger-bg-hover: var(--hover-bg);
   --dropdown-trigger-bg: var(--highlight-bg);
-
   --dz-primary-color: #2563eb;
   --dz-secondary-color: #475569;
   --dz-alternate-color: #0284c7;
@@ -32,7 +27,6 @@
   --dz-success-color: #22c55e;
   --dz-warning-color: #ea580c;
   --dz-tip-color: #b6af10;
-
   --dz-nav-item-active-bg: var(--highlight-bg);
   --dz-nav-item-active-color: var(--dz-primary-color);
   --dz-nav-item-border-radius: 0;
@@ -45,44 +39,35 @@
   --dz-nav-menu-padding-h: 0;
   --dz-nav-menu-padding-v: 1rem;
   --dz-nav-menu-separator-color: var(--border-color);
-
   --dz-page-gap: 1.5rem;
   --dz-page-centered-max-width: 954px;
-
   --field-bg-color-disabled: #f8f8f8;
   --field-bg-color: transparent;
   --field-icon-color: #7b7676;
   --field-padding-block: 0.5rem;
   --field-padding-inline: 0.75rem;
   --field-placeholder-color: #7b7676;
-
   --highlight-bg: #eff6ff;
   --hover-bg: var(--highlight-bg);
-
-  --list-menu-bg-color: #ffffff;
+  --list-menu-bg-color: #fff;
   --list-item-bg-hover: var(--hover-bg);
   --list-item-bg-active: var(--highlight-bg);
-
   --menu-border-color: var(--border-color);
   --menu-item-active-bg: var(--highlight-bg);
   --menu-item-active-color: #007aff;
-
   --pagination-bg-color: transparent;
   --pagination-padding: 0.75rem;
   --pagination-gap: 0.5rem;
-
   --submit-button-bg-color: var(--dz-primary-color);
-
   --table-actions-column-width: 4rem;
   --table-body-bg: transparent;
   --table-border: 1px solid var(--border-color);
   --table-column-padding: 0.75rem;
   --table-header-footer-bg: transparent;
   --table-header-highlight-bg: transparent;
-  --table-loading-overlay-bg: rgba(255, 255, 255, 0.6);
+  --table-loading-overlay-bg: rgb(255 255 255 / 60%);
   --table-row-hover-bg: var(--hover-bg);
   --table-row-selected-bg: var(var(--highlight-bg));
   --table-stripe-color: transparent;
-
   --transition-duration: 150ms;
 }
diff --git a/packages/ui/src/components/SubPane/SubPane.tsx b/packages/ui/src/components/SubPane/SubPane.tsx
index 855f7cb28..1716e15a2 100644
--- a/packages/ui/src/components/SubPane/SubPane.tsx
+++ b/packages/ui/src/components/SubPane/SubPane.tsx
@@ -2,8 +2,8 @@ import React, { ReactNode } from "react";
 
 type Properties = {
   children: ReactNode;
+  icon?: ReactNode | string;
   title: string;
-  icon?: string | ReactNode;
 };
 
 const SubPane: React.FC<Properties> = ({ children }) => {
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index a9cf9843a..0e00bc475 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,5 +1,7 @@
 import "./assets/css/index.css";
 
+import type { Tab } from "./TabView/types";
+
 import { Accordion } from "./Accordion";
 import { SubPane } from "./components/SubPane";
 import { ConfirmationModal } from "./ConfirmationModal";
@@ -18,30 +20,29 @@ import { Stepper } from "./Stepper";
 import { TabbedPanel } from "./TabbedPanel";
 import TabView from "./TabView";
 
-import type { Tab } from "./TabView/types";
-
 export * from "./AuthPage";
 export * from "./Buttons";
 export * from "./Card";
 export * from "./CountryDisplay";
 export * from "./Data";
 export * from "./EditableTitle";
-export * from "./FilesTable";
 export * from "./FileCard";
 export * from "./FilesList";
 export * from "./FilesPresentation";
+export * from "./FilesTable";
 export * from "./FormWidgets";
-export * from "./Table";
-export * from "./utils";
+export * from "./NavigationMenu";
 export * from "./Pagination";
 export * from "./Popup";
 export * from "./SortableList";
-export * from "./Tooltip";
+export * from "./Table";
 export * from "./Tag";
-export * from "./NavigationMenu";
+export * from "./Tooltip";
+export * from "./utils";
 
 export {
   Accordion,
+  ConfirmationModal,
   Divider,
   DropdownMenu,
   FacebookButton,
@@ -57,7 +58,6 @@ export {
   SubPane,
   TabbedPanel,
   TabView,
-  ConfirmationModal,
 };
 
 export type { DropdownMenuProperties, MenuItem, PageProperties, Tab };
diff --git a/packages/ui/src/types/country-picker.ts b/packages/ui/src/types/country-picker.ts
index aa6213e48..2bb5349a8 100644
--- a/packages/ui/src/types/country-picker.ts
+++ b/packages/ui/src/types/country-picker.ts
@@ -1,14 +1,9 @@
 import { ISelectProperties } from "../FormWidgets";
 
-export type Translation = Record<string, string>;
-export type Locales = Record<string, Translation>;
-export type Groups = Record<string, string[]>;
-
 export type CountryPickerLabels = {
-  favorites?: string;
   allCountries?: string;
+  favorites?: string;
 };
-
 export type CountryPickerProperties<T> = Omit<
   ISelectProperties<T>,
   "options"
@@ -27,3 +22,8 @@ export type CountryPickerProperties<T> = Omit<
   locale?: string;
   locales?: Locales;
 };
+export type Groups = Record<string, string[]>;
+
+export type Locales = Record<string, Translation>;
+
+export type Translation = Record<string, string>;
diff --git a/packages/ui/src/types/index.ts b/packages/ui/src/types/index.ts
index 3d62846ea..1e2194a7b 100644
--- a/packages/ui/src/types/index.ts
+++ b/packages/ui/src/types/index.ts
@@ -1,5 +1,5 @@
-export * from "./menu";
 export * from "./country-picker";
+export * from "./menu";
 
 import type {
   NavGroupDisplayMode,
diff --git a/packages/ui/src/types/menu.ts b/packages/ui/src/types/menu.ts
index 2936c6628..40507d463 100644
--- a/packages/ui/src/types/menu.ts
+++ b/packages/ui/src/types/menu.ts
@@ -1,7 +1,9 @@
+type CombinedMenuRouteType = Array<MenuRouteType | NestedMenuRouteType>;
+
 type MenuRouteType = {
+  icon?: React.ReactNode;
   name: string;
   route: string;
-  icon?: React.ReactNode;
 };
 
 type NestedMenuRouteType = Omit<MenuRouteType, "route"> & {
@@ -9,6 +11,4 @@ type NestedMenuRouteType = Omit<MenuRouteType, "route"> & {
   submenu: Array<MenuRouteType>;
 };
 
-type CombinedMenuRouteType = Array<MenuRouteType | NestedMenuRouteType>;
-
-export type { MenuRouteType, NestedMenuRouteType, CombinedMenuRouteType };
+export type { CombinedMenuRouteType, MenuRouteType, NestedMenuRouteType };
diff --git a/packages/ui/src/utils/UseDebouncedValue.ts b/packages/ui/src/utils/UseDebouncedValue.ts
index 45e0e2835..8202d32d7 100644
--- a/packages/ui/src/utils/UseDebouncedValue.ts
+++ b/packages/ui/src/utils/UseDebouncedValue.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export const useDebouncedValue = <T>(value: T, delay: number): T => {
   const [debouncedValue, setDebouncedValue] = useState(value);
diff --git a/packages/ui/src/utils/UseExporter.ts b/packages/ui/src/utils/UseExporter.ts
index e534f3122..c0a043310 100644
--- a/packages/ui/src/utils/UseExporter.ts
+++ b/packages/ui/src/utils/UseExporter.ts
@@ -2,30 +2,30 @@ import saveAs from "file-saver";
 import { build, WorkSheetOptions } from "node-xlsx";
 import { useCallback, useState } from "react";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type TriggerExportType = (data: any) => void;
+
 type UseExporterOptions = {
   filename?: string;
+  onExportEnd?: () => void;
+  onExportStart?: () => void;
   sheetName?: string;
   sheetOptions?: WorkSheetOptions;
-  onExportStart?: () => void;
-  onExportEnd?: () => void;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type TriggerExportType = (data: any) => void;
-
 const exportXLSX = ({
-  sheetName,
-  filename,
   data,
+  filename,
+  sheetName,
   sheetOptions,
 }: {
-  sheetName: string;
-  filename: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   data: any;
+  filename: string;
+  sheetName: string;
   sheetOptions: WorkSheetOptions;
 }) => {
-  const buffer = build([{ name: sheetName, data, options: sheetOptions }]);
+  const buffer = build([{ data, name: sheetName, options: sheetOptions }]);
 
   saveAs(
     new Blob([buffer as BlobPart], {
@@ -37,10 +37,10 @@ const exportXLSX = ({
 
 export const useExporter = ({
   filename = `export_${Date.now()}.xlsx`,
+  onExportEnd,
+  onExportStart,
   sheetName = "Sheet 1",
   sheetOptions = {},
-  onExportStart,
-  onExportEnd,
 }: UseExporterOptions): [boolean, TriggerExportType] => {
   const [exporting, setExporting] = useState(false);
 
@@ -52,7 +52,7 @@ export const useExporter = ({
         onExportStart();
       }
 
-      exportXLSX({ sheetName, filename, data, sheetOptions });
+      exportXLSX({ data, filename, sheetName, sheetOptions });
 
       setExporting(false);
       if (onExportEnd) {
diff --git a/packages/ui/src/utils/UseExporterAsync.ts b/packages/ui/src/utils/UseExporterAsync.ts
index 95bc46997..32c06149c 100644
--- a/packages/ui/src/utils/UseExporterAsync.ts
+++ b/packages/ui/src/utils/UseExporterAsync.ts
@@ -2,32 +2,32 @@ import saveAs from "file-saver";
 import { WorkSheetOptions } from "node-xlsx";
 import { useCallback, useState } from "react";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type TriggerExportAsyncType = (data: any) => Promise<void>;
+
 type UseExporterOptions = {
   filename?: string;
+  onExportEnd?: () => void;
+  onExportStart?: () => void;
   sheetName?: string;
   sheetOptions?: WorkSheetOptions;
-  onExportStart?: () => void;
-  onExportEnd?: () => void;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type TriggerExportAsyncType = (data: any) => Promise<void>;
-
 const exportXLSX = async ({
-  sheetName,
-  filename,
   data,
+  filename,
+  sheetName,
   sheetOptions,
 }: {
-  sheetName: string;
-  filename: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   data: any;
+  filename: string;
+  sheetName: string;
   sheetOptions: WorkSheetOptions;
 }) => {
   const XLSX = await import("node-xlsx");
 
-  const buffer = XLSX.build([{ name: sheetName, data, options: sheetOptions }]);
+  const buffer = XLSX.build([{ data, name: sheetName, options: sheetOptions }]);
 
   saveAs(
     new Blob([buffer as unknown as BlobPart], {
@@ -39,10 +39,10 @@ const exportXLSX = async ({
 
 export const useExporterAsync = ({
   filename = `export_${Date.now()}.xlsx`,
+  onExportEnd,
+  onExportStart,
   sheetName = "Sheet 1",
   sheetOptions = {},
-  onExportStart,
-  onExportEnd,
 }: UseExporterOptions): [boolean, TriggerExportAsyncType] => {
   const [exporting, setExporting] = useState(false);
 
@@ -54,7 +54,7 @@ export const useExporterAsync = ({
         onExportStart();
       }
 
-      await exportXLSX({ sheetName, filename, data, sheetOptions });
+      await exportXLSX({ data, filename, sheetName, sheetOptions });
 
       setExporting(false);
       if (onExportEnd) {
diff --git a/packages/ui/src/utils/__test__/country-picker.test.ts b/packages/ui/src/utils/__test__/country-picker.test.ts
index 95984b800..a67f18f7d 100644
--- a/packages/ui/src/utils/__test__/country-picker.test.ts
+++ b/packages/ui/src/utils/__test__/country-picker.test.ts
@@ -1,5 +1,8 @@
 import { describe, expect, test } from "vitest";
 
+import type { Option } from "../../FormWidgets/Select";
+import type { Locales } from "../../types";
+
 import defaultEnglishTranslation from "../../FormWidgets/CountryPicker/en.json";
 import {
   getFallbackTranslation,
@@ -8,41 +11,38 @@ import {
   sortByLabel,
 } from "../country-picker";
 
-import type { Option } from "../../FormWidgets/Select";
-import type { Locales } from "../../types";
-
 describe("getFallbackTranslation", () => {
   const frenchTranslation = {
-    DE: "Allemagne",
     BR: "Brésil",
     CA: "Canada",
     CN: "Chine",
+    DE: "Allemagne",
     ES: "Espagne",
-    US: "États-Unis",
     FR: "France",
+    GB: "Royaume-Uni",
     IT: "Italie",
     JP: "Japon",
-    GB: "Royaume-Uni",
     RU: "Russie",
+    US: "États-Unis",
   };
 
   const spanishTranslation = {
-    DE: "Alemania",
     BR: "Brasil",
     CA: "Canadá",
     CN: "China",
+    DE: "Alemania",
     ES: "España",
-    US: "Estados Unidos",
     FR: "Francia",
+    GB: "Reino Unido",
     IT: "Italia",
     JP: "Japón",
-    GB: "Reino Unido",
     RU: "Rusia",
+    US: "Estados Unidos",
   };
 
   const locales = {
-    fr: frenchTranslation,
     es: spanishTranslation,
+    fr: frenchTranslation,
   };
 
   const customEnglishTranslation = { FR: "France" };
@@ -167,26 +167,26 @@ describe("getFlagClass", () => {
 describe("getLabel", () => {
   const frenchTranslation = {
     DE: "Allemagne",
-    US: "États-Unis",
     FR: "France",
+    US: "États-Unis",
   };
 
   const spanishTranslation = {
     DE: "Alemania",
-    US: "Estados Unidos",
     FR: "Francia",
+    US: "Estados Unidos",
   };
 
   const locales = {
-    fr: frenchTranslation,
     es: spanishTranslation,
+    fr: frenchTranslation,
   };
 
   const fallbackTranslation = {
-    US: "United States",
-    FR: "France",
     DE: "Germany",
+    FR: "France",
     JP: "Japan",
+    US: "United States",
   };
 
   const testCases = [
@@ -253,7 +253,7 @@ describe("getLabel", () => {
   ];
 
   testCases.map((testCase) => {
-    const { code, locale, locales, fallbackTranslation } = testCase.arguments;
+    const { code, fallbackTranslation, locale, locales } = testCase.arguments;
 
     test(testCase.name, () => {
       const result = getLabel(code, locale, locales, fallbackTranslation);
diff --git a/packages/ui/src/utils/__test__/date.test.ts b/packages/ui/src/utils/__test__/date.test.ts
index c7b55d1b2..77d0f81bf 100644
--- a/packages/ui/src/utils/__test__/date.test.ts
+++ b/packages/ui/src/utils/__test__/date.test.ts
@@ -22,9 +22,9 @@ describe("formatDate unit test", () => {
     const locale = "en-GB";
 
     const options: Intl.DateTimeFormatOptions = {
-      year: "2-digit",
-      month: "long",
       day: "2-digit",
+      month: "long",
+      year: "2-digit",
     };
 
     expect(formatDate(date, locale, options)).toBe("11 December 24");
diff --git a/packages/ui/src/utils/country-picker.ts b/packages/ui/src/utils/country-picker.ts
index 63e7a1234..39de7bc52 100644
--- a/packages/ui/src/utils/country-picker.ts
+++ b/packages/ui/src/utils/country-picker.ts
@@ -1,15 +1,15 @@
-import defaultEnglishTranslation from "../FormWidgets/CountryPicker/en.json";
-
 import type {
-  GroupedOption as OptionGroup,
   Option,
+  GroupedOption as OptionGroup,
 } from "../FormWidgets/Select";
 import type { Locales, Translation } from "../types";
 
+import defaultEnglishTranslation from "../FormWidgets/CountryPicker/en.json";
+
 export const getFallbackTranslation = (
   fallbackLocale: string,
   locales: Locales | undefined,
-): Translation | null => {
+): null | Translation => {
   if (locales?.[fallbackLocale]) {
     return locales[fallbackLocale];
   }
diff --git a/packages/ui/src/utils/date.ts b/packages/ui/src/utils/date.ts
index 8affb0937..92ca1f551 100644
--- a/packages/ui/src/utils/date.ts
+++ b/packages/ui/src/utils/date.ts
@@ -1,14 +1,14 @@
 const defaultDateOptions: Intl.DateTimeFormatOptions = {
-  year: "numeric",
-  month: "short",
   day: "numeric",
+  month: "short",
+  year: "numeric",
 };
 
 const defaultDateTimeOptions: Intl.DateTimeFormatOptions = {
   ...defaultDateOptions,
   hour: "numeric",
-  minute: "numeric",
   hour12: true,
+  minute: "numeric",
 };
 
 export const formatDate = (
diff --git a/packages/ui/stylelint.config.js b/packages/ui/stylelint.config.js
new file mode 100644
index 000000000..832e143e4
--- /dev/null
+++ b/packages/ui/stylelint.config.js
@@ -0,0 +1,3 @@
+import stylelintConfig from "@prefabs.tech/stylelint-config/index.js";
+
+export default stylelintConfig;
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index 417458ed9..3023147dc 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -1,7 +1,6 @@
-import { resolve, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-
 import react from "@vitejs/plugin-react";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import { defineConfig, loadEnv } from "vite";
 
 import { dependencies, peerDependencies } from "./package.json";
@@ -33,18 +32,21 @@ export default defineConfig(({ mode }) => {
           },
           exports: "named",
           globals: {
-            react: "React",
             "@tanstack/react-table": "ReactTable",
             "node-xlsx": "NodeXLSX",
+            react: "React",
             "react-debounce-input": "ReactDebounceInput",
             "react-dom": "ReactDOM",
-            "react-router-dom": "ReactRouterDom",
             "react-popper": "reactPopper",
+            "react-router-dom": "ReactRouterDom",
           },
         },
       },
       target: "esnext",
     },
+    optimizeDeps: {
+      include: ["react/jsx-runtime"],
+    },
     plugins: [react()],
     resolve: {
       alias: {
@@ -54,8 +56,5 @@ export default defineConfig(({ mode }) => {
     server: {
       port: Number(process.env.VITE_APP_PORT) || 8889,
     },
-    optimizeDeps: {
-      include: ["react/jsx-runtime"],
-    },
   };
 });
diff --git a/packages/user/eslint.config.js b/packages/user/eslint.config.js
index 3a4d1020c..9fb397fb0 100644
--- a/packages/user/eslint.config.js
+++ b/packages/user/eslint.config.js
@@ -8,9 +8,9 @@ export default [
         "error",
         {
           cases: {
+            camelCase: true,
             kebabCase: true,
             pascalCase: true,
-            camelCase: true,
           },
         },
       ],
diff --git a/packages/user/package.json b/packages/user/package.json
index c42be3052..0854705f5 100644
--- a/packages/user/package.json
+++ b/packages/user/package.json
@@ -23,6 +23,8 @@
     "lint:fix": "eslint . --fix",
     "snapshot:update": "vitest --environment jsdom run --update --passWithNoTests",
     "sort-package": "npx sort-package-json",
+    "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input",
+    "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input",
     "test": "pnpm build && vitest --environment jsdom run --coverage",
     "test:component": "vitest --environment jsdom run component/",
     "test:snapshot": "vitest --environment jsdom run snapshot/",
@@ -35,12 +37,13 @@
     "zod": "3.24.4"
   },
   "devDependencies": {
-    "@prefabs.tech/eslint-config": "0.5.0",
+    "@prefabs.tech/eslint-config": "0.7.0",
     "@prefabs.tech/react-form": "0.72.1",
     "@prefabs.tech/react-i18n": "0.72.1",
     "@prefabs.tech/react-layout": "0.72.1",
     "@prefabs.tech/react-ui": "0.72.1",
-    "@prefabs.tech/tsconfig": "0.6.0",
+    "@prefabs.tech/stylelint-config": "0.7.0",
+    "@prefabs.tech/tsconfig": "0.7.0",
     "@testing-library/dom": "10.4.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
@@ -59,6 +62,9 @@
     "react-dom": "18.3.1",
     "react-router-dom": "6.28.2",
     "react-toastify": "10.0.6",
+    "stylelint": "17.9.1",
+    "stylelint-config-standard": "40.0.0",
+    "stylelint-order": "8.1.1",
     "typescript": "5.9.3",
     "vite": "7.3.2",
     "vitest": "3.0.9"
diff --git a/packages/user/setup-test.ts b/packages/user/setup-test.ts
index 628ba9e76..d5db82e0a 100644
--- a/packages/user/setup-test.ts
+++ b/packages/user/setup-test.ts
@@ -1,13 +1,13 @@
 import { vi } from "vitest";
 
 vi.mock("@prefabs.tech/react-i18n", () => ({
+  Trans: ({ i18nKey }: { i18nKey: string }) => i18nKey,
   useTranslation: () => {
     return {
-      t: (string_) => string_,
       i18n: {
         changeLanguage: () => new Promise(() => {}),
       },
+      t: (string_) => string_,
     };
   },
-  Trans: ({ i18nKey }: { i18nKey: string }) => i18nKey,
 }));
diff --git a/packages/user/src/api/user/index.ts b/packages/user/src/api/user/index.ts
index 8a5fad121..ff0d70c2e 100644
--- a/packages/user/src/api/user/index.ts
+++ b/packages/user/src/api/user/index.ts
@@ -1,5 +1,3 @@
-import client from "../axios";
-
 import type {
   LoginCredentials,
   UpdateProfileInput,
@@ -7,6 +5,8 @@ import type {
   UserType,
 } from "@/types";
 
+import client from "../axios";
+
 export const getIsFirstUser = async (
   apiBaseUrl: string,
 ): Promise<{
diff --git a/packages/user/src/assets/css/index.css b/packages/user/src/assets/css/index.css
index 2386dd22f..43448ce0d 100644
--- a/packages/user/src/assets/css/index.css
+++ b/packages/user/src/assets/css/index.css
@@ -1,8 +1,8 @@
-@import "./forgot-password.css";
-@import "./invitation.css";
-@import "./invitations-table.css";
-@import "./login.css";
-@import "./profile.css";
-@import "./signup.css";
-@import "./users-table.css";
-@import "./verify-email.css";
+@import url("./forgot-password.css");
+@import url("./invitation.css");
+@import url("./invitations-table.css");
+@import url("./login.css");
+@import url("./profile.css");
+@import url("./signup.css");
+@import url("./users-table.css");
+@import url("./verify-email.css");
diff --git a/packages/user/src/assets/css/invitations-table.css b/packages/user/src/assets/css/invitations-table.css
index 24426f807..7683681e8 100644
--- a/packages/user/src/assets/css/invitations-table.css
+++ b/packages/user/src/assets/css/invitations-table.css
@@ -3,31 +3,31 @@
 }
 
 .table-invitations .column-appId {
-  width: 10rem;
   max-width: 10rem;
   min-width: 10rem;
+  width: 10rem;
 }
 
 .table-invitations .column-role {
-  width: 10rem;
   max-width: 10rem;
   min-width: 10rem;
+  width: 10rem;
 }
 
 .table-invitations .column-invitedBy {
-  width: 15rem;
   max-width: 15rem;
   min-width: 15rem;
+  width: 15rem;
 }
 
 .table-invitations .column-expiresAt {
-  width: 12rem;
   max-width: 12rem;
   min-width: 12rem;
+  width: 12rem;
 }
 
 .table-invitations .column-status {
-  width: 10rem;
   max-width: 10rem;
   min-width: 10rem;
+  width: 10rem;
 }
diff --git a/packages/user/src/assets/css/profile.css b/packages/user/src/assets/css/profile.css
index 39f2a4cd4..48692bc40 100644
--- a/packages/user/src/assets/css/profile.css
+++ b/packages/user/src/assets/css/profile.css
@@ -14,23 +14,15 @@
 .profile .account-info .data.update-email .value {
   align-items: center;
   display: flex;
-  gap: 0.45rem;
-  margin-bottom: 0.5rem;
   flex-wrap: wrap;
-}
-
-.profile .account-info .data.update-email {
-  gap: 0.75rem;
+  gap: 0.45rem;
+  margin-bottom: 0;
 }
 
 .profile .account-info .data.update-email {
   gap: 0.15rem;
 }
 
-.profile .account-info .data.update-email .value {
-  margin-bottom: 0;
-}
-
 .profile .tabbed-panel h2 {
   font-weight: 500;
   margin-bottom: 1rem;
diff --git a/packages/user/src/assets/css/signup.css b/packages/user/src/assets/css/signup.css
index 582262a81..89f6613fa 100644
--- a/packages/user/src/assets/css/signup.css
+++ b/packages/user/src/assets/css/signup.css
@@ -1,5 +1,5 @@
 .signup .terms-and-conditions {
-  font-size: 12px;
   color: #525252;
+  font-size: 12px;
   line-height: 1.35;
 }
diff --git a/packages/user/src/assets/css/users-table.css b/packages/user/src/assets/css/users-table.css
index 1d3eb89e0..89a3a0e62 100644
--- a/packages/user/src/assets/css/users-table.css
+++ b/packages/user/src/assets/css/users-table.css
@@ -3,25 +3,25 @@
 }
 
 .table-users .column-name {
+  max-width: 15rem;
   min-width: 15rem;
   width: 15rem;
-  max-width: 15rem;
 }
 
 .table-users .column-roles {
-  width: 12rem;
   max-width: 12rem;
   min-width: 12rem;
+  width: 12rem;
 }
 
 .table-users .column-signedUpAt {
-  width: 12rem;
   max-width: 12rem;
   min-width: 12rem;
+  width: 12rem;
 }
 
 .table-users .column-disabled {
-  width: 13rem;
   max-width: 13rem;
   min-width: 13rem;
+  width: 13rem;
 }
diff --git a/packages/user/src/assets/css/verify-email.css b/packages/user/src/assets/css/verify-email.css
index cd251386f..21cb439bb 100644
--- a/packages/user/src/assets/css/verify-email.css
+++ b/packages/user/src/assets/css/verify-email.css
@@ -17,8 +17,8 @@
   text-decoration: underline;
 }
 
-.email-verification[data-centered=true] {
+.email-verification[data-centered="true"] {
   align-items: flex-start;
-  max-width: var(--dz-page-max-width);
   margin: auto;
+  max-width: var(--dz-page-max-width);
 }
diff --git a/packages/user/src/components/ChangePasswordForm/ChangePasswordFormFields.tsx b/packages/user/src/components/ChangePasswordForm/ChangePasswordFormFields.tsx
index 5f71d2df9..05376fbdb 100644
--- a/packages/user/src/components/ChangePasswordForm/ChangePasswordFormFields.tsx
+++ b/packages/user/src/components/ChangePasswordForm/ChangePasswordFormFields.tsx
@@ -19,32 +19,32 @@ const ChangePasswordFormFields = ({
 
   const {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    formState: { errors, submitCount, isDirty },
-    register,
+    formState: { errors, isDirty, submitCount },
     getFieldState,
+    register,
   } = useFormContext();
 
   return (
     <>
       <Password
         autoComplete="current-password"
+        getFieldState={getFieldState}
         label={t("changePassword.form.currentPassword.label")}
         name="oldPassword"
         register={register}
-        getFieldState={getFieldState}
       />
       <Password
+        getFieldState={getFieldState}
         label={t("changePassword.form.newPassword.label")}
         name="password"
         register={register}
-        getFieldState={getFieldState}
       />
       {hasConfirmPasswordFeature && (
         <Password
+          getFieldState={getFieldState}
           label={t("changePassword.form.confirmPassword.label")}
           name="confirmPassword"
           register={register}
-          getFieldState={getFieldState}
         />
       )}
 
@@ -55,8 +55,8 @@ const ChangePasswordFormFields = ({
             label: t("changePassword.form.actions.submit"),
           },
         ]}
-        loading={loading}
         alignment="left"
+        loading={loading}
       />
     </>
   );
diff --git a/packages/user/src/components/ChangePasswordForm/index.tsx b/packages/user/src/components/ChangePasswordForm/index.tsx
index 43d10d041..e15d91b6b 100644
--- a/packages/user/src/components/ChangePasswordForm/index.tsx
+++ b/packages/user/src/components/ChangePasswordForm/index.tsx
@@ -1,4 +1,4 @@
-import { Provider, FormSubmitOptions } from "@prefabs.tech/react-form";
+import { FormSubmitOptions, Provider } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import React from "react";
 import * as zod from "zod";
@@ -6,8 +6,8 @@ import * as zod from "zod";
 import { useConfig } from "@/hooks";
 import { ChangePasswordFormData } from "@/views/ChangePassword";
 
-import ChangePasswordFormFields from "./ChangePasswordFormFields";
 import { PasswordConfirmationSchema } from "../schemas";
+import ChangePasswordFormFields from "./ChangePasswordFormFields";
 
 interface Properties {
   handleSubmit: (
@@ -18,7 +18,7 @@ interface Properties {
 }
 
 export const ChangePasswordForm = ({ handleSubmit, loading }: Properties) => {
-  const { t, i18n } = useTranslation("user");
+  const { i18n, t } = useTranslation("user");
   const config = useConfig();
   const hasConfirmPasswordFeature = config?.features?.confirmPassword ?? false;
 
@@ -27,16 +27,16 @@ export const ChangePasswordForm = ({ handleSubmit, loading }: Properties) => {
       .string()
       .nonempty(t("changePassword.messages.validation.currentPassword")),
     ...PasswordConfirmationSchema({
-      passwordValidationMessage: t(
-        "changePassword.messages.validation.mustContain",
+      confirmPasswordRequiredMessage: t(
+        "changePassword.messages.validation.confirmPassword",
       ),
+      hasConfirmPasswordFeature,
       passwordRequiredMessage: t(
         "changePassword.messages.validation.newPassword",
       ),
-      confirmPasswordRequiredMessage: t(
-        "changePassword.messages.validation.confirmPassword",
+      passwordValidationMessage: t(
+        "changePassword.messages.validation.mustContain",
       ),
-      hasConfirmPasswordFeature,
     }),
   });
 
@@ -54,13 +54,13 @@ export const ChangePasswordForm = ({ handleSubmit, loading }: Properties) => {
 
   return (
     <Provider
-      validationSchema={ChangePasswordFormSchema}
       onSubmit={(data: ChangePasswordFormData, options?: FormSubmitOptions) =>
         handleSubmit(
           { oldPassword: data.oldPassword, password: data.password },
           options,
         )
       }
+      validationSchema={ChangePasswordFormSchema}
       validationTriggerKey={i18n.language}
     >
       <ChangePasswordFormFields
diff --git a/packages/user/src/components/ForgotPasswordForm/ForgotPasswordFormFields.tsx b/packages/user/src/components/ForgotPasswordForm/ForgotPasswordFormFields.tsx
index cff1e9239..17e1b0567 100644
--- a/packages/user/src/components/ForgotPasswordForm/ForgotPasswordFormFields.tsx
+++ b/packages/user/src/components/ForgotPasswordForm/ForgotPasswordFormFields.tsx
@@ -1,4 +1,4 @@
-import { FormActions, Email, useFormContext } from "@prefabs.tech/react-form";
+import { Email, FormActions, useFormContext } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import React, { useEffect } from "react";
 
@@ -14,9 +14,9 @@ export const ForgotPasswordFormFields = ({
   const { t } = useTranslation("user");
 
   const {
-    watch,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     formState: { errors, submitCount },
+    watch,
   } = useFormContext();
 
   const emailValue = watch("email");
@@ -38,13 +38,13 @@ export const ForgotPasswordFormFields = ({
       <FormActions
         actions={[
           {
+            disabled: !emailValue,
             id: "submit",
             label: t("forgotPassword.form.actions.submit"),
-            disabled: !emailValue,
           },
         ]}
-        loading={loading}
         alignment="fill"
+        loading={loading}
       />
     </>
   );
diff --git a/packages/user/src/components/ForgotPasswordForm/index.tsx b/packages/user/src/components/ForgotPasswordForm/index.tsx
index 0eda6f194..cf37c318a 100644
--- a/packages/user/src/components/ForgotPasswordForm/index.tsx
+++ b/packages/user/src/components/ForgotPasswordForm/index.tsx
@@ -1,4 +1,4 @@
-import { Provider, emailSchema } from "@prefabs.tech/react-form";
+import { emailSchema, Provider } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import React from "react";
 import * as zod from "zod";
@@ -7,38 +7,38 @@ import { ForgotPasswordFormFields } from "./ForgotPasswordFormFields";
 
 interface Properties {
   email?: string;
-  loading?: boolean;
   handleSubmit: (email: string) => void;
+  loading?: boolean;
   onEmailChange?: (email: string) => void;
 }
 
 export const ForgotPasswordForm = ({
   email,
-  loading,
   handleSubmit,
+  loading,
   onEmailChange,
 }: Properties) => {
-  const { t, i18n } = useTranslation("user");
+  const { i18n, t } = useTranslation("user");
 
   const ForgotPasswordFormSchema = zod.object({
     email: emailSchema({
-      required: t("validation.messages.email"),
       invalid: t("validation.messages.validEmail"),
+      required: t("validation.messages.email"),
     }),
   });
 
   return (
     <Provider
-      validationSchema={ForgotPasswordFormSchema}
-      onSubmit={(data) => handleSubmit(data.email)}
-      validationTriggerKey={i18n.language}
       defaultValues={{
         email,
       }}
+      onSubmit={(data) => handleSubmit(data.email)}
+      validationSchema={ForgotPasswordFormSchema}
+      validationTriggerKey={i18n.language}
     >
       <ForgotPasswordFormFields
-        onEmailChange={onEmailChange}
         loading={loading}
+        onEmailChange={onEmailChange}
       />
     </Provider>
   );
diff --git a/packages/user/src/components/Invitation/InvitationForm.tsx b/packages/user/src/components/Invitation/InvitationForm.tsx
index fb9df5c3b..c76eb448d 100644
--- a/packages/user/src/components/Invitation/InvitationForm.tsx
+++ b/packages/user/src/components/Invitation/InvitationForm.tsx
@@ -1,7 +1,7 @@
 import {
-  Provider,
-  emailSchema,
   AdditionalFormFields,
+  emailSchema,
+  Provider,
 } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Message } from "@prefabs.tech/react-ui";
@@ -9,19 +9,19 @@ import React, { useCallback, useState } from "react";
 import { toast } from "react-toastify";
 import * as zod from "zod";
 
-import { addInvitation } from "@/api/invitation";
-import { INVITATION_ERRORS, SOMETHING_WRONG_ERROR } from "@/constants";
-import { useConfig } from "@/hooks";
-
-import { InvitationFormFields } from "./InvitationFormFields";
-
 import type {
   AddInvitationResponse,
   InvitationAppOption,
-  InvitationRoleOption,
   InvitationExpiryDateField,
+  InvitationRoleOption,
 } from "@/types";
 
+import { addInvitation } from "@/api/invitation";
+import { INVITATION_ERRORS, SOMETHING_WRONG_ERROR } from "@/constants";
+import { useConfig } from "@/hooks";
+
+import { InvitationFormFields } from "./InvitationFormFields";
+
 interface Properties {
   additionalInvitationFields?: AdditionalFormFields;
   apps?: InvitationAppOption[];
@@ -37,22 +37,22 @@ export const InvitationForm = ({
   additionalInvitationFields,
   apps,
   expiryDateField,
-  onSubmitted,
   onCancel,
+  onSubmitted,
   prepareData,
   roles,
 }: Properties) => {
-  const { t, i18n } = useTranslation("invitations");
+  const { i18n, t } = useTranslation("invitations");
   const config = useConfig();
 
   const [submitting, setSubmitting] = useState(false);
 
   // Stores the error code string (e.g. "USER_ALREADY_EXISTS_ERROR")
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<null | string>(null);
 
   // Stores dynamic values (email, role, app name) for the translation
   const [errorParameters, setErrorParameters] = useState<
-    Record<string, string | number | undefined>
+    Record<string, number | string | undefined>
   >({});
 
   const getDefaultValues = useCallback(() => {
@@ -93,10 +93,10 @@ export const InvitationForm = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const getFormData = (data: any) => {
     const parsedData: {
-      email: string;
-      role: string;
       appId?: number;
+      email: string;
       expiresAt?: Date;
+      role: string;
     } = {
       email: data.email,
       role: data.role,
@@ -170,9 +170,9 @@ export const InvitationForm = ({
         const selectedApp = apps?.find((app) => app.id === data.app)?.name;
 
         setErrorParameters({
+          app: selectedApp || data.app,
           email: data.email,
           role: data.role,
-          app: selectedApp || data.app,
         });
 
         setError(code);
@@ -236,17 +236,17 @@ export const InvitationForm = ({
         />
       )}
       <Provider
-        onSubmit={onSubmit}
         defaultValues={getDefaultValues()}
+        onSubmit={onSubmit}
         validationSchema={InvitationFormSchema}
         validationTriggerKey={i18n.language}
       >
         <InvitationFormFields
-          renderAdditionalFields={additionalInvitationFields?.renderFields}
           apps={apps}
           expiryDateField={expiryDateField}
           loading={submitting}
           onCancel={onCancel}
+          renderAdditionalFields={additionalInvitationFields?.renderFields}
           roles={roles}
         />
       </Provider>
diff --git a/packages/user/src/components/Invitation/InvitationFormFields.tsx b/packages/user/src/components/Invitation/InvitationFormFields.tsx
index a42bd885e..b7440da44 100644
--- a/packages/user/src/components/Invitation/InvitationFormFields.tsx
+++ b/packages/user/src/components/Invitation/InvitationFormFields.tsx
@@ -1,12 +1,12 @@
 import {
-  Select,
-  DaysInput,
   DatePicker,
+  DaysInput,
   Email,
+  FormActions,
+  RenderAdditionalFormFields,
+  Select,
   useFormContext,
   useWatch,
-  RenderAdditionalFormFields,
-  FormActions,
 } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import React, { useEffect, useMemo, useState } from "react";
@@ -18,28 +18,28 @@ import {
 } from "@/types";
 
 interface IProperties {
-  renderAdditionalFields?: RenderAdditionalFormFields;
   apps?: InvitationAppOption[];
   expiryDateField?: InvitationExpiryDateField;
   loading?: boolean;
   onCancel?: () => void;
+  renderAdditionalFields?: RenderAdditionalFormFields;
   roles?: InvitationRoleOption[];
 }
 export const InvitationFormFields: React.FC<IProperties> = ({
-  renderAdditionalFields,
   apps,
   expiryDateField,
-  roles,
   loading,
   onCancel,
+  renderAdditionalFields,
+  roles,
 }) => {
   const { t } = useTranslation("invitations");
 
   const {
-    register,
+    formState: { errors, submitCount },
     getFieldState,
+    register,
     setValue,
-    formState: { errors, submitCount },
   } = useFormContext();
 
   const [filteredRoles, setFilteredRoles] = useState(
@@ -113,12 +113,12 @@ export const InvitationFormFields: React.FC<IProperties> = ({
 
     const modifiedLabels = modifiedApps.map((app) => {
       if (app.label) {
-        return { value: app.id, label: app.label };
+        return { label: app.label, value: app.id };
       }
 
       return {
-        value: app.id,
         label: app.name,
+        value: app.id,
       };
     });
 
@@ -136,10 +136,10 @@ export const InvitationFormFields: React.FC<IProperties> = ({
 
       {apps?.length ? (
         <Select
-          name="app"
           label={t("form.fields.app.label")}
-          placeholder={t("form.fields.app.placeholder")}
+          name="app"
           options={updatedApps}
+          placeholder={t("form.fields.app.placeholder")}
         />
       ) : null}
 
@@ -147,10 +147,10 @@ export const InvitationFormFields: React.FC<IProperties> = ({
         <Select
           autoSelectSingleOption
           disabled={filteredRoles.length <= 1 && true}
-          name="role"
           label={t("form.fields.role.label")}
-          placeholder={t("form.fields.role.placeholder")}
+          name="role"
           options={filteredRoles}
+          placeholder={t("form.fields.role.placeholder")}
         />
       ) : null}
 
@@ -161,17 +161,17 @@ export const InvitationFormFields: React.FC<IProperties> = ({
       <FormActions
         actions={[
           {
+            disabled: !!Object.values(errors).length,
             id: "submit",
             label: t("form.actions.submit"),
-            disabled: !!Object.values(errors).length,
           },
           {
             id: "cancel",
+            label: t("form.actions.cancel"),
             onClick: (event) => {
               event.preventDefault();
               onCancel && onCancel();
             },
-            label: t("form.actions.cancel"),
           },
         ]}
         alignment="right"
diff --git a/packages/user/src/components/Invitation/InvitationModal.tsx b/packages/user/src/components/Invitation/InvitationModal.tsx
index 945c5fd05..fea373ce6 100644
--- a/packages/user/src/components/Invitation/InvitationModal.tsx
+++ b/packages/user/src/components/Invitation/InvitationModal.tsx
@@ -3,15 +3,15 @@ import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Button, IButtonProperties, Modal } from "@prefabs.tech/react-ui";
 import React, { useState } from "react";
 
-import { InvitationForm } from "./InvitationForm";
-
 import type {
   AddInvitationResponse,
   InvitationAppOption,
-  InvitationRoleOption,
   InvitationExpiryDateField,
+  InvitationRoleOption,
 } from "@/types";
 
+import { InvitationForm } from "./InvitationForm";
+
 interface Properties {
   additionalInvitationFields?: AdditionalFormFields;
   apps?: InvitationAppOption[];
@@ -45,8 +45,8 @@ export const InvitationModal = ({
       <Modal
         className="invitation-modal"
         header={t("modal.dialog.header")}
-        visible={modalVisible}
         onHide={() => setModalVisible(false)}
+        visible={modalVisible}
       >
         <InvitationForm
           additionalInvitationFields={additionalInvitationFields}
diff --git a/packages/user/src/components/Invitation/InvitationsTable.tsx b/packages/user/src/components/Invitation/InvitationsTable.tsx
index dc14efd78..8792e8e80 100644
--- a/packages/user/src/components/Invitation/InvitationsTable.tsx
+++ b/packages/user/src/components/Invitation/InvitationsTable.tsx
@@ -2,12 +2,12 @@ import { AdditionalFormFields } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import {
   TDataTable as DataTable,
-  TDataTableProperties,
-  TRequestJSON,
+  FilterOption,
   IButtonProperties,
   TableColumnDefinition,
   Tag,
-  FilterOption,
+  TDataTableProperties,
+  TRequestJSON,
 } from "@prefabs.tech/react-ui";
 import { toast } from "react-toastify";
 
@@ -19,33 +19,23 @@ import {
 import { useConfig } from "@/hooks";
 import { DeleteInvitationResponse } from "@/types/invitation";
 
-import { InvitationModal } from "./InvitationModal";
-
 import type {
   AddInvitationResponse,
+  Invitation,
   InvitationAppOption,
-  InvitationRoleOption,
   InvitationExpiryDateField,
+  InvitationRoleOption,
   ResendInvitationResponse,
   RevokeInvitationResponse,
-  Invitation,
   UserType,
 } from "../../types";
 
-type VisibleColumn =
-  | "email"
-  | "appId"
-  | "role"
-  | "invitedBy"
-  | "expiresAt"
-  | "status"
-  | "actions"
-  | string;
+import { InvitationModal } from "./InvitationModal";
 
 export type InvitationsTableProperties = Partial<
   Omit<
     TDataTableProperties<Invitation>,
-    "data" | "visibleColumns" | "fetchData"
+    "data" | "fetchData" | "visibleColumns"
   >
 > & {
   additionalInvitationFields?: AdditionalFormFields;
@@ -69,6 +59,16 @@ export type InvitationsTableProperties = Partial<
   visibleColumns?: VisibleColumn[];
 };
 
+type VisibleColumn =
+  | "actions"
+  | "appId"
+  | "email"
+  | "expiresAt"
+  | "invitedBy"
+  | "role"
+  | "status"
+  | string;
+
 export const InvitationsTable = ({
   additionalInvitationFields,
   appFilterOptions,
@@ -79,8 +79,8 @@ export const InvitationsTable = ({
   invitationButtonOptions,
   invitationExpiryDateField,
   invitations,
-  onInvitationDeleted,
   onInvitationAdded,
+  onInvitationDeleted,
   onInvitationResent,
   onInvitationRevoked,
   prepareInvitationData,
@@ -102,7 +102,7 @@ export const InvitationsTable = ({
 }: InvitationsTableProperties) => {
   const config = useConfig();
 
-  const { t, i18n } = useTranslation("invitations");
+  const { i18n, t } = useTranslation("invitations");
 
   const handleResendInvitation = (invitation: Invitation) => {
     resendInvitation(invitation.id, config.apiBaseUrl)
@@ -160,7 +160,7 @@ export const InvitationsTable = ({
       });
   };
 
-  const isExpired = (date?: string | Date | number) => {
+  const isExpired = (date?: Date | number | string) => {
     return !!(date && new Date(date) < new Date());
   };
 
@@ -203,10 +203,10 @@ export const InvitationsTable = ({
             <>
               {roles?.map((role: string, index: number) => (
                 <Tag
-                  key={role + index}
-                  label={role}
                   color={role === "ADMIN" ? "default" : "green"}
                   fullWidth
+                  key={role + index}
+                  label={role}
                 />
               ))}
             </>
@@ -217,9 +217,9 @@ export const InvitationsTable = ({
 
         return (
           <Tag
-            label={role}
             color={role === "ADMIN" ? "default" : "green"}
             fullWidth
+            label={role}
           />
         );
       },
@@ -256,7 +256,7 @@ export const InvitationsTable = ({
       accessorKey: "status",
       align: "center",
       cell: ({ row: { original } }) => {
-        const { acceptedAt, revokedAt, expiresAt } = original;
+        const { acceptedAt, expiresAt, revokedAt } = original;
 
         const getLabel = () => {
           if (acceptedAt) {
@@ -290,7 +290,7 @@ export const InvitationsTable = ({
           return "yellow";
         };
 
-        return <Tag label={getLabel()} color={getColor()} fullWidth />;
+        return <Tag color={getColor()} fullWidth label={getLabel()} />;
       },
       enableColumnFilter: true,
       filterPlaceholder: t("table.placeholders.status"),
@@ -321,8 +321,8 @@ export const InvitationsTable = ({
           <InvitationModal
             additionalInvitationFields={additionalInvitationFields}
             apps={apps}
-            invitationButtonOptions={invitationButtonOptions}
             expiryDateField={invitationExpiryDateField}
+            invitationButtonOptions={invitationButtonOptions}
             onSubmitted={onInvitationAdded}
             prepareData={prepareInvitationData}
             roles={roles}
@@ -337,60 +337,60 @@ export const InvitationsTable = ({
       className={className}
       columns={[...defaultColumns, ...columns]}
       data={invitations}
-      emptyTableMessage={t("table.emptyMessage")}
-      fetchData={fetchInvitations}
-      locale={i18n?.language}
-      renderToolbarItems={showInviteAction ? renderToolbar : undefined}
-      totalRecords={totalRecords}
-      visibleColumns={visibleColumns}
-      paginationOptions={{
-        pageInputLabel: t("table.pagination.pageControl"),
-        itemsPerPageControlLabel: t("table.pagination.rowsPerPage"),
-      }}
       dataActionsMenu={{
         actions: [
           {
-            label: t("invitations.actions.resend"),
-            icon: "pi pi-replay",
+            confirmationOptions: {
+              header: t("confirmation.header"),
+              message: t("confirmation.confirm.resend.message"),
+            },
             disabled: (invitation) =>
               !!invitation.acceptedAt ||
               !!invitation.revokedAt ||
               isExpired(invitation.expiresAt),
+            icon: "pi pi-replay",
+            label: t("invitations.actions.resend"),
             onClick: (invitation) => handleResendInvitation(invitation),
             requireConfirmationModal: true,
-            confirmationOptions: {
-              message: t("confirmation.confirm.resend.message"),
-              header: t("confirmation.header"),
-            },
           },
           {
-            label: t("invitations.actions.revoke"),
-            icon: "pi pi-times",
             className: "danger",
+            confirmationOptions: {
+              header: t("confirmation.header"),
+              message: t("confirmation.confirm.revoke.message"),
+            },
             disabled: (invitation) =>
               !!invitation.acceptedAt ||
               !!invitation.revokedAt ||
               isExpired(invitation.expiresAt),
+            icon: "pi pi-times",
+            label: t("invitations.actions.revoke"),
             onClick: (invitation) => handleRevokeInvitation(invitation),
             requireConfirmationModal: true,
-            confirmationOptions: {
-              message: t("confirmation.confirm.revoke.message"),
-              header: t("confirmation.header"),
-            },
           },
           {
-            label: t("invitations.actions.delete"),
-            icon: "pi pi-trash",
             className: "danger",
-            onClick: (invitation) => handleDeleteInvitation(invitation.id),
-            requireConfirmationModal: true,
             confirmationOptions: {
-              message: t("confirmation.confirm.delete.message"),
               header: t("confirmation.header"),
+              message: t("confirmation.confirm.delete.message"),
             },
+            icon: "pi pi-trash",
+            label: t("invitations.actions.delete"),
+            onClick: (invitation) => handleDeleteInvitation(invitation.id),
+            requireConfirmationModal: true,
           },
         ],
       }}
+      emptyTableMessage={t("table.emptyMessage")}
+      fetchData={fetchInvitations}
+      locale={i18n?.language}
+      paginationOptions={{
+        itemsPerPageControlLabel: t("table.pagination.rowsPerPage"),
+        pageInputLabel: t("table.pagination.pageControl"),
+      }}
+      renderToolbarItems={showInviteAction ? renderToolbar : undefined}
+      totalRecords={totalRecords}
+      visibleColumns={visibleColumns}
       {...tableOptions}
     ></DataTable>
   );
diff --git a/packages/user/src/components/Login/LoginForm.tsx b/packages/user/src/components/Login/LoginForm.tsx
index 0bf7270b2..cffe35116 100644
--- a/packages/user/src/components/Login/LoginForm.tsx
+++ b/packages/user/src/components/Login/LoginForm.tsx
@@ -1,13 +1,13 @@
 import {
-  Provider,
   emailSchema,
   passwordSchema,
+  Provider,
 } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import * as zod from "zod";
 
-import { LoginFormFields } from "./LoginFormFields";
 import { LoginCredentials } from "../../types";
+import { LoginFormFields } from "./LoginFormFields";
 
 interface Properties {
   handleSubmit: (credentials: LoginCredentials) => void;
@@ -20,7 +20,7 @@ export const LoginForm = ({
   loading,
   onEmailChange,
 }: Properties) => {
-  const { t, i18n } = useTranslation("user");
+  const { i18n, t } = useTranslation("user");
 
   const LoginFormSchema = zod.object({
     email: emailSchema({
@@ -40,8 +40,8 @@ export const LoginForm = ({
 
   return (
     <Provider
-      validationSchema={LoginFormSchema}
       onSubmit={handleSubmit}
+      validationSchema={LoginFormSchema}
       validationTriggerKey={i18n.language}
     >
       <LoginFormFields loading={loading} onEmailChange={onEmailChange} />
diff --git a/packages/user/src/components/Login/LoginFormFields.tsx b/packages/user/src/components/Login/LoginFormFields.tsx
index 32509dcea..7ee5eb3f7 100644
--- a/packages/user/src/components/Login/LoginFormFields.tsx
+++ b/packages/user/src/components/Login/LoginFormFields.tsx
@@ -15,10 +15,10 @@ export const LoginFormFields = ({ loading, onEmailChange }: Properties) => {
   const { t } = useTranslation("user");
 
   const {
-    register,
+    formState: { errors, submitCount }, // eslint-disable-line @typescript-eslint/no-unused-vars
     getFieldState,
+    register,
     watch,
-    formState: { errors, submitCount }, // eslint-disable-line @typescript-eslint/no-unused-vars
   } = useFormContext();
 
   const emailValue = watch("email");
@@ -35,17 +35,17 @@ export const LoginFormFields = ({ loading, onEmailChange }: Properties) => {
         label={t("login.form.email.label")}
         name="email"
         placeholder={t("login.form.email.placeholder")}
-        submitCount={submitCount}
         showValidState={false}
+        submitCount={submitCount}
       />
       <Password
         autoComplete="current-password"
+        getFieldState={getFieldState}
         label={t("login.form.password.label")}
         name="password"
-        submitCount={submitCount}
         register={register}
-        getFieldState={getFieldState}
         showValidState={false}
+        submitCount={submitCount}
       />
 
       <FormActions
@@ -55,8 +55,8 @@ export const LoginFormFields = ({ loading, onEmailChange }: Properties) => {
             label: t("login.form.actions.submit"),
           },
         ]}
-        loading={loading}
         alignment="fill"
+        loading={loading}
       />
     </>
   );
diff --git a/packages/user/src/components/Login/LoginWrapper.tsx b/packages/user/src/components/Login/LoginWrapper.tsx
index 2e9505b01..93f6a90a8 100644
--- a/packages/user/src/components/Login/LoginWrapper.tsx
+++ b/packages/user/src/components/Login/LoginWrapper.tsx
@@ -6,27 +6,27 @@ import { DEFAULT_PATHS } from "@/constants";
 import { login } from "@/supertokens";
 import { LinkType } from "@/types/types";
 
-import { LoginForm } from "./LoginForm";
+import type { LoginCredentials, SignInUpPromise } from "../../types";
+
 import { useConfig, useUser } from "../../hooks";
 import { verifySessionRoles } from "../../supertokens/helpers";
 import { AuthLinks } from "../AuthLinks";
-
-import type { LoginCredentials, SignInUpPromise } from "../../types";
+import { LoginForm } from "./LoginForm";
 
 interface IProperties {
   handleSubmit?: (credential: LoginCredentials) => void;
+  loading?: boolean;
   onLoginFailed?: (error: Error) => void;
   onLoginSuccess?: (user: SignInUpPromise) => void;
-  loading?: boolean;
   showForgotPasswordLink?: boolean;
   showSignupLink?: boolean;
 }
 
 export const LoginWrapper: FC<IProperties> = ({
   handleSubmit,
+  loading,
   onLoginFailed,
   onLoginSuccess,
-  loading,
   showForgotPasswordLink = true,
   showSignupLink = true,
 }) => {
@@ -35,7 +35,7 @@ export const LoginWrapper: FC<IProperties> = ({
   const config = useConfig();
   const [loginLoading, setLoginLoading] = useState<boolean>(false);
   const [loginError, setLoginError] = useState<
-    null | "invalidCredentials" | "other"
+    "invalidCredentials" | "other" | null
   >(null);
   const [email, setEmail] = useState("");
 
diff --git a/packages/user/src/components/Profile/AccountInfo.tsx b/packages/user/src/components/Profile/AccountInfo.tsx
index c18fa9f00..22212cc3e 100644
--- a/packages/user/src/components/Profile/AccountInfo.tsx
+++ b/packages/user/src/components/Profile/AccountInfo.tsx
@@ -8,7 +8,7 @@ import { UpdateEmailModal } from "./UpdateEmailModal";
 
 export const AccountInfo = () => {
   const { t } = useTranslation("user");
-  const { user, setUser } = useUser();
+  const { setUser, user } = useUser();
   const [modalVisible, setModalVisible] = useState<boolean>(false);
   const config = useConfig();
   const canUpdateEmail = config.features?.updateEmail && !user?.thirdParty;
@@ -16,19 +16,19 @@ export const AccountInfo = () => {
   return (
     <div className="account-info">
       <Data
-        className={`${canUpdateEmail ? "update-email" : ""}`}
         caption={t("profile.accountInfo.label")}
+        className={`${canUpdateEmail ? "update-email" : ""}`}
         value={
           <>
             {user?.email}
             {canUpdateEmail && (
               <Button
-                variant="textOnly"
+                iconLeft="pi pi-pencil"
                 label={t("profile.button.update")}
+                onClick={() => setModalVisible(true)}
                 severity="secondary"
                 size="small"
-                iconLeft="pi pi-pencil"
-                onClick={() => setModalVisible(true)}
+                variant="textOnly"
               ></Button>
             )}
           </>
@@ -38,8 +38,8 @@ export const AccountInfo = () => {
         <UpdateEmailModal
           modalVisible={modalVisible}
           setModalVisible={setModalVisible}
-          user={user}
           setUser={setUser}
+          user={user}
         />
       )}
     </div>
diff --git a/packages/user/src/components/Profile/ProfileForm.tsx b/packages/user/src/components/Profile/ProfileForm.tsx
index a05adef5d..1d0f66f2b 100644
--- a/packages/user/src/components/Profile/ProfileForm.tsx
+++ b/packages/user/src/components/Profile/ProfileForm.tsx
@@ -1,4 +1,4 @@
-import { Provider, AdditionalFormFields } from "@prefabs.tech/react-form";
+import { AdditionalFormFields, Provider } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { useState } from "react";
 import { toast } from "react-toastify";
@@ -21,8 +21,8 @@ export const ProfileForm = ({
   onCancel,
   onSubmitted,
 }: Properties) => {
-  const { t, i18n } = useTranslation("user");
-  const { user, setUser } = useUser();
+  const { i18n, t } = useTranslation("user");
+  const { setUser, user } = useUser();
   const config = useConfig();
   const [submitting, setSubmitting] = useState(false);
 
@@ -68,8 +68,8 @@ export const ProfileForm = ({
   const formValues = {
     email: user?.email || "",
     givenName: user?.givenName || "",
-    surname: user?.surname || "",
     middleNames: user?.middleNames || "",
+    surname: user?.surname || "",
     ...additionalProfileFields?.defaultValues,
   };
 
@@ -81,9 +81,9 @@ export const ProfileForm = ({
       values={formValues}
     >
       <ProfileFormFields
-        submitting={submitting}
         additionalProfileFields={additionalProfileFields}
         onCancel={onCancel}
+        submitting={submitting}
       />
     </Provider>
   );
diff --git a/packages/user/src/components/Profile/ProfileFormFields.tsx b/packages/user/src/components/Profile/ProfileFormFields.tsx
index df9d399a3..1772d1d10 100644
--- a/packages/user/src/components/Profile/ProfileFormFields.tsx
+++ b/packages/user/src/components/Profile/ProfileFormFields.tsx
@@ -8,18 +8,18 @@ import { useTranslation } from "@prefabs.tech/react-i18n";
 
 interface Properties {
   additionalProfileFields?: AdditionalFormFields;
-  submitting?: boolean;
   onCancel?: () => void;
+  submitting?: boolean;
 }
 
 export const ProfileFormFields = ({
   additionalProfileFields,
-  submitting,
   onCancel,
+  submitting,
 }: Properties) => {
   const {
+    formState: { errors, isDirty, submitCount }, // eslint-disable-line @typescript-eslint/no-unused-vars
     reset,
-    formState: { errors, submitCount, isDirty }, // eslint-disable-line @typescript-eslint/no-unused-vars
   } = useFormContext();
 
   const { t } = useTranslation("user");
@@ -63,20 +63,20 @@ export const ProfileFormFields = ({
       <FormActions
         actions={[
           {
+            disabled: !isDirty,
             id: "submit",
             label: t("profile.button.update"),
-            disabled: !isDirty,
           },
           {
+            disabled: !isDirty,
             id: "cancel",
             label: t("profile.button.cancel"),
-            type: "button",
-            disabled: !isDirty,
             onClick: handleCancel,
+            type: "button",
           },
         ]}
-        loading={submitting}
         alignment="left"
+        loading={submitting}
       />
     </>
   );
diff --git a/packages/user/src/components/Profile/UpdateEmailForm.tsx b/packages/user/src/components/Profile/UpdateEmailForm.tsx
index ea232d727..661dde5ef 100644
--- a/packages/user/src/components/Profile/UpdateEmailForm.tsx
+++ b/packages/user/src/components/Profile/UpdateEmailForm.tsx
@@ -1,4 +1,4 @@
-import { Provider, emailSchema } from "@prefabs.tech/react-form";
+import { emailSchema, Provider } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Message } from "@prefabs.tech/react-ui";
 import { useState } from "react";
@@ -9,40 +9,40 @@ import { getMe } from "@/api/user";
 import { useConfig } from "@/hooks";
 import { changeEmail } from "@/supertokens";
 
-import { UpdateEmailFormFields } from "./UpdateEmailFormFields";
 import { UserType } from "../../types";
+import { UpdateEmailFormFields } from "./UpdateEmailFormFields";
+
+type ErrorType =
+  | "alreadyExist"
+  | "disabled"
+  | "duplicate"
+  | "invalid"
+  | "other";
 
 interface Properties {
   setModalVisible: (visible: boolean) => void;
-  user: UserType | null;
   setUser: (user: UserType) => void;
+  user: null | UserType;
 }
 
 type UpdateEmailFormData = {
   email: string;
 };
 
-type ErrorType =
-  | "alreadyExist"
-  | "disabled"
-  | "duplicate"
-  | "invalid"
-  | "other";
-
 const errorMessagesMap: Record<ErrorType, string> = {
   alreadyExist: "profile.accountInfo.messages.alreadyExist",
+  disabled: "profile.accountInfo.messages.disabled",
   duplicate: "profile.accountInfo.messages.duplicate",
   invalid: "profile.accountInfo.messages.invalid",
-  disabled: "profile.accountInfo.messages.disabled",
   other: "profile.accountInfo.messages.error",
 };
 
 export const UpdateEmailForm = ({
-  user,
   setModalVisible,
   setUser,
+  user,
 }: Properties) => {
-  const { t, i18n } = useTranslation("user");
+  const { i18n, t } = useTranslation("user");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<ErrorType | null>(null);
   const config = useConfig();
@@ -61,6 +61,22 @@ export const UpdateEmailForm = ({
       const response = await changeEmail(data.email, config.apiBaseUrl);
 
       switch (response?.status) {
+        case "EMAIL_ALREADY_EXISTS_ERROR": {
+          setError("alreadyExist");
+          break;
+        }
+        case "EMAIL_FEATURE_DISABLED_ERROR": {
+          setError("disabled");
+          break;
+        }
+        case "EMAIL_INVALID_ERROR": {
+          setError("invalid");
+          break;
+        }
+        case "EMAIL_SAME_AS_CURRENT_ERROR": {
+          setError("duplicate");
+          break;
+        }
         case "OK": {
           const userInfo = await getMe(config.apiBaseUrl);
           const isSameEmail = userInfo.data.email === user?.email;
@@ -75,22 +91,6 @@ export const UpdateEmailForm = ({
           setModalVisible(false);
           break;
         }
-        case "EMAIL_ALREADY_EXISTS_ERROR": {
-          setError("alreadyExist");
-          break;
-        }
-        case "EMAIL_SAME_AS_CURRENT_ERROR": {
-          setError("duplicate");
-          break;
-        }
-        case "EMAIL_INVALID_ERROR": {
-          setError("invalid");
-          break;
-        }
-        case "EMAIL_FEATURE_DISABLED_ERROR": {
-          setError("disabled");
-          break;
-        }
         default: {
           setError("other");
           break;
@@ -124,10 +124,10 @@ export const UpdateEmailForm = ({
         />
       )}
       <Provider
-        validationSchema={emailValidationSchema}
         onSubmit={handleSubmit}
-        values={formValues}
+        validationSchema={emailValidationSchema}
         validationTriggerKey={i18n.language}
+        values={formValues}
       >
         <UpdateEmailFormFields
           loading={loading}
diff --git a/packages/user/src/components/Profile/UpdateEmailFormFields.tsx b/packages/user/src/components/Profile/UpdateEmailFormFields.tsx
index 084522ee7..5307fc0e3 100644
--- a/packages/user/src/components/Profile/UpdateEmailFormFields.tsx
+++ b/packages/user/src/components/Profile/UpdateEmailFormFields.tsx
@@ -1,4 +1,4 @@
-import { Email, useFormContext, FormActions } from "@prefabs.tech/react-form";
+import { Email, FormActions, useFormContext } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 
 interface Properties {
@@ -23,15 +23,15 @@ export const UpdateEmailFormFields = ({
       <FormActions
         actions={[
           {
+            disabled: !isDirty,
             id: "submit",
             label: t("profile.button.update"),
-            disabled: !isDirty,
           },
           {
             id: "cancel",
             label: t("profile.button.cancel"),
-            type: "button",
             onClick: () => setModalVisible(false),
+            type: "button",
           },
         ]}
         alignment="right"
diff --git a/packages/user/src/components/Profile/UpdateEmailModal.tsx b/packages/user/src/components/Profile/UpdateEmailModal.tsx
index 3c223d9b7..0c6472e0c 100644
--- a/packages/user/src/components/Profile/UpdateEmailModal.tsx
+++ b/packages/user/src/components/Profile/UpdateEmailModal.tsx
@@ -1,21 +1,21 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Modal } from "@prefabs.tech/react-ui";
 
-import { UpdateEmailForm } from "./UpdateEmailForm";
 import { UserType } from "../../types";
+import { UpdateEmailForm } from "./UpdateEmailForm";
 
 interface Properties {
   modalVisible: boolean;
   setModalVisible: (visible: boolean) => void;
-  user: UserType | null;
   setUser: (user: UserType) => void;
+  user: null | UserType;
 }
 
 export const UpdateEmailModal = ({
   modalVisible,
   setModalVisible,
-  user,
   setUser,
+  user,
 }: Properties) => {
   const { t } = useTranslation("user");
 
@@ -23,13 +23,13 @@ export const UpdateEmailModal = ({
     <Modal
       className="update-email-modal"
       header={t("profile.accountInfo.title")}
-      visible={modalVisible}
       onHide={() => setModalVisible(false)}
+      visible={modalVisible}
     >
       <UpdateEmailForm
-        user={user}
         setModalVisible={setModalVisible}
         setUser={setUser}
+        user={user}
       />
     </Modal>
   );
diff --git a/packages/user/src/components/Profile/index.ts b/packages/user/src/components/Profile/index.ts
index 5b50ba776..581cc98d9 100644
--- a/packages/user/src/components/Profile/index.ts
+++ b/packages/user/src/components/Profile/index.ts
@@ -1,7 +1,7 @@
+export * from "./AccountInfo";
 export * from "./ChangePassword";
 export * from "./ProfileForm";
 export * from "./ProfileFormFields";
 export * from "./UpdateEmailForm";
 export * from "./UpdateEmailFormFields";
-export * from "./AccountInfo";
 export * from "./UpdateEmailModal";
diff --git a/packages/user/src/components/RedirectionMessage.tsx b/packages/user/src/components/RedirectionMessage.tsx
index 986eb812b..5377e3964 100644
--- a/packages/user/src/components/RedirectionMessage.tsx
+++ b/packages/user/src/components/RedirectionMessage.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 interface IProperties {
   appLink: string;
diff --git a/packages/user/src/components/ResetPasswordForm/ResetPasswordFormFields.tsx b/packages/user/src/components/ResetPasswordForm/ResetPasswordFormFields.tsx
index 53582b2bf..8d047b1fb 100644
--- a/packages/user/src/components/ResetPasswordForm/ResetPasswordFormFields.tsx
+++ b/packages/user/src/components/ResetPasswordForm/ResetPasswordFormFields.tsx
@@ -19,25 +19,25 @@ const ResetPasswordFormFields = ({
 
   const {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    formState: { errors, submitCount, isDirty },
-    register,
+    formState: { errors, isDirty, submitCount },
     getFieldState,
+    register,
   } = useFormContext();
 
   return (
     <>
       <Password
+        getFieldState={getFieldState}
         label={t("resetPassword.form.newPassword.label")}
         name="password"
         register={register}
-        getFieldState={getFieldState}
       />
       {hasConfirmPasswordFeature && (
         <Password
+          getFieldState={getFieldState}
           label={t("resetPassword.form.confirmPassword.label")}
           name="confirmPassword"
           register={register}
-          getFieldState={getFieldState}
         />
       )}
       <FormActions
@@ -47,8 +47,8 @@ const ResetPasswordFormFields = ({
             label: t("resetPassword.form.actions.submit"),
           },
         ]}
-        loading={loading}
         alignment="fill"
+        loading={loading}
       />
     </>
   );
diff --git a/packages/user/src/components/ResetPasswordForm/index.tsx b/packages/user/src/components/ResetPasswordForm/index.tsx
index 09affc77e..d9d7860ec 100644
--- a/packages/user/src/components/ResetPasswordForm/index.tsx
+++ b/packages/user/src/components/ResetPasswordForm/index.tsx
@@ -5,8 +5,8 @@ import * as zod from "zod";
 
 import { useConfig } from "@/hooks";
 
-import ResetPasswordFormFields from "./ResetPasswordFormFields";
 import { PasswordConfirmationSchema } from "../schemas";
+import ResetPasswordFormFields from "./ResetPasswordFormFields";
 
 interface Properties {
   handleSubmit: (newPassword: string) => void;
@@ -14,22 +14,22 @@ interface Properties {
 }
 
 export const ResetPasswordForm = ({ handleSubmit, loading }: Properties) => {
-  const { t, i18n } = useTranslation("user");
+  const { i18n, t } = useTranslation("user");
   const config = useConfig();
   const hasConfirmPasswordFeature = config?.features?.confirmPassword ?? false;
 
   let ResetPasswordFormSchema = zod.object({
     ...PasswordConfirmationSchema({
+      confirmPasswordRequiredMessage: t(
+        "resetPassword.messages.validation.confirmPassword",
+      ),
+      hasConfirmPasswordFeature,
       passwordRequiredMessage: t(
         "resetPassword.messages.validation.newPassword",
       ),
       passwordValidationMessage: t(
         "resetPassword.messages.validation.validationMessage",
       ),
-      confirmPasswordRequiredMessage: t(
-        "resetPassword.messages.validation.confirmPassword",
-      ),
-      hasConfirmPasswordFeature,
     }),
   });
 
@@ -47,8 +47,8 @@ export const ResetPasswordForm = ({ handleSubmit, loading }: Properties) => {
 
   return (
     <Provider
-      validationSchema={ResetPasswordFormSchema}
       onSubmit={(data) => handleSubmit(data.password)}
+      validationSchema={ResetPasswordFormSchema}
       validationTriggerKey={i18n.language}
     >
       <ResetPasswordFormFields
diff --git a/packages/user/src/components/Signup/SignupForm.tsx b/packages/user/src/components/Signup/SignupForm.tsx
index 34eec350d..6d538bd3f 100644
--- a/packages/user/src/components/Signup/SignupForm.tsx
+++ b/packages/user/src/components/Signup/SignupForm.tsx
@@ -1,28 +1,28 @@
-import { Provider, emailSchema } from "@prefabs.tech/react-form";
+import { emailSchema, Provider } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import React from "react";
 import * as zod from "zod";
 
+import type { LoginCredentials } from "../../types";
+
+import { useConfig } from "../../hooks";
 import { PasswordConfirmationSchema } from "../schemas";
 import SignupFormFields from "./SignupFormFields";
-import { useConfig } from "../../hooks";
-
-import type { LoginCredentials } from "../../types";
 
 interface Properties {
   email?: string;
+  handleSubmit: (credentials: LoginCredentials) => void;
   loading?: boolean;
   termsAndConditions?: React.ReactNode;
-  handleSubmit: (credentials: LoginCredentials) => void;
 }
 
 export const SignupForm = ({
   email,
+  handleSubmit,
   loading,
   termsAndConditions,
-  handleSubmit,
 }: Properties) => {
-  const { t, i18n } = useTranslation("user");
+  const { i18n, t } = useTranslation("user");
   const config = useConfig();
   const hasConfirmPasswordFeature = config?.features?.confirmPassword ?? false;
 
@@ -32,14 +32,14 @@ export const SignupForm = ({
       required: t("validation.messages.email"),
     }),
     ...PasswordConfirmationSchema({
-      passwordRequiredMessage: t("signup.messages.validation.password"),
-      passwordValidationMessage: t(
-        "signup.messages.validation.validationMessage",
-      ),
       confirmPasswordRequiredMessage: t(
         "signup.messages.validation.confirmPassword",
       ),
       hasConfirmPasswordFeature,
+      passwordRequiredMessage: t("signup.messages.validation.password"),
+      passwordValidationMessage: t(
+        "signup.messages.validation.validationMessage",
+      ),
     }),
     ...(config.features?.termsAndConditions?.display &&
     config.features.termsAndConditions.showCheckbox
@@ -65,13 +65,13 @@ export const SignupForm = ({
 
   return (
     <Provider
-      onSubmit={handleSubmit}
       defaultValues={{
-        password: "",
-        email: email || "",
         confirmPassword: "",
+        email: email || "",
+        password: "",
         termsAndConditions: false,
       }}
+      onSubmit={handleSubmit}
       validationSchema={SignUpFormSchema}
       validationTriggerKey={i18n.language}
     >
diff --git a/packages/user/src/components/Signup/SignupFormFields.tsx b/packages/user/src/components/Signup/SignupFormFields.tsx
index 3d87f56ce..c3ae40989 100644
--- a/packages/user/src/components/Signup/SignupFormFields.tsx
+++ b/packages/user/src/components/Signup/SignupFormFields.tsx
@@ -9,8 +9,8 @@ import { Trans, useTranslation } from "@prefabs.tech/react-i18n";
 import React, { useEffect } from "react";
 import { Link } from "react-router-dom";
 
-import { TermsAndConditions } from "./TermsAndConditions";
 import { useConfig } from "../../hooks";
+import { TermsAndConditions } from "./TermsAndConditions";
 
 interface IProperties {
   disableEmailField?: boolean;
@@ -28,10 +28,10 @@ const SignupFormFields: React.FC<IProperties> = ({
   const { t } = useTranslation("user");
   const config = useConfig();
   const {
-    register,
-    getFieldState,
-    formState: { errors, submitCount, isSubmitted },
     control,
+    formState: { errors, isSubmitted, submitCount },
+    getFieldState,
+    register,
     trigger,
     watch,
   } = useFormContext();
@@ -49,24 +49,24 @@ const SignupFormFields: React.FC<IProperties> = ({
 
   const _termsAndConditions = (
     <Trans
-      i18nKey={"signup.form.termsAndConditions"}
       components={{
         Link: external ? (
           <a
-            href={url}
-            target="_blank"
-            rel="noopener noreferrer"
             className="inline-link underlined"
             data-testid="external-link"
+            href={url}
+            rel="noopener noreferrer"
+            target="_blank"
           />
         ) : (
           <Link
-            to={url || ""}
             className="inline-link underlined"
             data-testid="internal-link"
+            to={url || ""}
           />
         ),
       }}
+      i18nKey={"signup.form.termsAndConditions"}
       t={t}
     />
   );
@@ -86,26 +86,26 @@ const SignupFormFields: React.FC<IProperties> = ({
   return (
     <>
       <Email
+        disabled={disableEmailField}
         label={t("signup.form.email.label")}
         name="email"
         placeholder={t("signup.form.email.placeholder")}
         submitCount={submitCount}
-        disabled={disableEmailField}
       />
       <Password
+        getFieldState={getFieldState}
+        helperText={t("signup.form.password.helperText")}
         label={t("signup.form.password.label")}
         name="password"
         register={register}
-        getFieldState={getFieldState}
         submitCount={submitCount}
-        helperText={t("signup.form.password.helperText")}
       />
       {hasConfirmPasswordFeature && (
         <Password
+          getFieldState={getFieldState}
           label={t("signup.form.confirmPassword.label")}
           name="confirmPassword"
           register={register}
-          getFieldState={getFieldState}
           submitCount={submitCount}
         />
       )}
@@ -120,15 +120,15 @@ const SignupFormFields: React.FC<IProperties> = ({
       <FormActions
         actions={[
           {
-            id: "submit",
             disabled:
               !!Object.values(errors).length ||
               (showTermsAndConditions && showCheckbox && !isChecked),
+            id: "submit",
             label: t("signup.form.actions.submit"),
           },
         ]}
-        loading={loading}
         alignment="fill"
+        loading={loading}
       />
     </>
   );
diff --git a/packages/user/src/components/Signup/SignupWrapper.tsx b/packages/user/src/components/Signup/SignupWrapper.tsx
index d899ac447..974609588 100644
--- a/packages/user/src/components/Signup/SignupWrapper.tsx
+++ b/packages/user/src/components/Signup/SignupWrapper.tsx
@@ -7,35 +7,35 @@ import { DEFAULT_PATHS } from "@/constants";
 import { signup } from "@/supertokens";
 import { LinkType } from "@/types/types";
 
+import type { LoginCredentials, SignInUpPromise } from "../../types";
+
+import { useConfig, useUser } from "../../hooks";
 import { AuthLinks } from "../AuthLinks";
 import { SignupForm } from "./SignupForm";
-import { useConfig, useUser } from "../../hooks";
-
-import type { LoginCredentials, SignInUpPromise } from "../../types";
 
 interface IProperties {
+  handleSubmit?: (formData: LoginCredentials) => void;
   loading?: boolean;
+  onSignupFailed?: (error: Error) => void;
+  onSignupSuccess?: (user: SignInUpPromise) => void;
   showForgotPasswordLink?: boolean;
   showLoginLink?: boolean;
   termsAndConditions?: React.ReactNode;
-  handleSubmit?: (formData: LoginCredentials) => void;
-  onSignupFailed?: (error: Error) => void;
-  onSignupSuccess?: (user: SignInUpPromise) => void;
 }
 
 export const SignupWrapper: React.FC<IProperties> = ({
-  loading,
-  showLoginLink = true,
-  showForgotPasswordLink = true,
-  termsAndConditions,
   handleSubmit,
+  loading,
   onSignupFailed,
   onSignupSuccess,
+  showForgotPasswordLink = true,
+  showLoginLink = true,
+  termsAndConditions,
 }) => {
   const { t } = useTranslation("user");
   const [signupLoading, setSignupLoading] = useState<boolean>(false);
   const [signupError, setSignupError] = useState<
-    null | "emailAlreadyExists" | "other"
+    "emailAlreadyExists" | "other" | null
   >(null);
 
   const { setUser } = useUser();
diff --git a/packages/user/src/components/Signup/TermsAndConditions.tsx b/packages/user/src/components/Signup/TermsAndConditions.tsx
index d9a829768..6a8ef4191 100644
--- a/packages/user/src/components/Signup/TermsAndConditions.tsx
+++ b/packages/user/src/components/Signup/TermsAndConditions.tsx
@@ -14,12 +14,12 @@ export const TermsAndConditions: React.FC<IProperties> = ({
 }) => {
   return hasCheckbox ? (
     <CheckboxInput
-      name={name}
-      inputLabel={label}
       className="terms-and-conditions"
+      inputLabel={label}
+      name={name}
     />
   ) : (
-    <p className="terms-and-conditions" aria-label={name}>
+    <p aria-label={name} className="terms-and-conditions">
       {label}
     </p>
   );
diff --git a/packages/user/src/components/SocialLogin/AuthSocialLoginCallback.tsx b/packages/user/src/components/SocialLogin/AuthSocialLoginCallback.tsx
index 2a085a76e..3a547832a 100644
--- a/packages/user/src/components/SocialLogin/AuthSocialLoginCallback.tsx
+++ b/packages/user/src/components/SocialLogin/AuthSocialLoginCallback.tsx
@@ -8,10 +8,10 @@ import { thirdPartySignInAndUp } from "supertokens-web-js/recipe/thirdpartyemail
 import { DEFAULT_PATHS } from "@/constants";
 import { verifySessionRoles } from "@/supertokens";
 
-import { useConfig, useUser } from "../../hooks";
-
 import type { UserType } from "../../types";
 
+import { useConfig, useUser } from "../../hooks";
+
 export const AuthSocialLoginCallback = () => {
   const { t } = useTranslation("user");
   const config = useConfig();
diff --git a/packages/user/src/components/UsersTable/AllUsersTable.tsx b/packages/user/src/components/UsersTable/AllUsersTable.tsx
index 690eafa0a..4d6786bb7 100644
--- a/packages/user/src/components/UsersTable/AllUsersTable.tsx
+++ b/packages/user/src/components/UsersTable/AllUsersTable.tsx
@@ -2,39 +2,28 @@ import { AdditionalFormFields } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import {
   TDataTable as DataTable,
-  TDataTableProperties,
-  TRequestJSON,
   IButtonProperties,
   TableColumnDefinition,
   Tag,
+  TDataTableProperties,
+  TRequestJSON,
 } from "@prefabs.tech/react-ui";
 
-import { InvitationModal } from "../Invitation";
-
 import type {
   AddInvitationResponse,
+  ExtendedUser,
   InvitationAppOption,
   InvitationRoleOption,
   ResendInvitationResponse,
   RevokeInvitationResponse,
-  ExtendedUser,
 } from "@/types";
 
-type VisibleColumn =
-  | "name"
-  | "email"
-  | "roles"
-  | "signedUpAt"
-  | "app"
-  | "invitedBy"
-  | "status"
-  | "actions"
-  | string;
+import { InvitationModal } from "../Invitation";
 
 export type AllUsersTableProperties = Partial<
   Omit<
     TDataTableProperties<ExtendedUser>,
-    "data" | "visibleColumns" | "fetchData"
+    "data" | "fetchData" | "visibleColumns"
   >
 > & {
   additionalInvitationFields?: AdditionalFormFields;
@@ -51,12 +40,23 @@ export type AllUsersTableProperties = Partial<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   prepareInvitationData?: (data: any) => any;
   roles?: Array<InvitationRoleOption>;
-  showInviteAction?: boolean;
   showAppColumn?: boolean;
+  showInviteAction?: boolean;
   users: Array<ExtendedUser>;
   visibleColumns?: VisibleColumn[];
 };
 
+type VisibleColumn =
+  | "actions"
+  | "app"
+  | "email"
+  | "invitedBy"
+  | "name"
+  | "roles"
+  | "signedUpAt"
+  | "status"
+  | string;
+
 export const AllUsersTable = ({
   additionalInvitationFields,
   apps,
@@ -90,8 +90,6 @@ export const AllUsersTable = ({
 
   const defaultColumns: Array<TableColumnDefinition<ExtendedUser>> = [
     {
-      id: "name",
-      header: t("table.defaultColumns.name"),
       accessorFn: (original) => {
         return (
           (original.givenName ? original.givenName : "") +
@@ -109,25 +107,26 @@ export const AllUsersTable = ({
       enableColumnFilter: true,
       enableSorting: true,
       filterPlaceholder: t("table.placeholders.search"),
+      header: t("table.defaultColumns.name"),
+      id: "name",
     },
     {
       accessorKey: "email",
-      header: t("table.defaultColumns.email"),
       enableColumnFilter: true,
       enableSorting: true,
       filterPlaceholder: t("table.placeholders.search"),
+      header: t("table.defaultColumns.email"),
     },
     {
       accessorKey: "app",
-      header: t("invitations:table.defaultColumns.app"),
       cell: ({ row: { original } }) => {
         return <span>{original.appId || "-"} </span>;
       },
+      header: t("invitations:table.defaultColumns.app"),
     },
     {
-      align: "center",
       accessorKey: "roles",
-      header: t("table.defaultColumns.roles"),
+      align: "center",
       cell: ({ getValue, row: { original } }) => {
         const roles = (original as unknown as { roles: string[] })?.roles;
 
@@ -136,9 +135,9 @@ export const AllUsersTable = ({
             <>
               {roles?.map((role: string, index: number) => (
                 <Tag
+                  color={role === "ADMIN" ? "default" : "green"}
                   key={role + index}
                   label={role}
-                  color={role === "ADMIN" ? "default" : "green"}
                   style={{ width: "5rem" }}
                 />
               ))}
@@ -151,18 +150,18 @@ export const AllUsersTable = ({
         return (
           <>
             <Tag
-              label={role}
               color={role === "ADMIN" ? "default" : "green"}
+              label={role}
               style={{ width: "5rem" }}
             />
           </>
         );
       },
+      header: t("table.defaultColumns.roles"),
     },
     {
-      align: "center",
       accessorKey: "status",
-      header: t("table.defaultColumns.status"),
+      align: "center",
       cell: ({ row: { original } }) => {
         const getLabel = () => {
           if (!original.isActiveUser) {
@@ -191,17 +190,17 @@ export const AllUsersTable = ({
         return (
           <>
             <Tag
-              label={getLabel()}
               color={getColor()}
+              label={getLabel()}
               style={{ width: "5rem" }}
             />
           </>
         );
       },
+      header: t("table.defaultColumns.status"),
     },
     {
       accessorKey: "invitedBy",
-      header: t("invitations:table.defaultColumns.invitedBy"),
       cell: ({ row: { original } }) => {
         if (original.isActiveUser) {
           return "-";
@@ -215,11 +214,12 @@ export const AllUsersTable = ({
 
         return original.invitedBy?.email;
       },
+      header: t("invitations:table.defaultColumns.invitedBy"),
     },
     {
       accessorKey: "signedUpAt",
-      header: t("table.defaultColumns.signedUpOn"),
       dataType: "date",
+      header: t("table.defaultColumns.signedUpOn"),
     },
   ];
 
@@ -230,8 +230,8 @@ export const AllUsersTable = ({
           <InvitationModal
             additionalInvitationFields={additionalInvitationFields}
             apps={apps}
-            onSubmitted={onInvitationAdded}
             invitationButtonOptions={invitationButtonOptions}
+            onSubmitted={onInvitationAdded}
             prepareData={prepareInvitationData}
             roles={roles}
           />
@@ -247,42 +247,32 @@ export const AllUsersTable = ({
       className={className}
       columns={[...defaultColumns, ...columns]}
       data={users}
-      emptyTableMessage={t("app:table.emptyMessage")}
-      fetchData={fetchUsers}
-      locale={i18n?.language}
-      renderToolbarItems={showInviteAction ? renderToolbar : undefined}
-      totalRecords={totalRecords}
-      visibleColumns={visibleColumns}
-      paginationOptions={{
-        pageInputLabel: t("table.pagination.pageControl"),
-        itemsPerPageControlLabel: t("table.pagination.rowsPerPage"),
-      }}
       dataActionsMenu={(user) => {
         if (user.isActiveUser) {
           return {
             actions: [
               {
-                label: t("table.actions.enable"),
-                icon: "pi pi-check",
-                disabled: (user) => !user.disabled,
-                onClick: (user) => onUserEnabled && onUserEnabled(user),
-                requireConfirmationModal: true,
                 confirmationOptions: {
-                  message: t("confirmation.enable.message"),
                   header: t("confirmation.header"),
+                  message: t("confirmation.enable.message"),
                 },
+                disabled: (user) => !user.disabled,
+                icon: "pi pi-check",
+                label: t("table.actions.enable"),
+                onClick: (user) => onUserEnabled && onUserEnabled(user),
+                requireConfirmationModal: true,
               },
               {
-                label: t("table.actions.disable"),
                 className: "danger",
-                icon: "pi pi-times",
-                disabled: (user) => user.disabled,
-                onClick: (user) => onUserDisabled && onUserDisabled(user),
-                requireConfirmationModal: true,
                 confirmationOptions: {
-                  message: t("confirmation.disable.message"),
                   header: t("confirmation.header"),
+                  message: t("confirmation.disable.message"),
                 },
+                disabled: (user) => user.disabled,
+                icon: "pi pi-times",
+                label: t("table.actions.disable"),
+                onClick: (user) => onUserDisabled && onUserDisabled(user),
+                requireConfirmationModal: true,
               },
             ],
           };
@@ -291,33 +281,43 @@ export const AllUsersTable = ({
         return {
           actions: [
             {
-              label: t("invitations:invitations.actions.resend"),
-              icon: "pi pi-replay",
+              confirmationOptions: {
+                header: t("invitations:confirmation.header"),
+                message: t("invitations:confirmation.confirm.resend.message"),
+              },
               disabled: (invitation) => !!invitation.acceptedAt,
+              icon: "pi pi-replay",
+              label: t("invitations:invitations.actions.resend"),
               onClick: (invitation: ResendInvitationResponse) =>
                 onInvitationResent && onInvitationResent(invitation),
               requireConfirmationModal: true,
-              confirmationOptions: {
-                message: t("invitations:confirmation.confirm.resend.message"),
-                header: t("invitations:confirmation.header"),
-              },
             },
             {
-              label: t("invitations:invitations.actions.revoke"),
-              icon: "pi pi-times",
               className: "danger",
+              confirmationOptions: {
+                header: t("invitations:confirmation.header"),
+                message: t("invitations:confirmation.confirm.revoke.message"),
+              },
               disabled: (invitation) => !!invitation.acceptedAt,
+              icon: "pi pi-times",
+              label: t("invitations:invitations.actions.revoke"),
               onClick: (invitation) =>
                 onInvitationRevoked && onInvitationRevoked(invitation),
               requireConfirmationModal: true,
-              confirmationOptions: {
-                message: t("invitations:confirmation.confirm.revoke.message"),
-                header: t("invitations:confirmation.header"),
-              },
             },
           ],
         };
       }}
+      emptyTableMessage={t("app:table.emptyMessage")}
+      fetchData={fetchUsers}
+      locale={i18n?.language}
+      paginationOptions={{
+        itemsPerPageControlLabel: t("table.pagination.rowsPerPage"),
+        pageInputLabel: t("table.pagination.pageControl"),
+      }}
+      renderToolbarItems={showInviteAction ? renderToolbar : undefined}
+      totalRecords={totalRecords}
+      visibleColumns={visibleColumns}
       {...tableOptions}
     ></DataTable>
   );
diff --git a/packages/user/src/components/UsersTable/UsersTable.tsx b/packages/user/src/components/UsersTable/UsersTable.tsx
index 5d5fe529a..0321c5694 100644
--- a/packages/user/src/components/UsersTable/UsersTable.tsx
+++ b/packages/user/src/components/UsersTable/UsersTable.tsx
@@ -1,42 +1,33 @@
 import { AdditionalFormFields } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import {
+  type DataActionsMenuProperties,
   TDataTable as DataTable,
-  TDataTableProperties,
-  TRequestJSON,
+  type FilterOption,
   IButtonProperties,
   TableColumnDefinition,
   Tag,
-  type DataActionsMenuProperties,
-  type FilterOption,
+  TDataTableProperties,
+  TRequestJSON,
 } from "@prefabs.tech/react-ui";
 
-import { useUser } from "@/hooks";
-
-import { useUserActions } from "./useUserActionsMethods";
-import { InvitationModal } from "../Invitation";
-
 import type {
   AddInvitationResponse,
   InvitationAppOption,
-  InvitationRoleOption,
   InvitationExpiryDateField,
+  InvitationRoleOption,
   UserType,
 } from "@/types";
 
-type VisibleColumn =
-  | "name"
-  | "email"
-  | "roles"
-  | "signedUpAt"
-  | "status"
-  | "actions"
-  | string;
+import { useUser } from "@/hooks";
+
+import { InvitationModal } from "../Invitation";
+import { useUserActions } from "./useUserActionsMethods";
 
 export type UsersTableProperties = Partial<
   Omit<
     TDataTableProperties<UserType>,
-    "data" | "dataActionsMenu" | "visibleColumns" | "fetchData"
+    "data" | "dataActionsMenu" | "fetchData" | "visibleColumns"
   >
 > & {
   additionalInvitationFields?: AdditionalFormFields;
@@ -52,18 +43,27 @@ export type UsersTableProperties = Partial<
   invitationExpiryDateField?: InvitationExpiryDateField;
   onInvitationAdded?: (response: AddInvitationResponse) => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onUserEnabled?: (data: any) => void;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onUserDisabled?: (data: any) => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onUserEnabled?: (data: any) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   prepareInvitationData?: (data: any) => any;
-  roles?: Array<InvitationRoleOption>;
   roleFilterOptions?: FilterOption[];
+  roles?: Array<InvitationRoleOption>;
   showInviteAction?: boolean;
   users: Array<UserType>;
   visibleColumns?: VisibleColumn[];
 };
 
+type VisibleColumn =
+  | "actions"
+  | "email"
+  | "name"
+  | "roles"
+  | "signedUpAt"
+  | "status"
+  | string;
+
 export const UsersTable = ({
   additionalInvitationFields,
   apps,
@@ -77,8 +77,8 @@ export const UsersTable = ({
   onUserDisabled,
   onUserEnabled,
   prepareInvitationData,
-  roles,
   roleFilterOptions,
+  roles,
   showInviteAction = true,
   totalRecords = 0,
   users,
@@ -104,22 +104,21 @@ export const UsersTable = ({
   const defaultColumns: Array<TableColumnDefinition<UserType>> = [
     {
       accessorKey: "email",
-      header: t("table.defaultColumns.email"),
-      enableSorting: true,
       enableColumnFilter: true,
+      enableSorting: true,
       filterPlaceholder: t("table.placeholders.search"),
+      header: t("table.defaultColumns.email"),
     },
     {
       accessorKey: "name",
-      header: t("table.defaultColumns.name"),
       enableColumnFilter: true,
       enableSorting: true,
       filterPlaceholder: t("table.placeholders.search"),
+      header: t("table.defaultColumns.name"),
     },
     {
-      align: "center",
       accessorKey: "roles",
-      header: t("table.defaultColumns.roles"),
+      align: "center",
       cell: ({ getValue, row: { original } }) => {
         const roles = (original as unknown as { roles: string[] })?.roles;
 
@@ -128,10 +127,10 @@ export const UsersTable = ({
             <>
               {roles?.map((role: string, index: number) => (
                 <Tag
-                  key={role + index}
-                  label={role}
                   color={role === "ADMIN" ? "default" : "green"}
                   fullWidth
+                  key={role + index}
+                  label={role}
                 />
               ))}
             </>
@@ -143,52 +142,52 @@ export const UsersTable = ({
         return (
           <>
             <Tag
-              label={role}
               color={role === "ADMIN" ? "default" : "green"}
               fullWidth
+              label={role}
             />
           </>
         );
       },
-      enableSorting: true,
       enableColumnFilter: true,
+      enableSorting: true,
+      filterPlaceholder: t("table.placeholders.roles"),
+      header: t("table.defaultColumns.roles"),
       meta: {
-        filterVariant: "multiselect",
         filterOptions: roleFilterOptions,
+        filterVariant: "multiselect",
       },
-      filterPlaceholder: t("table.placeholders.roles"),
     },
     {
       accessorKey: "signedUpAt",
-      header: t("table.defaultColumns.signedUpOn"),
       dataType: "date",
-      enableSorting: true,
       enableColumnFilter: true,
+      enableSorting: true,
+      filterPlaceholder: t("table.placeholders.date"),
+      header: t("table.defaultColumns.signedUpOn"),
       meta: {
         filterVariant: "dateRange",
         serverFilterFn: "between",
       },
-      filterPlaceholder: t("table.placeholders.date"),
     },
     {
-      align: "center",
       accessorKey: "disabled",
-      header: t("table.defaultColumns.status"),
+      align: "center",
       cell: ({ row: { original } }) => {
         const color = original.disabled ? "red" : "green";
 
         return (
           <Tag
+            color={color}
+            fullWidth
             label={
               original.disabled ? t("status.disabled") : t("status.enabled")
             }
-            color={color}
-            fullWidth
           />
         );
       },
-      enableSorting: true,
       enableColumnFilter: true,
+      enableSorting: true,
       filterFn: (row, columnId, filterValue) => {
         if (!filterValue || filterValue.length === 0) {
           return true;
@@ -197,10 +196,10 @@ export const UsersTable = ({
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const updatedFilterValue = filterValue.map((value: any) => {
           switch (value) {
-            case "true":
-              return true;
             case "false":
               return false;
+            case "true":
+              return true;
             default:
               return value;
           }
@@ -210,51 +209,52 @@ export const UsersTable = ({
 
         return updatedFilterValue.includes(cellValue);
       },
+      filterPlaceholder: t("table.placeholders.status"),
+      header: t("table.defaultColumns.status"),
       meta: {
-        filterVariant: "multiselect",
         filterOptions: [
           {
-            value: "false",
             label: t("status.enabled"),
+            value: "false",
           },
           {
-            value: "true",
             label: t("status.disabled"),
+            value: "true",
           },
         ],
+        filterVariant: "multiselect",
       },
-      filterPlaceholder: t("table.placeholders.status"),
     },
   ];
 
   const defaultActionsMenu: DataActionsMenuProperties<UserType> = {
     actions: [
       {
-        key: "enableUser",
-        label: t("table.actions.enable"),
-        icon: "pi pi-check",
+        confirmationOptions: {
+          header: t("confirmation.header"),
+          message: t("confirmation.enable.message"),
+        },
         disabled: (user) => !user.disabled,
         display: (user) => user.disabled && currentUser?.id !== user.id,
+        icon: "pi pi-check",
+        key: "enableUser",
+        label: t("table.actions.enable"),
         onClick: (user) => handleEnableUser(user),
         requireConfirmationModal: true,
-        confirmationOptions: {
-          message: t("confirmation.enable.message"),
-          header: t("confirmation.header"),
-        },
       },
       {
-        key: "disableUser",
-        label: t("table.actions.disable"),
         className: "danger",
-        icon: "pi pi-times",
+        confirmationOptions: {
+          header: t("confirmation.header"),
+          message: t("confirmation.disable.message"),
+        },
         disabled: (user) => user.disabled,
         display: (user) => !user.disabled && currentUser?.id !== user.id,
+        icon: "pi pi-times",
+        key: "disableUser",
+        label: t("table.actions.disable"),
         onClick: (user) => handleDisableUser(user),
         requireConfirmationModal: true,
-        confirmationOptions: {
-          message: t("confirmation.disable.message"),
-          header: t("confirmation.header"),
-        },
       },
     ],
   };
@@ -289,16 +289,6 @@ export const UsersTable = ({
       className={className}
       columns={[...defaultColumns, ...columns]}
       data={users}
-      emptyTableMessage={t("app:table.emptyMessage")}
-      fetchData={fetchUsers}
-      locale={i18n?.language}
-      renderToolbarItems={showInviteAction ? renderToolbar : undefined}
-      totalRecords={totalRecords}
-      visibleColumns={visibleColumns}
-      paginationOptions={{
-        pageInputLabel: t("table.pagination.pageControl"),
-        itemsPerPageControlLabel: t("table.pagination.rowsPerPage"),
-      }}
       dataActionsMenu={
         dataActionsMenu
           ? typeof dataActionsMenu === "function"
@@ -306,6 +296,16 @@ export const UsersTable = ({
             : dataActionsMenu
           : filteredActionMenu
       }
+      emptyTableMessage={t("app:table.emptyMessage")}
+      fetchData={fetchUsers}
+      locale={i18n?.language}
+      paginationOptions={{
+        itemsPerPageControlLabel: t("table.pagination.rowsPerPage"),
+        pageInputLabel: t("table.pagination.pageControl"),
+      }}
+      renderToolbarItems={showInviteAction ? renderToolbar : undefined}
+      totalRecords={totalRecords}
+      visibleColumns={visibleColumns}
       {...tableProperties}
     ></DataTable>
   );
diff --git a/packages/user/src/components/UsersTable/index.ts b/packages/user/src/components/UsersTable/index.ts
index 3af0954ee..916f44e40 100644
--- a/packages/user/src/components/UsersTable/index.ts
+++ b/packages/user/src/components/UsersTable/index.ts
@@ -1,2 +1,2 @@
-export * from "./UsersTable";
 export * from "./AllUsersTable";
+export * from "./UsersTable";
diff --git a/packages/user/src/components/__test__/LoginForm.test.tsx b/packages/user/src/components/__test__/LoginForm.test.tsx
index 1cb5ea820..e38c6185c 100644
--- a/packages/user/src/components/__test__/LoginForm.test.tsx
+++ b/packages/user/src/components/__test__/LoginForm.test.tsx
@@ -1,4 +1,4 @@
-import { render, fireEvent, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import React from "react";
 import { expect, test, vi } from "vitest";
 
diff --git a/packages/user/src/components/__test__/SignupForm.snapshot.test.tsx b/packages/user/src/components/__test__/SignupForm.snapshot.test.tsx
index 04d89f8d2..860407d73 100644
--- a/packages/user/src/components/__test__/SignupForm.snapshot.test.tsx
+++ b/packages/user/src/components/__test__/SignupForm.snapshot.test.tsx
@@ -8,8 +8,8 @@ import { UserConfig } from "@/types";
 import { SignupForm } from "../Signup";
 
 const config = {
-  supportedRoles: ["USER"],
   socialLoginProviders: ["google"],
+  supportedRoles: ["USER"],
 };
 
 test("Component matches snapshot", () => {
diff --git a/packages/user/src/components/__test__/SignupForm.test.tsx b/packages/user/src/components/__test__/SignupForm.test.tsx
index de7bbc9c7..ab0974dca 100644
--- a/packages/user/src/components/__test__/SignupForm.test.tsx
+++ b/packages/user/src/components/__test__/SignupForm.test.tsx
@@ -1,4 +1,4 @@
-import { render, fireEvent, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import React, { act } from "react";
 import { expect, test, vi } from "vitest";
@@ -9,11 +9,11 @@ import { UserConfig } from "@/types";
 import { SignupForm } from "../Signup";
 
 const config = {
-  supportedRoles: ["USER"],
-  socialLoginProviders: ["google"],
   features: {
     confirmPassword: true,
   },
+  socialLoginProviders: ["google"],
+  supportedRoles: ["USER"],
 };
 
 const setup = (component: React.ReactElement) => {
diff --git a/packages/user/src/components/index.ts b/packages/user/src/components/index.ts
index bf1e7f32e..1c939d13b 100644
--- a/packages/user/src/components/index.ts
+++ b/packages/user/src/components/index.ts
@@ -1,12 +1,12 @@
 export * from "./AuthLinks";
 export * from "./ChangePasswordForm";
-export * from "./SocialLogin";
 export * from "./ForgotPasswordForm";
 export * from "./Invitation";
 export * from "./Login";
 export * from "./Profile";
 export * from "./RedirectionMessage";
 export * from "./ResetPasswordForm";
+export * from "./schemas";
 export * from "./Signup";
+export * from "./SocialLogin";
 export * from "./UsersTable";
-export * from "./schemas";
diff --git a/packages/user/src/constants.ts b/packages/user/src/constants.ts
index b07084f8c..c7139b5d9 100644
--- a/packages/user/src/constants.ts
+++ b/packages/user/src/constants.ts
@@ -7,17 +7,25 @@ export enum DEFAULT_PATHS {
   ACCEPT_INVITATION = "/signup/token/:token",
   AUTH_CALLBACK_FACEBOOK = "/auth/callback/facebook",
   AUTH_CALLBACK_GOOGLE = "/auth/callback/google",
+  // authenticated routes
+  CHANGE_PASSWORD = "/change-password",
+  EMAIL_VERIFICATION_REMINDER = "/email-verification-reminder",
+  EMAIL_VERIFICATION_VERIFY = "/verify-email",
   FORGOT_PASSWORD = "/forgot-password",
   LOGIN = "/login",
+
+  PROFILE = "/profile",
   RESET_PASSWORD = "/reset-password",
   SIGNUP = "/signup",
   SIGNUP_FIRST_USER = "/signup-first-user",
+}
 
-  // authenticated routes
-  CHANGE_PASSWORD = "/change-password",
-  EMAIL_VERIFICATION_REMINDER = "/email-verification-reminder",
-  EMAIL_VERIFICATION_VERIFY = "/verify-email",
-  PROFILE = "/profile",
+export enum EMAIL_VERIFICATION {
+  EMAIL_ALREADY_VERIFIED = "EMAIL_ALREADY_VERIFIED",
+  EMAIL_ALREADY_VERIFIED_ERROR = "EMAIL_ALREADY_VERIFIED_ERROR",
+  EMAIL_VERIFICATION_INVALID_TOKEN_ERROR = "EMAIL_VERIFICATION_INVALID_TOKEN_ERROR",
+  ERROR = "ERROR",
+  OK = "OK",
 }
 
 export enum INVITATION_ERRORS {
@@ -27,11 +35,3 @@ export enum INVITATION_ERRORS {
   ROLE_NOT_SUPPORTED = "ROLE_NOT_SUPPORTED_ERROR",
   USER_ALREADY_EXISTS = "USER_ALREADY_EXISTS_ERROR",
 }
-
-export enum EMAIL_VERIFICATION {
-  EMAIL_ALREADY_VERIFIED = "EMAIL_ALREADY_VERIFIED",
-  ERROR = "ERROR",
-  OK = "OK",
-  EMAIL_ALREADY_VERIFIED_ERROR = "EMAIL_ALREADY_VERIFIED_ERROR",
-  EMAIL_VERIFICATION_INVALID_TOKEN_ERROR = "EMAIL_VERIFICATION_INVALID_TOKEN_ERROR",
-}
diff --git a/packages/user/src/context/ConfigProvider.tsx b/packages/user/src/context/ConfigProvider.tsx
index 6e79ef882..07e37b288 100644
--- a/packages/user/src/context/ConfigProvider.tsx
+++ b/packages/user/src/context/ConfigProvider.tsx
@@ -7,7 +7,7 @@ interface Properties {
   config: UserConfig;
 }
 
-const configContext = createContext<UserConfig | undefined>(undefined);
+const configContext = createContext<undefined | UserConfig>(undefined);
 
 const ConfigProvider = ({ children, config }: Properties) => {
   return (
diff --git a/packages/user/src/context/UserProvider.tsx b/packages/user/src/context/UserProvider.tsx
index e3d472fe9..83459f906 100644
--- a/packages/user/src/context/UserProvider.tsx
+++ b/packages/user/src/context/UserProvider.tsx
@@ -15,10 +15,10 @@ interface Properties {
   children: React.ReactNode;
 }
 
-const userContext = createContext<UserContextType | null>(null);
+const userContext = createContext<null | UserContextType>(null);
 
 const UserProvider = ({ children }: Properties) => {
-  const [user, setUser] = useState<UserType | null>(null);
+  const [user, setUser] = useState<null | UserType>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const config = useConfig();
 
@@ -52,7 +52,7 @@ const UserProvider = ({ children }: Properties) => {
     getUser();
   }, []);
 
-  const updateUser = async (_user: UserType | null) => {
+  const updateUser = async (_user: null | UserType) => {
     if (_user) {
       const userData = {
         ..._user,
@@ -74,7 +74,7 @@ const UserProvider = ({ children }: Properties) => {
   };
 
   return (
-    <userContext.Provider value={{ user, loading, setUser: updateUser }}>
+    <userContext.Provider value={{ loading, setUser: updateUser, user }}>
       {loading ? null : children}
     </userContext.Provider>
   );
diff --git a/packages/user/src/helpers/index.ts b/packages/user/src/helpers/index.ts
index b6a7932b5..ab36ba2d0 100644
--- a/packages/user/src/helpers/index.ts
+++ b/packages/user/src/helpers/index.ts
@@ -6,7 +6,7 @@ export const setUserData = (data: UserType) => {
   localStorage.setItem(USER_KEY, JSON.stringify(data));
 };
 
-export const getUserData = (): UserType | null => {
+export const getUserData = (): null | UserType => {
   const savedUser = localStorage.getItem(USER_KEY);
 
   return savedUser ? JSON.parse(savedUser) : null;
diff --git a/packages/user/src/hooks/useFirstUserSignup.ts b/packages/user/src/hooks/useFirstUserSignup.ts
index a0f62744d..b55d24856 100644
--- a/packages/user/src/hooks/useFirstUserSignup.ts
+++ b/packages/user/src/hooks/useFirstUserSignup.ts
@@ -5,19 +5,19 @@ import { getIsFirstUser } from "@/api/user";
 import { DEFAULT_PATHS } from "@/constants";
 import { UserConfig } from "@/types/config";
 
-type UseFirstUserSignupArguments = {
-  config: UserConfig;
-} & (
+type UseFirstUserSignupArguments = (
   | { autoRedirect: false; redirectFn: undefined }
   | {
       autoRedirect: true;
       redirectFn: ((to?: string) => void) | NavigateFunction;
     }
-);
+) & {
+  config: UserConfig;
+};
 
 export const useFirstUserSignup = ({
-  config,
   autoRedirect = false,
+  config,
   redirectFn,
 }: UseFirstUserSignupArguments) => {
   const [redirecting, setRedirecting] = useState<boolean | null>(null);
diff --git a/packages/user/src/hooks/useUserNavigationMenu.ts b/packages/user/src/hooks/useUserNavigationMenu.ts
index 4bd839721..d8d6d6ffd 100644
--- a/packages/user/src/hooks/useUserNavigationMenu.ts
+++ b/packages/user/src/hooks/useUserNavigationMenu.ts
@@ -1,3 +1,9 @@
+import type {
+  NavGroupType,
+  NavItemType,
+  NavMenuItemType,
+} from "@prefabs.tech/react-ui";
+
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { useNavigate } from "react-router-dom";
 
@@ -7,29 +13,23 @@ import { logout } from "@/supertokens";
 import { useConfig } from "./useConfig";
 import { useUser } from "./useUser";
 
-import type {
-  NavGroupType,
-  NavItemType,
-  NavMenuItemType,
-} from "@prefabs.tech/react-ui";
-
 interface Properties {
-  authNavigationMenu?: NavMenuItemType;
   addAuthNavigationMenu: boolean;
-  userNavigationMenu?: NavMenuItemType;
+  authNavigationMenu?: NavMenuItemType;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onLogout?: () => Promise<any>;
+  userNavigationMenu?: NavMenuItemType;
 }
 
 export const useUserNavigationMenu = ({
-  authNavigationMenu,
   addAuthNavigationMenu,
-  userNavigationMenu,
+  authNavigationMenu,
   onLogout,
+  userNavigationMenu,
 }: Properties) => {
   const { t } = useTranslation("user");
 
-  const { user, setUser } = useUser();
+  const { setUser, user } = useUser();
 
   const config = useConfig();
 
@@ -66,19 +66,19 @@ export const useUserNavigationMenu = ({
 
   if (!userNavigationMenu) {
     return {
-      menu: [signoutRoute],
       className: "dz-user-menu",
+      menu: [signoutRoute],
     };
   }
 
   const _userNavigationMenu = userNavigationMenu.menu.filter(
-    (item: NavItemType | NavGroupType) =>
+    (item: NavGroupType | NavItemType) =>
       !(isSocialLogin && "route" in item && item.route === changePasswordPath),
   );
 
   return {
     ...userNavigationMenu,
-    menu: [..._userNavigationMenu, signoutRoute],
     className: `dz-user-menu ${userNavigationMenu.className || ""}`.trim(),
+    menu: [..._userNavigationMenu, signoutRoute],
   };
 };
diff --git a/packages/user/src/index.ts b/packages/user/src/index.ts
index 34f76493c..d0472f505 100644
--- a/packages/user/src/index.ts
+++ b/packages/user/src/index.ts
@@ -16,19 +16,18 @@ import {
 import { DEFAULT_PATHS } from "./constants";
 import UserProvider, { userContext } from "./context/UserProvider";
 import { UserWrapper } from "./main";
-
 import "./assets/css/index.css";
 
 export {
-  // constants
-  DEFAULT_PATHS,
-
-  // main
-  UserWrapper,
-
   // components
   AllUsersTable,
   AuthSocialLoginCallback,
+
+  // constants
+  DEFAULT_PATHS,
+  // api
+  disableUser,
+  enableUser,
   InvitationForm,
   InvitationModal,
   InvitationsTable,
@@ -37,15 +36,13 @@ export {
   SignupForm,
   SignupWrapper,
   TermsAndConditions,
-  UsersTable,
-
-  // api
-  disableUser,
-  enableUser,
 
   // contexts and providers
   userContext,
   UserProvider,
+  UsersTable,
+  // main
+  UserWrapper,
 };
 
 export * from "./helpers";
diff --git a/packages/user/src/layouts/UserEnabledHeaderLayout.tsx b/packages/user/src/layouts/UserEnabledHeaderLayout.tsx
index ba719ab31..7c81aafac 100644
--- a/packages/user/src/layouts/UserEnabledHeaderLayout.tsx
+++ b/packages/user/src/layouts/UserEnabledHeaderLayout.tsx
@@ -8,27 +8,27 @@ import { useUser, useUserNavigationMenu } from "..";
 
 interface IProperties extends Omit<
   HeaderLayoutProperties,
-  "userMenuMode" | "menu"
+  "menu" | "userMenuMode"
 > {
   authNavigationMenu?: UserMenuType;
-  userNavigationMenu?: UserMenuType;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onLogout?: () => Promise<any>;
+  userNavigationMenu?: UserMenuType;
 }
 
 export const UserEnabledHeaderLayout = ({
   authNavigationMenu,
-  userNavigationMenu,
   onLogout,
+  userNavigationMenu,
   ...otherProperties
 }: IProperties) => {
   const { user } = useUser();
 
   const userMenu = useUserNavigationMenu({
-    authNavigationMenu,
     addAuthNavigationMenu: true,
-    userNavigationMenu,
+    authNavigationMenu,
     onLogout,
+    userNavigationMenu,
   });
 
   return (
diff --git a/packages/user/src/layouts/UserEnabledSidebarHeaderLayout.tsx b/packages/user/src/layouts/UserEnabledSidebarHeaderLayout.tsx
index 2df916c3d..df396d5cc 100644
--- a/packages/user/src/layouts/UserEnabledSidebarHeaderLayout.tsx
+++ b/packages/user/src/layouts/UserEnabledSidebarHeaderLayout.tsx
@@ -10,9 +10,9 @@ import { useUserNavigationMenu } from "..";
 
 interface Properties extends SidebarHeaderLayoutProperties {
   authNavigationMenu?: UserMenuType;
-  userNavigationMenu?: UserMenuType;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onLogout?: () => Promise<any>;
+  userNavigationMenu?: UserMenuType;
 }
 
 export const UserEnabledSidebarHeaderLayout: React.FC<Properties> = ({
@@ -21,19 +21,19 @@ export const UserEnabledSidebarHeaderLayout: React.FC<Properties> = ({
   className,
   collapsible,
   navigationMenu,
-  userNavigationMenu,
   onLogout,
   userMenuLocation = "header",
   userMenuMode,
+  userNavigationMenu,
   ...otherProperties
 }) => {
   const { user } = useUser();
 
   const userMenu = useUserNavigationMenu({
-    authNavigationMenu,
     addAuthNavigationMenu: false,
-    userNavigationMenu,
+    authNavigationMenu,
     onLogout,
+    userNavigationMenu,
   });
 
   return (
diff --git a/packages/user/src/layouts/UserEnabledSidebarOnlyLayout.tsx b/packages/user/src/layouts/UserEnabledSidebarOnlyLayout.tsx
index bd34d2f40..5bf1e704e 100644
--- a/packages/user/src/layouts/UserEnabledSidebarOnlyLayout.tsx
+++ b/packages/user/src/layouts/UserEnabledSidebarOnlyLayout.tsx
@@ -1,39 +1,39 @@
-import { SidebarOnlyLayout } from "@prefabs.tech/react-layout";
-
-import { useUserNavigationMenu } from "..";
-
 import type {
   SidebarOnlyLayoutProperties,
   UserMenuType,
 } from "@prefabs.tech/react-layout";
 
+import { SidebarOnlyLayout } from "@prefabs.tech/react-layout";
+
+import { useUserNavigationMenu } from "..";
+
 interface Properties extends Omit<SidebarOnlyLayoutProperties, "userMenu"> {
   authNavigationMenu?: UserMenuType;
-  userNavigationMenu?: UserMenuType;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onLogout?: () => Promise<any>;
+  userNavigationMenu?: UserMenuType;
 }
 
 export const UserEnabledSidebarOnlyLayout: React.FC<Properties> = ({
   authNavigationMenu,
   children,
   className,
-  customSidebar,
   collapsible,
+  customSidebar,
   displayNavIcons,
   navigationMenu,
-  noSidebarHeader,
-  noSidebarFooter,
   noLocaleSwitcher,
-  userNavigationMenu,
-  userMenuMode,
+  noSidebarFooter,
+  noSidebarHeader,
   onLogout,
+  userMenuMode,
+  userNavigationMenu,
 }) => {
   const userMenu = useUserNavigationMenu({
-    authNavigationMenu,
     addAuthNavigationMenu: true,
-    userNavigationMenu,
+    authNavigationMenu,
     onLogout,
+    userNavigationMenu,
   });
 
   return (
@@ -41,12 +41,12 @@ export const UserEnabledSidebarOnlyLayout: React.FC<Properties> = ({
       children={children}
       className={className}
       collapsible={collapsible}
+      customSidebar={customSidebar}
       displayNavIcons={displayNavIcons}
       navigationMenu={navigationMenu}
-      customSidebar={customSidebar}
-      noSidebarHeader={noSidebarHeader}
-      noSidebarFooter={noSidebarFooter}
       noLocaleSwitcher={noLocaleSwitcher}
+      noSidebarFooter={noSidebarFooter}
+      noSidebarHeader={noSidebarHeader}
       userMenu={userMenu}
       userMenuMode={userMenuMode}
     />
diff --git a/packages/user/src/main.tsx b/packages/user/src/main.tsx
index ced3df5bd..f7ab0ff84 100644
--- a/packages/user/src/main.tsx
+++ b/packages/user/src/main.tsx
@@ -4,7 +4,7 @@ import { registerTranslations } from "./i18n";
 import { superTokens } from "./supertokens";
 import { UserWrapperProperties } from "./types/types";
 
-export const UserWrapper = ({ config, children }: UserWrapperProperties) => {
+export const UserWrapper = ({ children, config }: UserWrapperProperties) => {
   registerTranslations();
   superTokens(config);
 
diff --git a/packages/user/src/routes/ProtectedRoutesHandler.tsx b/packages/user/src/routes/ProtectedRoutesHandler.tsx
index ef565ea3a..5bba6c764 100644
--- a/packages/user/src/routes/ProtectedRoutesHandler.tsx
+++ b/packages/user/src/routes/ProtectedRoutesHandler.tsx
@@ -10,7 +10,7 @@ export const ProtectedRoutesHandler: React.FC = () => {
   const { user } = useUser();
   const [emailVerificationEnabled, isEmailVerified] = useEmailVerification();
 
-  const { homeRoute = "/", customPaths, features } = config;
+  const { customPaths, features, homeRoute = "/" } = config;
 
   const loginPath = customPaths?.login || DEFAULT_PATHS.LOGIN;
   const profilePath = customPaths?.profile || DEFAULT_PATHS.PROFILE;
@@ -47,12 +47,12 @@ export const ProtectedRoutesHandler: React.FC = () => {
         let component;
 
         switch (location.pathname) {
-          case emailVerificationVerifyPath:
-            component = <Outlet />;
-            break;
           case emailVerificationReminderPath:
             component = !isEmailVerified ? <Outlet /> : <Navigate to={home} />;
             break;
+          case emailVerificationVerifyPath:
+            component = <Outlet />;
+            break;
           default:
             component = <Navigate to={home} />;
             break;
diff --git a/packages/user/src/routes/getUserProtectedRoutes.tsx b/packages/user/src/routes/getUserProtectedRoutes.tsx
index e47a326c4..c7b9975aa 100644
--- a/packages/user/src/routes/getUserProtectedRoutes.tsx
+++ b/packages/user/src/routes/getUserProtectedRoutes.tsx
@@ -30,29 +30,29 @@ export const getUserProtectedRoutes = (options?: ProtectedRoutesProperties) => {
 
   const protectedRoutes = [
     {
-      path: customPaths?.changePassword || DEFAULT_PATHS.CHANGE_PASSWORD,
-      element: changePassword?.element || <ChangePassword />,
       disabled: isSocialLogin,
+      element: changePassword?.element || <ChangePassword />,
+      path: customPaths?.changePassword || DEFAULT_PATHS.CHANGE_PASSWORD,
     },
     {
-      path:
-        customPaths?.emailVerificationReminder ||
-        DEFAULT_PATHS.EMAIL_VERIFICATION_REMINDER,
+      disabled: !emailVerificationEnabled,
       element: emailVerificationReminder?.element || (
         <EmailVerificationReminder />
       ),
-      disabled: !emailVerificationEnabled,
+      path:
+        customPaths?.emailVerificationReminder ||
+        DEFAULT_PATHS.EMAIL_VERIFICATION_REMINDER,
     },
     {
+      disabled: !emailVerificationEnabled,
+      element: emailVerificationVerify?.element || <VerifyEmail />,
       path:
         customPaths?.emailVerificationVerify ||
         DEFAULT_PATHS.EMAIL_VERIFICATION_VERIFY,
-      element: emailVerificationVerify?.element || <VerifyEmail />,
-      disabled: !emailVerificationEnabled,
     },
     {
-      path: customPaths?.profile || DEFAULT_PATHS.PROFILE,
       element: profile?.element || <ProfileTabsPage />,
+      path: customPaths?.profile || DEFAULT_PATHS.PROFILE,
     },
   ];
 
@@ -60,7 +60,7 @@ export const getUserProtectedRoutes = (options?: ProtectedRoutesProperties) => {
     <>
       {protectedRoutes.map((route) =>
         !route.disabled ? (
-          <Route key={route.path} path={route.path} element={route.element} />
+          <Route element={route.element} key={route.path} path={route.path} />
         ) : null,
       )}
     </>
diff --git a/packages/user/src/routes/getUserPublicRoutes.tsx b/packages/user/src/routes/getUserPublicRoutes.tsx
index 75e2a9da4..914625cc7 100644
--- a/packages/user/src/routes/getUserPublicRoutes.tsx
+++ b/packages/user/src/routes/getUserPublicRoutes.tsx
@@ -40,44 +40,44 @@ export const getUserPublicRoutes = (options?: PublicRoutesProperties) => {
 
   const publicRoutes = [
     {
-      path: customPaths?.login || DEFAULT_PATHS.LOGIN,
       element: login?.element || <Login />,
+      path: customPaths?.login || DEFAULT_PATHS.LOGIN,
     },
     {
-      path: customPaths?.signup || DEFAULT_PATHS.SIGNUP,
-      element: signup?.element || <Signup />,
       disabled: !signupEnabled,
+      element: signup?.element || <Signup />,
+      path: customPaths?.signup || DEFAULT_PATHS.SIGNUP,
     },
     {
-      path: customPaths?.signupFirstUser || DEFAULT_PATHS.SIGNUP_FIRST_USER,
-      element: signupFirstUser?.element || <SignUpFirstUser />,
       disabled: !signupFirstUserEnabled,
+      element: signupFirstUser?.element || <SignUpFirstUser />,
+      path: customPaths?.signupFirstUser || DEFAULT_PATHS.SIGNUP_FIRST_USER,
     },
     {
-      path: customPaths?.resetPassword || DEFAULT_PATHS.RESET_PASSWORD,
       element: resetPassword?.element || <ResetPassword />,
+      path: customPaths?.resetPassword || DEFAULT_PATHS.RESET_PASSWORD,
     },
     {
-      path: customPaths?.forgotPassword || DEFAULT_PATHS.FORGOT_PASSWORD,
-      element: forgotPassword?.element || <ForgotPassword />,
       disabled: !forgotPasswordEnabled,
+      element: forgotPassword?.element || <ForgotPassword />,
+      path: customPaths?.forgotPassword || DEFAULT_PATHS.FORGOT_PASSWORD,
     },
     {
+      disabled: !authCallbackFacebookEnabled,
+      element: authCallbackFacebook?.element || <AuthSocialLoginCallback />,
       path:
         customPaths?.authCallbackFacebook ||
         DEFAULT_PATHS.AUTH_CALLBACK_FACEBOOK,
-      element: authCallbackFacebook?.element || <AuthSocialLoginCallback />,
-      disabled: !authCallbackFacebookEnabled,
     },
     {
+      disabled: !authCallbackGoogleEnabled,
+      element: authCallbackGoogle?.element || <AuthSocialLoginCallback />,
       path:
         customPaths?.authCallbackGoogle || DEFAULT_PATHS.AUTH_CALLBACK_GOOGLE,
-      element: authCallbackGoogle?.element || <AuthSocialLoginCallback />,
-      disabled: !authCallbackGoogleEnabled,
     },
     {
-      path: customPaths?.acceptInvitation || DEFAULT_PATHS.ACCEPT_INVITATION,
       element: acceptInvitation?.element || <AcceptInvitation />,
+      path: customPaths?.acceptInvitation || DEFAULT_PATHS.ACCEPT_INVITATION,
     },
   ];
 
@@ -85,7 +85,7 @@ export const getUserPublicRoutes = (options?: PublicRoutesProperties) => {
     <>
       {publicRoutes.map((route) =>
         !route.disabled ? (
-          <Route key={route.path} path={route.path} element={route.element} />
+          <Route element={route.element} key={route.path} path={route.path} />
         ) : null,
       )}
     </>
diff --git a/packages/user/src/routes/index.ts b/packages/user/src/routes/index.ts
index 70fcd06fa..13ab5b402 100644
--- a/packages/user/src/routes/index.ts
+++ b/packages/user/src/routes/index.ts
@@ -1,4 +1,4 @@
-export * from "./ProtectedRoutesHandler";
-export * from "./PublicRoutesHandler";
 export * from "./getUserProtectedRoutes";
 export * from "./getUserPublicRoutes";
+export * from "./ProtectedRoutesHandler";
+export * from "./PublicRoutesHandler";
diff --git a/packages/user/src/supertokens/change-email.ts b/packages/user/src/supertokens/change-email.ts
index 6afe46568..0c4c2aade 100644
--- a/packages/user/src/supertokens/change-email.ts
+++ b/packages/user/src/supertokens/change-email.ts
@@ -16,9 +16,9 @@ export const changeEmail = async (email: string, apiBaseUrl: string) => {
     if (err.response) {
       const { data } = err.response;
 
-      return { status: data.status, message: data.message };
+      return { message: data.message, status: data.status };
     }
 
-    return { status: "ERROR", message: "Oops! Something went wrong" };
+    return { message: "Oops! Something went wrong", status: "ERROR" };
   }
 };
diff --git a/packages/user/src/supertokens/change-password.ts b/packages/user/src/supertokens/change-password.ts
index 1c39e0050..b7b5f21d0 100644
--- a/packages/user/src/supertokens/change-password.ts
+++ b/packages/user/src/supertokens/change-password.ts
@@ -8,7 +8,7 @@ export const changePassword = async (
   try {
     const response = await client(apiBaseUrl).post(
       "/change_password",
-      { oldPassword, newPassword },
+      { newPassword, oldPassword },
       {
         withCredentials: true,
       },
@@ -23,8 +23,8 @@ export const changePassword = async (
     }
 
     return {
-      status: "ERROR",
       message: errorMessage,
+      status: "ERROR",
     };
   }
 };
diff --git a/packages/user/src/supertokens/helpers.ts b/packages/user/src/supertokens/helpers.ts
index bcdfa7cee..9337c381f 100644
--- a/packages/user/src/supertokens/helpers.ts
+++ b/packages/user/src/supertokens/helpers.ts
@@ -2,9 +2,9 @@ import EmailVerification from "supertokens-web-js/recipe/emailverification";
 import Session from "supertokens-web-js/recipe/session";
 import { UserRoleClaim } from "supertokens-web-js/recipe/userroles";
 
+import { removeUserData } from "../helpers";
 import { logout } from "./logout";
 import { ProfileValidationClaim } from "./profile-validation-claim";
-import { removeUserData } from "../helpers";
 
 /**
  * Get User roles
diff --git a/packages/user/src/supertokens/index.ts b/packages/user/src/supertokens/index.ts
index 41486a5d9..7acf3ce2a 100644
--- a/packages/user/src/supertokens/index.ts
+++ b/packages/user/src/supertokens/index.ts
@@ -2,7 +2,6 @@ import { sendPasswordResetEmail } from "supertokens-web-js/recipe/thirdpartyemai
 
 export * from "./change-email";
 export * from "./change-password";
-export * from "./social-login";
 export * from "./forgot-password";
 export * from "./helpers";
 export * from "./login";
@@ -11,6 +10,7 @@ export * from "./profile-validation-claim";
 export * from "./resend-email-verification";
 export * from "./reset-password";
 export * from "./signup";
+export * from "./social-login";
 export * from "./superTokens";
 export * from "./verify-email";
 
diff --git a/packages/user/src/supertokens/login.ts b/packages/user/src/supertokens/login.ts
index 134fb34d5..95e3186d4 100644
--- a/packages/user/src/supertokens/login.ts
+++ b/packages/user/src/supertokens/login.ts
@@ -25,7 +25,7 @@ export const login = async (
       const user = response.user as UserType;
       const status = response.status;
 
-      return { user, status };
+      return { status, user };
     }
 
     if (response.status === "WRONG_CREDENTIALS_ERROR") {
diff --git a/packages/user/src/supertokens/resend-email-verification.ts b/packages/user/src/supertokens/resend-email-verification.ts
index 3e10b1ecb..8980ace27 100644
--- a/packages/user/src/supertokens/resend-email-verification.ts
+++ b/packages/user/src/supertokens/resend-email-verification.ts
@@ -1,6 +1,6 @@
 import { sendVerificationEmail } from "supertokens-web-js/recipe/emailverification";
 
-type resendEmailStatus = "OK" | "EMAIL_ALREADY_VERIFIED_ERROR";
+type resendEmailStatus = "EMAIL_ALREADY_VERIFIED_ERROR" | "OK";
 
 export const resendVerificationEmail = async (): Promise<
   resendEmailStatus | undefined
diff --git a/packages/user/src/supertokens/reset-password.ts b/packages/user/src/supertokens/reset-password.ts
index 11a649f6a..cd031ba55 100644
--- a/packages/user/src/supertokens/reset-password.ts
+++ b/packages/user/src/supertokens/reset-password.ts
@@ -1,8 +1,8 @@
 import { submitNewPassword } from "supertokens-web-js/recipe/thirdpartyemailpassword";
 
 interface IPromise {
-  status: string | undefined;
   message?: string;
+  status: string | undefined;
 }
 
 export const resetPassword = async (
@@ -32,6 +32,6 @@ export const resetPassword = async (
       errorMessage = err.message;
     }
 
-    return { status: "ERROR", message: errorMessage };
+    return { message: errorMessage, status: "ERROR" };
   }
 };
diff --git a/packages/user/src/supertokens/signup.ts b/packages/user/src/supertokens/signup.ts
index c817c5497..c14e3a09f 100644
--- a/packages/user/src/supertokens/signup.ts
+++ b/packages/user/src/supertokens/signup.ts
@@ -20,12 +20,12 @@ export const signup = async (
     user = response.user as UserType;
     status = response.status;
 
-    return { user, status };
+    return { status, user };
   } else if (response.status === "FIELD_ERROR") {
     throw {
+      message: response.formFields[0].error,
       name: response.formFields[0].id,
       status: response.status,
-      message: response.formFields[0].error,
     } as Error;
   } else {
     throw new Error();
diff --git a/packages/user/src/supertokens/superTokens.ts b/packages/user/src/supertokens/superTokens.ts
index eb3672373..874e2ddde 100644
--- a/packages/user/src/supertokens/superTokens.ts
+++ b/packages/user/src/supertokens/superTokens.ts
@@ -21,10 +21,10 @@ export const superTokens = (config: UserConfig) => {
 
   SuperTokens.init({
     appInfo: {
-      appName: config.supertokens.appName,
-      apiDomain: config.supertokens.apiDomain,
       apiBasePath:
         config.supertokens.apiBasePath || SUPERTOKENS_API_BASE_PATH_DEFAULT,
+      apiDomain: config.supertokens.apiDomain,
+      appName: config.supertokens.appName,
     },
     recipeList: recipeLists,
   });
diff --git a/packages/user/src/supertokens/verify-email.ts b/packages/user/src/supertokens/verify-email.ts
index 979332967..c45c04613 100644
--- a/packages/user/src/supertokens/verify-email.ts
+++ b/packages/user/src/supertokens/verify-email.ts
@@ -1,7 +1,7 @@
 import EmailVerification from "supertokens-web-js/recipe/emailverification";
 
 interface IPromise {
-  status: "OK" | "EMAIL_VERIFICATION_INVALID_TOKEN_ERROR" | undefined;
+  status: "EMAIL_VERIFICATION_INVALID_TOKEN_ERROR" | "OK" | undefined;
 }
 
 export const verifyEmail = async (): Promise<IPromise | undefined> => {
diff --git a/packages/user/src/types/config.ts b/packages/user/src/types/config.ts
index d1fb586b9..f3641c0b4 100644
--- a/packages/user/src/types/config.ts
+++ b/packages/user/src/types/config.ts
@@ -38,9 +38,9 @@ export interface UserConfig {
   logoutRedirectRoute?: string;
   socialLoginProviders?: SocialLoginType[];
   supertokens: {
-    appName: string;
-    apiDomain: string;
     apiBasePath?: string;
+    apiDomain: string;
+    appName: string;
     sessionConfig?: Session.UserInput;
     thirdPartyEmailPasswordConfig?: ThirdPartyEmailPassword.UserInput;
   };
diff --git a/packages/user/src/types/invitation.ts b/packages/user/src/types/invitation.ts
index 79e9c14b0..b56855f9e 100644
--- a/packages/user/src/types/invitation.ts
+++ b/packages/user/src/types/invitation.ts
@@ -1,13 +1,16 @@
 import { ErrorResponse } from "./types";
 
-export interface InvitationPayload {
-  email: string;
-  role: string;
-  appId?: number;
-}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AcceptInvitationResponse = any | ErrorResponse;
+
+export type AddInvitationResponse = ErrorResponse | Invitation;
+
+export type DeleteInvitationResponse = ErrorResponse | Invitation;
+
+export type GetInvitationResponse = ErrorResponse | Invitation;
 
 export interface Invitation {
-  acceptedAt: number | null;
+  acceptedAt: null | number;
   appId: number;
   createdAt: number;
   email: string;
@@ -16,23 +19,18 @@ export interface Invitation {
   invitedById: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   payload: any;
-  revokedAt: number | null;
+  revokedAt: null | number;
   role: string;
   token?: string;
   updatedAt: number;
 }
 
-export interface InvitationRoleOption {
-  name: string;
-  id: number;
-}
-
 export interface InvitationAppOption {
   id: number;
+  label?: string;
   name: string;
   origin: string;
   supportedRoles: InvitationRoleOption[];
-  label?: string;
 }
 
 export interface InvitationExpiryDateField {
@@ -40,15 +38,17 @@ export interface InvitationExpiryDateField {
   mode: "calendar" | "input";
 }
 
-export type AddInvitationResponse = Invitation | ErrorResponse;
-
-export type DeleteInvitationResponse = Invitation | ErrorResponse;
-
-export type ResendInvitationResponse = Invitation | ErrorResponse;
+export interface InvitationPayload {
+  appId?: number;
+  email: string;
+  role: string;
+}
 
-export type RevokeInvitationResponse = Invitation | ErrorResponse;
+export interface InvitationRoleOption {
+  id: number;
+  name: string;
+}
 
-export type GetInvitationResponse = Invitation | ErrorResponse;
+export type ResendInvitationResponse = ErrorResponse | Invitation;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AcceptInvitationResponse = any | ErrorResponse;
+export type RevokeInvitationResponse = ErrorResponse | Invitation;
diff --git a/packages/user/src/types/routes.ts b/packages/user/src/types/routes.ts
index 32e12f375..93e5dcd71 100644
--- a/packages/user/src/types/routes.ts
+++ b/packages/user/src/types/routes.ts
@@ -2,11 +2,7 @@ import React from "react";
 
 import { UserType } from "./types";
 
-export type HomeRoute = string | ((user: UserType) => string);
-
-export type RouteOverwrite = {
-  element?: React.ReactNode;
-};
+export type HomeRoute = ((user: UserType) => string) | string;
 
 export type ProtectedRouteOverwrites = {
   changePassword?: RouteOverwrite;
@@ -15,6 +11,10 @@ export type ProtectedRouteOverwrites = {
   profile?: RouteOverwrite;
 };
 
+export type ProtectedRoutesProperties = {
+  routes?: ProtectedRouteOverwrites;
+};
+
 export type PublicRouteOverwrites = {
   acceptInvitation?: RouteOverwrite;
   authCallbackFacebook?: RouteOverwrite;
@@ -26,10 +26,10 @@ export type PublicRouteOverwrites = {
   signupFirstUser?: RouteOverwrite;
 };
 
-export type ProtectedRoutesProperties = {
-  routes?: ProtectedRouteOverwrites;
-};
-
 export type PublicRoutesProperties = {
   routes?: PublicRouteOverwrites;
 };
+
+export type RouteOverwrite = {
+  element?: React.ReactNode;
+};
diff --git a/packages/user/src/types/types.ts b/packages/user/src/types/types.ts
index dc752d6de..d30834fed 100644
--- a/packages/user/src/types/types.ts
+++ b/packages/user/src/types/types.ts
@@ -2,49 +2,10 @@ import { EmailPasswordUserType } from "supertokens-web-js/recipe/thirdpartyemail
 
 import { UserConfig } from "./config";
 
-export interface UserType extends EmailPasswordUserType {
-  disabled?: boolean;
-  givenName: string | null;
-  isEmailVerified?: boolean;
-  isProfileCompleted?: boolean;
-  lastLoginAt: number;
-  middleNames: string | null;
-  roles: string[];
-  signedUpAt: number;
-  surname: string | null;
-  thirdParty?: {
-    id: string;
-    userId: string;
-  };
-}
-
-export interface UserMenuItemType {
-  icon?: string;
-  name: string;
-  onClick?: () => void;
-  route?: string;
-}
-
-export interface UserContextType {
-  loading: boolean;
-  user: UserType | null;
-  setUser: (user: UserType | null) => void;
-}
-
-export interface LoginCredentials {
-  email: string;
-  password: string;
-}
-
 export interface AuthState {
-  error: string | null;
+  error: null | string;
   loading: boolean;
-  user: UserType | undefined;
-}
-
-export interface SignInUpPromise {
-  user: UserType;
-  status: string;
+  user: undefined | UserType;
 }
 
 export interface ErrorResponse {
@@ -53,8 +14,8 @@ export interface ErrorResponse {
 
 export interface ExtendedUser extends UserType {
   appId?: number;
-  isActiveUser: boolean;
   invitedBy: UserType & { isActiveUser: boolean };
+  isActiveUser: boolean;
 }
 
 export type LinkType = {
@@ -64,16 +25,55 @@ export type LinkType = {
   to: string;
 };
 
-export type UserWrapperProperties = {
-  config: UserConfig;
-  children?: React.ReactNode;
-};
+export interface LoginCredentials {
+  email: string;
+  password: string;
+}
+
+export interface SignInUpPromise {
+  status: string;
+  user: UserType;
+}
+
+export interface UserContextType {
+  loading: boolean;
+  setUser: (user: null | UserType) => void;
+  user: null | UserType;
+}
+
+export interface UserMenuItemType {
+  icon?: string;
+  name: string;
+  onClick?: () => void;
+  route?: string;
+}
 
 export type UserSignupPayload = {
+  [key: string]: Array<{ id: string; value: null | number | string }>;
+} & {
   formFields: Array<{
     id: "email" | "password";
     value: string;
   }>;
-} & {
-  [key: string]: Array<{ id: string; value: string | number | null }>;
+};
+
+export interface UserType extends EmailPasswordUserType {
+  disabled?: boolean;
+  givenName: null | string;
+  isEmailVerified?: boolean;
+  isProfileCompleted?: boolean;
+  lastLoginAt: number;
+  middleNames: null | string;
+  roles: string[];
+  signedUpAt: number;
+  surname: null | string;
+  thirdParty?: {
+    id: string;
+    userId: string;
+  };
+}
+
+export type UserWrapperProperties = {
+  children?: React.ReactNode;
+  config: UserConfig;
 };
diff --git a/packages/user/src/views/AcceptInvitation.tsx b/packages/user/src/views/AcceptInvitation.tsx
index 0dee26c60..e3cbeaf71 100644
--- a/packages/user/src/views/AcceptInvitation.tsx
+++ b/packages/user/src/views/AcceptInvitation.tsx
@@ -124,9 +124,9 @@ export const AcceptInvitation = ({
 
     return (
       <SignupForm
-        key={invitation.id}
         email={invitation.email || ""}
         handleSubmit={handleSubmit}
+        key={invitation.id}
         loading={acceptInvitationLoading}
       />
     );
@@ -134,10 +134,10 @@ export const AcceptInvitation = ({
 
   return (
     <AuthPage
+      centered={centered}
       className="signup"
-      title={t("user:signup.title")}
       loading={loading || loginLoading}
-      centered={centered}
+      title={t("user:signup.title")}
     >
       {renderPageContent()}
     </AuthPage>
diff --git a/packages/user/src/views/ChangePassword.tsx b/packages/user/src/views/ChangePassword.tsx
index 4d4d6142c..c38d425f8 100644
--- a/packages/user/src/views/ChangePassword.tsx
+++ b/packages/user/src/views/ChangePassword.tsx
@@ -56,9 +56,9 @@ export const ChangePassword = ({ centered = true }: { centered?: boolean }) => {
 
   return (
     <AuthPage
+      centered={centered}
       className="change-password"
       title={t("changePassword.title")}
-      centered={centered}
     >
       {error && (
         <Message
diff --git a/packages/user/src/views/EmailVerificationReminder.tsx b/packages/user/src/views/EmailVerificationReminder.tsx
index 2a0134b15..22cd0a3d7 100644
--- a/packages/user/src/views/EmailVerificationReminder.tsx
+++ b/packages/user/src/views/EmailVerificationReminder.tsx
@@ -38,9 +38,9 @@ export const EmailVerificationReminder = ({
 
   return (
     <Page
+      centered={centered}
       className="email-verification-reminder"
       title={t("emailVerification.title")}
-      centered={centered}
     >
       {isAlreadyVerified ? (
         <p>{t("emailVerification.messages.alreadyVerified")}</p>
@@ -49,18 +49,18 @@ export const EmailVerificationReminder = ({
           <p>
             {
               <Trans
-                i18nKey={"emailVerification.messages.unverified"}
-                values={{ email: user?.email }}
                 components={{
                   strong: <strong />,
                 }}
+                i18nKey={"emailVerification.messages.unverified"}
                 t={t}
+                values={{ email: user?.email }}
               />
             }
           </p>
           <p className="resend-email">
             {t("emailVerification.messages.resendEmailInfo")}{" "}
-            <Link to="#" onClick={handleResend}>
+            <Link onClick={handleResend} to="#">
               {t("emailVerification.button.resendEmail")}
             </Link>
           </p>
diff --git a/packages/user/src/views/ForgotPassword.tsx b/packages/user/src/views/ForgotPassword.tsx
index 7fdd7546e..4435e83b9 100644
--- a/packages/user/src/views/ForgotPassword.tsx
+++ b/packages/user/src/views/ForgotPassword.tsx
@@ -66,12 +66,12 @@ export const ForgotPassword = ({ centered = true }: { centered?: boolean }) => {
         <p>
           {
             <Trans
-              i18nKey={"forgotPassword.acknowledgement.message"}
-              values={{ email }}
               components={{
                 strong: <strong />,
               }}
+              i18nKey={"forgotPassword.acknowledgement.message"}
               t={t}
+              values={{ email }}
             />
           }
         </p>
@@ -107,8 +107,8 @@ export const ForgotPassword = ({ centered = true }: { centered?: boolean }) => {
     >
       <ForgotPasswordForm
         email={email}
-        loading={loading}
         handleSubmit={handleSubmit}
+        loading={loading}
         onEmailChange={setEmail}
       />
       <AuthLinks className="forgot-password" links={links} />
diff --git a/packages/user/src/views/Login.tsx b/packages/user/src/views/Login.tsx
index 8cb9ca753..a9ee7eaa1 100644
--- a/packages/user/src/views/Login.tsx
+++ b/packages/user/src/views/Login.tsx
@@ -1,12 +1,12 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { Divider, AuthPage } from "@prefabs.tech/react-ui";
+import { AuthPage, Divider } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
+import type { SignInUpPromise } from "../types";
+
 import { LoginWrapper, SocialLogins } from "../components/Login";
 import { useConfig, useFirstUserSignup } from "../hooks";
 
-import type { SignInUpPromise } from "../types";
-
 interface IProperties {
   centered?: boolean;
   customDivider?: React.ReactNode;
@@ -21,12 +21,12 @@ interface IProperties {
 
 export const Login: React.FC<IProperties> = ({
   centered = true,
-  showForgotPasswordLink,
-  showSignupLink,
   customDivider,
   onLoginFailed,
   onLoginSuccess,
   orientation = "vertical",
+  showForgotPasswordLink,
+  showSignupLink,
   socialLoginFirst = false,
   socialLoginOnly = false,
 }) => {
@@ -35,8 +35,8 @@ export const Login: React.FC<IProperties> = ({
   const navigate = useNavigate();
 
   const [redirecting] = useFirstUserSignup({
-    config,
     autoRedirect: true,
+    config,
     redirectFn: navigate,
   });
 
@@ -78,8 +78,8 @@ export const Login: React.FC<IProperties> = ({
     <AuthPage
       centered={centered}
       className={className}
-      title={t("login.title")}
       loading={!!redirecting}
+      title={t("login.title")}
     >
       {socialLoginOnly ? null : (
         <LoginWrapper
diff --git a/packages/user/src/views/Profile/ProfilePage.tsx b/packages/user/src/views/Profile/ProfilePage.tsx
index 5bd435a2e..e0ace0f62 100644
--- a/packages/user/src/views/Profile/ProfilePage.tsx
+++ b/packages/user/src/views/Profile/ProfilePage.tsx
@@ -37,7 +37,7 @@ export const ProfilePage = ({
   }
 
   return (
-    <Page title={t("profile.title")} className="profile">
+    <Page className="profile" title={t("profile.title")}>
       <AccountInfo />
       <ProfileForm
         additionalProfileFields={additionalProfileFields}
diff --git a/packages/user/src/views/Profile/ProfileTabsPage.tsx b/packages/user/src/views/Profile/ProfileTabsPage.tsx
index 79a7a8c10..86b5e7072 100644
--- a/packages/user/src/views/Profile/ProfileTabsPage.tsx
+++ b/packages/user/src/views/Profile/ProfileTabsPage.tsx
@@ -1,3 +1,5 @@
+import type { Tab } from "@prefabs.tech/react-ui";
+
 import { AdditionalFormFields } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Page, TabView } from "@prefabs.tech/react-ui";
@@ -8,24 +10,22 @@ import { AccountInfo, ChangePassword, ProfileForm } from "@/components/Profile";
 import { useUser } from "@/hooks";
 import { UpdateProfileResponse } from "@/types";
 
-import type { Tab } from "@prefabs.tech/react-ui";
-
 interface Properties {
   activeKey?: string;
   additionalProfileFields?: AdditionalFormFields;
-  tabs?: Tab[];
-  visibleTabs?: string[];
   onProfileCancel?: () => void;
   onProfileSubmitted?: (response: UpdateProfileResponse) => void;
+  tabs?: Tab[];
+  visibleTabs?: string[];
 }
 
 export const ProfileTabsPage = ({
   activeKey = "profile",
   additionalProfileFields,
-  tabs = [],
-  visibleTabs,
   onProfileCancel,
   onProfileSubmitted,
+  tabs = [],
+  visibleTabs,
 }: Properties) => {
   const { t } = useTranslation("user");
   const location = useLocation();
@@ -87,11 +87,11 @@ export const ProfileTabsPage = ({
   }
 
   return (
-    <Page title={t("profile.title")} className="profile">
+    <Page className="profile" title={t("profile.title")}>
       <TabView
-        id="profile-tabs"
         activeKey={activeKey}
         enableHashRouting={true}
+        id="profile-tabs"
         tabs={mergedTabs}
         visibleTabs={visibleTabs}
       />
diff --git a/packages/user/src/views/ProfileCompletionReminder.tsx b/packages/user/src/views/ProfileCompletionReminder.tsx
index 03c4a4b10..00d30760d 100644
--- a/packages/user/src/views/ProfileCompletionReminder.tsx
+++ b/packages/user/src/views/ProfileCompletionReminder.tsx
@@ -18,9 +18,9 @@ export const ProfileCompletionReminder = ({
 
   return (
     <Page
+      centered={centered}
       className="profile-completion-reminder"
       title={t("profileCompletion.title")}
-      centered={centered}
     >
       <Card>
         <CardBody>
diff --git a/packages/user/src/views/ResetPassword.tsx b/packages/user/src/views/ResetPassword.tsx
index 191577c7e..fd6f58bce 100644
--- a/packages/user/src/views/ResetPassword.tsx
+++ b/packages/user/src/views/ResetPassword.tsx
@@ -14,7 +14,7 @@ export const ResetPassword = ({ centered = true }: { centered?: boolean }) => {
   const { t } = useTranslation("user");
   const config = useConfig();
   const [loading, setLoading] = useState<boolean>(false);
-  const [error, setIsError] = useState<null | "invalidToken" | "other">(null);
+  const [error, setIsError] = useState<"invalidToken" | "other" | null>(null);
 
   const navigate = useNavigate();
   const loginPath = config.customPaths?.login || DEFAULT_PATHS.LOGIN;
@@ -45,9 +45,9 @@ export const ResetPassword = ({ centered = true }: { centered?: boolean }) => {
 
   return (
     <AuthPage
+      centered={centered}
       className="reset-password"
       title={t("resetPassword.title")}
-      centered={centered}
     >
       {error && (
         <Message
diff --git a/packages/user/src/views/Signup.tsx b/packages/user/src/views/Signup.tsx
index 7265330bd..0e6b3a7f7 100644
--- a/packages/user/src/views/Signup.tsx
+++ b/packages/user/src/views/Signup.tsx
@@ -1,31 +1,31 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { AuthPage } from "@prefabs.tech/react-ui";
 
-import { SignupWrapper } from "..";
-
 import type { SignInUpPromise } from "../types";
 
+import { SignupWrapper } from "..";
+
 interface IProperties {
   centered?: boolean;
+  onSignupFailed?: (error: Error) => void;
+  onSignupSuccess?: (user: SignInUpPromise) => void;
   showForgotPasswordLink?: boolean;
   showLoginLink?: boolean;
   termsAndConditions?: React.ReactNode;
-  onSignupFailed?: (error: Error) => void;
-  onSignupSuccess?: (user: SignInUpPromise) => void;
 }
 
 export const Signup: React.FC<IProperties> = ({
   centered = true,
+  onSignupFailed,
+  onSignupSuccess,
   showForgotPasswordLink,
   showLoginLink,
   termsAndConditions,
-  onSignupFailed,
-  onSignupSuccess,
 }) => {
   const { t } = useTranslation("user");
 
   return (
-    <AuthPage className="signup" title={t("signup.title")} centered={centered}>
+    <AuthPage centered={centered} className="signup" title={t("signup.title")}>
       <SignupWrapper
         onSignupFailed={onSignupFailed}
         onSignupSuccess={onSignupSuccess}
diff --git a/packages/user/src/views/SignupFirstUser.tsx b/packages/user/src/views/SignupFirstUser.tsx
index f5fc2c2b6..03a0fce17 100644
--- a/packages/user/src/views/SignupFirstUser.tsx
+++ b/packages/user/src/views/SignupFirstUser.tsx
@@ -4,14 +4,14 @@ import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 
+import type { LoginCredentials } from "@/types";
+
 import { getIsFirstUser, signUpFirstUser } from "@/api/user";
 import { DEFAULT_PATHS } from "@/constants";
 import { useConfig, useUser } from "@/hooks";
 
 import { login, SignupForm } from "..";
 
-import type { LoginCredentials } from "@/types";
-
 export const SignUpFirstUser = ({
   centered = true,
 }: {
diff --git a/packages/user/src/views/VerifyEmail.tsx b/packages/user/src/views/VerifyEmail.tsx
index c2887d4ce..5dd16e8d0 100644
--- a/packages/user/src/views/VerifyEmail.tsx
+++ b/packages/user/src/views/VerifyEmail.tsx
@@ -7,7 +7,7 @@ import { getMe } from "@/api/user";
 import { EMAIL_VERIFICATION } from "@/constants";
 import { verifyEmail } from "@/supertokens";
 
-import { UserContextType, useConfig, userContext } from "..";
+import { useConfig, userContext, UserContextType } from "..";
 
 export const VerifyEmail = ({ centered = true }: { centered?: boolean }) => {
   const [verifyEmailLoading, setVerifyEmailLoading] = useState<boolean>(true);
@@ -16,7 +16,7 @@ export const VerifyEmail = ({ centered = true }: { centered?: boolean }) => {
   const [isEmailUpdated, setIsEmailUpdated] = useState(false);
 
   const { t } = useTranslation("user");
-  const { user, setUser } = useContext(userContext) as UserContextType;
+  const { setUser, user } = useContext(userContext) as UserContextType;
   const config = useConfig();
 
   useEffect(() => {
@@ -57,14 +57,14 @@ export const VerifyEmail = ({ centered = true }: { centered?: boolean }) => {
     let message = "";
 
     switch (status) {
+      case EMAIL_VERIFICATION.EMAIL_VERIFICATION_INVALID_TOKEN_ERROR:
+        message = t("emailVerification.messages.invalidToken");
+        break;
       case EMAIL_VERIFICATION.OK:
         isEmailUpdated
           ? (message = t("emailVerification.toastMessages.updateSuccess"))
           : (message = t("emailVerification.toastMessages.success"));
         break;
-      case EMAIL_VERIFICATION.EMAIL_VERIFICATION_INVALID_TOKEN_ERROR:
-        message = t("emailVerification.messages.invalidToken");
-        break;
       default:
         setError(true);
         message = t("emailVerification.messages.error");
@@ -89,10 +89,10 @@ export const VerifyEmail = ({ centered = true }: { centered?: boolean }) => {
 
   return (
     <AuthPage
+      centered={centered}
       className="email-verification"
-      title={t("emailVerification.verifyEmail")}
       loading={verifyEmailLoading}
-      centered={centered}
+      title={t("emailVerification.verifyEmail")}
     >
       {renderMessage()}
     </AuthPage>
diff --git a/packages/user/stylelint.config.js b/packages/user/stylelint.config.js
new file mode 100644
index 000000000..832e143e4
--- /dev/null
+++ b/packages/user/stylelint.config.js
@@ -0,0 +1,3 @@
+import stylelintConfig from "@prefabs.tech/stylelint-config/index.js";
+
+export default stylelintConfig;
diff --git a/packages/user/vite.config.ts b/packages/user/vite.config.ts
index a74a91ecc..d1b0e835a 100644
--- a/packages/user/vite.config.ts
+++ b/packages/user/vite.config.ts
@@ -1,7 +1,6 @@
-import { resolve, dirname } from "node:path";
-import { fileURLToPath } from "node:url";
-
 import react from "@vitejs/plugin-react";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import { defineConfig, loadEnv } from "vite";
 
 import { dependencies, peerDependencies } from "./package.json";
@@ -29,18 +28,21 @@ export default defineConfig(({ mode }) => {
             "@prefabs.tech/react-i18n": "PrefabsTechReactI18n",
             "@prefabs.tech/react-layout": "PrefabsTechReactLayout",
             "@prefabs.tech/react-ui": "PrefabsTechReactUi",
+            axios: "Axios",
+            react: "React",
             "react-dom": "ReactDom",
             "react-router-dom": "ReactRouterDom",
             "react-toastify": "ReactToastify",
             "supertokens-web-js": "supertokensWebJs",
-            axios: "Axios",
-            react: "React",
             zod: "zod",
           },
         },
       },
       target: "esnext",
     },
+    optimizeDeps: {
+      include: ["react/jsx-runtime"],
+    },
     plugins: [react()],
     resolve: {
       alias: {
@@ -50,8 +52,5 @@ export default defineConfig(({ mode }) => {
     server: {
       port: Number(process.env.VITE_APP_PORT) || 8889,
     },
-    optimizeDeps: {
-      include: ["react/jsx-runtime"],
-    },
   };
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f27786d97..f1b72042b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,9 +53,6 @@ importers:
       '@prefabs.tech/react-user':
         specifier: 0.72.1
         version: link:../../packages/user
-      '@prefabs.tech/tsconfig':
-        specifier: 0.6.0
-        version: 0.6.0
       '@reduxjs/toolkit':
         specifier: 1.9.7
         version: 1.9.7(react-redux@8.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(redux@4.2.1))(react@18.3.1)
@@ -97,8 +94,14 @@ importers:
         specifier: ^7.21.5
         version: 7.25.9(@babel/core@7.26.10)
       '@prefabs.tech/eslint-config':
-        specifier: 0.5.0
-        version: 0.5.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)
+        specifier: 0.7.0
+        version: 0.7.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)
+      '@prefabs.tech/stylelint-config':
+        specifier: 0.7.0
+        version: 0.7.0(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))
+      '@prefabs.tech/tsconfig':
+        specifier: 0.7.0
+        version: 0.7.0
       '@testing-library/react':
         specifier: 16.3.2
         version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -129,6 +132,15 @@ importers:
       prettier:
         specifier: 3.8.3
         version: 3.8.3
+      stylelint:
+        specifier: 17.9.1
+        version: 17.9.1(typescript@5.9.3)
+      stylelint-config-standard:
+        specifier: 40.0.0
+        version: 40.0.0(stylelint@17.9.1(typescript@5.9.3))
+      stylelint-order:
+        specifier: 8.1.1
+        version: 8.1.1(stylelint@17.9.1(typescript@5.9.3))
       typescript:
         specifier: 5.9.3
         version: 5.9.3
@@ -148,11 +160,14 @@ importers:
   packages/config:
     devDependencies:
       '@prefabs.tech/eslint-config':
-        specifier: 0.5.0
-        version: 0.5.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)
+        specifier: 0.7.0
+        version: 0.7.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)
+      '@prefabs.tech/stylelint-config':
+        specifier: 0.7.0
+        version: 0.7.0(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))
       '@prefabs.tech/tsconfig':
-        specifier: 0.6.0
-        version: 0.6.0
+        specifier: 0.7.0
+        version: 0.7.0
       '@types/jsdom':
         specifier: 21.1.7
         version: 21.1.7
@@ -180,6 +195,15 @@ importers:
       react:
         specifier: 18.3.1
         version: 18.3.1
+      stylelint:
+        specifier: 17.9.1
+        version: 17.9.1(typescript@5.9.3)
+      stylelint-config-standard:
+        specifier: 40.0.0
+        version: 40.0.0(stylelint@17.9.1(typescript@5.9.3))
+      stylelint-order:
+        specifier: 8.1.1
+        version: 8.1.1(stylelint@17.9.1(typescript@5.9.3))
       typescript:
         specifier: 5.9.3
         version: 5.9.3
@@ -215,14 +239,17 @@ importers:
         version: 3.24.4
     devDependencies:
       '@prefabs.tech/eslint-config':
-        specifier: 0.5.0
-        version: 0.5.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)
+        specifier: 0.7.0
+        version: 0.7.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)
       '@prefabs.tech/react-ui':
         specifier: 0.72.1
         version: link:../ui
+      '@prefabs.tech/stylelint-config':
+        specifier: 0.7.0
+        version: 0.7.0(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))
       '@prefabs.tech/tsconfig':
-        specifier: 0.6.0
-        version: 0.6.0
+        specifier: 0.7.0
+        version: 0.7.0
       '@testing-library/react':
         specifier: 16.3.2
         version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -265,6 +292,15 @@ importers:
       react-dom:
         specifier: 18.3.1
         version: 18.3.1(react@18.3.1)
+      stylelint:
+        specifier: 17.9.1
+        version: 17.9.1(typescript@5.9.3)
+      stylelint-config-standard:
+        specifier: 40.0.0
+        version: 40.0.0(stylelint@17.9.1(typescript@5.9.3))
+      stylelint-order:
+        specifier: 8.1.1
+        version: 8.1.1(stylelint@17.9.1(typescript@5.9.3))
       typescript:
         specifier: 5.9.3
         version: 5.9.3
@@ -297,14 +333,17 @@ importers:
         version: 15.4.1(i18next@24.2.3(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
       '@prefabs.tech/eslint-config':
-        specifier: 0.5.0
-        version: 0.5.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)
+        specifier: 0.7.0
+        version: 0.7.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)
       '@prefabs.tech/react-config':
         specifier: 0.72.1
         version: link:../config
+      '@prefabs.tech/stylelint-config':
+        specifier: 0.7.0
+        version: 0.7.0(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))
       '@prefabs.tech/tsconfig':
-        specifier: 0.6.0
-        version: 0.6.0
+        specifier: 0.7.0
+        version: 0.7.0
       '@testing-library/react':
         specifier: 16.3.2
         version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -338,6 +377,15 @@ importers:
       react-dom:
         specifier: 18.3.1
         version: 18.3.1(react@18.3.1)
+      stylelint:
+        specifier: 17.9.1
+        version: 17.9.1(typescript@5.9.3)
+      stylelint-config-standard:
+        specifier: 40.0.0
+        version: 40.0.0(stylelint@17.9.1(typescript@5.9.3))
+      stylelint-order:
+        specifier: 8.1.1
+        version: 8.1.1(stylelint@17.9.1(typescript@5.9.3))
       typescript:
         specifier: 5.9.3
         version: 5.9.3
@@ -351,8 +399,8 @@ importers:
   packages/layout:
     devDependencies:
       '@prefabs.tech/eslint-config':
-        specifier: 0.5.0
-        version: 0.5.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)
+        specifier: 0.7.0
+        version: 0.7.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)
       '@prefabs.tech/react-config':
         specifier: 0.72.1
         version: link:../config
@@ -362,9 +410,12 @@ importers:
       '@prefabs.tech/react-ui':
         specifier: 0.72.1
         version: link:../ui
+      '@prefabs.tech/stylelint-config':
+        specifier: 0.7.0
+        version: 0.7.0(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))
       '@prefabs.tech/tsconfig':
-        specifier: 0.6.0
-        version: 0.6.0
+        specifier: 0.7.0
+        version: 0.7.0
       '@testing-library/react':
         specifier: 16.3.2
         version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -407,6 +458,15 @@ importers:
       react-router-dom:
         specifier: 6.28.2
         version: 6.28.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      stylelint:
+        specifier: 17.9.1
+        version: 17.9.1(typescript@5.9.3)
+      stylelint-config-standard:
+        specifier: 40.0.0
+        version: 40.0.0(stylelint@17.9.1(typescript@5.9.3))
+      stylelint-order:
+        specifier: 8.1.1
+        version: 8.1.1(stylelint@17.9.1(typescript@5.9.3))
       typescript:
         specifier: 5.9.3
         version: 5.9.3
@@ -442,11 +502,14 @@ importers:
         specifier: 3.4.5
         version: 3.4.5
       '@prefabs.tech/eslint-config':
-        specifier: 0.5.0
-        version: 0.5.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)
+        specifier: 0.7.0
+        version: 0.7.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)
+      '@prefabs.tech/stylelint-config':
+        specifier: 0.7.0
+        version: 0.7.0(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))
       '@prefabs.tech/tsconfig':
-        specifier: 0.6.0
-        version: 0.6.0
+        specifier: 0.7.0
+        version: 0.7.0
       '@testing-library/jest-dom':
         specifier: 6.6.4
         version: 6.6.4
@@ -495,6 +558,15 @@ importers:
       react-router-dom:
         specifier: 6.28.2
         version: 6.28.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      stylelint:
+        specifier: 17.9.1
+        version: 17.9.1(typescript@5.9.3)
+      stylelint-config-standard:
+        specifier: 40.0.0
+        version: 40.0.0(stylelint@17.9.1(typescript@5.9.3))
+      stylelint-order:
+        specifier: 8.1.1
+        version: 8.1.1(stylelint@17.9.1(typescript@5.9.3))
       typescript:
         specifier: 5.9.3
         version: 5.9.3
@@ -515,8 +587,8 @@ importers:
         version: 3.24.4
     devDependencies:
       '@prefabs.tech/eslint-config':
-        specifier: 0.5.0
-        version: 0.5.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)
+        specifier: 0.7.0
+        version: 0.7.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)
       '@prefabs.tech/react-form':
         specifier: 0.72.1
         version: link:../form
@@ -529,9 +601,12 @@ importers:
       '@prefabs.tech/react-ui':
         specifier: 0.72.1
         version: link:../ui
+      '@prefabs.tech/stylelint-config':
+        specifier: 0.7.0
+        version: 0.7.0(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))
       '@prefabs.tech/tsconfig':
-        specifier: 0.6.0
-        version: 0.6.0
+        specifier: 0.7.0
+        version: 0.7.0
       '@testing-library/dom':
         specifier: 10.4.1
         version: 10.4.1
@@ -586,6 +661,15 @@ importers:
       react-toastify:
         specifier: 10.0.6
         version: 10.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      stylelint:
+        specifier: 17.9.1
+        version: 17.9.1(typescript@5.9.3)
+      stylelint-config-standard:
+        specifier: 40.0.0
+        version: 40.0.0(stylelint@17.9.1(typescript@5.9.3))
+      stylelint-order:
+        specifier: 8.1.1
+        version: 8.1.1(stylelint@17.9.1(typescript@5.9.3))
       typescript:
         specifier: 5.9.3
         version: 5.9.3
@@ -819,6 +903,12 @@ packages:
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
 
+  '@cacheable/memory@2.0.8':
+    resolution: {integrity: sha512-FvEb29x5wVwu/Kf93IWwsOOEuhHh6dYCJF3vcKLzXc0KXIW181AOzv6ceT4ZpBHDvAfG60eqb+ekmrnLHIy+jw==}
+
+  '@cacheable/utils@2.4.1':
+    resolution: {integrity: sha512-eiFgzCbIneyMlLOmNG4g9xzF7Hv3Mga4LjxjcSC/ues6VYq2+gUbQI8JqNuw/ZM8tJIeIaBGpswAsqV2V7ApgA==}
+
   '@commitlint/cli@19.8.1':
     resolution: {integrity: sha512-LXUdNIkspyxrlV6VDHWBmCZRtkEVRpBKxi2Gtw3J54cGWhLCTouVD/Q6ZSaSvd2YaDObWK8mDjrz3TIKtaQMAA==}
     engines: {node: '>=v18'}
@@ -924,6 +1014,25 @@ packages:
     resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
     engines: {node: '>=20.19.0'}
 
+  '@csstools/media-query-list-parser@5.0.0':
+    resolution: {integrity: sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/selector-resolve-nested@4.0.0':
+    resolution: {integrity: sha512-9vAPxmp+Dx3wQBIUwc1v7Mdisw1kbbaGqXUM8QLTgWg7SoPGYtXBsMXvsFs/0Bn5yoFhcktzxNZGNaUt0VjgjA==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      postcss-selector-parser: ^7.1.1
+
+  '@csstools/selector-specificity@6.0.0':
+    resolution: {integrity: sha512-4sSgl78OtOXEX/2d++8A83zHNTgwCJMaR24FvsYL7Uf/VS8HZk9PTwR51elTbGqMuwH3szLvvOXEaVnqn0Z3zA==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      postcss-selector-parser: ^7.1.1
+
   '@dzangolab/flag-icon-css@3.4.5':
     resolution: {integrity: sha512-XqVAi0O/KITtznpMK5TP4D+rWfwst5lrsbPbes5c5SPMGjwK7fuvlTdEmG2XUrxzYqDTIPshywyzdVYKooGdGA==}
 
@@ -1282,10 +1391,6 @@ packages:
     resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@eslint/js@9.39.2':
-    resolution: {integrity: sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@eslint/js@9.39.4':
     resolution: {integrity: sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1377,6 +1482,15 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@keyv/bigmap@1.3.1':
+    resolution: {integrity: sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      keyv: ^5.6.0
+
+  '@keyv/serialize@1.1.1':
+    resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
+
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
@@ -1449,15 +1563,30 @@ packages:
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
-  '@prefabs.tech/eslint-config@0.5.0':
-    resolution: {integrity: sha512-GFzcgTUqi25770aeQ7I89dk9y/ct5PEnUzburmISIewufejcTHcQtqU9EVGmuYECg8ZXRB6OyStULTeCKapAtA==}
+  '@prefabs.tech/eslint-config@0.7.0':
+    resolution: {integrity: sha512-kMLs+ksinlNKa5FfhTb2qNisnU/On+IGrRHbZ3aHq1INF8NsjVRB7Wm0Q9vdnBipco9YOady0qSx1goVnhhC3w==}
     peerDependencies:
       eslint: '>=9.0.0'
       prettier: '>=3.3.3'
       typescript: '>=4.9.5'
 
-  '@prefabs.tech/tsconfig@0.6.0':
-    resolution: {integrity: sha512-CuXKJujWd6S/Jqci04Nk7fVA0j66v9A8uGQTscTMrTRGHcfLNSmNkvvmqZG9jEvSahmXmrlJbmyTcwEwXrSBew==}
+  '@prefabs.tech/stylelint-config@0.7.0':
+    resolution: {integrity: sha512-Gmfyyouu7m6QPz6vvtb4+fCPeCiZBWTS0BweB02VIcgED553j/lvlWwfn7yKzDsITZKt2HA24/Rxh5WG5vD+wg==}
+    peerDependencies:
+      stylelint: '>=17.0.0'
+      stylelint-config-recommended-vue: '>=1.6.0'
+      stylelint-config-standard: '>=40.0.0'
+      stylelint-order: '>=8.0.0'
+    peerDependenciesMeta:
+      stylelint-config-recommended-vue:
+        optional: true
+      stylelint-config-standard:
+        optional: true
+      stylelint-order:
+        optional: true
+
+  '@prefabs.tech/tsconfig@0.7.0':
+    resolution: {integrity: sha512-MiEvKeoNVPSy79tYQOkFeaBoVViW27JYfSiEbCBT+Fvuk1XEkXyBpSxlpdKQDV5bsAg0C5VNSjRh4qH3eDjA+w==}
 
   '@reduxjs/toolkit@1.9.7':
     resolution: {integrity: sha512-t7v8ZPxhhKgOKtU+uyJT13lu4vL7az5aFi4IdoDs/eS548edn2M8Ik9h8fxgvMjGoAUVFSt6ZC1P5cWmQ014QQ==}
@@ -1594,6 +1723,10 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
+
   '@slack/types@1.10.0':
     resolution: {integrity: sha512-tA7GG7Tj479vojfV3AoxbckalA48aK6giGjNtgH6ihpLwTyHE3fIgRrvt8TWfLwW8X8dyu7vgmAsGLRG7hWWOg==}
     engines: {node: '>= 8.9.0', npm: '>= 5.5.1'}
@@ -1740,16 +1873,32 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/project-service@8.59.1':
+    resolution: {integrity: sha512-+MuHQlHiEr00Of/IQbE/MmEoi44znZHbR/Pz7Opq4HryUOlRi+/44dro9Ycy8Fyo+/024IWtw8m4JUMCGTYxDg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
   '@typescript-eslint/scope-manager@8.54.0':
     resolution: {integrity: sha512-27rYVQku26j/PbHYcVfRPonmOlVI6gihHtXFbTdB5sb6qA0wdAQAbyXFVarQ5t4HRojIz64IV90YtsjQSSGlQg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/scope-manager@8.59.1':
+    resolution: {integrity: sha512-LwuHQI4pDOYVKvmH2dkaJo6YZCSgouVgnS/z7yBPKBMvgtBvyLqiLy9Z6b7+m/TRcX1NFYUqZetI5Y+aT4GEfg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript-eslint/tsconfig-utils@8.54.0':
     resolution: {integrity: sha512-dRgOyT2hPk/JwxNMZDsIXDgyl9axdJI3ogZ2XWhBPsnZUv+hPesa5iuhdYt2gzwA9t8RE5ytOJ6xB0moV0Ujvw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/tsconfig-utils@8.59.1':
+    resolution: {integrity: sha512-/0nEyPbX7gRsk0Uwfe4ALwwgxuA66d/l2mhRDNlAvaj4U3juhUtJNq0DsY8M2AYwwb9rEq2hrC3IcIcEt++iJA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
   '@typescript-eslint/type-utils@8.54.0':
     resolution: {integrity: sha512-hiLguxJWHjjwL6xMBwD903ciAwd7DmK30Y9Axs/etOkftC3ZNN9K44IuRD/EB08amu+Zw6W37x9RecLkOo3pMA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1761,12 +1910,22 @@ packages:
     resolution: {integrity: sha512-PDUI9R1BVjqu7AUDsRBbKMtwmjWcn4J3le+5LpcFgWULN3LvHC5rkc9gCVxbrsrGmO1jfPybN5s6h4Jy+OnkAA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/types@8.59.1':
+    resolution: {integrity: sha512-ZDCjgccSdYPw5Bxh+my4Z0lJU96ZDN7jbBzvmEn0FZx3RtU1C7VWl6NbDx94bwY3V5YsgwRzJPOgeY2Q/nLG8A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript-eslint/typescript-estree@8.54.0':
     resolution: {integrity: sha512-BUwcskRaPvTk6fzVWgDPdUndLjB87KYDrN5EYGetnktoeAvPtO4ONHlAZDnj5VFnUANg0Sjm7j4usBlnoVMHwA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/typescript-estree@8.59.1':
+    resolution: {integrity: sha512-OUd+vJS05sSkOip+BkZ/2NS8RMxrAAJemsC6vU3kmfLyeaJT0TftHkV9mcx2107MmsBVXXexhVu4F0TZXyMl4g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
   '@typescript-eslint/utils@8.54.0':
     resolution: {integrity: sha512-9Cnda8GS57AQakvRyG0PTejJNlA2xhvyNtEVIMlDWOOeEyBkYWhGPnfrIAnqxLMTSTo6q8g12XVjjev5l1NvMA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1774,10 +1933,21 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
+  '@typescript-eslint/utils@8.59.1':
+    resolution: {integrity: sha512-3pIeoXhCeYH9FSCBI8P3iNwJlGuzPlYKkTlen2O9T1DSeeg8UG8jstq6BLk+Mda0qup7mgk4z4XL4OzRaxZ8LA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
   '@typescript-eslint/visitor-keys@8.54.0':
     resolution: {integrity: sha512-VFlhGSl4opC0bprJiItPQ1RfUhGDIBokcPwaFH4yiBCaNPeld/9VeXbiPO1cLyorQi1G1vL+ecBk1x8o1axORA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@typescript-eslint/visitor-keys@8.59.1':
+    resolution: {integrity: sha512-LdDNl6C5iJExcM0Yh0PwAIBb9PrSiCsWamF/JyEZawm3kFDnRoaq3LGE4bpyRao/fWeGKKyw7icx0YxrLFC5Cg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
@@ -1970,6 +2140,10 @@ packages:
     resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
     engines: {node: '>=12'}
 
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
   ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
@@ -2045,6 +2219,10 @@ packages:
   ast-types-flow@0.0.8:
     resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
 
+  astral-regex@2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+
   async@3.2.6:
     resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
 
@@ -2076,6 +2254,10 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+
   baseline-browser-mapping@2.9.19:
     resolution: {integrity: sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==}
     hasBin: true
@@ -2095,6 +2277,10 @@ packages:
   brace-expansion@2.0.1:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
 
+  brace-expansion@5.0.5:
+    resolution: {integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==}
+    engines: {node: 18 || 20 || >=22}
+
   braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
@@ -2123,6 +2309,9 @@ packages:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
 
+  cacheable@2.3.4:
+    resolution: {integrity: sha512-djgxybDbw9fL/ZWMI3+CE8ZilNxcwFkVtDc1gJ+IlOSSWkSMPQabhV/XCHTQ6pwwN6aivXPZ43omTooZiX06Ew==}
+
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
@@ -2229,6 +2418,9 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
@@ -2324,6 +2516,15 @@ packages:
       typescript:
         optional: true
 
+  cosmiconfig@9.0.1:
+    resolution: {integrity: sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   cross-spawn@6.0.5:
     resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
     engines: {node: '>=4.8'}
@@ -2332,6 +2533,10 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css-functions-list@3.3.3:
+    resolution: {integrity: sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==}
+    engines: {node: '>=12'}
+
   css-select@4.3.0:
     resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
 
@@ -2722,6 +2927,12 @@ packages:
     peerDependencies:
       eslint: '>=8.23.0'
 
+  eslint-plugin-perfectionist@5.9.0:
+    resolution: {integrity: sha512-8TWzg02zmnBdZwCkWLi8jhzqXI+fE7Z/RwV8SL6xD45tJ8Bp3wGuYL2XtQgfe/Wd0eBqOUX+s6ey73IyszvKTA==}
+    engines: {node: ^20.0.0 || >=22.0.0}
+    peerDependencies:
+      eslint: ^8.45.0 || ^9.0.0 || ^10.0.0
+
   eslint-plugin-prettier@5.5.5:
     resolution: {integrity: sha512-hscXkbqUZ2sPithAuLm5MXL+Wph+U7wHngPBv9OMWwlP8iaflyxpjTYZkmdgB4/vPIhemRlBEoLrH7UC1n7aUw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -2790,6 +3001,10 @@ packages:
     resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  eslint-visitor-keys@5.0.1:
+    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   eslint@8.57.1:
     resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2858,6 +3073,10 @@ packages:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
 
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
@@ -2867,6 +3086,10 @@ packages:
   fast-uri@3.0.3:
     resolution: {integrity: sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==}
 
+  fastest-levenshtein@1.0.16:
+    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
+    engines: {node: '>= 4.9.1'}
+
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
@@ -2883,6 +3106,9 @@ packages:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
 
+  file-entry-cache@11.1.2:
+    resolution: {integrity: sha512-N2WFfK12gmrK1c1GXOqiAJ1tc5YE+R53zvQ+t5P8S5XhnmKYVB5eZEiLNZKDSmoG8wqqbF9EXYBBW/nef19log==}
+
   file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -2933,9 +3159,15 @@ packages:
     resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
     engines: {node: '>=16'}
 
+  flat-cache@6.1.22:
+    resolution: {integrity: sha512-N2dnzVJIphnNsjHcrxGW7DePckJ6haPrSFqpsBUhHYgwtKGVq4JrBGielEGD2fCVnsGm1zlBVZ8wGhkyuetgug==}
+
   flatted@3.3.1:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
 
+  flatted@3.4.2:
+    resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==}
+
   follow-redirects@1.15.11:
     resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
     engines: {node: '>=4.0'}
@@ -2987,6 +3219,10 @@ packages:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
 
+  get-east-asian-width@1.5.0:
+    resolution: {integrity: sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==}
+    engines: {node: '>=18'}
+
   get-intrinsic@1.2.7:
     resolution: {integrity: sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==}
     engines: {node: '>= 0.4'}
@@ -3012,9 +3248,6 @@ packages:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
 
-  get-tsconfig@4.10.0:
-    resolution: {integrity: sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==}
-
   get-tsconfig@4.13.6:
     resolution: {integrity: sha512-shZT/QMiSHc/YBLxxOkMtgSid5HFoauqCE3/exfsEcwg1WkeqjG+V40yBbBrsD+jW2HDXcs28xOfcbm2jI8Ddw==}
 
@@ -3061,6 +3294,14 @@ packages:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
     engines: {node: '>=18'}
 
+  global-modules@2.0.0:
+    resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
+    engines: {node: '>=6'}
+
+  global-prefix@3.0.0:
+    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
+    engines: {node: '>=6'}
+
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -3093,6 +3334,13 @@ packages:
     resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==}
     engines: {node: '>=8'}
 
+  globby@16.2.0:
+    resolution: {integrity: sha512-QrJia2qDf5BB/V6HYlDTs0I0lBahyjLzpGQg3KT7FnCdTonAyPy2RtY802m2k4ALx6Dp752f82WsOczEVr3l6Q==}
+    engines: {node: '>=20'}
+
+  globjoin@0.1.4:
+    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
+
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -3119,6 +3367,10 @@ packages:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
 
+  has-flag@5.0.1:
+    resolution: {integrity: sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==}
+    engines: {node: '>=12'}
+
   has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 
@@ -3134,6 +3386,10 @@ packages:
     resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
 
+  hashery@1.5.1:
+    resolution: {integrity: sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==}
+    engines: {node: '>=20'}
+
   hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
@@ -3154,6 +3410,12 @@ packages:
   hoist-non-react-statics@3.3.2:
     resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
 
+  hookified@1.15.1:
+    resolution: {integrity: sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==}
+
+  hookified@2.2.0:
+    resolution: {integrity: sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==}
+
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
 
@@ -3176,6 +3438,10 @@ packages:
   html-parse-stringify@3.0.1:
     resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
 
+  html-tags@5.1.0:
+    resolution: {integrity: sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==}
+    engines: {node: '>=20.10'}
+
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -3232,6 +3498,9 @@ packages:
   import-meta-resolve@4.1.0:
     resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
 
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -3365,6 +3634,10 @@ packages:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
 
+  is-path-inside@4.0.0:
+    resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
+    engines: {node: '>=12'}
+
   is-plain-obj@1.1.0:
     resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
     engines: {node: '>=0.10.0'}
@@ -3547,6 +3820,9 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  keyv@5.6.0:
+    resolution: {integrity: sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==}
+
   kind-of@6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
@@ -3612,6 +3888,9 @@ packages:
   lodash.startcase@4.4.0:
     resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
 
+  lodash.truncate@4.4.2:
+    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+
   lodash.uniq@4.5.0:
     resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
 
@@ -3679,6 +3958,9 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  mathml-tag-names@4.0.0:
+    resolution: {integrity: sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==}
+
   mdn-data@2.27.1:
     resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
 
@@ -3686,6 +3968,10 @@ packages:
     resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
     engines: {node: '>=16.10'}
 
+  meow@14.1.0:
+    resolution: {integrity: sha512-EDYo6VlmtnumlcBCbh1gLJ//9jvM/ndXHfVXIFrZVr6fGcwTUyCTFNTLCKuY3ffbK8L/+3Mzqnd58RojiZqHVw==}
+    engines: {node: '>=20'}
+
   meow@8.1.2:
     resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
     engines: {node: '>=10'}
@@ -3714,6 +4000,10 @@ packages:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
 
+  minimatch@10.2.5:
+    resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
+    engines: {node: 18 || 20 || >=22}
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -3772,6 +4062,10 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  natural-orderby@5.0.0:
+    resolution: {integrity: sha512-kKHJhxwpR/Okycz4HhQKKlhWe4ASEfPgkSWNmKFHd7+ezuQlxkA5cM3+XkBPvm1gmHen3w53qsYAv+8GwRrBlg==}
+    engines: {node: '>=18'}
+
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
@@ -3811,6 +4105,10 @@ packages:
     resolution: {integrity: sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==}
     engines: {node: '>=10'}
 
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
   normalize.css@8.0.1:
     resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
 
@@ -4035,10 +4333,24 @@ packages:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
 
+  postcss-safe-parser@7.0.1:
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.4.31
+
   postcss-selector-parser@7.1.1:
     resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
     engines: {node: '>=4'}
 
+  postcss-sorting@10.0.0:
+    resolution: {integrity: sha512-TXbU+h6vVRW+86c/+ewhWq9k7pr7ijASTnepVhCQiC87zAOTkvB1v2dHyWP+ggstSTX/PNvjzS+IOqzejndz9w==}
+    peerDependencies:
+      postcss: ^8.4.20
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
   postcss@8.5.12:
     resolution: {integrity: sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA==}
     engines: {node: ^10 || ^12 || >=14}
@@ -4111,6 +4423,10 @@ packages:
 
       (For a CapTP with native promises, see @endo/eventual-send and @endo/captp)
 
+  qified@0.9.1:
+    resolution: {integrity: sha512-n7mar4T0xQ+39dE2vGTAlbxUEpndwPANH0kDef1/MYsB8Bba9wshkybIRx74qgcvKQPEWErf9AqAdYjhzY2Ilg==}
+    engines: {node: '>=20'}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -4488,6 +4804,14 @@ packages:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
 
+  slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
+    engines: {node: '>=14.16'}
+
+  slice-ansi@4.0.0:
+    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
+    engines: {node: '>=10'}
+
   snake-case@3.0.4:
     resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
 
@@ -4546,6 +4870,10 @@ packages:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
 
+  string-width@8.2.1:
+    resolution: {integrity: sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA==}
+    engines: {node: '>=20'}
+
   string.prototype.includes@2.0.1:
     resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
     engines: {node: '>= 0.4'}
@@ -4583,6 +4911,10 @@ packages:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
     engines: {node: '>=12'}
 
+  strip-ansi@7.2.0:
+    resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
+    engines: {node: '>=12'}
+
   strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
@@ -4603,6 +4935,29 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  stylelint-config-recommended@18.0.0:
+    resolution: {integrity: sha512-mxgT2XY6YZ3HWWe3Di8umG6aBmWmHTblTgu/f10rqFXnyWxjKWwNdjSWkgkwCtxIKnqjSJzvFmPT5yabVIRxZg==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      stylelint: ^17.0.0
+
+  stylelint-config-standard@40.0.0:
+    resolution: {integrity: sha512-EznGJxOUhtWck2r6dJpbgAdPATIzvpLdK9+i5qPd4Lx70es66TkBPljSg4wN3Qnc6c4h2n+WbUrUynQ3fanjHw==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      stylelint: ^17.0.0
+
+  stylelint-order@8.1.1:
+    resolution: {integrity: sha512-LqsEB6VggJuu5v10RtkrQsBObcdwBE7GuAOlwfc/LR3VL/w8UqKX2BOLIjhyGt0Gne/njo7gRNGiJAKhfmPMNw==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      stylelint: ^16.18.0 || ^17.0.0
+
+  stylelint@17.9.1:
+    resolution: {integrity: sha512-THTmnAPJTrg/JhkTWZlSyrO+HUYMx6ELthIHeMyD2WOKqXIJUFQv2Yxn91bvUrZdbBJaW2dUuQdPST2wcQ6C3g==}
+    engines: {node: '>=20.19.0'}
+    hasBin: true
+
   supertokens-js-override@0.0.4:
     resolution: {integrity: sha512-r0JFBjkMIdep3Lbk3JA+MpnpuOtw4RSyrlRAbrzMcxwiYco3GFWl/daimQZ5b1forOiUODpOlXbSOljP/oyurg==}
 
@@ -4612,14 +4967,25 @@ packages:
   supertokens-website@17.0.5:
     resolution: {integrity: sha512-NBOiKO3NV2VBAFgO+ZEmpOPVde2BwOjB6T0qjj2XaZX4jh+6yDGhrckJMwF5R0ucpTgOQXmBrpDnUJ5kFZlgiQ==}
 
+  supports-color@10.2.2:
+    resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
+    engines: {node: '>=18'}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
+  supports-hyperlinks@4.4.0:
+    resolution: {integrity: sha512-UKbpT93hN5Nr9go5UY7bopIB9YQlMz9nm/ct4IXt/irb5YRkn9WaqrOBJGZ5Pwvsd5FQzSVeYlGdXoCAPQZrPg==}
+    engines: {node: '>=20'}
+
   supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svg-tags@1.0.0:
+    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
+
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
@@ -4627,6 +4993,10 @@ packages:
     resolution: {integrity: sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
+  table@6.9.0:
+    resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
+    engines: {node: '>=10.0.0'}
+
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -4731,8 +5101,8 @@ packages:
     resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
     engines: {node: '>=8'}
 
-  ts-api-utils@2.4.0:
-    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
+  ts-api-utils@2.5.0:
+    resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
     engines: {node: '>=18.12'}
     peerDependencies:
       typescript: '>=4.8.4'
@@ -4853,6 +5223,10 @@ packages:
     resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
     engines: {node: '>=18'}
 
+  unicorn-magic@0.4.0:
+    resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==}
+    engines: {node: '>=20'}
+
   universal-user-agent@5.0.0:
     resolution: {integrity: sha512-B5TPtzZleXyPrUMKCpEHFmVhMN6EhmJYjG5PQna9s7mXeSqGTLap4OpqLl5FCEFUI3UBmllkETwKf/db66Y54Q==}
 
@@ -5126,6 +5500,10 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
+  write-file-atomic@7.0.1:
+    resolution: {integrity: sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
   ws@8.20.0:
     resolution: {integrity: sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==}
     engines: {node: '>=10.0.0'}
@@ -5514,6 +5892,18 @@ snapshots:
 
   '@bcoe/v8-coverage@1.0.2': {}
 
+  '@cacheable/memory@2.0.8':
+    dependencies:
+      '@cacheable/utils': 2.4.1
+      '@keyv/bigmap': 1.3.1(keyv@5.6.0)
+      hookified: 1.15.1
+      keyv: 5.6.0
+
+  '@cacheable/utils@2.4.1':
+    dependencies:
+      hashery: 1.5.1
+      keyv: 5.6.0
+
   '@commitlint/cli@19.8.1(@types/node@25.3.5)(typescript@5.9.3)':
     dependencies:
       '@commitlint/format': 19.8.1
@@ -5648,6 +6038,19 @@ snapshots:
 
   '@csstools/css-tokenizer@4.0.0': {}
 
+  '@csstools/media-query-list-parser@5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/selector-resolve-nested@4.0.0(postcss-selector-parser@7.1.1)':
+    dependencies:
+      postcss-selector-parser: 7.1.1
+
+  '@csstools/selector-specificity@6.0.0(postcss-selector-parser@7.1.1)':
+    dependencies:
+      postcss-selector-parser: 7.1.1
+
   '@dzangolab/flag-icon-css@3.4.5': {}
 
   '@emnapi/core@1.8.1':
@@ -5880,8 +6283,6 @@ snapshots:
 
   '@eslint/js@8.57.1': {}
 
-  '@eslint/js@9.39.2': {}
-
   '@eslint/js@9.39.4': {}
 
   '@eslint/object-schema@2.1.7': {}
@@ -5972,6 +6373,14 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@keyv/bigmap@1.3.1(keyv@5.6.0)':
+    dependencies:
+      hashery: 1.5.1
+      hookified: 1.15.1
+      keyv: 5.6.0
+
+  '@keyv/serialize@1.1.1': {}
+
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
       '@emnapi/core': 1.8.1
@@ -6081,9 +6490,9 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
-  '@prefabs.tech/eslint-config@0.5.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)':
+  '@prefabs.tech/eslint-config@0.7.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)(typescript@5.9.3)':
     dependencies:
-      '@eslint/js': 9.39.2
+      '@eslint/js': 9.39.4
       eslint: 9.39.4(jiti@2.4.2)
       eslint-config-prettier: 10.1.8(eslint@9.39.4(jiti@2.4.2))
       eslint-import-resolver-alias: 1.1.2(eslint-plugin-import@2.32.0)
@@ -6091,6 +6500,7 @@ snapshots:
       eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3))(eslint-import-resolver-typescript@4.4.4)(eslint@9.39.4(jiti@2.4.2))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.4(jiti@2.4.2))
       eslint-plugin-n: 17.20.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3)
+      eslint-plugin-perfectionist: 5.9.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3)
       eslint-plugin-prettier: 5.5.5(eslint-config-prettier@10.1.8(eslint@9.39.4(jiti@2.4.2)))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3)
       eslint-plugin-promise: 7.2.1(eslint@9.39.4(jiti@2.4.2))
       eslint-plugin-react: 7.37.5(eslint@9.39.4(jiti@2.4.2))
@@ -6110,7 +6520,14 @@ snapshots:
       - eslint-plugin-import-x
       - supports-color
 
-  '@prefabs.tech/tsconfig@0.6.0': {}
+  '@prefabs.tech/stylelint-config@0.7.0(stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)))(stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)))(stylelint@17.9.1(typescript@5.9.3))':
+    dependencies:
+      stylelint: 17.9.1(typescript@5.9.3)
+    optionalDependencies:
+      stylelint-config-standard: 40.0.0(stylelint@17.9.1(typescript@5.9.3))
+      stylelint-order: 8.1.1(stylelint@17.9.1(typescript@5.9.3))
+
+  '@prefabs.tech/tsconfig@0.7.0': {}
 
   '@reduxjs/toolkit@1.9.7(react-redux@8.1.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(redux@4.2.1))(react@18.3.1)':
     dependencies:
@@ -6199,6 +6616,8 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
+  '@sindresorhus/merge-streams@4.0.0': {}
+
   '@slack/types@1.10.0': {}
 
   '@slack/webhook@5.0.4':
@@ -6350,7 +6769,7 @@ snapshots:
       eslint: 9.39.4(jiti@2.4.2)
       ignore: 7.0.5
       natural-compare: 1.4.0
-      ts-api-utils: 2.4.0(typescript@5.9.3)
+      ts-api-utils: 2.5.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -6369,8 +6788,17 @@ snapshots:
 
   '@typescript-eslint/project-service@8.54.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.54.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/tsconfig-utils': 8.59.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.59.1
+      debug: 4.4.3
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.59.1(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.59.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.59.1
       debug: 4.4.3
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -6381,10 +6809,19 @@ snapshots:
       '@typescript-eslint/types': 8.54.0
       '@typescript-eslint/visitor-keys': 8.54.0
 
+  '@typescript-eslint/scope-manager@8.59.1':
+    dependencies:
+      '@typescript-eslint/types': 8.59.1
+      '@typescript-eslint/visitor-keys': 8.59.1
+
   '@typescript-eslint/tsconfig-utils@8.54.0(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
+  '@typescript-eslint/tsconfig-utils@8.59.1(typescript@5.9.3)':
+    dependencies:
+      typescript: 5.9.3
+
   '@typescript-eslint/type-utils@8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -6392,13 +6829,15 @@ snapshots:
       '@typescript-eslint/utils': 8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3)
       debug: 4.4.3
       eslint: 9.39.4(jiti@2.4.2)
-      ts-api-utils: 2.4.0(typescript@5.9.3)
+      ts-api-utils: 2.5.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
   '@typescript-eslint/types@8.54.0': {}
 
+  '@typescript-eslint/types@8.59.1': {}
+
   '@typescript-eslint/typescript-estree@8.54.0(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/project-service': 8.54.0(typescript@5.9.3)
@@ -6409,7 +6848,22 @@ snapshots:
       minimatch: 9.0.5
       semver: 7.7.3
       tinyglobby: 0.2.15
-      ts-api-utils: 2.4.0(typescript@5.9.3)
+      ts-api-utils: 2.5.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/typescript-estree@8.59.1(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.59.1(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.59.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.59.1
+      '@typescript-eslint/visitor-keys': 8.59.1
+      debug: 4.4.3
+      minimatch: 10.2.5
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.5.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -6425,11 +6879,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/utils@8.59.1(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.4.2))
+      '@typescript-eslint/scope-manager': 8.59.1
+      '@typescript-eslint/types': 8.59.1
+      '@typescript-eslint/typescript-estree': 8.59.1(typescript@5.9.3)
+      eslint: 9.39.4(jiti@2.4.2)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/visitor-keys@8.54.0':
     dependencies:
       '@typescript-eslint/types': 8.54.0
       eslint-visitor-keys: 4.2.1
 
+  '@typescript-eslint/visitor-keys@8.59.1':
+    dependencies:
+      '@typescript-eslint/types': 8.59.1
+      eslint-visitor-keys: 5.0.1
+
   '@ungap/structured-clone@1.2.0': {}
 
   '@unrs/resolver-binding-android-arm-eabi@1.11.1':
@@ -6611,6 +7081,8 @@ snapshots:
 
   ansi-regex@6.1.0: {}
 
+  ansi-regex@6.2.2: {}
+
   ansi-styles@4.3.0:
     dependencies:
       color-convert: 2.0.1
@@ -6706,6 +7178,8 @@ snapshots:
 
   ast-types-flow@0.0.8: {}
 
+  astral-regex@2.0.0: {}
+
   async@3.2.6: {}
 
   asynckit@0.4.0: {}
@@ -6736,6 +7210,8 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  balanced-match@4.0.4: {}
+
   baseline-browser-mapping@2.9.19: {}
 
   before-after-hook@2.2.3: {}
@@ -6755,6 +7231,10 @@ snapshots:
     dependencies:
       balanced-match: 1.0.2
 
+  brace-expansion@5.0.5:
+    dependencies:
+      balanced-match: 4.0.4
+
   braces@3.0.3:
     dependencies:
       fill-range: 7.1.1
@@ -6784,6 +7264,14 @@ snapshots:
 
   cac@6.7.14: {}
 
+  cacheable@2.3.4:
+    dependencies:
+      '@cacheable/memory': 2.0.8
+      '@cacheable/utils': 2.4.1
+      hookified: 1.15.1
+      keyv: 5.6.0
+      qified: 0.9.1
+
   call-bind-apply-helpers@1.0.2:
     dependencies:
       es-errors: 1.3.0
@@ -6908,6 +7396,8 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  colord@2.9.3: {}
+
   colorette@2.0.20: {}
 
   combined-stream@1.0.8:
@@ -7024,6 +7514,15 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
+  cosmiconfig@9.0.1(typescript@5.9.3):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.1
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.9.3
+
   cross-spawn@6.0.5:
     dependencies:
       nice-try: 1.0.5
@@ -7038,6 +7537,8 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-functions-list@3.3.3: {}
+
   css-select@4.3.0:
     dependencies:
       boolbase: 1.0.0
@@ -7490,7 +7991,7 @@ snapshots:
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
-      minimatch: 3.1.2
+      minimatch: 3.1.5
       object.fromentries: 2.0.8
       object.groupby: 1.0.3
       object.values: 1.2.1
@@ -7518,7 +8019,7 @@ snapshots:
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       language-tags: 1.0.9
-      minimatch: 3.1.2
+      minimatch: 3.1.5
       object.fromentries: 2.0.8
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
@@ -7526,11 +8027,11 @@ snapshots:
   eslint-plugin-n@17.20.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.4.2))
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.59.1(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3)
       enhanced-resolve: 5.17.1
       eslint: 9.39.4(jiti@2.4.2)
       eslint-plugin-es-x: 7.8.0(eslint@9.39.4(jiti@2.4.2))
-      get-tsconfig: 4.10.0
+      get-tsconfig: 4.13.6
       globals: 15.11.0
       ignore: 5.3.2
       minimatch: 9.0.5
@@ -7540,6 +8041,15 @@ snapshots:
       - supports-color
       - typescript
 
+  eslint-plugin-perfectionist@5.9.0(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3):
+    dependencies:
+      '@typescript-eslint/utils': 8.59.1(eslint@9.39.4(jiti@2.4.2))(typescript@5.9.3)
+      eslint: 9.39.4(jiti@2.4.2)
+      natural-orderby: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   eslint-plugin-prettier@5.5.5(eslint-config-prettier@10.1.8(eslint@9.39.4(jiti@2.4.2)))(eslint@9.39.4(jiti@2.4.2))(prettier@3.8.3):
     dependencies:
       eslint: 9.39.4(jiti@2.4.2)
@@ -7557,7 +8067,7 @@ snapshots:
   eslint-plugin-react-hooks@7.0.1(eslint@9.39.4(jiti@2.4.2)):
     dependencies:
       '@babel/core': 7.26.10
-      '@babel/parser': 7.27.0
+      '@babel/parser': 7.29.2
       eslint: 9.39.4(jiti@2.4.2)
       hermes-parser: 0.25.1
       zod: 4.3.6
@@ -7577,7 +8087,7 @@ snapshots:
       estraverse: 5.3.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
+      minimatch: 3.1.5
       object.entries: 1.1.9
       object.fromentries: 2.0.8
       object.values: 1.2.1
@@ -7636,6 +8146,8 @@ snapshots:
 
   eslint-visitor-keys@4.2.1: {}
 
+  eslint-visitor-keys@5.0.1: {}
+
   eslint@8.57.1:
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
@@ -7780,12 +8292,22 @@ snapshots:
       merge2: 1.4.1
       micromatch: 4.0.8
 
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
   fast-json-stable-stringify@2.1.0: {}
 
   fast-levenshtein@2.0.6: {}
 
   fast-uri@3.0.3: {}
 
+  fastest-levenshtein@1.0.16: {}
+
   fastq@1.17.1:
     dependencies:
       reusify: 1.0.4
@@ -7798,6 +8320,10 @@ snapshots:
     dependencies:
       escape-string-regexp: 1.0.5
 
+  file-entry-cache@11.1.2:
+    dependencies:
+      flat-cache: 6.1.22
+
   file-entry-cache@6.0.1:
     dependencies:
       flat-cache: 3.2.0
@@ -7853,8 +8379,16 @@ snapshots:
       flatted: 3.3.1
       keyv: 4.5.4
 
+  flat-cache@6.1.22:
+    dependencies:
+      cacheable: 2.3.4
+      flatted: 3.4.2
+      hookified: 1.15.1
+
   flatted@3.3.1: {}
 
+  flatted@3.4.2: {}
+
   follow-redirects@1.15.11: {}
 
   for-each@0.3.5:
@@ -7902,6 +8436,8 @@ snapshots:
 
   get-caller-file@2.0.5: {}
 
+  get-east-asian-width@1.5.0: {}
+
   get-intrinsic@1.2.7:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -7950,10 +8486,6 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
 
-  get-tsconfig@4.10.0:
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-
   get-tsconfig@4.13.6:
     dependencies:
       resolve-pkg-maps: 1.0.0
@@ -8016,6 +8548,16 @@ snapshots:
     dependencies:
       ini: 4.1.1
 
+  global-modules@2.0.0:
+    dependencies:
+      global-prefix: 3.0.0
+
+  global-prefix@3.0.0:
+    dependencies:
+      ini: 1.3.8
+      kind-of: 6.0.3
+      which: 1.3.1
+
   globals@11.12.0: {}
 
   globals@13.24.0:
@@ -8046,6 +8588,17 @@ snapshots:
       merge2: 1.4.1
       slash: 3.0.0
 
+  globby@16.2.0:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      fast-glob: 3.3.3
+      ignore: 7.0.5
+      is-path-inside: 4.0.0
+      slash: 5.1.0
+      unicorn-magic: 0.4.0
+
+  globjoin@0.1.4: {}
+
   gopd@1.2.0: {}
 
   graceful-fs@4.2.11: {}
@@ -8067,6 +8620,8 @@ snapshots:
 
   has-flag@4.0.0: {}
 
+  has-flag@5.0.1: {}
+
   has-property-descriptors@1.0.2:
     dependencies:
       es-define-property: 1.0.1
@@ -8081,6 +8636,10 @@ snapshots:
     dependencies:
       has-symbols: 1.1.0
 
+  hashery@1.5.1:
+    dependencies:
+      hookified: 1.15.1
+
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
@@ -8102,6 +8661,10 @@ snapshots:
     dependencies:
       react-is: 16.13.1
 
+  hookified@1.15.1: {}
+
+  hookified@2.2.0: {}
+
   hosted-git-info@2.8.9: {}
 
   hosted-git-info@4.1.0:
@@ -8128,6 +8691,8 @@ snapshots:
     dependencies:
       void-elements: 3.1.0
 
+  html-tags@5.1.0: {}
+
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.3
@@ -8183,6 +8748,8 @@ snapshots:
 
   import-meta-resolve@4.1.0: {}
 
+  import-meta-resolve@4.2.0: {}
+
   imurmurhash@0.1.4: {}
 
   indent-string@4.0.0: {}
@@ -8307,6 +8874,8 @@ snapshots:
 
   is-path-inside@3.0.3: {}
 
+  is-path-inside@4.0.0: {}
+
   is-plain-obj@1.1.0: {}
 
   is-plain-object@5.0.0: {}
@@ -8499,6 +9068,10 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
+  keyv@5.6.0:
+    dependencies:
+      '@keyv/serialize': 1.1.1
+
   kind-of@6.0.3: {}
 
   language-subtag-registry@0.3.23: {}
@@ -8556,6 +9129,8 @@ snapshots:
 
   lodash.startcase@4.4.0: {}
 
+  lodash.truncate@4.4.2: {}
+
   lodash.uniq@4.5.0: {}
 
   lodash.upperfirst@4.3.1: {}
@@ -8612,10 +9187,14 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
+  mathml-tag-names@4.0.0: {}
+
   mdn-data@2.27.1: {}
 
   meow@12.1.1: {}
 
+  meow@14.1.0: {}
+
   meow@8.1.2:
     dependencies:
       '@types/minimist': 1.2.5
@@ -8647,6 +9226,10 @@ snapshots:
 
   min-indent@1.0.1: {}
 
+  minimatch@10.2.5:
+    dependencies:
+      brace-expansion: 5.0.5
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
@@ -8689,6 +9272,8 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  natural-orderby@5.0.0: {}
+
   neo-async@2.6.2: {}
 
   nice-try@1.0.5: {}
@@ -8729,6 +9314,8 @@ snapshots:
       semver: 7.7.3
       validate-npm-package-license: 3.0.4
 
+  normalize-path@3.0.0: {}
+
   normalize.css@8.0.1: {}
 
   npm-run-path@2.0.2:
@@ -8942,11 +9529,21 @@ snapshots:
 
   possible-typed-array-names@1.0.0: {}
 
+  postcss-safe-parser@7.0.1(postcss@8.5.12):
+    dependencies:
+      postcss: 8.5.12
+
   postcss-selector-parser@7.1.1:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  postcss-sorting@10.0.0(postcss@8.5.12):
+    dependencies:
+      postcss: 8.5.12
+
+  postcss-value-parser@4.2.0: {}
+
   postcss@8.5.12:
     dependencies:
       nanoid: 3.3.11
@@ -9007,6 +9604,10 @@ snapshots:
 
   q@1.5.1: {}
 
+  qified@0.9.1:
+    dependencies:
+      hookified: 2.2.0
+
   queue-microtask@1.2.3: {}
 
   quick-lru@4.0.1: {}
@@ -9446,6 +10047,14 @@ snapshots:
 
   slash@3.0.0: {}
 
+  slash@5.1.0: {}
+
+  slice-ansi@4.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+
   snake-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
@@ -9507,6 +10116,11 @@ snapshots:
       emoji-regex: 9.2.2
       strip-ansi: 7.1.0
 
+  string-width@8.2.1:
+    dependencies:
+      get-east-asian-width: 1.5.0
+      strip-ansi: 7.2.0
+
   string.prototype.includes@2.0.1:
     dependencies:
       call-bind: 1.0.8
@@ -9573,6 +10187,10 @@ snapshots:
     dependencies:
       ansi-regex: 6.1.0
 
+  strip-ansi@7.2.0:
+    dependencies:
+      ansi-regex: 6.2.2
+
   strip-bom@3.0.0: {}
 
   strip-eof@1.0.0: {}
@@ -9585,6 +10203,63 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  stylelint-config-recommended@18.0.0(stylelint@17.9.1(typescript@5.9.3)):
+    dependencies:
+      stylelint: 17.9.1(typescript@5.9.3)
+
+  stylelint-config-standard@40.0.0(stylelint@17.9.1(typescript@5.9.3)):
+    dependencies:
+      stylelint: 17.9.1(typescript@5.9.3)
+      stylelint-config-recommended: 18.0.0(stylelint@17.9.1(typescript@5.9.3))
+
+  stylelint-order@8.1.1(stylelint@17.9.1(typescript@5.9.3)):
+    dependencies:
+      postcss: 8.5.12
+      postcss-sorting: 10.0.0(postcss@8.5.12)
+      stylelint: 17.9.1(typescript@5.9.3)
+
+  stylelint@17.9.1(typescript@5.9.3):
+    dependencies:
+      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-syntax-patches-for-csstree': 1.1.3(css-tree@3.2.1)
+      '@csstools/css-tokenizer': 4.0.0
+      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/selector-resolve-nested': 4.0.0(postcss-selector-parser@7.1.1)
+      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.1)
+      colord: 2.9.3
+      cosmiconfig: 9.0.1(typescript@5.9.3)
+      css-functions-list: 3.3.3
+      css-tree: 3.2.1
+      debug: 4.4.3
+      fast-glob: 3.3.3
+      fastest-levenshtein: 1.0.16
+      file-entry-cache: 11.1.2
+      global-modules: 2.0.0
+      globby: 16.2.0
+      globjoin: 0.1.4
+      html-tags: 5.1.0
+      ignore: 7.0.5
+      import-meta-resolve: 4.2.0
+      is-plain-object: 5.0.0
+      mathml-tag-names: 4.0.0
+      meow: 14.1.0
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.12
+      postcss-safe-parser: 7.0.1(postcss@8.5.12)
+      postcss-selector-parser: 7.1.1
+      postcss-value-parser: 4.2.0
+      string-width: 8.2.1
+      supports-hyperlinks: 4.4.0
+      svg-tags: 1.0.0
+      table: 6.9.0
+      write-file-atomic: 7.0.1
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   supertokens-js-override@0.0.4: {}
 
   supertokens-web-js@0.6.0:
@@ -9597,18 +10272,35 @@ snapshots:
       browser-tabs-lock: 1.3.0
       supertokens-js-override: 0.0.4
 
+  supports-color@10.2.2: {}
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
 
+  supports-hyperlinks@4.4.0:
+    dependencies:
+      has-flag: 5.0.1
+      supports-color: 10.2.2
+
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svg-tags@1.0.0: {}
+
   symbol-tree@3.2.4: {}
 
   synckit@0.11.12:
     dependencies:
       '@pkgr/core': 0.2.9
 
+  table@6.9.0:
+    dependencies:
+      ajv: 8.17.1
+      lodash.truncate: 4.4.2
+      slice-ansi: 4.0.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
   tapable@2.2.1: {}
 
   temp-dir@1.0.0: {}
@@ -9701,7 +10393,7 @@ snapshots:
 
   trim-newlines@3.0.1: {}
 
-  ts-api-utils@2.4.0(typescript@5.9.3):
+  ts-api-utils@2.5.0(typescript@5.9.3):
     dependencies:
       typescript: 5.9.3
 
@@ -9822,6 +10514,8 @@ snapshots:
 
   unicorn-magic@0.1.0: {}
 
+  unicorn-magic@0.4.0: {}
+
   universal-user-agent@5.0.0:
     dependencies:
       os-name: 3.1.0
@@ -10126,6 +10820,10 @@ snapshots:
 
   wrappy@1.0.2: {}
 
+  write-file-atomic@7.0.1:
+    dependencies:
+      signal-exit: 4.1.0
+
   ws@8.20.0: {}
 
   xlsx@https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz: {}
diff --git a/turbo.json b/turbo.json
index 47d6dcd5e..7f7e6863a 100644
--- a/turbo.json
+++ b/turbo.json
@@ -33,6 +33,12 @@
     "sort-package": {
       "outputs": []
     },
+    "stylelint": {
+      "outputs": []
+    },
+    "stylelint:fix": {
+      "outputs": []
+    },
     "test": {
       "outputs": []
     },