`.
2. Parts is a list of all available web components in your project. These are scanned automatically from the `node_modules` folder in your project. When you add new third-party web components to your project, they show up in the list and are available for use.
3. Components are snippets for Vaadin’s components that give you handy, commonly used configurations, like having a button with an icon and caption.
4. Project components are the other designs in your project. You can include them in your current view.
**Outline** shows you what components are in use in the view and their hierarchy.
**Properties** is where you modify how a single component looks and behaves.
##
Creating Main Layout
This is the layout which you’re building:
[Image: A web application with a listing of contacts and an editor open.]
From the image, you can see it needs a vertical layout at the root of the view. It also needs a horizontal layout with a text field for filtering, as well as a button to add new entries, at the top. And it needs a horizontal layout for a grid of data entries and a form below.
Disregard the form for now, as you’ll build it separately after adding the other components to the view.
##
Adding Components
To add the components, on the Paper, click *Vertical* to get a vertical layout as your starting point. Your view now consists of an empty layout. Then find *Horizontal* layout in the palette and drag it onto the `vaadin-vertical-layout` on the paper twice. You can use the search field at the top to find components.
Now, find *Vaadin Text Field* in the palette and drag it onto the first `vaadin-horizontal-layout`. Next, find *Vaadin Button* in the palette and drag it onto the first `vaadin-horizontal-layout`. Last, find *Vaadin Grid* in the palette and drag it onto the second `vaadin-horizontal-layout`.
[Image: Components added to the view.]
The view doesn’t look as planned yet, but it does have the components you need. You’ll now continue to configure the components to get it to look like you want.
##
Configuring Main Layout
In the main layout, you need to add a bit of space between the components, as well as around the layout, to make it look better.
To do this, Select the top-level layout, by clicking anywhere in the empty space of the vertical layout. In the properties view, in the *Size and space* panel, open the *Padding* selector and select *M*. This adds some space around the main layout, giving the design room to breathe.
[Image: Spacing and padding added to the main layout.]
##
Configuring Toolbar
For the toolbar, you need to configure a text field. To do this, first select the text field. In the properties view, under attributes, find the label attribute and remove the value from it. You don’t need a separate label as you have the description as the placeholder value for the field.
In the properties view, under attributes, find the placeholder attribute and replace "Placeholder" with "Filter by name…". Find the clear-button-visible attribute and enable the checkbox. This gives the user an easy way to clear the filter.
Now, select the button. In the properties view, find the text panel at the top and replace the default *Button* text with *Add contact*.
[Image: Configured toolbar.]
##
Making Grid Fill Available Space
To show as much data as possible, you want to give the Grid the rest of the screen space. To do this, select the lower horizontal layout, `vaadin-horizontal-layout`. In the properties view, in the *Size and space* panel find the width and height fields and choose 100% in both. This expands the layout to take up all the available space.
Next, select the Grid, `vaadin-grid`. In the properties view, in the *Size and space* panel set the width and height fields to 100%. This gives all the space in the layout to the grid.
[Image: Filled toolbar.]
The main layout is now looking good, but it’s still missing the form. Proceed to the next page to add one: [Build your contact form](https://vaadin.com/docs/next/tools/designer/getting-started/build-your-contact-form.md)
`758A02F4-4C0C-4FF2-821B-7ECA08C1101C`