# Maintenance with search

> A maintenance notice with a site search, beside a large 503.

URL: https://apogee.avaui.dev/docs/not-found-pages/maintenance-search
Last updated: 2026-10-15

A maintenance notice with a site search, beside a large 503.

Last updated October 15, 2026

Live example: https://apogee.avaui.dev/examples/not-found/maintenance-search

```astro
---
/**
 * Maintenance with search: A maintenance notice with a site search, beside a large 503.
 *
 * @page not-found
 */
import { Search } from '@lucide/astro'
import NotFound from '@/components/apogee/sections/NotFound/NotFound.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Button from '@/components/apogee/Button/Button.astro'
---

<NotFound fullHeight layout="split" code="503 error" heading="Under maintenance" description="Sorry, the site is down for scheduled work. Search for what you need in the meantime.">
  <form role="search" action="/search" method="get" class="flex w-full max-w-md flex-col gap-3 sm:flex-row">
    <Input type="search" name="q" aria-label="Search the site" placeholder="Search our site" class="flex-1">
      <Search slot="start" aria-hidden="true" />
    </Input>
    <Button type="submit" variant="outline" color="neutral">Search</Button>
  </form>
  <!-- Decoration drawn as generated content, so it is never read or contrast-checked as text. -->
  <p slot="media" data-mark="503" class="hidden text-center text-[14rem] leading-none font-bold tracking-tighter text-primary tabular-nums opacity-15 select-none before:content-[attr(data-mark)] lg:block" aria-hidden="true"></p>
</NotFound>
```

## Add

```sh
npx @ava-ui/apogee add not-found/maintenance-search
```

This copies the page to `src/components/apogee/pages/not-found/` with everything it uses: Button, Input, NotFound. Render it from `src/pages/404.astro`, or use **Copy code** above.

## Accessibility

-   The page heading is the `h1`.
-   The search is a `role="search"` form that sends `q` to `/search` with GET; point `action` at your own search page.
-   The large 503 is decoration and hides below `lg`.
-   For real downtime, serve it with status 503 and a `Retry-After` header.

## Related

[

Not foundThe 404 page body; a status line, heading, description and a way back, centred, left-aligned or beside media.

](https://apogee.avaui.dev/docs/sections/not-found)[

InputA labeled text field with hint/error messaging, wired for accessibility — plus a pure-CSS floating label.

](https://apogee.avaui.dev/docs/input)