> For the complete documentation index, see [llms.txt](https://docs.goril.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.goril.app/cookbook/my-first-application/create-the-base-homepage-layout.md).
# Create the base HomePage Layout
{% hint style="info" %}
To see the **Function**, **Preview** and **Delete** buttons, hover the desired field.
{% endhint %}
1. In the **Explorer** section, select the **HomePage** top widget and in the **Settings Panel**, click on the **Add** button below **Observables.**
2. Fill the field **Name** with taskList.
3. Select **Task** as **Field Type** in the bottom of the dropdown, in the Custom type section.
4. Click on **List.**
The Observable is created as shown below.
Created Observable
Because we can store our Tasks in Local State, we have to initialize the observable **taskList** with the current values in the local state variable **taskList**.
1. Open the **Action Flow Editor** of **HomePage.**
2. Click on **Add Action**.
3. An **Action 0** appears, click on it.
4. On the **Define Action** right panel, fill the **Action Name** with "setTaskList".
5. Select **Set Observable** as **Type.**
6. In **Set Observable Source** select the observable we have created on the HomePage **taskList - (List\).**
7. Let the **Update Type** as **Set Value** because we are setting the observable with a value.
8. When you **Hover** on the **Update Source** section, you can click on a button that appeared.\
It allows us to select a **Source Value** from dynamic fields.
9. Select **Local State** instead of **From Value** in the dropdown.
10. The field below allows us to select which **Local State** we want to use, select **taskList -> List\.**
11. Click on **Save.**
Set Observable Action
Now that the observable is created, and the HomePage initializes it with the stored values of the Local State. We have to create our layout.
1. In the [Toolbox](/main-pages/architect/toolbox.md) section, search and drag and drop a **ListView** in the Body of the Scaffold.
2. Add a **Card** in the Children of **ListView.**
3. Add a **CheckboxListTile** in the Child of **Card.**
4. Add a **Text** in the Title of **CheckboxListTile.**
5. Add a **Column** in the Subtitle of **CheckboxListTile.**
6. Add a **Text**, then a **Row** below it in the Children of **Column.**
7. Add a **Flexible** in the Children of **Row.**
8. Add a **Text** in the Child of **Flexible.**
9. Add an **Icon** and a **Text** below **Flexible** in **Row.**
10. Add an **IconButton** in the Secondary of **CheckboxListTile.**
Without any theming, naming and settings it should looks like shown below.
HomePage initial layout
We have created a **ListView** with a defined layout for any item in it, now we have to set the **Data Source** of it with our **taskList** observable.
1. Click on **ListView** and in the **Settings Panel**, select the second tab, i.e the **Generate Children From Variable** tab.
2. Set the **Type** of the **Data Source** as **List\.**
3. Change the **From Value** to **Observable.**
4. Select the **taskList -> (List\)** in the list of observable.
5. Let the following field to empty, because we want a list of Task, and not a list of a property of Task like a list of the Title of all the Task.
6. Click on **Save.**
Now the **ListView** will be populated with the data from our observable. To have a visual preview, the list view shows in the **Application Preview** multiple items to perfect our layout.
Generate ListView item with our taskList observable