> For the complete documentation index, see [llms.txt](https://caseytechschool.gitbook.io/app-development-using-kodular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://caseytechschool.gitbook.io/app-development-using-kodular/build-your-first-app-on-kodular/app-design.md). # App design This section of the tutorial describes how to design the app interface. * While the `Screen1` is selected under the component tree, change the `Align horizontal` property of the `Screen1` to `Center`

* Drag and drop the `Image` palette and a `Button` palette on the phone view.

* Click on the Image placeholder either on the phone screen or on the component tree. Select the asset upload button next to the `Designer` tab to upload the provided image. {% hint style="success" %} :clap: **Pro tip:** you can upload an image by clicking on the up arrow icon in the Picture property. {% endhint %}

* Once uploaded, close the upload asset window. * While the Image placeholder is selected, change the `Picture` property from `None` to the uploaded picture by clicking on the dropdown menu. Additionally, tick off the box `Scale Picture To Fit`

* Select the `Button1` either from the phone screen or from the component tree. Change the default text to `Hide` and make the button wider by choosing `Fill Parent` for the width property. {% hint style="success" %} :clap: **Pro tip:** you can choose a number or a percentage if you want a different behaviour {% endhint %}