# Setup Step 1 Screen

Oftentimes when logging into a user-centric app for the first time, the first couple of steps are around creating a user profile. With this feature template the ‘Setup Step 1’ Screen guides users through the process of filling out user specific profile information.

## The Components

### **Header Group**

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FjKkAHjXHJenTCAdMn8wY%2Fheadergroup.png?alt=media&#x26;token=f57749b3-da1e-4947-a3f1-2ef54ed5e216" alt=""><figcaption></figcaption></figure>

The Header Group is a visual way to let the users know where they are in the process of creating their user profile. If you are a user, you want to know how far you are in the process and what’s coming up next and this is a simple way to show that!

On each of the three set up screens, the icon color changes to denote which step in the process the user is currently at.

⚡ **Overview Actions**

* Link Action “Back” to the previous screen.

### Form Component

<figure><img src="https://3467607506-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LhGHkPsv15svPIU5I7C%2Fuploads%2FrBqWr7FmIn1wDyBJPl9F%2Fuserprofilescreen1.png?alt=media&#x26;token=2d597e4b-a8ad-4569-80e4-0e1a2e4ba871" alt="" width="527"><figcaption></figcaption></figure>

This component collects information about the user to fill in the properties within the User Collection.

There are more properties that can be displayed from the User Collection, however, this form collects information that has not been filled in during the sign up process — for example, a profile image and bio.

⚡ **Button Actions**

* Update User
* Link Action to ‘Setup Step 2’ Screen