# Designing the user interface
You can build the user interface by placing various components on the page.
1. To design the user interface, on the menu bar, click the **Enable Developer mode** icon.\ 
2. To open the page designer, click 
.
3. To add components, right click on the parent component. The list of all existing child components is displayed.
4. Select the required component from the list.
{% hint style="info" %}
*To know how to add components to a page, visit the* [***Working with page components*** ](/creating-pages/working-with-pages/working-with-page-components.md)*section.*
{% endhint %}
## Adding components to the homepage
You can view that the page is already added as a component in the **Tree** tab.
1. In the page designer, right click on the **Page** component, add a **Vertical Layout Panel** component to arrange the page elements vertically in a single column.\
\&#xNAN;*By default, the child component, **Vertical*** ***Section**, is added.*
2. Right-click on the first **Vertical** **Section** component, and add a **Card** **Wrapper** component to clearly define the sections of the page into header and body. \
\&#xNAN;*By default, the child components, **Card Header** and **Card Body**, are added.*
1. Right-click on the **Card Header** component, and click **Delete**. We can add the title to the page under the **Card** **Body** component.
2. Right-click on the **Card** **Body** component and select a header component, namely **H1**.
3. Double-click on the **H1** component, the properties tab is displayed.\
Under **General** properties, in the **Text** field, type the required page title. For example: **Welcome to the Customer Portal!**
3. Right-click on the second **Vertical** **Section** component, and add a **Card** **Wrapper** component.
1. In the **Properties** tab of the **Card Header** component, under **General** properties, in the **Title** field, type the required section title. For example: **Ticket Management.**\
\&#xNAN;*The section title will be used as a placeholder to navigate to the ticket summary page.*
4. Right-click on the **Card** **Header** component, and add **Trigger On Click**.
1. To define an action on click, right-click on the trigger and add the **Go To Page** action.
2. In the **Properties** tab of the **Go To Page** action, under **General** properties, in the **Page State** field, type the **Page state** of the ticket summary page. \
For example: **app.cptickets**
{% hint style="info" %}
* *To copy the **Page State** of a component:*
* *In the **Navigation*** ***menu**, under the **Developer** role, in the **Developer** group, click **Pages**.*
* *Under the Page column, double-click on the ticket summary page name, **cpticketmgmt.** The **Page Details** page is displayed.*
* *Copy the value in the **Page*** ***State** field. You can use this value to navigate to the **cpticketmgmt** page canvas.*
{% endhint %}
5\. To add an explanation to the section, right-click on the **Card**\
**Body** component, and add a **Paragraph** component.
1\. In the **Properties** tab of the **Paragraph** component, under\
**General** properties, in the **Text** field, type the required\
description.\
For example: **Create, Prioritize, and Monitor tickets**
{% hint style="info" %}
*You can change the font color and font type for the description under the **Text*** ***Style** properties.*\
*You can also change the position of the description by changing the margin values under **Layout** properties.*
{% endhint %}
6\. Right-click on the **Card** **Body** component, and add a **Button**\
component.\
*By default, the **Trigger On Click** is added.*
1*.* In the **Properties** tab of the **Button** component, under **Label**\
properties, in the **Text** field, type **View Lookups**.
2\. Right-click on the trigger and add the **Go To Page** action.
3\. In the **Properties** tab of the **Go To Page** action, under\
**General** properties, in the **Page State** field, type the Page\
state of the lookup page. For example: **app.lookuppage**
7\. On the menu bar, click 
. The components added to the page\
are saved.
8\. To view the page functionalities, on the menu-bar, click 
. You\
can now access the page with all the defined functionalities.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.cloudio.io/building-your-first-application/building-your-first-application/creating-pages/designing-the-user-interface.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.