# Change brand and style

This page explains how to customize the visual elements of your storefront such as header, font, and colors, to align with your brand's theme and styling.

## Edit the header

The header is a [component group](/frontend-studio/component-groups.md), which you can edit from the **Templates > Component group** area in the Studio.

Inside the component group builder, selecting the **Header** component group opens the **Component settings** pane. The configuration options map to the elements of your website header, as shown in the following image.

![An image that maps with arrows the matching between Header configuration sections and home page elements](https://docs.commercetools.com/frontend-development/images/config-mapping-b2b.png)

To add your brand's logo, expand the **Logo** section and then replace the current image with your logo.

Be aware that changes to component groups, such as the header, might take up to a few minutes. This is because component groups are used across many pages that need to be updated after a change.

## Change the styling

Apart from the header, you will also want to change the font and color theme used across the website to match your branding.

To apply custom font and colors, update the configuration in the Tailwind CSS config file in your commercetools Frontend project at the following path: `packages/PROJECT_NAME/frontend/tailwind.config.js`.

### Edit the theme's font

To change the font, update the `fontFamily` values for `body` and `heading` to the font family that you would like to use, for example, `Verdana`.

### Edit the theme's colors

To adjust the colors to match your brand's theme, update the `colors` object, and all the components using these colors will update automatically. For example, if you change the `primary.dark` color to `darkblue`, the announcement bar at the top of your page will change to dark blue.

### Edit the color of the commercetools Frontend components

If you notice that after changing the global styles, you still have parts of the storefront that are not styled as you expected, then specific Frontend components might be overwriting the global styles. To fix that, identify the React components and change the local styles for them. You can find the React components in `packages/PROJECT_NAME/frontend/components/commercetools-ui/atoms/` .

As an example, to update the colors of the button component, modify `packages/PROJECT_NAME/frontend/components/commercetools-ui/atoms/button/useButtonClassNames.ts`.

You can now edit the design of the primary button by editing the classes for `primaryClassName`.

```tsx title="Primary button styles in useButtonClassNames.ts"
const primaryClassName = useClassNames([
  'bg-gray-700 text-neutral-100 outline-offset-0',
  'hover:bg-gray-500',
  'active:shadow-button active:disabled:shadow-none active:bg-secondary-black',
  'focus-visible:outline focus-visible:outline-gray-700 border-gray-700 focus-visible:border focus-visible:outline-offset-[3px]',
  'disabled:bg-neutral-400 disabled:text-neutral-100',
]);
```

Exchange the CSS classes used for the various button states with the ones to be used from the global Tailwind CSS definitions.

We recommend that you thoroughly test your storefront, including hovering and clicking every button, to make sure that you don't miss any styles which you want to modify.

## Related pages

- [Area overview page with navigation](/frontend-development.md)
- [Previous page: Delete sample data](/frontend-development/delete-sample-data-for-b2b.md)
- [Next page: Composable Commerce functionalities](/frontend-development/b2b-store-launchpad-composable-commerce.md)