diff --git a/README.md b/README.md
index a6ba07241..a234d8ff4 100644
--- a/README.md
+++ b/README.md
@@ -78,11 +78,13 @@ There are many developments that have contributed to the creation of `component-
 
 # Showcase sites
 
--   [Storybook 6](https://components-storybook-6.netlify.app/)
+-   [Gatsby](https://component-controls-gatsby.netlify.app)
 
 -   [Storybook 6 without addon-docs](https://components-storybook-6-no-docs.netlify.app/?path=/story/storybook-starter--overview)
 
--   [Custom docs pages](https://custom-pages-storybook-6.netlify.app)
+-   [Storybook 6](https://components-storybook-6.netlify.app/)
+
+-   [Storybook custom docs pages](https://custom-pages-storybook-6.netlify.app)
 
 # Integrations
 
diff --git a/core/store/src/Store/Store.ts b/core/store/src/Store/Store.ts
index 74fe33d84..3fa2da3e4 100644
--- a/core/store/src/Store/Store.ts
+++ b/core/store/src/Store/Store.ts
@@ -31,6 +31,7 @@ export class Store implements StoryStore {
   private observers: StoreObserver[];
   private moduleId: number;
   private _firstStory: string | undefined;
+  private _firstDoc: string | undefined;
   /**
    * create a store with options
    */
@@ -83,13 +84,17 @@ export class Store implements StoryStore {
             {},
           );
       }
+
       const sortedDocs = Object.keys(this.loadedStore.docs);
-      if (this.loadedStore.docs && sortedDocs.length > 0) {
-        const firstDoc = this.loadedStore.docs[sortedDocs[0]];
-        if (firstDoc.stories && firstDoc.stories.length) {
-          //point tot first story of first doc
-          this._firstStory = firstDoc.stories[0];
-        }
+      this._firstDoc = sortedDocs.find(name => {
+        //@ts-ignore
+        const doc = this.loadedStore.docs[name];
+        return doc.stories && doc.stories.length;
+      });
+      if (this._firstDoc) {
+        const doc = this.loadedStore.docs[this._firstDoc];
+        //point to first story of first doc
+        this._firstStory = doc.stories?.[0];
       }
     }
   };
@@ -163,6 +168,9 @@ export class Store implements StoryStore {
   get firstStory(): string | undefined {
     return this._firstStory;
   }
+  get firstDoc(): string | undefined {
+    return this._firstDoc;
+  }
 
   /**
    * modify story properties, for example controls values.
diff --git a/core/store/src/types.ts b/core/store/src/types.ts
index 161c94195..690cfb5d2 100644
--- a/core/store/src/types.ts
+++ b/core/store/src/types.ts
@@ -19,6 +19,7 @@ export interface StoryStore {
   getDocs: () => StoryDocs | undefined;
   config: Configuration | undefined;
   firstStory: string | undefined;
+  firstDoc: string | undefined;
   updateStoryProp: (
     storyId: string,
     propName: string,
diff --git a/integrations/gatsby-theme-stories/src/components/Header.tsx b/integrations/gatsby-theme-stories/src/components/Header.tsx
deleted file mode 100644
index 2d223d6a8..000000000
--- a/integrations/gatsby-theme-stories/src/components/Header.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/** @jsx jsx */
-import { FC, useContext } from 'react';
-import { jsx, Flex, Text } from 'theme-ui';
-import { Link as GatsbyLink } from 'gatsby';
-import {
-  ColorMode,
-  SidebarContext,
-  Header as AppHeader,
-} from '@component-controls/app-components';
-
-interface HeaderProps {
-  title?: string;
-}
-export const Header: FC<HeaderProps> = () => {
-  const { SidebarToggle, collapsed, responsive } = useContext(SidebarContext);
-
-  return (
-    <AppHeader position="sticky">
-      <Flex
-        sx={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          color: `secondary`,
-          a: {
-            color: `secondary`,
-            ':hover': { color: `accent` },
-            fontWeight: '700',
-          },
-        }}
-      >
-        {collapsed && <SidebarToggle />}
-        <Flex
-          sx={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            py: 3,
-          }}
-        >
-          <GatsbyLink to="/">
-            <Text sx={{ px: 2 }}>Home</Text>
-          </GatsbyLink>
-          <GatsbyLink to="/docs/">
-            <Text sx={{ px: 2 }}>Docs</Text>
-          </GatsbyLink>
-        </Flex>
-      </Flex>
-      {!responsive && <ColorMode />}
-    </AppHeader>
-  );
-};
diff --git a/integrations/gatsby-theme-stories/src/components/Layout.tsx b/integrations/gatsby-theme-stories/src/components/Layout.tsx
index eed234ebf..8ea4bd886 100644
--- a/integrations/gatsby-theme-stories/src/components/Layout.tsx
+++ b/integrations/gatsby-theme-stories/src/components/Layout.tsx
@@ -16,7 +16,6 @@ import { PagesConfig } from './types';
 interface LayoutProps {
   title?: string;
   storyStore: Store;
-  storyId?: string;
   docTitle: string;
   pages: PagesConfig;
 }
@@ -25,10 +24,8 @@ export const Layout: FC<LayoutProps> = ({
   pages: pagesFn,
   title,
   storyStore,
-  storyId,
   docTitle,
 }) => {
-  const story = storyId || storyStore?.firstStory;
   return (
     <ThemeProvider>
       <Global
@@ -38,7 +35,7 @@ export const Layout: FC<LayoutProps> = ({
           },
         })}
       />
-      <BlockContextProvider storyId={story} docId={docTitle} store={storyStore}>
+      <BlockContextProvider docId={docTitle} store={storyStore}>
         <SidebarContextProvider>
           <LinkContextProvider linkClass={GatsbyLink}>
             <App title={title} pagesFn={pagesFn} />
diff --git a/ui/blocks/src/context/block/BlockContext.tsx b/ui/blocks/src/context/block/BlockContext.tsx
index 7788c57d3..51a415e9c 100644
--- a/ui/blocks/src/context/block/BlockContext.tsx
+++ b/ui/blocks/src/context/block/BlockContext.tsx
@@ -57,13 +57,14 @@ export const BlockContextProvider: React.FC<BlockContextInputProps> = ({
   store,
   options,
 }) => {
+  const pageId = storyId || docId ? docId : store.firstDoc;
   return (
     <ErrorBoundary>
       <RecoilRoot>
         <BlockContext.Provider
           value={{
             storyId,
-            docId,
+            docId: pageId,
             storeProvider: store,
             options,
           }}
@@ -71,7 +72,7 @@ export const BlockContextProvider: React.FC<BlockContextInputProps> = ({
           <BlockDataContextProvider
             store={store}
             storyId={storyId}
-            docId={docId}
+            docId={pageId}
           >
             <BlockControlsContextProvider store={store}>
               {children}