diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 110da1f..a7b47c0 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,15 +1,20 @@
 import React from 'react';
-import Link from 'next/link';
-import { Navbar, NavbarBrand, Nav } from 'reactstrap';
+import { Navbar, Nav, Container } from 'reactstrap';
 import NavbarStyle from './NavbarStyle';
-// import Imgix from './Imgix';
+import { StoryContext } from './StoryProvider';
+import Imgix from './Imgix';
 // import { AccountContext } from './AccountProvider';
 
 export default () => (
-  <Navbar expand fixed="top">
+  <Container className="fixed-top bg-white px-0" fluid>
     <NavbarStyle />
-    <Link href="/" passHref>
-      <NavbarBrand>
+    {/* <Navbar id="publisher-bar" className="small d-flex flex-row justify-content-start bg-dark">
+      <div class="arrow-left align-self-center mr-1"/>
+      <small class="text-uppercase align-self-center mr-1 text-white">[cname].com</small>
+    </Navbar> */}
+    <Navbar id="branding-bar" expand>
+      <NavbarStyle />
+      <Nav className="position-absolute">
         {/* <AccountContext.Consumer>
           {({ branding }) => {
             return (
@@ -23,11 +28,33 @@ export default () => (
               />
           ) }}
         </AccountContext.Consumer> */}
-      </NavbarBrand>
-    </Link>
-    <Nav className="mr-auto" navbar>
-      {/* <ActiveNavItem href="/" title="Home">Home</ActiveNavItem>
-      <ActiveNavItem href="/about" title="About">About</ActiveNavItem> */}
-    </Nav>
-  </Navbar>
+      </Nav>
+      <Nav className="mx-auto navbar-logo" navbar>
+        <StoryContext.Consumer>
+          {({ story }) => {
+            if (story.advertiser && story.advertiser.logo) {
+              return (
+                <Imgix
+                  className="d-flex bg-imgIx img-fluid"
+                  src={story.advertiser.logo.src}
+                  alt={story.advertiser.name}
+                  title={story.advertiser.name}
+                  w="300"
+                  h="50"
+                  fit="max"
+                />
+              );
+            }
+            return (
+              {/*
+                figure out what to put instead of advertiser
+              */}
+            );
+          }}
+        </StoryContext.Consumer>
+        {/* <ActiveNavItem href="/" title="Home">Home</ActiveNavItem>
+        <ActiveNavItem href="/about" title="About">About</ActiveNavItem> */}
+      </Nav>
+    </Navbar>
+  </Container>
 );
diff --git a/src/components/NavbarStyle.jsx b/src/components/NavbarStyle.jsx
index d5d213e..52514c7 100644
--- a/src/components/NavbarStyle.jsx
+++ b/src/components/NavbarStyle.jsx
@@ -5,7 +5,8 @@ export default () => (
     nav.fixed-top {
       transition: top 0.1s ease-in-out;
       transition: background-color 0.1s ease-in-out;
-      background-color: transparent;
+      background-color: #fff;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.50), 0 2px 10px 0 rgba(0, 0, 0, 0.50);
     }
     .fixed-top.nav-down {
       background-color: rgba(0,0,0,0.75);
diff --git a/src/components/Story/Header.jsx b/src/components/Story/Header.jsx
index b9c051e..998401a 100644
--- a/src/components/Story/Header.jsx
+++ b/src/components/Story/Header.jsx
@@ -2,17 +2,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Head from 'next/head';
 import { Row, Col, Container } from 'reactstrap';
-import Imgix from '../Imgix';
 import HeaderStyle from './HeaderStyle';
+import Imgix from '../Imgix';
 
 const Header = (props) => {
   const {
     title,
+    teaser,
     primaryImgSrc,
     primaryImgCaption,
-    teaser,
   } = props;
 
+  const contents = (
+    <Container className="align-self-center">
+      <Row>
+        <Col className="post-heading">
+          <h1 className="p-2 text-white">{title}</h1>
+        </Col>
+      </Row>
+    </Container>
+  );
+
   return (
     <div className="story-header">
       <HeaderStyle />
@@ -20,15 +30,15 @@ const Header = (props) => {
         <title>{title}</title>
         <meta name="description" story={teaser} />
       </Head>
-      <Imgix tag="div" className="d-flex bg-imgIx img-fluid" src={primaryImgSrc} alt={primaryImgCaption} title={title} w="1200" h="600" fit="crop" crop="faces,edges">
-        <Container className="align-self-center">
-          <Row>
-            <Col className="post-heading">
-              <h1 className="p-2 text-white">{title}</h1>
-            </Col>
-          </Row>
-        </Container>
-      </Imgix>
+      {primaryImgSrc ? (
+        <Imgix tag="div" className="d-flex bg-imgIx img-fluid" src={primaryImgSrc} alt={primaryImgCaption} title={title} w="1200" h="600" fit="crop" crop="focalpoint">
+          {contents}
+        </Imgix>
+      ) : (
+        <div className="d-flex bg-imgIx">
+          {contents}
+        </div>
+      )}
     </div>
   );
 };
@@ -36,12 +46,13 @@ const Header = (props) => {
 Header.defaultProps = {
   teaser: '',
   primaryImgCaption: '',
+  primaryImgSrc: '',
 };
 
 Header.propTypes = {
   title: PropTypes.string.isRequired,
   teaser: PropTypes.string,
-  primaryImgSrc: PropTypes.string.isRequired,
+  primaryImgSrc: PropTypes.string,
   primaryImgCaption: PropTypes.string,
 };
 
diff --git a/src/components/Story/HeaderStyle.jsx b/src/components/Story/HeaderStyle.jsx
index a425a2c..7a2dfca 100644
--- a/src/components/Story/HeaderStyle.jsx
+++ b/src/components/Story/HeaderStyle.jsx
@@ -16,7 +16,12 @@ export default () => (
       height: 80vh;
       background: url() center/cover no-repeat fixed;
     }
-
+    #publisher-bar {
+      box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25), 0 2px 5px 0 rgba(0,0,0,0.25)
+    }
+    #branding-bar {
+      box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22), 0 25px 55px 0 rgba(0,0,0,0.21);
+    }
     div.bg-imgIx:before {
       backgound: transparent;
       transition: background 0.5s linear;
@@ -37,6 +42,26 @@ export default () => (
       transition: background 1.5s ease-out;
     }
 
+    .arrow-left {
+      width: 0;
+      height: 0;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+
+      border-right:5px solid #fff;
+    }
+
+    .post-heading h1 {
+      color: #fff;
+      font-size: 5vmax;
+      font-family: 'Ubuntu', sans-serif;
+    }
+    @media screen and (min-width: 1200px) {
+      .post-heading h1 {
+        font-size: 60px;
+      }
+    }
+
     @media screen and (min-width: 1600px) {
       div.bg-imgIx:before {
         background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.25) 300px, rgba(0,0,0,0.25) calc(100% - 300px), rgba(0,0,0,1) 100%); /* FF3.6-15 */
@@ -48,12 +73,6 @@ export default () => (
         margin-right: auto;
       }
     }
-
-    .post-heading h1 {
-      color: #fff;
-      font-size: 5vmax;
-      font-family: 'Ubuntu', sans-serif;
-    }
   `}
   </style>
 );
diff --git a/src/components/StoryProvider.jsx b/src/components/StoryProvider.jsx
new file mode 100644
index 0000000..902f369
--- /dev/null
+++ b/src/components/StoryProvider.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Query } from 'react-apollo';
+import PropTypes from 'prop-types';
+import query from '../gql/story.graphql';
+
+export const StoryContext = React.createContext({});
+
+export const StoryProvider = (props) => {
+  const input = { id: props.id };
+  return (
+    <Query query={query} variables={{ input }}>
+      {({ error, data }) => {
+        if (error) return <p><strong>{error.message}</strong></p>;
+        return (
+          <StoryContext.Provider value={data}>
+            {props.children}
+          </StoryContext.Provider>
+        );
+      }}
+    </Query>
+  );
+};
+
+StoryProvider.propTypes = {
+  id: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+
+};
+
diff --git a/src/pages/story.jsx b/src/pages/story.jsx
index af76d6f..2035e8c 100644
--- a/src/pages/story.jsx
+++ b/src/pages/story.jsx
@@ -1,47 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Query } from 'react-apollo';
 import Analytics from '../components/Analytics';
 import PageWrapper from '../components/PageWrapper';
 import Header from '../components/Story/Header';
 import Body from '../components/Story/Body';
 import withApollo from '../apollo/client';
-import gql from '../gql/story.graphql';
 import { AccountContext } from '../components/AccountProvider';
+import { StoryContext, StoryProvider } from '../components/StoryProvider';
 
-const Story = ({ id }) => {
-  const input = { id };
-  return (
+const Story = ({ id }) => (
+  <StoryProvider id={id}>
     <PageWrapper>
-      <Query query={gql} variables={{ input }}>
-        {({ loading, error, data }) => {
-          if (loading) {
-            return (
-              <p>Loading...</p>
-            );
-          }
-          if (error) return <p><strong>{error.message}</strong></p>;
-
-          const { story } = data;
-
-          return (
-            <div className="story-wrapper">
-              <AccountContext.Consumer>
-                {({ account }) => <Analytics accountKey={account.key} storyId={story.id} /> }
-              </AccountContext.Consumer>
-              <Header
-                title={story.title}
-                primaryImgSrc={story.primaryImage.src}
-                primaryImgCaption={story.primaryImage.caption}
-              />
-              <Body teaser={story.teaser} body={story.body} />
-            </div>
-          );
-        }}
-      </Query>
+      <StoryContext.Consumer>
+        {({ story }) => (
+          <div className="story-wrapper">
+            <AccountContext.Consumer>
+              {({ account }) => <Analytics accountKey={account.key} storyId={story.id} /> }
+            </AccountContext.Consumer>
+            <Header
+              title={story.title}
+              primaryImgSrc={story.primaryImage.src}
+              primaryImgCaption={story.primaryImage.caption}
+            />
+            <Body teaser={story.teaser} body={story.body} />
+          </div>
+        )}
+      </StoryContext.Consumer>
     </PageWrapper>
-  );
-};
+  </StoryProvider>
+);
 
 Story.getInitialProps = async ({ query }) => {
   const { id } = query;