How do I customise header from AppLayout

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”

public class MainLayout extends AppLayout {

    public MainLayout(){

    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 ->

        HorizontalLayout header = new HorizontalLayout(logo, loginButton);

        header.addClassNames("py-0", "px-m");


this is code for my mainlayout

or like make it like this?

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

built-in button style variants can be seen in the docs

I will try that thanks!