diff --git a/website/src/components/Header/Header.stories.jsx b/website/src/components/Header/Header.stories.jsx
index 793d4921..fc4ab805 100644
--- a/website/src/components/Header/Header.stories.jsx
+++ b/website/src/components/Header/Header.stories.jsx
@@ -21,4 +21,15 @@ const Template = (args) => {
 };
 
 export const Default = Template.bind({});
-Default.args = { session: { data: { user: { name: "StoryBook user" } }, status: "authenticated" }, transparent: false };
+Default.args = {
+  session: {
+    data: {
+      user: {
+        name: "StoryBook user"
+      }
+    },
+    status: "authenticated"
+  },
+  transparent: false,
+  borderClass: undefined
+};
diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx
index e2dd69ca..0630f345 100644
--- a/website/src/components/Header/Header.tsx
+++ b/website/src/components/Header/Header.tsx
@@ -54,9 +54,10 @@ function AccountButton() {
 }
 
 export function Header(props) {
+  const borderClass = props.transparent ? "" : props.borderClass ?? "border-b border-gray-100";
   return (
     <nav>
-      <Container className="flex justify-evenly py-8 px-10 border-b">
+      <Container className={`flex justify-evenly py-8 px-10 ${borderClass}`}>
         <div className="relative z-10 flex items-center gap-16">
           <Link href="/" aria-label="Home" className="flex items-center">
             <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />