> For the complete documentation index, see [llms.txt](https://docs.appmachine.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.appmachine.com/style-your-screens.md).

# Style your screens

The various ways AppMachne lets you style your screen

For the following blocks you can customize the style of your screens with the element editor on the elements tab:&#x20;

* List
* Detail
* Form
* Blank Page&#x20;

### Add an elements block to your app

1. Open your app
2. Click the red  **+ block**  in the top left corner

   <figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2F23TkZdRk1bsLns7ptTG6%2Fimage.png?alt=media&amp;token=c72b984a-47a4-4430-80ca-868996b1244c" alt=""><figcaption></figcaption></figure>
3. Select the **Pro** tab\
   ![](https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2F1SNut8wS7DySadBMQqXb%2Fimage.png?alt=media\&token=21dc7378-5606-43bf-b2c5-b082903f0e07)
4. Select **Blank page**, **List,** or **Detail** and click **Add this block**
5. **Name** your page and click **Add this block**<br>

   <figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2FFzaSiZjqFs5qXJ9DB0kc%2Fimage.png?alt=media&amp;token=d40ef3db-c0f1-4dd3-81b3-54d6caee4dda" alt="Give your block a name"><figcaption><p>Name your block or page</p></figcaption></figure>
6. The **elements** tab of this page will be opened automatically. You can see that in the left top corner at the op of your stack of blocks<br>

   <figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2F7KQf1xP1pXA2O4JUbYjI%2Fimage.png?alt=media&amp;token=5b914147-856d-47c3-951f-cb41909f921e" alt="The elements tab"><figcaption><p>The Elements tab</p></figcaption></figure>
7. Click the blue **Add element** button on the left or the blue **+ button** in the phone previewer to start adding elements to your page<br>

   <figure><img src="https://2636455530-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wzy1sO41plYrfJfaAhN%2Fuploads%2F42KpjvTO3zDoPigBNJYL%2Fimage.png?alt=media&amp;token=7b45fa28-7220-4c77-92a5-56778899290e" alt="Add elements"><figcaption><p>Add one of the elements</p></figcaption></figure>

The next section explains all of the different elements which are supported.
