diff --git a/.storybook/index.stories.js b/.storybook/index.stories.js
index 5a67d91..b75891d 100644
--- a/.storybook/index.stories.js
+++ b/.storybook/index.stories.js
@@ -1,3 +1,5 @@
-const stories = require('../src/content.stories');
+const {
+  passConferenceSettings,
+} =require('../src/content.stories');
 
-module.exports = [stories];
+passConferenceSettings({warning: 'settings should come from conferences projects'});
diff --git a/package.json b/package.json
index 07a55a5..8b20f52 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@focus-reactive/graphql-content-layer",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": false,
   "main": "dist/index.js",
   "scripts": {
diff --git a/src/content.stories.js b/src/content.stories.js
index 12e4644..f40a9fb 100644
--- a/src/content.stories.js
+++ b/src/content.stories.js
@@ -2,21 +2,18 @@ const React = require('react');
 const ReactJson = require('react-json-view').default;
 const {
   Query,
+  QueryParams,
   withGraphCMS,
 } = require('@focus-reactive/storybook-addon-graphcms');
 const { storiesOf } = require('@storybook/react');
 
 const { credentials, conferenceTitle, eventYear } = require('./config');
 const { queriesData, getContent } = require('./index');
-const { tagColors } = require('./utils');
+// const { tagColors } = require('./utils');
 
 const allStories = {};
 
-const AwaitForData = ({ promise }) => {
-  const [content, setContent] = React.useState(null);
-  React.useEffect(() => {
-    promise.then(res => setContent(res));
-  }, [getContent]);
+const AwaitForData = ({ content }) => {
   if (!content) return 'Loading data from GraphCMS';
   return <ReactJson src={content} name="content" collapsed={2} />;
 };
@@ -39,43 +36,43 @@ const TagColor = ({ title, tag }) => (
   </div>
 );
 
-/**
- * getContent is async
- * but when it starts it populate `queriesData` with queries
- * we need to get it first for creating stories
- * after that we can wait for real data and show inner content
- */
-const contentPromise = getContent();
+const passConferenceSettings = async conferenceSettings => {
+  const content = await getContent(conferenceSettings);
 
-queriesData.forEach(
-  ({ queryPages, getData, story, vars }) => {
-    allStories[story] = Query({
-      name: story,
-      query: queryPages,
-      vars: { conferenceTitle, eventYear, ...vars },
-      searchVars: { search: '' },
-      getData,
+  storiesOf('Content Layer', module)
+    .add('content', () => <AwaitForData content={content} />)
+    .add('tag colors', () => {
+      const { tagColors } = content.conferenceSettings;
+      const tags = Object.keys(tagColors);
+      return (
+        <div>
+          {tags.map(tag => (
+            <TagColor key={tag} title={tag} tag={tagColors[tag]} />
+          ))}
+        </div>
+      );
     });
-  },
-);
 
-module.exports = {
-  default: {
-    title: 'GraphCMS content',
-    decorators: [withGraphCMS(credentials)],
-  },
-  ...allStories,
-};
+  const cmsStories = storiesOf('CMS Layer', module).addDecorator(
+    withGraphCMS(credentials),
+  );
 
-storiesOf('Inner structure', module)
-  .add('content', () => <AwaitForData promise={contentPromise} />)
-  .add('tag colors', () => {
-    const tags = Object.keys(tagColors);
-    return (
-      <div>
-        {tags.map(tag => (
-          <TagColor key={tag} title={tag} tag={tagColors[tag]} />
-        ))}
-      </div>
+  queriesData.forEach(({ queryPages, getData, story, vars }) => {
+    cmsStories.add(
+      story,
+      () => null,
+      QueryParams({
+        name: story,
+        query: queryPages,
+        vars: { conferenceTitle, eventYear, ...vars },
+        searchVars: { search: '' },
+        getData,
+        isConnected: true,
+      }),
     );
   });
+};
+
+module.exports = {
+  passConferenceSettings,
+};
diff --git a/src/fetch-committee.js b/src/fetch-committee.js
index 2d4f8ce..613151f 100644
--- a/src/fetch-committee.js
+++ b/src/fetch-committee.js
@@ -30,7 +30,8 @@ const fetchData = async (client, vars) => {
     .then(res => res.conf.year[0].committee);
 
   const speakers = await prepareSpeakers(
-    data.map(speaker => ({ speaker, decor: true }))
+    data.map(speaker => ({ speaker, decor: true })),
+    {}
   );
 
   return {
diff --git a/src/fetch-mc.js b/src/fetch-mc.js
index 32d4cad..733e2d5 100644
--- a/src/fetch-mc.js
+++ b/src/fetch-mc.js
@@ -7,7 +7,12 @@ const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, {
 });
 
 const queryPages = /* GraphQL */ `
-  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) {
+  query(
+    $conferenceTitle: ConferenceTitle
+    $eventYear: EventYear
+    $avatarWidth: Int
+    $avatarHeight: Int
+  ) {
     conf: conferenceBrand(where: { title: $conferenceTitle }) {
       id
       status
@@ -17,7 +22,7 @@ const queryPages = /* GraphQL */ `
         mcs {
           id
           speaker {
-          ...person
+            ...person
           }
         }
       }
@@ -27,12 +32,12 @@ const queryPages = /* GraphQL */ `
   ${personFragment}
 `;
 
-const fetchData = async(client, vars) => {
+const fetchData = async (client, vars) => {
   const data = await client
     .request(queryPages, vars)
     .then(res => res.conf.year[0].mcs);
 
-  const mcs = await prepareSpeakers(data);
+  const mcs = await prepareSpeakers(data, {});
 
   return {
     mcs: await Promise.all(mcs),
diff --git a/src/fetch-performance.js b/src/fetch-performance.js
index cdbf237..31207c2 100644
--- a/src/fetch-performance.js
+++ b/src/fetch-performance.js
@@ -7,7 +7,12 @@ const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, {
 });
 
 const queryPages = /* GraphQL */ `
-  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) {
+  query(
+    $conferenceTitle: ConferenceTitle
+    $eventYear: EventYear
+    $avatarWidth: Int
+    $avatarHeight: Int
+  ) {
     conf: conferenceBrand(where: { title: $conferenceTitle }) {
       id
       status
@@ -30,7 +35,8 @@ const fetchData = async (client, vars) => {
     .then(res => res.conf.year[0].performanceTeam);
 
   const speakers = await prepareSpeakers(
-    data.map(speaker => ({ speaker, decor: true }))
+    data.map(speaker => ({ speaker, decor: true })),
+    {},
   );
 
   return {
diff --git a/src/fetch-speakers.js b/src/fetch-speakers.js
index 23ca9af..8fbf665 100644
--- a/src/fetch-speakers.js
+++ b/src/fetch-speakers.js
@@ -1,13 +1,25 @@
 const { prepareSpeakers, trySelectSettings } = require('./utils');
 const { speakerInfoFragment } = require('./fragments');
 
-const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, {
-  avatarWidth: 500,
-  avatarHeight: 500,
-});
+const selectSettings = trySelectSettings(
+  s => ({
+    ...s.speakerAvatar.dimensions,
+    tagColors: s.tagColors,
+  }),
+  {
+    avatarWidth: 500,
+    avatarHeight: 500,
+    tagColors: {},
+  },
+);
 
 const queryPages = /* GraphQL */ `
-  query($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) {
+  query(
+    $conferenceTitle: ConferenceTitle
+    $eventYear: EventYear
+    $avatarWidth: Int
+    $avatarHeight: Int
+  ) {
     conf: conferenceBrand(where: { title: $conferenceTitle }) {
       id
       status
@@ -25,7 +37,7 @@ const queryPages = /* GraphQL */ `
   ${speakerInfoFragment}
 `;
 
-const fetchData = async (client, vars) => {
+const fetchData = async (client, { tagColors, ...vars }) => {
   const data = await client.request(queryPages, vars).then(res => ({
     speakers: res.conf.year[0].speakers,
     openForTalks: res.conf.year[0].openForTalks,
@@ -33,7 +45,7 @@ const fetchData = async (client, vars) => {
 
   const { openForTalks } = data;
 
-  const speakers = await prepareSpeakers(data.speakers);
+  const speakers = await prepareSpeakers(data.speakers, tagColors);
 
   return {
     speakers: { main: await Promise.all(speakers) },
diff --git a/src/fetch-workshops.js b/src/fetch-workshops.js
index 6f3d3f6..e866346 100644
--- a/src/fetch-workshops.js
+++ b/src/fetch-workshops.js
@@ -8,14 +8,19 @@ const selectSettings = trySelectSettings(s => s.speakerAvatar.dimensions, {
 });
 
 const queryPages = /* GraphQL */ `
-  query ($conferenceTitle: ConferenceTitle, $eventYear: EventYear, $avatarWidth: Int, $avatarHeight: Int) {
-    conf: conferenceBrand(where: {title: $conferenceTitle}) {
+  query(
+    $conferenceTitle: ConferenceTitle
+    $eventYear: EventYear
+    $avatarWidth: Int
+    $avatarHeight: Int
+  ) {
+    conf: conferenceBrand(where: { title: $conferenceTitle }) {
       id
       status
-      year: conferenceEvents(where: {year: $eventYear}) {
+      year: conferenceEvents(where: { year: $eventYear }) {
         id
         status
-        schedule: daySchedules(where: {workshops_some: {}}) {
+        schedule: daySchedules(where: { workshops_some: {} }) {
           id
           status
           additionalEvents
@@ -30,7 +35,14 @@ const queryPages = /* GraphQL */ `
             level
             speaker {
               name
-              info: pieceOfSpeakerInfoes(where: {conferenceEvent: {year: $eventYear, conferenceBrand: {title: $conferenceTitle}}}) {
+              info: pieceOfSpeakerInfoes(
+                where: {
+                  conferenceEvent: {
+                    year: $eventYear
+                    conferenceBrand: { title: $conferenceTitle }
+                  }
+                }
+              ) {
                 ...speakerInfo
               }
             }
@@ -58,26 +70,30 @@ const fetchData = async (client, vars) => {
           day.additionalEvents.find(({ title }) => title === ws.title)),
       })),
     ],
-    []
+    [],
   );
 
-
   const allWorkshops = await Promise.all(
     workshops.map(async wrp => ({
       ...wrp,
       description: await markdownToHtml(wrp.description),
       additionalInfo: await markdownToHtml(wrp.additionalInfo),
-    }))
+    })),
   );
 
-  const trainers = await Promise.all(await prepareSpeakers(allWorkshops.map(ws => ws.speaker.info[0])));
+  const trainers = await Promise.all(
+    await prepareSpeakers(
+      allWorkshops.map(ws => ws.speaker.info[0]),
+      {},
+    ),
+  );
 
   return {
     trainers,
     workshops: allWorkshops,
     speakers: {
-      workshops: trainers
-    }
+      workshops: trainers,
+    },
   };
 };
 
diff --git a/src/index.js b/src/index.js
index b19991d..8b44241 100644
--- a/src/index.js
+++ b/src/index.js
@@ -76,6 +76,7 @@ const getContent = async conferenceSettings => {
     } catch (err) {}
     return { ...content, ...piece };
   }, {});
+  contentMap.conferenceSettings = conferenceSettings;
   return contentMap;
 };
 
diff --git a/src/utils.js b/src/utils.js
index db4024d..58dbf20 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,43 +1,43 @@
 const { markdownToHtml } = require('./markdown');
 
-const tagColors = {
-  NodeJS: {
-    tagBG: '#7AB464',
-    color: '#fff',
-  },
-  WebGL: {
-    tagBG: '#ff7302',
-    color: '#ffffff',
-  },
-  Ecosystem: {
-    tagBG: '#fff40d',
-    color: '#ae4f01',
-  },
-  Language: {
-    tagBG: '#fff40d',
-    color: '#ae4f01',
-  },
-  GraphQL: {
-    tagBG: '#f200fa',
-    color: '#400042',
-  },
-  VueJS: {
-    tagBG: '#4EBA87',
-    color: '#fff',
-  },
-  Performance: {
-    tagBG: '#00ed24',
-    color: '#00410a',
-  },
-  TypeScript: {
-    tagBG: '#61DAFB',
-    color: '#030303',
-  },
-  default: {
-    tagBG: 'black',
-    color: 'white',
-  },
-};
+// const tagColors = {
+//   NodeJS: {
+//     tagBG: '#7AB464',
+//     color: '#fff',
+//   },
+//   WebGL: {
+//     tagBG: '#ff7302',
+//     color: '#ffffff',
+//   },
+//   Ecosystem: {
+//     tagBG: '#fff40d',
+//     color: '#ae4f01',
+//   },
+//   Language: {
+//     tagBG: '#fff40d',
+//     color: '#ae4f01',
+//   },
+//   GraphQL: {
+//     tagBG: '#f200fa',
+//     color: '#400042',
+//   },
+//   VueJS: {
+//     tagBG: '#4EBA87',
+//     color: '#fff',
+//   },
+//   Performance: {
+//     tagBG: '#00ed24',
+//     color: '#00410a',
+//   },
+//   TypeScript: {
+//     tagBG: '#61DAFB',
+//     color: '#030303',
+//   },
+//   default: {
+//     tagBG: 'black',
+//     color: 'white',
+//   },
+// };
 
 const getSocials = speaker => {
   const ICONS = {
@@ -59,12 +59,12 @@ const getSocials = speaker => {
   return socials;
 };
 
-const getLabelColor = label => {
+const getLabelColor = (label, tagColors) => {
   const colors = tagColors[label] || tagColors.default;
   return colors;
 };
 
-const prepareSpeakers = speakers =>
+const prepareSpeakers = (speakers, tagColors) =>
   speakers
     .map(item => ({
       ...item.speaker,
@@ -77,13 +77,14 @@ const prepareSpeakers = speakers =>
       avatar: avatar.url,
       bio: await markdownToHtml(bio),
       socials: getSocials(item),
-      ...getLabelColor(item.label),
+      ...getLabelColor(item.label, tagColors),
     }));
 
 const trySelectSettings = (selector, defaultSettings) => settings => {
   try {
     return selector(settings) || defaultSettings;
-  } catch {
+  } catch (err) {
+    console.warn(err);
     return defaultSettings;
   }
 };
@@ -91,6 +92,6 @@ const trySelectSettings = (selector, defaultSettings) => settings => {
 module.exports = {
   getLabelColor,
   prepareSpeakers,
-  tagColors,
+  // tagColors,
   trySelectSettings,
 };