diff --git a/components/breadcrumbs.tsx b/components/breadcrumbs.tsx
new file mode 100644
index 0000000..11ace5e
--- /dev/null
+++ b/components/breadcrumbs.tsx
@@ -0,0 +1,32 @@
+import { useContext } from 'react'
+import Link from 'next/link'
+import UserContext from './user/context'
+
+export default function Breadcrumbs({ label }: { label: string }) {
+  const { username, role } = useContext(UserContext)
+
+  if (!label) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm">
+      {role === 'admin' && (
+        <div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
+          {username}
+        </div>
+      )}
+      <>
+        <h2 className="mr-1">
+          <Link href="/">
+            <a className="font-extrabold">Home</a>
+          </Link>
+        </h2>
+        {'>'}
+        <h2 className="mx-1 flex-grow">
+          <span className="font-extrabold">{label}</span>
+        </h2>
+      </>
+    </div>
+  )
+}
diff --git a/components/header.tsx b/components/header.tsx
index 7810f3e..0c0aa16 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -1,15 +1,13 @@
-import React, { useContext } from 'react'
 import Head from 'next/head'
 import Link from 'next/link'
-import UserContext from './user/context'
 import Logo from './logo'
+import Breadcrumbs from './breadcrumbs'
 
 export default function Header({ label }: { label?: string }) {
-  const { username, role } = useContext(UserContext)
   return (
     <>
       <Head>
-        <title>Pfadi-Bussle {label}</title>
+        <title>Pfadi-Bussle</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
@@ -22,26 +20,7 @@ export default function Header({ label }: { label?: string }) {
           </h1>
           <Logo className="w-40 flex-shrink-0" />
         </div>
-        {label && (
-          <div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm">
-            {username === 'admin' && (
-              <div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
-                Admin
-              </div>
-            )}
-            <>
-              <h2 className="mr-1">
-                <Link href="/">
-                  <a className="font-extrabold">Home</a>
-                </Link>
-              </h2>
-              {'>'}
-              <h2 className="mx-1 flex-grow">
-                <span className="font-extrabold">{label}</span>
-              </h2>
-            </>
-          </div>
-        )}
+        <Breadcrumbs label={label} />
       </div>
     </>
   )
