# Application Pages

> Learn how to create and manage application pages in your Makerkit app

*Canonical: https://makerkit.dev/docs/remix-supabase/tutorials/application-pages*

---

Now that we have some components to display, we need to add them to the actual Remix pages.

If you have not created the files in the `Routing` section above, it's time to do it.

#### Using the components AppHeader and AppContainer

These components are used to wrap the content of the pages. They are responsible for displaying the header and the container of the page.
```tsx
function DashboardPage() {
  return (
    <>
      <AppHeader>
        <span className={'flex space-x-2'}>
          <Squares2X2Icon className="w-6" />

          <span>
            <Trans i18nKey={'common:dashboardTabLabel'} />
          </span>
        </span>
      </AppHeader>

      <AppContainer>
        Your content goes here
      </AppContainer>
    </>
  );
}
```

## Guarding Application Pages for Authenticated Users

One of the ways we can use to protect application pages, we can use the `requireSession` function. This function also verifies that the user is authenticated using MFA.

```tsx
import { redirect } from "@remix-run/node";

export async function loader() {
  const session = await requireSession();

  if (!session) {
    return redirect("/auth/sign-in");
  }

  return {
    session,
  };
}
```

## Using Dynamic Parameters

Every page and layout can access dynamic parameters from the URL.

For example, if you have a page with the following URL:

```
https://myapp.com/dashboard/[organization]/[project]
```

You can access the `organization` and `project` parameters from the page's `loader` function.

```tsx
import type { LoaderArgs } from '@remix-run/node';

export async function loader(args: LoaderArgs) {
  const organization = args.params.organization;
  const project = args.params.project;

  // ...
}
```

## Using Search Parameters

Similarly to dynamic parameters, you can also access search parameters from the URL.

For example, if you have a page with the following URL:

```
https://myapp.com/dashboard/[organization]/[project]?page=1&limit=10
```

You can access the `page` and `limit` parameters from the page's `loader` function.

```tsx
import type { LoaderArgs } from '@remix-run/node';

export async function loader(args: LoaderArgs) {
  const params = new URL(args.request.url).searchParams;
  const page = params.get('page');
  const limit = params.get('limit');

  // ...
}
```