diff --git a/packages/web/components/PageHeader.tsx b/packages/web/components/PageHeader.tsx
new file mode 100644
index 00000000..c0b63055
--- /dev/null
+++ b/packages/web/components/PageHeader.tsx
@@ -0,0 +1,75 @@
+import { Box, Button, Flex, Image, MetaButton, Stack } from '@metafam/ds';
+import { MetaLink } from 'components/Link';
+import NextLink from 'next/link';
+import React from 'react';
+
+import MetaGameImage from '../public/images/metagame.png';
+
+const MenuItem: React.FC = ({ children }) => (
+  <Box>
+    <Button variant="link" color="offwhite" p="2">
+      {children}
+    </Button>
+  </Box>
+);
+
+export const PageHeader: React.FC = () => {
+  const [show, setShow] = React.useState(false);
+  const handleToggle = () => setShow(!show);
+
+  return (
+    <Flex
+      as="nav"
+      align="center"
+      justify="space-between"
+      wrap="wrap"
+      color="offwhite"
+      py="6"
+      px="8"
+    >
+      <MetaLink href="/" display="block" mr="10">
+        <Image src={MetaGameImage} alt="MetaGame" mt={-2} />
+      </MetaLink>
+
+      <Button
+        variant="link"
+        display={{ base: 'block', md: 'none' }}
+        onClick={handleToggle}
+      >
+        <svg
+          fill="white"
+          width="1.5rem"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>Menu</title>
+          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+        </svg>
+      </Button>
+
+      <Box
+        display={{ base: show ? 'block' : 'none', md: 'flex' }}
+        width={{ base: 'full', md: 'auto' }}
+        alignItems="center"
+        flexGrow={1}
+        my={{ base: 4, md: 0 }}
+      >
+        <Stack
+          direction={{ base: 'column', md: 'row' }}
+          spacing={{ base: 4, md: 6, lg: 10 }}
+        >
+          <MenuItem>Quests</MenuItem>
+          <MenuItem>Raids</MenuItem>
+          <MenuItem>Players</MenuItem>
+          <MenuItem>Forum</MenuItem>
+        </Stack>
+      </Box>
+
+      <Box display={{ base: show ? 'block' : 'none', md: 'block' }}>
+        <NextLink href="/login" display="block">
+          <MetaButton>Sign in</MetaButton>
+        </NextLink>
+      </Box>
+    </Flex>
+  );
+};
diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx
index d1d5178d..bc32b957 100644
--- a/packages/web/pages/_app.tsx
+++ b/packages/web/pages/_app.tsx
@@ -1,4 +1,5 @@
 import { ChakraProvider, CSSReset, MetaTheme } from '@metafam/ds';
+import { PageHeader } from 'components/PageHeader';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 
@@ -9,6 +10,7 @@ const app: React.FC<AppProps> = ({ pageProps, Component }) => {
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
+      {!pageProps.hidePageHeader && <PageHeader />}
       <Component {...pageProps} />
     </ChakraProvider>
   );
diff --git a/packages/web/pages/login.tsx b/packages/web/pages/login.tsx
index bcd327cd..ecdbb646 100644
--- a/packages/web/pages/login.tsx
+++ b/packages/web/pages/login.tsx
@@ -8,6 +8,14 @@ import { WelcomePlayer } from '../components/WelcomePlayer';
 import BackgroundImage from '../public/images/login-background.jpg';
 import MetaGameImage from '../public/images/metagame.png';
 
+export const getStaticProps = async () => {
+  return {
+    props: {
+      hidePageHeader: true,
+    },
+  };
+};
+
 const Login: React.FC = () => {
   const [step, setStep] = useState(0);
   return (
diff --git a/packages/web/pages/profile/setup.tsx b/packages/web/pages/profile/setup.tsx
index fa57752f..7c0bf9d2 100644
--- a/packages/web/pages/profile/setup.tsx
+++ b/packages/web/pages/profile/setup.tsx
@@ -11,6 +11,14 @@ import {
 } from '../../contexts/SetupContext';
 import BackgroundImage from '../../public/images/profile-background.jpg';
 
+export const getStaticProps = async () => {
+  return {
+    props: {
+      hidePageHeader: true,
+    },
+  };
+};
+
 const ProfileSetup: React.FC = () => {
   const { step, numTotalSteps } = useContext(SetupContext);
   return (
diff --git a/packages/web/pages/profile/success.tsx b/packages/web/pages/profile/success.tsx
index 62c9f884..1a364053 100644
--- a/packages/web/pages/profile/success.tsx
+++ b/packages/web/pages/profile/success.tsx
@@ -4,6 +4,14 @@ import { PageContainer } from '../../components/Container';
 import { SuccessPlayer } from '../../components/SuccessPlayer';
 import BackgroundImage from '../../public/images/profile-background.jpg';
 
+export const getStaticProps = async () => {
+  return {
+    props: {
+      hidePageHeader: true,
+    },
+  };
+};
+
 const Profile: React.FC = () => {
   return (
     <PageContainer backgroundImage={`url(${BackgroundImage})`}>
