> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/2.builder/1.frontend/2.components.md).

# Component Settings

Add and Configure Components

First, please make sure you have already created a new [service](/home/quantumbyte-v2.0/2.builder/1.frontend/1.started.md) and are on the frontend [builder](/home/quantumbyte-v2.0/2.builder.md) page, as shown in the following image.

<figure><img src="https://3956894092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEWmc9IGdzSxwzSIEHL6y%2Fuploads%2Fgit-blob-c4b2c9787c1d7831756951659c2847a589eb7fe5%2Fimage%20(16)%20(1)%20(1)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You will find several pre-built components on the left that you can add to your service. To learn more about what each component does, you can check the detailed descriptions in the [Widget](/home/quantumbyte-v2.0/2.builder/1.frontend/7.widget.md) menu.
{% endhint %}

***

### Add Components

To add a component to your page, simply click and hold a component from the left panel, then drag and drop it into the central page area, as demonstrated in the image below.

<figure><img src="https://3956894092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEWmc9IGdzSxwzSIEHL6y%2Fuploads%2Fgit-blob-7532a3ce6d4e8a6f71d33bea6d32c43a9baa0969%2Fimage%20(17)%20(1)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

### Component Settings

Each component has its own unique settings. To configure a component, click the "Gear" icon on the component after you've placed it on the page.

<figure><img src="https://3956894092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEWmc9IGdzSxwzSIEHL6y%2Fuploads%2Fgit-blob-ac2123b46a4ed0f9f4d89dc442ec6123663a6c95%2Fimage%20(18)%20(1)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

### Delete Component

If you wish to remove a component, just click the "**Trash Can**" icon on that specific component.

<figure><img src="https://3956894092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEWmc9IGdzSxwzSIEHL6y%2Fuploads%2Fgit-blob-77413f7701ae0824365301dc3f92827011fdd057%2Fimage%20(19)%20(1)%20(1)%20(1)%20(1)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Excellent! You have now successfully learned how to add, remove, and configure components. The next stage is to learn how to create a new page within the builder.
{% endhint %}