How do I customise header from AppLayout

Flow
1

How do i move this login button to the left most side and make it have a different theme and design and the other buttons center aligned with the “test on the left”
image.png

2 
public class MainLayout extends AppLayout {

    public MainLayout(){
        createHeader();
    }

    private void createHeader() {
        H1 logo = new H1("Test");
        logo.addClassNames("text-1", "m-m");

        Button loginButton = new Button("Login");

        loginButton.addClickListener(buttonClickEvent -> {
            loginButton.getUI().ifPresent(ui ->
                    ui.navigate("login"));
        });


        HorizontalLayout header = new HorizontalLayout(logo, loginButton);

        header.setDefaultVerticalComponentAlignment(FlexComponent.Alignment.CENTER);
        header.setWidthFull();
        header.addClassNames("py-0", "px-m");

        addToNavbar(header);
    }
}```
3

this is code for my mainlayout

4

or like make it like this?
image.png

5

the easiest way to create a layout with arbitrary stuff at left, center and right is to have a separate container for each, and set the justifycontentmode (which controls the main axis alignment) for each, and in your case probably set the center one to 100% width so that they fill up the header fully, like so:

HorizontalLayout with JustifyContentMode.START
HorizontalLayout with JustifyContentMode.CENTER and width 100%
HorizontalLayout with JustifyContentMode.END

6

built-in button style variants can be seen in the docs https://vaadin.com/docs/latest/components/button

7

I will try that thanks!