> For the complete documentation index, see [llms.txt](https://docs.notionapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.notionapps.com/screens-and-components/customize-a-screen/add-new-component-to-screen.md).

# Add new component to screen

Components allow you to customize the appearance and functionality of a screen in NotionApps. By adding a component, you can show or update specific fields in a more visually appealing and user-friendly way. Here's how you can add a component to a screen:

1. Go to a secondary screen, such as View Item, by clicking on a row in a List screen OR by clicking the "Go To Screen" button in the screen configuration section.

<figure><img src="https://4233028229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5ZqDXcVVffWUqEIZVhmn%2Fuploads%2F65kyzCDgxVJJU6MQKUoX%2Fcustomize-comp-1.png?alt=media&#x26;token=e6d15cfa-da1a-4281-980b-e0bcf8d75e30" alt=""><figcaption></figcaption></figure>

2. Once you're on the secondary screen, click on the plus (+) button in the screen configuration section.

<div align="center"><figure><img src="https://4233028229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5ZqDXcVVffWUqEIZVhmn%2Fuploads%2FRSVKlAQBSajLPk24lizy%2Fcustomize-comp-2.png?alt=media&#x26;token=4f0afbde-c66a-463d-be10-6d4bba6ec134" alt=""><figcaption></figcaption></figure></div>

3. In the panel that opens up, you can either select a logic based on the field you want to show, and a default component will be added to the screen (which you can customize later). Alternatively, you can select a specific component from the "Components" section and change its field to the desired field.

<figure><img src="https://4233028229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5ZqDXcVVffWUqEIZVhmn%2Fuploads%2FakHr2gY2wZllOH2ZpEKb%2Fcustomize-comp-3.png?alt=media&#x26;token=2d74b8ab-efa0-4d3a-880f-7ab053e8e491" alt=""><figcaption></figcaption></figure>

4. Customize the component as per your preferences. You can adjust its appearance, layout, and functionality by using the customization options available.

<figure><img src="https://4233028229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5ZqDXcVVffWUqEIZVhmn%2Fuploads%2FCosTGdImFA3UsJJIqg92%2Fcustomize-comp-4.png?alt=media&#x26;token=b4fc9f83-dfdb-4c4f-b087-5c26954fcfb1" alt=""><figcaption></figcaption></figure>
