> For the complete documentation index, see [llms.txt](/llms.txt).

# Home pages

You can display a dedicated UI, or "home page," for your Snap within MetaMask. This is useful for introducing your Snap to end users. Users can access your home page through the Snaps menu in MetaMask. Snap home pages can contain [custom UI](/snaps/features/custom-ui/) and [interactive UI](/snaps/features/custom-ui/interactive-ui/)components.

## Steps[​](#steps "Direct link to Steps")

### 1\. Request permission to display a home page[​](#1-request-permission-to-display-a-home-page "Direct link to 1. Request permission to display a home page")

Request the [endowment:page-home](/snaps/reference/permissions/#endowmentpage-home) permission. Add the following to your Snap's manifest file:

snap.manifest.json

```
"initialPermissions": {
  "endowment:page-home": {}
}

```

### 2\. Create a home page[​](#2-create-a-home-page "Direct link to 2. Create a home page")

Expose an [onHomePage](/snaps/reference/entry-points/#onhomepage) entry point, which returns the custom or interactive UI to be shown. MetaMask calls this method when a user selects your Snap name in the Snaps menu.

The following example displays custom UI that welcomes the user to the Snap's home page:

index.tsx

```
import type { OnHomePageHandler } from '@metamask/snaps-sdk'
import { Box, Heading, Text } from '@metamask/snaps-sdk/jsx'

export const onHomePage: OnHomePageHandler = async () => {
  return {
    content: (
      <Box>
        <Heading>Hello world!</Heading>
        <Text>Welcome to my Snap home page!</Text>
      </Box>
    ),
  }
}

```

![Home page example](/assets/images/home-page-851536111693852ff62c19f6503b7511.png)

## Example[​](#example "Direct link to Example")

See the [@metamask/home-page-example-snap](https://github.com/MetaMask/snaps/tree/main/packages/examples/packages/home-page)package for a full example of implementing a Snap home page.