# Home Screen

{% embed url="<https://youtu.be/I7ZghBiOC-g>" %}

In the **Content** tab, you can configure the home screen of your app by selecting the B**lue Home block** in the list of blocks. \
As the color settings of the homescreen might differ from the generic theme of your app, you see a Design tab on the right side of the screen to configure the colours and styling for the Home screen. \
\
If you want to change the styling of the rest of your app, select the green **Theme** block at the top of the list of blocks.<br>

<figure><img src="/files/PTMh8mR5uwfVi6mg9bWF" alt=""><figcaption><p>Your app's blue "Home" block</p></figcaption></figure>

## Navigation styles

Designing a home screen starts with selecting the best **Navigation style** for your app. \
Once you've chosen a template and generated your first app, you will see the settings for the blue **Home** block. This block controls the settings and design of the first screen of your app. \
In the **Settings** tab on the right, you can choose a top image, a navigation style, and usually some further styling options depending on the navigation style you've chosen. In the screenshot, you can see which navigation styles we have available in the platform. <br>

<figure><img src="/files/WuUus2dIQlOof5hCZV0a" alt=""><figcaption><p>See which navigation styles are available in the app.</p></figcaption></figure>

Run through the available navigation styles to select the style that best fits your app's needs. For the business app above, here are the different navigation styles compared to one another. \ <br>

<figure><img src="/files/XrgMGp5Xh1H2wEXvNpuu" alt=""><figcaption></figcaption></figure>

### New Navigation styles

We have added new navigation styles for NEW apps. With existing apps you will only see the new navigation styles for the Submenu block.

There are five menu types, each with different layouts, and the option to choose no menu layout.

1. Tab bar
2. Tabs
3. Sliding
4. List
5. Icons

You can switch between layouts and choose from different options, like show icons or show block labels. The tab bar layouts also have the option to be detached from the bottom of the screen.

<figure><img src="/files/mgIfUt7NXCRPmHGRTjq2" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/RdI5ZVuNpoQo3YxZOmLa" alt=""><figcaption></figcaption></figure>

## Menu, Text, Icon, & Icon Background Settings

Depending on the selected navigation style, you may be able to further adjust the design of the selected menu. \
For example for the advanced icon menu you can upload your own icon backgrounds.

<figure><img src="/files/6s2vAJUYfRfWmev35J9R" alt=""><figcaption><p>Upload you own icon backgrounds</p></figcaption></figure>

To change the color settings of your icons in the Icons menu, navigate to Settings > Items and change these two settings to your desired colours.

<figure><img src="/files/0dX4XsgeHKA6MRT3tgqs" alt=""><figcaption><p>Change the icon and text colors of the Icons menu.</p></figcaption></figure>

## Top Image

Once you've chosen and perfected your navigation style, go ahead and add a top image. A logo for your event or business would do nicely here.&#x20;

<figure><img src="/files/OfnMRzXrvJBvycMCJmUR" alt=""><figcaption></figcaption></figure>

## Design&#x20;

Design settings for your Home block can be changed in the **Design** tab. \
Design settings wil differ significantly from those in the rest of your app. \
If that is the case, this is the section to change those settings. \
\
\
For more information about the general design settings of your app, please read: [Theme](/style-your-app/theme.md)


---

# 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.appmachine.com/style-your-app/home-screen.md?ask=<question>
```

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.
