> For the complete documentation index, see [llms.txt](https://docs.cloudio.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cloudio.io/building-your-first-application/building-your-first-application/creating-pages/designing-the-user-interface.md).
# 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.