diff --git a/src/components/Header.js b/src/components/Header.js
index 7c7e139..cd25f51 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -50,7 +50,7 @@ const Header = ({ hideRule, children, ...props }) => {
           `linear-gradient(to bottom, ${theme.colors.greens[0]}, ${rgba(
             theme.colors.greens[0],
             0
-          )}`,
+          )})`,
         textAlign: 'center',
       }}
       {...props}
@@ -76,4 +76,7 @@ Header.defaultProps = {
   hideRule: false,
 }
 
-export { Header, HeaderTitle, HeaderDescription }
+Header.Title = HeaderTitle
+Header.Description = HeaderDescription
+
+export default Header
diff --git a/src/components/Typography.js b/src/components/Typography.js
index 5b1c956..3c922a0 100644
--- a/src/components/Typography.js
+++ b/src/components/Typography.js
@@ -12,7 +12,7 @@ Paragraph.propTypes = {
   children: PropTypes.node.isRequired,
 }
 
-const Separator = props => (
+const Separator = ({ sx, ...props }) => (
   <Box
     as="hr"
     sx={{
@@ -22,11 +22,16 @@ const Separator = props => (
       marginX: 'auto',
       border: 0,
       backgroundColor: 'green',
+      ...sx,
     }}
     {...props}
   />
 )
 
+Separator.propTypes = {
+  sx: PropTypes.object,
+}
+
 const Rule = props => (
   <Box
     as="hr"
diff --git a/src/pages/404.js b/src/pages/404.js
index cf1bcd8..07f126a 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -3,7 +3,7 @@ import { Link, useStaticQuery, graphql } from 'gatsby'
 import Helmet from 'react-helmet'
 import { Heading, Button } from 'rebass'
 import Container from '../components/Container'
-import { Header, HeaderTitle } from '../components/Header'
+import Header from '../components/Header'
 import MarkdownContent from '../components/MarkdownContent'
 import { useSiteMetadata } from '../utils/hooks'
 import unwidow from '../utils/unwidow'
@@ -38,9 +38,9 @@ const ErrorPage = () => {
       </Helmet>
 
       <Header>
-        <HeaderTitle mb={[2, 1, 0]} fontSize={[3, 4]} fontWeight="medium">
+        <Header.Title mb={[2, 1, 0]} fontSize={[3, 4]} fontWeight="medium">
           Error 404
-        </HeaderTitle>
+        </Header.Title>
 
         <Heading fontSize={[4, 5, 6]} fontWeight="bold">
           {unwidow(title)}
diff --git a/src/pages/about.js b/src/pages/about.js
index e066909..b7ac64c 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -6,7 +6,7 @@ import Img from 'gatsby-image'
 import { Flex, Text, Heading } from 'rebass'
 import { List, ListItem } from '../components/Typography'
 import Container from '../components/Container'
-import { Header, HeaderTitle } from '../components/Header'
+import Header from '../components/Header'
 import MarkdownContent from '../components/MarkdownContent'
 import { useSiteMetadata } from '../utils/hooks'
 import unwidow from '../utils/unwidow'
@@ -131,7 +131,7 @@ const AboutPage = () => {
       </Helmet>
 
       <Header>
-        <HeaderTitle>{unwidow(pageTitle)}</HeaderTitle>
+        <Header.Title>{unwidow(pageTitle)}</Header.Title>
       </Header>
 
       <Container my={5} sx={{ textAlign: 'center' }}>
diff --git a/src/pages/contact.js b/src/pages/contact.js
index 5965da6..39d50ca 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { useStaticQuery, graphql } from 'gatsby'
 import Helmet from 'react-helmet'
 import Container from '../components/Container'
-import { Header, HeaderTitle, HeaderDescription } from '../components/Header'
+import Header from '../components/Header'
 import ContactForm from '../components/ContactForm'
 import { useSiteMetadata } from '../utils/hooks'
 import unwidow from '../utils/unwidow'
@@ -38,12 +38,12 @@ const ContactPage = () => {
       </Helmet>
 
       <Header>
-        <HeaderTitle>{unwidow(pageTitle)}</HeaderTitle>
+        <Header.Title>{unwidow(pageTitle)}</Header.Title>
 
         {hasDescription && (
-          <HeaderDescription markdown>
+          <Header.Description markdown>
             {data.contentfulContactPage.description.content.html}
-          </HeaderDescription>
+          </Header.Description>
         )}
       </Header>
 
diff --git a/src/pages/events.js b/src/pages/events.js
index 35829e8..930ac95 100644
--- a/src/pages/events.js
+++ b/src/pages/events.js
@@ -5,7 +5,7 @@ import Helmet from 'react-helmet'
 import { Text, Heading, Link, Button } from 'rebass'
 import { List, ListItem } from '../components/Typography'
 import Container from '../components/Container'
-import { Header, HeaderTitle, HeaderDescription } from '../components/Header'
+import Header from '../components/Header'
 import { useSiteMetadata } from '../utils/hooks'
 import { toMoney } from '../utils/price'
 import unwidow from '../utils/unwidow'
@@ -28,12 +28,12 @@ const EventsPage = ({ data }) => {
       </Helmet>
 
       <Header>
-        <HeaderTitle>{unwidow(pageTitle)}</HeaderTitle>
+        <Header.Title>{unwidow(pageTitle)}</Header.Title>
 
         {hasDescription && (
-          <HeaderDescription markdown>
+          <Header.Description markdown>
             {data.contentfulEventsPage.description.content.html}
-          </HeaderDescription>
+          </Header.Description>
         )}
       </Header>
 
diff --git a/src/pages/lessons.js b/src/pages/lessons.js
index f5e8143..a292f43 100644
--- a/src/pages/lessons.js
+++ b/src/pages/lessons.js
@@ -4,7 +4,7 @@ import Helmet from 'react-helmet'
 import { Box, Flex, Text, Heading, Button } from 'rebass'
 import { Paragraph } from '../components/Typography'
 import Container from '../components/Container'
-import { Header, HeaderTitle, HeaderDescription } from '../components/Header'
+import Header from '../components/Header'
 import { useSiteMetadata } from '../utils/hooks'
 import { toMoney } from '../utils/price'
 import unwidow from '../utils/unwidow'
@@ -54,12 +54,12 @@ const LessonsPage = () => {
       </Helmet>
 
       <Header>
-        <HeaderTitle>{pageTitle}</HeaderTitle>
+        <Header.Title>{pageTitle}</Header.Title>
 
         {hasDescription && (
-          <HeaderDescription markdown>
+          <Header.Description markdown>
             {data.contentfulLessonsPage.description.content.html}
-          </HeaderDescription>
+          </Header.Description>
         )}
       </Header>
 
diff --git a/src/pages/videos/all.js b/src/pages/videos/all.js
index fc2ca04..7365f34 100644
--- a/src/pages/videos/all.js
+++ b/src/pages/videos/all.js
@@ -4,7 +4,7 @@ import Helmet from 'react-helmet'
 import { Text } from 'rebass'
 import { Rule } from '../../components/Typography'
 import Container from '../../components/Container'
-import { Header, HeaderTitle } from '../../components/Header'
+import Header from '../../components/Header'
 import VideoPlaylistGrid from '../../components/VideoPlaylistGrid'
 import { useSiteMetadata } from '../../utils/hooks'
 
@@ -50,7 +50,7 @@ const AllVideosPage = () => {
       </Helmet>
 
       <Header hideRule>
-        <HeaderTitle>All Videos</HeaderTitle>
+        <Header.Title>All Videos</Header.Title>
       </Header>
 
       <Container mt={[4, 5]}>
diff --git a/src/pages/videos/index.js b/src/pages/videos/index.js
index 1fdff86..9406e76 100644
--- a/src/pages/videos/index.js
+++ b/src/pages/videos/index.js
@@ -5,7 +5,7 @@ import Helmet from 'react-helmet'
 import Img from 'gatsby-image'
 import { Box, Flex, Text, Heading, Button } from 'rebass'
 import Container from '../../components/Container'
-import { Header, HeaderTitle, HeaderDescription } from '../../components/Header'
+import Header from '../../components/Header'
 import { Paragraph, Rule } from '../../components/Typography'
 import { useSiteMetadata } from '../../utils/hooks'
 import unwidow from '../../utils/unwidow'
@@ -146,12 +146,12 @@ const VideosPage = () => {
       </Helmet>
 
       <Header hideRule>
-        <HeaderTitle>{pageTitle}</HeaderTitle>
+        <Header.Title>{pageTitle}</Header.Title>
 
         {hasDescription && (
-          <HeaderDescription markdown>
+          <Header.Description markdown>
             {data.contentfulVideosPage.description.content.html}
-          </HeaderDescription>
+          </Header.Description>
         )}
       </Header>
 
diff --git a/src/templates/Event.js b/src/templates/Event.js
index ca448bf..32cc15e 100644
--- a/src/templates/Event.js
+++ b/src/templates/Event.js
@@ -4,7 +4,7 @@ import { graphql } from 'gatsby'
 import Helmet from 'react-helmet'
 import { Text } from 'rebass'
 import Container from '../components/Container'
-import { Header, HeaderTitle, HeaderDescription } from '../components/Header'
+import Header from '../components/Header'
 import CalendlyEmbed from '../components/CalendlyEmbed'
 import { useSiteMetadata } from '../utils/hooks'
 import { toMoney } from '../utils/price'
@@ -29,16 +29,16 @@ const EventTemplate = ({ data }) => {
           {'\u2014'} <time dateTime={event.endDate}>{event.endDateString}</time>
         </Text>
 
-        <HeaderTitle>{unwidow(event.title)}</HeaderTitle>
+        <Header.Title>{unwidow(event.title)}</Header.Title>
 
         <Text as="p" mt={3} fontSize={[1, 2, 3]}>
           {unwidow(event.location)} {'\u2022'} {toMoney(event.price)}
         </Text>
 
         {description && (
-          <HeaderDescription mt={5} markdown>
+          <Header.Description mt={5} markdown>
             {description}
-          </HeaderDescription>
+          </Header.Description>
         )}
       </Header>
 
diff --git a/src/templates/Lesson.js b/src/templates/Lesson.js
index 7ef0ec2..a717948 100644
--- a/src/templates/Lesson.js
+++ b/src/templates/Lesson.js
@@ -4,7 +4,7 @@ import { graphql } from 'gatsby'
 import Helmet from 'react-helmet'
 import { Box } from 'rebass'
 import Container from '../components/Container'
-import { Header, HeaderTitle, HeaderDescription } from '../components/Header'
+import Header from '../components/Header'
 import CalendlyEmbed from '../components/CalendlyEmbed'
 import { useSiteMetadata } from '../utils/hooks'
 import unwidow from '../utils/unwidow'
@@ -29,16 +29,16 @@ const LessonTemplate = ({ data }) => {
       </Helmet>
 
       <Header>
-        <HeaderTitle>{unwidow(lesson_category[0].title)}</HeaderTitle>
+        <Header.Title>{unwidow(lesson_category[0].title)}</Header.Title>
 
         <Box as="p" mt={3} fontSize={[1, 2, 3]}>
           {unwidow(title)} {'\u2022'} {toMoney(price)}
         </Box>
 
         {description && (
-          <HeaderDescription markdown>
+          <Header.Description markdown>
             {description.content.html}
-          </HeaderDescription>
+          </Header.Description>
         )}
       </Header>
 
diff --git a/src/templates/Playlist.js b/src/templates/Playlist.js
index d3af67b..5268e85 100644
--- a/src/templates/Playlist.js
+++ b/src/templates/Playlist.js
@@ -5,7 +5,7 @@ import Helmet from 'react-helmet'
 import { Text } from 'rebass'
 import { Rule } from '../components/Typography'
 import Container from '../components/Container'
-import { Header, HeaderTitle, HeaderDescription } from '../components/Header'
+import Header from '../components/Header'
 import VideoPlaylistGrid from '../components/VideoPlaylistGrid'
 import { useSiteMetadata } from '../utils/hooks'
 import unwidow from '../utils/unwidow'
@@ -34,10 +34,10 @@ const PlaylistTemplate = ({ data }) => {
       </Helmet>
 
       <Header hideRule>
-        <HeaderTitle>{unwidow(title)}</HeaderTitle>
+        <Header.Title>{unwidow(title)}</Header.Title>
 
         {description && (
-          <HeaderDescription>{unwidow(description)}</HeaderDescription>
+          <Header.Description>{unwidow(description)}</Header.Description>
         )}
       </Header>