diff --git a/examples/auth/src/app/(app)/_components/Header/index.tsx b/examples/auth/src/app/(app)/_components/Header/index.tsx
new file mode 100644
index 000000000..e95a508ea
--- /dev/null
+++ b/examples/auth/src/app/(app)/_components/Header/index.tsx
@@ -0,0 +1,29 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+
+import { Gutter } from '../Gutter'
+import classes from './index.module.scss'
+
+export const Header = () => {
+  return (
+    <header className={classes.header}>
+      <Gutter className={classes.wrap}>
+        <Link className={classes.logo} href="/">
+          <picture>
+            <source
+              media="(prefers-color-scheme: dark)"
+              srcSet="https://raw.githubusercontent.com/payloadcms/payload/master/src/admin/assets/images/payload-logo-light.svg"
+            />
+            <Image
+              alt="Payload Logo"
+              height={30}
+              src="https://raw.githubusercontent.com/payloadcms/payload/master/src/admin/assets/images/payload-logo-dark.svg"
+              width={150}
+            />
+          </picture>
+        </Link>
+      </Gutter>
+    </header>
+  )
+}