> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 404 Page

> Customize the not-found page content and visuals.

Next.js App Router renders `src/app/not-found.tsx` when a path doesn’t match any route.

* **Location**: `sabo/src/app/not-found.tsx`
* **Defaults**: `Header`, `Footer`, `Particles` background, and a CTA button back to `/`

## Customize Content

<Steps>
  <Step title="Edit text and button">
    Update the heading, description, and button label/URL.

    ```tsx sabo/src/app/not-found.tsx theme={null}
    <h2 className="text-4xl sm:text-5xl lg:text-6xl font-semibold text-foreground mb-6 sm:mb-8">
      Page not found
    </h2>
    <p className="text-base sm:text-lg lg:text-lg mb-8 sm:mb-12 max-w-xs sm:max-w-md mx-auto">
      The page you are looking for doesn’t exist or is currently unavailable.
    </p>
    <Button asChild variant="secondary" size="lg">
      <Link href="/" className="flex items-center gap-2 group">
        <ArrowLeft className="w-4 h-4 transition-transform duration-300 group-hover:-translate-x-1" />
        Go back to homepage
      </Link>
    </Button>
    ```
  </Step>

  <Step title="Adjust background effect">
    Tweak the `Particles` props like `quantity` or connect color to theme.

    ```tsx sabo/src/app/not-found.tsx theme={null}
    <Particles
      className="absolute inset-0 z-0"
      quantity={200}
      refresh
      color={color}
    />
    ```

    Theme-based color is derived from `next-themes`:

    ```tsx sabo/src/app/not-found.tsx theme={null}
    const { resolvedTheme } = useTheme();
    const color = useMemo(
      () => (resolvedTheme === "dark" ? "#ffffff" : "#000000"),
      [resolvedTheme]
    );
    ```
  </Step>

  <Step title="Show or hide Header/Footer">
    Show the full site chrome or remove parts for a minimal 404.

    ```tsx sabo/src/app/not-found.tsx theme={null}
    return (
      <div className="flex flex-col">
        <Header />
        {/* ... page body ... */}
        <Footer />
      </div>
    );
    ```

    * Hide header: remove `<Header />`
    * Hide footer: remove `<Footer />`

    For navigation/footer customization, see the Header and Footer guides.
  </Step>
</Steps>