# Routing & Pages

To add new screens (pages) to your custom application:

{% stepper %}
{% step %}
Create the View

Navigate to `web/src/views` and create your component (e.g., `MyPage.tsx`).

{% code title="REACT" overflow="wrap" lineNumbers="true" %}

```typescript
const MyPage = () => {
    return <div className="p-4">My Custom Page Content</div>;
};
export default MyPage;
```

{% endcode %}
{% endstep %}

{% step %}
Import the View

Open `web/src/routes/index.tsx` and import your component.

{% code title="REACT" overflow="wrap" lineNumbers="true" %}

```typescript
import MyPage from "@/views/MyPage";
```

{% endcode %}
{% endstep %}

{% step %}
Register the Route

Add your route to the `AppRoutes` array.

{% code title="REACT" overflow="wrap" lineNumbers="true" %}

```typescript
export const AppRoutes: RouteType[] = [
    {
        path: '/',
        element: <Homepage />,
        className: "bg-white",
    },
    {
        path: '/my-new-page',
        element: <MyPage />,
        className: "bg-gray-100", // Optional wrapper class
    }
];
```

{% endcode %}
{% endstep %}
{% endstepper %}