+
+Text Input component is a user interface element that allows users to enter and edit text in a form or input field.
+
+### Properties
+
+| Properties | Description |
+| --- | --- |
+| Default value | The initial value of the component. You can dynamically change the initial value by typing JavaScript in {{}}. |
+| Placeholder | The value will be shown when the input field is empty. |
+| Label | The name of the field displayed to the user |
+| Caption | A caption used to describe the field in detail |
+| Hidden label | Set whether to display the label |
+| Position | Set the position of the label relative to the component |
+| Alignment | Set the alignment (align to left or right) of the label |
+| Width | When the label is on the left side of the component, set the width ratio of the label. |
+| Event Handler | Trigger queries, control components, or call other APIs in response to component events. |
+| Disabled | Control the status of whether the component is disabled. The component cannot be modified or focused when it is disabled. |
+| Read Only | Control the status of whether the component is read-only. A read-only component can be selected and focused but cannot be modified. |
+| Show clear button | control whether or not a clear button is displayed in the input field |
+| Show character count | control whether or not the character count of the input is displayed |
+| Prefix text | a short piece of text that appears to the left of the input field, often used to provide additional context or instructions to the user |
+| Suffix text | a short piece of text that appears to the right of the input field, often used to provide additional information or feedback to the user |
+| Tooltip | Users can enter the component tooltip here. The tooltip will be shown when it is focused. Markdown format is supported. |
+| Required field | Valid only when the switch is on. |
+| Pattern | specify a regular expression pattern that the user's input must match in order to be considered valid |
+| Max length | set the maximum number of characters that can be entered into the input field. |
+| Min Length | specify the minimum number of characters that the user must enter into the input field in order for the input to be considered valid. |
+| Custom rule | Create your validation logic here. The rules should be made in JavaScript and covered by {{}}. |
+| Hide validation message | You can hide the error message by switching the hidden status when the input value is incorrect. You can dynamically change the hidden status by JavaScript. |
+| Form Data Key | Specify a key of a wrapping form component when constructing the data attribute. |
+| Hidden | Dynamically control whether the component is hidden. You can change the hidden status through dynamical boolean value. |
+| Theme Color | Allows users to specify the button's background color and opacity |
+
+### Method
+
+You can use other components to control the component. We support the following two methods:
+
+- **setValue**
+
+To set the input value, for example, {{'value1'}}
+
+| Properties | Description |
+| --- | --- |
+| Value | Input value |
+
+- **clearValue**
+
+To clear the value of the selected component
+
+- **focus**
+
+When the focus method is called, the input field will be highlighted and ready for the user to start typing without the need for the user to click on the input field
+
+Example Usage:
+
+Input component support listening to the `onChange` event of other components using built-in event system. Set it up by following these example steps:
+
+1. Add an event trigger to the component that you want to listen to. For example, if you want to listen to the **`onChange`** event of a Radio Group component, you would add an event handler to that Radio Group component.
+2. In the Edit event handler, select **`Control component`** in action, select the **`Input`** component that you want to update as the target of the event.
+3. Choose the **`SetValue`** action and select the appropriate value for the input component. This will be the value that the input component has and will update when the event is triggered.
+4. Save the event trigger settings and repeat the process for any other components that you want to listen to.
+
+Once you've set up the event triggers, the input component will automatically update whenever the **`onChange`** event is triggered on the other components. This allows you to create dynamic interfaces that respond to user input in real-time, making it easier for users to navigate and interact with your application.
+
+### Event handler
+
+| Event | Description |
+| --- | --- |
+| Change | When a user changes the selected input value |
+| Focus | When a user moves the mouse cursor on the input component |
+| Blur | When a user is done inputting value and quit from focusing on the cascader component |
+
+### Data
+
+The component has some commonly used data, which can be called via **`{{componentName.propertyName}}`** in the app.
+
+| Property name | Description |
+| --- | --- |
+| value | user input value |
+| colorScheme | background color of the button |
+| disabled | a Boolean value indicate the disabled status |
+| displayName | the name of this component (ie button1) |
+| formDataKey | the Form Data Key of input |
+| hidden | hidden status (true or false) |
+| label | label value |
+| labelAlign | alignment of input label (left or right) |
+| labelPosition | position of input label (left or right) |
+| labelWidth | the integer representing width of label. |
+| maxLength | the value of maximum length |
+| minLength | the value of minimum length |
+| placeholder | placeholder value |
+| prefixText | value of the text prefix |
+| suffixText | value of the text suffix |
+| readOnly | a Boolean value indicate the readyOnly status of input. |
+| required | a Boolean value indicate the required status of input. |
+| regex | regular expression of input |
+| showCharacterCount | a Boolean value indicate whether the character count of input is displayed |
+| tooltipText | value of tooltip text |
+
+Example: {{input1.value}}
+
+### Use case
+
+Below are some examples for customizing input component.
+
+- Prefix:
+
+![input_prefix](https://cdn.illacloud.com/official-website/img/docs/input_prefix.png)
+
+- Suffix:
+
+![input_suffix](https://cdn.illacloud.com/official-website/img/docs/input_suffix.png)
+
+- Tooltip:
+
+![input_tooltip](https://cdn.illacloud.com/official-website/img/docs/input_tooltip.png)
+
+- Pattern:
+
+![input_pattern](https://cdn.illacloud.com/official-website/img/docs/input_pattern.png)
\ No newline at end of file
diff --git a/docs/Build-Apps/Components/appwrite.mdx b/docs/Build-Apps/Components/appwrite.mdx
new file mode 100644
index 0000000000..21c55ed493
--- /dev/null
+++ b/docs/Build-Apps/Components/appwrite.mdx
@@ -0,0 +1,235 @@
+---
+title: Appwrite
+
+crowdinRepo: https://crowdin.com/multilingual/illacloud-website/163?languages=en&filter=basic&value=0
+metaTitle: Appwrite Integration Doc | ILLA Cloud
+desc: Learn how to connect and interact with Appwrite database using ILLA Cloud.
+tagCategory: doc_menu_appwrite_click
+
+categoryName: 🔨 Integrations
+categoryPriority: 3
+postPriority: 1
+---
+
+##
What is Appwrite?
+
+Appwrite in Illa is a database integration that allows you to connect and interact with a Appwrite database. Appwrite is a popular open-source relational database management system that is known for its speed, reliability, and ease of use.
+
+With the Appwrite integration in Illa, you can query, insert, update, and delete data from a Appwrite database using SQL commands. You can also create custom SQL queries and run them within Illa. This makes it easy to build data-driven applications and dashboards that display real-time data from a Appwrite database.
+
+This tutorial outlines the process of creating an Admin Panel using ILLA Builder and Appwrite in a few simple steps. ILLA is a low-code platform for developers that enables the rapid development and deployment of internal tools. It allows for creating pages by dragging and dropping UI components, connecting to any database or API, and writing JavaScript. To learn more about Appwrite, visit their website at [https://Appwrite.io/](https://Appwrite.io/) Let’s begin!
+
+### Set up your Back end on Appwrite
+
+After signing into your Appwrite account, on the Appwrite dashboard, click `Create project` and set the name to `First Project`.
+
+![app_create_project](https://cdn.illacloud.com/official-website/img/docs/app_create_project.png)
+
+Then we can navigate to the project page. Appwrite provides multiple platforms for building your app as well as integrations.
+
+![app_platforms](https://cdn.illacloud.com/official-website/img/docs/app_platforms.png)
+
+Here we choose Web App as an example.
+
+After creating our Web app project, we may go to the database page since we only use Appwrite as a database integration so far.
+
+![app_dashboard](https://cdn.illacloud.com/official-website/img/docs/app_dahsboard.png)
+
+Then we may create database and create collections within the database
+
+![app_create_database](https://cdn.illacloud.com/official-website/img/docs/app_create_database.png)
+From here we may create attributes and data in the collection.
+
+![app_create_data](https://cdn.illacloud.com/official-website/img/docs/app_create_data.png)
+
+In order to retrieve documents by attributes, we need to make corresponding indexes for each attributes.
+
+![app_create_index](https://cdn.illacloud.com/official-website/img/docs/app_create_index.png)
+
+This database is now ready for you to integrate with Illa.
+
+### Create Appwrite
+
+There are two ways to create a resource in Illa after signing into your Illa account.
+
+- Create in Resources
+
+Sign into your Illa account, select `Resources` on the top of the page, and click `Create New` button.
+
+![external_resource](https://cdn.illacloud.com/official-website/img/docs/external_resource.png)
+
+Select `Appwrite` from the database list.
+
+![action_list](https://cdn.illacloud.com/official-website/img/docs/action_list.png)
+
+Connect to the database with the required parameters described in `Connection Settings` below.
+
+Click `Test Connection` to see if we can successfully connect to the database. If yes, click `Save Resources`, else, double check the hostname, port, username, and password is correct.
+
+After creating a resource, the ready Appwrite will display as shown.
+
+![app_ex_ready](https://cdn.illacloud.com/official-website/img/docs/app_ex_ready.png)
+
+- Create in Builder
+
+Sign into your Illa account, create a project in Illa Builder in the `App` page, and navigate to the `Action List` at the bottom of the page. Click `new`, then select `Appwrite` from the database list. Then, connect to the database with required parameters described in `Connection Settings` below.
+
+Click `Test Connection` to see if we can successfully connect to the database. If yes, click `Save Resources`, else, double check the hostname, port, username, and password is correct.
+
+### Connection Settings
+
+Here we need to provide information for connecting to Appwrite database.
+
+![app_config](https://cdn.illacloud.com/official-website/img/docs/app_config.png)
+
+| Properties | Required | Description |
+| ----------- | -------- | ------------------------------------------------------------------------------------------------------ |
+| Name | required | The name for resource when creating actions in the ILLA. |
+| Host | required | The URL or IP address for your database |
+| Database ID | required | unique identifier assigned to each database created within Appwrite |
+| Project ID | required | unique identifier that represents your entire Appwrite project |
+| API key | required | a secret token that serves as a form of authentication when making API requests to the Appwrite server |
+
+To find the required `Host`, `Database ID`, `Project ID`, and `API key` in Appwrite, we first go to the `setting` button at the bottom left corner of the project page.
+
+Copying the `project ID` for `project ID` and `API Endpoint` for `Host` in the Appwrite configuration in Illa.
+
+![app_setting](https://cdn.illacloud.com/official-website/img/docs/app_setting.png)
+
+Then we may click the `View API Keys` button on the same page. If you have not created an API for this project, click `Create API Key` button and select only `Database` folder since that’s what we will be using from Appwrite.
+
+![app_api_key](https://cdn.illacloud.com/official-website/img/docs/app_api_key.png)
+
+Copy the `API Key Secret` for `API key` in Illa configuration. It can be copied for these two spots.
+
+![app_key_secret](https://cdn.illacloud.com/official-website/img/docs/app_key_secret.png)
+
+What we have left is the `Database ID` which we can find in the `Database` Page. Copying it and paste it at the Appwrite Configuration in Illa.
+
+![app_database](https://cdn.illacloud.com/official-website/img/docs/app_database.png)
+
+The final product should look something like this.
+
+![app_final_config](https://cdn.illacloud.com/official-website/img/docs/app_final_config.png)
+
+### Create Actions
+
+We have created a Appwrite resource, we can add the action by selecting Appwrite from action list and choosing the `Create action` button.
+
+![app_resource_list](https://cdn.illacloud.com/official-website/img/docs/app_resource_list.png)
+
+Now we have added the Appwrite server as an action to our building page.
+
+![app](https://cdn.illacloud.com/official-website/img/docs/app.png)
+
+### Configure Appwrite
+
+#### Overview
+
+| Method Name | Description |
+| ------------- | --------------------------------------------------------------------------------------- |
+| Method | Create a document, Get a document, Update a document, Delete a document, List documents |
+| Collection ID | a unique identifier assigned to a database collection |
+| Transformer | transforming data into the style you like using JavaScript |
+
+#### Create a document
+
+create a new document in a collection
+
+ Input
+
+| Properties | Required | Description |
+| ----------- | -------- | --------------------------------------------------------------- |
+| Document ID | required | a unique identifier assigned to a database collection document |
+| Data | optional | an object containing the fields and values of the new document. |
+
+For example, to create a new document in a collection with two fields - `name` and `age`, you can use 1 as `document ID` and `{{ {"Name": "David", "Age": 18}}}` for `data`.
+
+ Output
+
+a response object that includes the ID of the newly created document, as well as additional metadata such as the date and time of creation.
+
+![app_create_code](https://cdn.illacloud.com/official-website/img/docs/app_create_code.png)
+
+#### Get a document
+
+retrieve a specific document from a collection in the database
+
+ Input
+
+| Properties | Required | Description |
+| ----------- | -------- | -------------------------------------------------------------- |
+| Document ID | required | a unique identifier assigned to a database collection document |
+
+For example, we can get the document with id `1`.
+
+ Output
+
+a response object that includes the data of the requested document
+
+![app_get_data](https://cdn.illacloud.com/official-website/img/docs/app_get_data.png)
+
+Use `{{Appwrite1.data}}` to get all returned value.
+
+![app_get_code](https://cdn.illacloud.com/official-website/img/docs/app_get_code.png)
+
+#### Update a document
+
+update the data of an existing document in a collection.
+
+ Input
+
+| Properties | Required | Description |
+| ----------- | -------- | ------------------------------------------------------------------------------------------- |
+| Document ID | required | a unique identifier assigned to a database collection document |
+| Data | optional | An object containing the updated fields and values that you want to assign to the document. |
+
+For example, to update a document in a collection using the `updateDocument` method, you can put `1` for document id and `{{{"Name":"Fred"}}}` for data.
+
+ Output
+
+a response object that includes the data of the requested document
+
+![app_update)data](https://cdn.illacloud.com/official-website/img/docs/app_update_data.png)
+
+#### Delete a document
+
+delete a specific document from a collection in the database
+
+ Input
+
+| Properties | Required | Description |
+| ----------- | -------- | -------------------------------------------------------------- |
+| Document ID | required | a unique identifier assigned to a database collection document |
+
+For example, we can delete the document with id `1`.
+
+ Output
+
+a response object that confirms the successful deletion of the document.
+
+![app_delete_data](https://cdn.illacloud.com/official-website/img/docs/app_delete_data.png)
+
+#### List document
+
+retrieve multiple documents from a collection in the database
+
+ Input
+
+| Properties | Required | Description |
+| ---------- | -------- | ----------------------------------------------------------------------------- |
+| Filter | optional | define conditions to filter the documents based on specific fields and values |
+| Order by | optional | specify the field by which the resulting documents should be sorted |
+| Limit | optional | restrict the number of documents returned in the result set |
+
+For example, to list all the documents with Name = James.
+
+ Output
+
+An array of documents that satisfy the filter.
+
+![app_list_data](https://cdn.illacloud.com/official-website/img/official-site/intergration/app_list_data.png)
+
+Use `{{Appwrite1.data[0].documents}}` to get returned value.
+
+![app_list_code](https://cdn.illacloud.com/official-website/img/docs/app_list_code.png)
diff --git a/docs/Build-Apps/amazons3.mdx b/docs/Build-Apps/amazons3.mdx
new file mode 100644
index 0000000000..af5585b21f
--- /dev/null
+++ b/docs/Build-Apps/amazons3.mdx
@@ -0,0 +1,238 @@
+---
+title: Amazon S3
+sidebar_class_name: green
+
+crowdinRepo: https://crowdin.com/multilingual/illacloud-website/369?languages=en&filter=basic&value=0
+metaTitle: Amazon S3 Integration Doc | ILLA Cloud
+desc: Learn how to connect and interact with your Amazon S3 API using ILLA Cloud's database integration feature.
+
+tagCategory: doc_menu_amazon_s3_click
+
+categoryName: 🔨 Integrations
+categoryPriority: 3
+---
+
+##
What is Amazon S3?
+
+Amazon S3 is a highly scalable and secure cloud storage service offered by Amazon Web Services (AWS). When combined with ILLA Cloud, developers can seamlessly integrate Amazon S3 into their applications, leveraging its robust storage capabilities to store and retrieve data efficiently. ILLA Cloud simplifies the integration process, allowing developers to seamlessly connect to Amazon S3 and utilize its powerful features, such as data encryption, versioning, access controls, and seamless scalability. With the integration of Amazon S3 on ILLA Cloud, developers can enhance their applications with reliable and scalable storage solutions, enabling them to focus on building innovative and data-driven experiences.
+
+### Create Amazon S3 API
+
+There are two ways to create a resource in Illa after signing into your Illa account.
+
+- Create in Resources
+
+Sign in to your Illa account, select `**Resources**` on the top of the page, and click `**Create New**` button.
+
+![external_resource](https://cdn.illacloud.com/official-website/img/docs/external_resource.png)
+
+Select **`Amazon S3`** from the API list.
+
+![action_list](https://cdn.illacloud.com/official-website/img/docs/action_list.png)
+
+Connect to the database with the required parameters described in `Connection Settings` below.
+
+Click `**Test Connection**` to see if we can successfully connect to the database. If yes, click **`Save Resources`**, else, double check the hostname, port, username, and password is correct.
+
+After creating a resource, the ready Amazon S3 will display as shown.
+
+![amazon_ex_ready](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_ex_ready.jpg)
+
+- Create in Builder
+
+Sign into your Illa account, create a project in Illa Builder on the `**App**` page, and navigate to the **`Action List`** at the bottom of the page. Click `**new**`, then select **`Amazon S3`** from the database list. Then, connect to the database with the required parameters described in `Connection Settings` below.
+
+Click `**Test Connection**` to see if we can successfully connect to the database. If yes, click **`Save Resources`**, else, double check the hostname, port, username, and password is correct.
+
+### Connection Settings
+
+Here we need to provide information for connecting to Amazon S3 API.
+
+![amazon_config](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_config.jpg)
+
+| Properties | Required | Description |
+| ------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Name | required | The name for resource when creating actions in the ILLA. |
+| Bucket name | optional | a unique identifier that represents a storage container in Amazon S3. It provides a logical separation for organizing and accessing your files |
+| S3 ACL for uploaded files | optional | allows you to define fine-grained access permissions for files within your bucket. It specifies who can perform specific operations, such as reading, writing, or deleting files. |
+| Region | required | geographical location where your Amazon S3 bucket is stored. It determines the physical location of your data and can impact factors like latency and data transfer costs. |
+| Custom S3 endpoint | optional | enables you to configure a specific endpoint URL for accessing your Amazon S3 resources. It can be useful for scenarios where you want to use a custom domain or integrate with a CDN (Content Delivery Network). |
+| Access key | required | credentials that authenticate your requests to access Amazon S3 |
+| Secret access key | required | generated when you create an IAM (Identity and Access Management) user or an AWS (Amazon Web Services) access key pair. |
+
+### Create Actions
+
+We have created an Amazon S3 resource, we can add the action by selecting Amazon S3 from the action list and choosing the **`Create action`** button.
+
+![amazon_resource_list](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_resource_list.jpg)
+
+Now we have added the Amazon server as an action to our building page.
+
+![amazon](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon.jpg)
+
+### Configure Amazon S3
+
+#### Overview
+
+| Method Name | Description |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| Action Type | list all objects in a bucket, read an object, download an object, delete an object, delete multiple objects, upload data, upload multiple data |
+| Bucket name | a unique identifier that represents a storage container in Amazon S3. |
+| Transformer | transforming data into the style you like using JavaScript |
+
+#### List all objects in a bucket
+
+retrieve a list of all objects stored within a specific bucket.
+
+** Input **
+
+| Properties | Required | Description |
+| ------------------------ | -------- | ------------------------------------------------------------------------------------------ |
+| Prefix to filter results | optional | filter the results to include only objects whose key (name) begins with a specific prefix |
+| Delimiter | optional | specify a character that separates object key hierarchies |
+| Generate Signed URL | optional | whether to generate a time-limited URL that provides temporary access to a specific object |
+| Max Keys | optional | limit the maximum number of objects returned in the response |
+
+For example, to get all objects in the database.
+
+** Output **
+
+return an array of objects, each including at least one `objectKey` property.
+
+![amazon_list_all_data](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_list_all_data1.jpg)
+
+Use `{{s31.data}}` to get all returned data.
+
+![amazon_list_all_code](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_list_all_code1.jpg)
+
+#### Read an object
+
+retrieve the contents of a specific object stored within a bucket
+
+** Input **
+
+| Properties | Required | Description |
+| ------------------- | -------- | ------------------------------------------------------------------------------- |
+| Object Key | required | the name or path of the object within the bucket |
+| Generate Signed URL | optional | generate a time-limited URL that provides temporary access to a specific object |
+
+For example, to get the content of document '1111.txt', put `1111.txt` for **`Object key`**.
+
+** Output **
+
+return the content and metadata of a document
+
+![amazon_read_data1](https://cdn.illacloud.com/official-website/img/official-site/intergration/amazon_read_data1.jpg)
+
+![amazon_read_data2](https://cdn.illacloud.com/official-website/img/official-site/intergration/amazon_read_data2.jpg)
+
+Use `{{s31.data}}` to get the returned data.
+
+![amazon_read_code](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_read_code.jpg)
+
+#### Download an object
+
+retrieve the contents of a specific object stored within a bucket
+
+** Input **
+
+| Properties | Required | Description |
+| ------------------- | -------- | ------------------------------------------------------------------------------- |
+| Object Key | required | the name or path of the object within the bucket |
+| Generate Signed URL | optional | generate a time-limited URL that provides temporary access to a specific object |
+
+For example, to download the document '1111.txt', put `1111.txt` for **`Object key`**.
+
+** Output **
+
+return the content and metadata of a document and download the document to local
+
+![amazon_read_data1](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_download_data.jpg)
+
+#### Delete an object
+
+deletes a single object from an S3 bucket.
+
+** Input **
+
+| Properties | Required | Description |
+| ------------------- | -------- | ------------------------------------------------------------------------------- |
+| Object Key | required | the name or path of the object within the bucket |
+| Generate Signed URL | optional | generate a time-limited URL that provides temporary access to a specific object |
+
+For example, to delete the document '1111.txt', put `1111.txt` for **`Object key`**.
+
+** Output **
+
+return the content and metadata of the deleted document
+
+![amazon_delete_data](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_delete_data.jpg)
+
+![amazon_delete_data1](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_delete_data1.jpg)
+
+#### Delete multiple objects
+
+deletes multiple objects simultaneously from an S3 bucket
+
+** Input **
+
+| Properties | Required | Description |
+| ------------------- | -------- | ------------------------------------------------------------------------------- |
+| Object Key | required | the name or path of the object within the bucket |
+| Generate Signed URL | optional | generate a time-limited URL that provides temporary access to a specific object |
+
+For example, to delete multiple documents, put `{{["images.jpeg", "images-1.png"]}}` for **`Object key`**.
+
+** Output **
+
+return the content and metadata of the deleted documents
+
+![amazon_delete2_data1](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_delete2_data1.jpg)
+
+![amazon_delete2_data2](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_delete2_data2.jpg)
+
+#### Upload data
+
+uploading an object into a bucket
+
+** Input **
+
+| Properties | Required | Description |
+| ------------------------------------- | -------- | ---------------------------------------------------------------------------------------- |
+| Content Type | required | MIME type of object you are uploading. |
+| Upload object name | required | the name of the object you are uploading. |
+| Upload data | required | the data you want to upload to Amazon S3. |
+| Timeout for uploading a file (Minute) | optional | the uploading time in minutes before the uploading process is stopped by a timeout error |
+
+For example, to delete multiple documents, put `text` for **`content type`**, `text.txt` for **`upload object name`**, and `text` for **`upload data`**.
+
+** Output **
+
+return the message of whether the document is uploaded successfully
+
+![amazon_upload_data1](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_upload_data1.jpg)
+
+![amazon_upload_data2](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_upload_data2.jpg)
+
+#### Upload multiple data
+
+upload a list of objects into a bucket
+
+** Input **
+
+| Properties | Required | Description |
+| ------------------------------------- | -------- | ---------------------------------------------------------------------------------------- |
+| Content Type | required | MIME type of object you are uploading. |
+| Upload object name list | required | a list of names of the objects you are uploading. |
+| Upload data list | required | a list of the data you want to upload to Amazon S3. |
+| Timeout for uploading a file (Minute) | optional | the uploading time in minutes before the uploading process is stopped by a timeout error |
+
+For example, to delete multiple documents, put `text` for **`content type`**, `{{['text.txt', 'text2.txt']}}` for **`upload object name list`**, and `{{['text', 'text2']}}` for **`upload data list`**.
+
+** Output **
+
+return the message of whether the documents are uploaded successfully
+
+![amazon_upload_data1](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_upload_data1.jpg)
+
+![amazon_upload_data2](https://cdn.illacloud.com/official-website/img/docs/assemble/amazon_upload_data2.jpg)
diff --git a/docs/chart.mdx b/docs/chart.mdx
new file mode 100644
index 0000000000..216dcbc662
--- /dev/null
+++ b/docs/chart.mdx
@@ -0,0 +1,26 @@
+---
+slug: /
+---
+
+---
+title: Chart
+metaTitle: Chart Component Doc | ILLA Cloud
+desc: Learn how to use the Chart component from ILLA Cloud to visualize data as graphs and charts using Chart.js in your applications.
+crowdinRepo: https://crowdin.com/multilingual/illacloud-website/171?languages=en&filter=basic&value=0
+tagCategory: doc_menu_chart_click
+categoryName: 🧬 Assemble components
+categoryPriority: 6
+postPriority: 1
+---
+
+##
-
- );
-}
-```
-
-A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page).
-
-## Create your first Markdown Page
-
-Create a file at `src/pages/my-markdown-page.md`:
-
-```mdx title="src/pages/my-markdown-page.md"
-# My Markdown page
-
-This is a Markdown page
-```
-
-A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page).
diff --git a/docs/tutorial-basics/deploy-your-site.md b/docs/tutorial-basics/deploy-your-site.md
deleted file mode 100644
index 1c50ee063e..0000000000
--- a/docs/tutorial-basics/deploy-your-site.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-sidebar_position: 5
----
-
-# Deploy your site
-
-Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**).
-
-It builds your site as simple **static HTML, JavaScript and CSS files**.
-
-## Build your site
-
-Build your site **for production**:
-
-```bash
-npm run build
-```
-
-The static files are generated in the `build` folder.
-
-## Deploy your site
-
-Test your production build locally:
-
-```bash
-npm run serve
-```
-
-The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/).
-
-You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).
diff --git a/docs/tutorial-basics/markdown-features.mdx b/docs/tutorial-basics/markdown-features.mdx
deleted file mode 100644
index 0337f34d6a..0000000000
--- a/docs/tutorial-basics/markdown-features.mdx
+++ /dev/null
@@ -1,150 +0,0 @@
----
-sidebar_position: 4
----
-
-# Markdown Features
-
-Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
-
-## Front Matter
-
-Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
-
-```text title="my-doc.md"
-// highlight-start
----
-id: my-doc-id
-title: My document title
-description: My document description
-slug: /my-custom-url
----
-// highlight-end
-
-## Markdown heading
-
-Markdown text with [links](./hello.md)
-```
-
-## Links
-
-Regular Markdown links are supported, using url paths or relative file paths.
-
-```md
-Let's see how to [Create a page](/create-a-page).
-```
-
-```md
-Let's see how to [Create a page](./create-a-page.md).
-```
-
-**Result:** Let's see how to [Create a page](./create-a-page.md).
-
-## Images
-
-Regular Markdown images are supported.
-
-You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
-
-```md
-![Docusaurus logo](/img/docusaurus.png)
-```
-
-![Docusaurus logo](/img/docusaurus.png)
-
-You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:
-
-```md
-![Docusaurus logo](./img/docusaurus.png)
-```
-
-## Code Blocks
-
-Markdown code blocks are supported with Syntax highlighting.
-
- ```jsx title="src/components/HelloDocusaurus.js"
- function HelloDocusaurus() {
- return (
-