# Legal Pages

> Create essential legal pages including terms of service and privacy policy.

*Canonical: https://makerkit.dev/docs/tanstack-drizzle/marketing-pages/legal-pages*

---

Every SaaS application needs:

- **Terms of Service** - User agreement at `apps/web/src/routes/_public/terms-of-service.tsx`
- **Privacy Policy** - Data handling practices at `apps/web/src/routes/_public/privacy-policy.tsx`
- **Cookie Policy** - Cookie usage disclosure at `apps/web/src/routes/_public/cookie-policy.tsx`

Each is a flat file route under the `_public` group, so it inherits the shared site header and footer. The page sets its document title in the route's `head()` and renders placeholder content you should replace:

```tsx
import { createFileRoute } from '@tanstack/react-router';

import { useTranslations } from 'use-intl';

import { SitePageHeader } from '#/components/site/site-page-header.tsx';
import { getTranslator } from '#/lib/i18n/translator.ts';

export const Route = createFileRoute('/_public/terms-of-service')({
  head: () => {
    const t = getTranslator();

    return { meta: [{ title: t('marketing.termsOfService') }] };
  },
  component: TermsOfServicePage,
});

function TermsOfServicePage() {
  const t = useTranslations('marketing');

  return (
    <div>
      <SitePageHeader
        title={t('termsOfService')}
        subtitle={t('termsOfServiceDescription')}
      />

      <div className={'container mx-auto py-8'}>
        <div>Your terms of service content here</div>
      </div>
    </div>
  );
}
```

**We highly recommend filling in the content of these pages with your own content once you start having users.**

---

**Next:** [Development Guide →](../development-guide/overview)