> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.monite.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.monite.com/_mcp/server.

# LayoutAndLogo

## Overview

The `LayoutAndLogo` component enables users to customize the visual design and branding for invoices, quotes, and other document types.

![LayoutAndLogo component preview](/_fern-img/359828d52c7abfe3ce67f9fdc72d94b21b533ab7a8549a23de5647c991fd2223.webp)

Users can:

* Choose from one of the available PDF invoice templates and preview these templates.
* Upload, replace, or remove the entity logo for use in PDFs.

> **Note**
>
> These options apply only to newly created documents and do not affect existing documents.

The `LayoutAndLogo` component is also integrated into the larger [`TemplateSettings`](./templatesettings) component that provides a unified UI for all available invoice template settings.

## Permissions

To access and use the `LayoutAndLogo` component, the authenticated entity user must have a role with the `read` and `update` [permissions](../../../api/concepts/authentication#permissions) for the `entity` resource.

## Usage

Use the `LayoutAndLogo` component in your application as follows:

**`React.js`**

```jsx React.js
import { LayoutAndLogo } from "@monite/sdk-react";

...

// This component must be rendered within the MoniteProvider wrapper
const LayoutAndLogoPage = () => {
  return <LayoutAndLogo />
};
```

## Props

**`shouldApplyDialogStyles`** `boolean` — default: false

Controls which CSS classes are applied to the component.
Use `true` if the `LayoutAndLogo` component is rendered inside a popup window.
Use `false` if it is rendered inside a regular screen.

---

## See also

* [`DocumentNumber`](./documentnumber)
* [`OtherSettings`](./othersettings)
* [`TemplateSettings`](./templatesettings)