diff --git a/docker-compose.yml b/docker-compose.yml
index 9c69af07..ff02f618 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -15,7 +15,7 @@ services:
       - /app/node_modules
 
   vckit-api:
-    image: ghcr.io/uncefact/project-vckit:sha-a21556a@sha256:f75ef2de34ce587b0d54c9a7cd8d63f9d6c9cacbce191c893537dadd588ee368
+    image: ghcr.io/uncefact/project-vckit:sha-2adb515@sha256:e109a76f66f6d7763c0addde3a0fb1eee10ade21e2966a67c88348d37eb8db70
     env_file:
       - local.env
     ports:
diff --git a/documentation/docs/mock-apps/components/import-button.md b/documentation/docs/mock-apps/components/import-button.md
new file mode 100644
index 00000000..78dafb57
--- /dev/null
+++ b/documentation/docs/mock-apps/components/import-button.md
@@ -0,0 +1,39 @@
+---
+sidebar_position: 51
+title: Import Button
+---
+
+import Disclaimer from '../../\_disclaimer.mdx';
+
+<Disclaimer />
+## Description
+
+The ImportButton component is responsible for rendering a button that allows the user to import data. The component will return the data that is imported by the user.
+
+## Example
+
+```json
+{
+  "name": "ImportButton",
+  "type": "EntryData",
+  "props": {
+    "label": "Import JSON",
+    "style": { "margin": "40px auto", "paddingTop": "40px", "width": "80%" }
+  }
+}
+```
+
+## Definitions
+
+| Property | Required | Description                                         | Type                                                    |
+| -------- | -------- | --------------------------------------------------- | ------------------------------------------------------- |
+| name     | Yes      | The name of the component(should be "ImportButton") | String                                                  |
+| type     | Yes      | The type of the component (should be "EntryData")   | [ComponentType](/docs/mock-apps/common/component-type)  |
+| props    | Yes      | The properties for the ImportButton                 | [Props](/docs/mock-apps/components/import-button#props) |
+
+### Props
+
+| Property | Required | Description                     | Type   |
+| -------- | -------- | ------------------------------- | ------ |
+| label    | Yes      | The label for the import button | String |
+| style    | No       | The style for the component     | Object |
diff --git a/documentation/docs/mock-apps/components/index.md b/documentation/docs/mock-apps/components/index.md
index 02969829..6a47e7b7 100644
--- a/documentation/docs/mock-apps/components/index.md
+++ b/documentation/docs/mock-apps/components/index.md
@@ -17,6 +17,9 @@ Components are reusable UI elements that make up the visual and interactive part
 - [Local Storage Loader](./local-storage-loader)
 - [Conformity Credential](./conformity-credential)
 - [Conformity Credential Checkbox](./conformity-credential-checkbox)
+- [Render Check List](./render-check-list)
+- [Import Button](./import-button)
+- [QR Code Scanner Dialog Button](./qr-code-scanner-dialog-button)
 
 ## Diagram
 
@@ -30,23 +33,23 @@ graph TD
 
 ## Config
 
-| Property | Required | Description | Type |
-|----------|----------|-------------|------|
-| name | Yes | The name of the component (depends on component used)| [Component](#available-components) |
-| type | Yes | The type of the component (depends on component used) | [ComponentType](/docs/mock-apps/common/component-type) |
-| props | Yes | Properties passed to the component (depends on component used)| [Component](#available-components) |
+| Property | Required | Description                                                    | Type                                                   |
+| -------- | -------- | -------------------------------------------------------------- | ------------------------------------------------------ |
+| name     | Yes      | The name of the component (depends on component used)          | [Component](#available-components)                     |
+| type     | Yes      | The type of the component (depends on component used)          | [ComponentType](/docs/mock-apps/common/component-type) |
+| props    | Yes      | Properties passed to the component (depends on component used) | [Component](#available-components)                     |
 
 ## Example
 
 ```json
 {
-    "name": "CustomButton",
-    "type": "Submit",
-    "props": {
-        "label": "Submit",
-        "description": "Click to submit the form"
-    }
+  "name": "CustomButton",
+  "type": "Submit",
+  "props": {
+    "label": "Submit",
+    "description": "Click to submit the form"
+  }
 }
 ```
 
-For detailed information about each component, please refer to their respective documentation pages linked above.
\ No newline at end of file
+For detailed information about each component, please refer to their respective documentation pages linked above.
diff --git a/documentation/docs/mock-apps/components/qr-code-scanner-dialog-button.md b/documentation/docs/mock-apps/components/qr-code-scanner-dialog-button.md
new file mode 100644
index 00000000..8156c96a
--- /dev/null
+++ b/documentation/docs/mock-apps/components/qr-code-scanner-dialog-button.md
@@ -0,0 +1,37 @@
+---
+sidebar_position: 51
+title: QR Code Scanner Dialog Button
+---
+
+import Disclaimer from '../../\_disclaimer.mdx';
+
+<Disclaimer />
+## Description
+
+The QRCodeScannerDialogButton component is responsible for rendering a button that allows the user to scan a QR code. The component will return the data that is scanned by the user.
+
+## Example
+
+```json
+{
+  "name": "QRCodeScannerDialogButton",
+  "type": "EntryData",
+  "props": {
+    "style": { "margin": "40px auto", "paddingTop": "40px", "width": "80%" }
+  }
+}
+```
+
+## Definitions
+
+| Property | Required | Description                                                      | Type                                                                    |
+| -------- | -------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| name     | Yes      | The name of the component(should be "QRCodeScannerDialogButton") | String                                                                  |
+| type     | Yes      | The type of the component (should be "EntryData")                | [ComponentType](/docs/mock-apps/common/component-type)                  |
+| props    | Yes      | The properties for the QRCodeScannerDialogButton                 | [Props](/docs/mock-apps/components/qr-code-scanner-dialog-button#props) |
+
+### Props
+
+| Property | Required | Description                 | Type   |
+| -------- | -------- | --------------------------- | ------ |
+| style    | No       | The style for the component | Object |
diff --git a/documentation/docs/mock-apps/components/render-check-list.md b/documentation/docs/mock-apps/components/render-check-list.md
new file mode 100644
index 00000000..bd4fc19e
--- /dev/null
+++ b/documentation/docs/mock-apps/components/render-check-list.md
@@ -0,0 +1,71 @@
+---
+sidebar_position: 50
+title: Render Check List
+---
+
+import Disclaimer from '../../\_disclaimer.mdx';
+
+<Disclaimer />
+## Description
+
+The RenderCheckList component is responsible for rendering a list of items with checkboxes. It is a composed component that will load data from another component ([Import Button](./import-button) and [QR Code Scanner Dialog Button](./qr-code-scanner-dialog-button)), when the user clicks to import or scan a QR code. The component will render a list of items with checkboxes, the labels of the checkboxes will be the identifiers of the items that are loaded from the data with the path is configured at `requiredFieldPath` field.
+
+## Example
+
+```json
+{
+  "name": "RenderCheckList",
+  "type": "EntryData",
+  "props": {
+    "requiredFieldPath": "/vc/credentialSubject/eventID",
+    "checkBoxLabel": "Imported valid json:",
+    "nestedComponents": [
+      {
+        "name": "ImportButton",
+        "type": "EntryData",
+        "props": {
+          "label": "Import JSON",
+          "style": { "margin": "40px auto", "paddingTop": "40px", "width": "80%" }
+        }
+      },
+      {
+        "name": "QRCodeScannerDialogButton",
+        "type": "EntryData"
+      }
+    ],
+    "style": { "margin": "40px auto", "paddingTop": "40px", "width": "80%" }
+  }
+}
+```
+
+## Definitions
+
+| Property | Required | Description                                            | Type                                                        |
+| -------- | -------- | ------------------------------------------------------ | ----------------------------------------------------------- |
+| name     | Yes      | The name of the component(should be "RenderCheckList") | String                                                      |
+| type     | Yes      | The type of the component (should be "EntryData")      | [ComponentType](/docs/mock-apps/common/component-type)      |
+| props    | Yes      | The properties for the RenderCheckList                 | [Props](/docs/mock-apps/components/render-check-list#props) |
+
+### Props
+
+| Property          | Required | Description                                                | Type                                       |
+| ----------------- | -------- | ---------------------------------------------------------- | ------------------------------------------ |
+| requiredFieldPath | Yes      | The path for the label of the checkbox item                | String                                     |
+| nestedComponents  | Yes      | An array of components to be rendered with the loaded data | [Component](/docs/mock-apps/components/)[] |
+| checkBoxLabel     | Yes      | The label for the checkbox list                            | String                                     |
+| style             | No       | The style for the component                                | Object                                     |
+
+## Response Data
+
+The component will return an object with data that is selected by the user from the list of checkboxes. The object will have the following structure:
+
+```json
+{
+  "0123456789": {
+    // Imported data
+  },
+  "9876543210": {
+    // Imported data
+  }
+}
+```