diff --git a/package.json b/package.json
index b16a46a..993afed 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@chevtek/react-spinners": "^1.0.5",
     "google-maps-react": "^2.0.2",
     "immutable": "^3.8.2",
-    "kentico-cloud-delivery": "^5.1.0",
+    "kentico-cloud-delivery": "^5.7.2",
     "lodash": "^4.17.11",
     "qs": "^6.5.2",
     "react": "^16.4.2",
diff --git a/src/Components/Banner.js b/src/Components/Banner.js
index 946a472..83aacb4 100644
--- a/src/Components/Banner.js
+++ b/src/Components/Banner.js
@@ -1,16 +1,30 @@
 import React from 'react';
 import { translate } from 'react-translate';
 
-import BackgroundImage from '../Images/banner-default.jpg';
-
 const Banner = props => {
+  const heroUnit = props.heroUnit;
+  const images = heroUnit.image && heroUnit.image.value;
+  const imageUrl = images && images.length && images[0].url;
+
   return (
     <section
       className="banner-section"
-      style={{ backgroundImage: 'url(' + BackgroundImage + ')' }}
+      style={
+        imageUrl ? { backgroundImage: 'url(' + imageUrl + ')' } : undefined
+      }
     >
-      <h2 className="banner-heading">{props.t('heading')}</h2>
-      <p className="banner-text">{props.t('text')}</p>
+      <h2 className="banner-heading">
+        {heroUnit.title && heroUnit.title.value}
+      </h2>
+      <p className="banner-text">
+        {heroUnit.marketingMessage && (
+          <div
+            dangerouslySetInnerHTML={{
+              __html: heroUnit.marketingMessage.value
+            }}
+          />
+        )}
+      </p>
     </section>
   );
 };
diff --git a/src/Components/LatestArticles.js b/src/Components/LatestArticles.js
index 5f32e4b..dda4a28 100644
--- a/src/Components/LatestArticles.js
+++ b/src/Components/LatestArticles.js
@@ -1,114 +1,23 @@
-import React, { Component } from 'react';
-import { ArticleStore } from '../Stores/Article';
+import React from 'react';
 import dateFormat from 'dateformat';
 import { translate } from 'react-translate';
 
-import { dateFormats } from '../Utilities/LanguageCodes';
 import Link from '../Components/LowerCaseUrlLink';
 
-const articleCount = 5;
-
-let getState = props => {
-  return {
-    articles: ArticleStore.getArticles(articleCount, props.language)
-  };
-};
-
-class LatestArticles extends Component {
-  constructor(props) {
-    super(props);
-    this.state = getState(props);
-    this.onChange = this.onChange.bind(this);
-    dateFormat.i18n = dateFormats[props.language] || dateFormats[0];
-  }
-
-  componentDidMount() {
-    ArticleStore.addChangeListener(this.onChange);
-    ArticleStore.provideArticles(this.props.language);
-  }
-
-  componentWillUnmount() {
-    ArticleStore.removeChangeListener(this.onChange);
-    ArticleStore.unsubscribe();
+const LatestArticles = props => {
+  if (props.articles.length === 0) {
+    return <div className="row" />;
   }
 
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (prevState.language !== nextProps.language) {
-      ArticleStore.provideArticles(nextProps.language);
-      dateFormat.i18n = dateFormats[nextProps.language] || dateFormats[0];
-      return {
-        language: nextProps.language
-      };
-    }
-    return null;
-  }
-
-  onChange() {
-    this.setState(getState(this.props));
-  }
-
-  render() {
-    if (this.state.articles.length === 0) {
-      return <div className="row" />;
-    }
-
-    let formatDate = value => {
-      return dateFormat(value, 'mmmm d');
-    };
-
-    var otherArticles = this.state.articles.slice(1).map((article, index) => {
-      let title =
-        article.title.value.trim().length > 0
-          ? article.title.value
-          : this.props.t('noTitleValue');
-
-      let imageLink =
-        article.teaserImage.value[0] !== undefined ? (
-          <img
-            alt={'Article ' + title}
-            className="article-tile-image"
-            src={article.teaserImage.value[0].url}
-            title={'Article ' + title}
-          />
-        ) : (
-          <div className="article-tile-image placeholder-tile-image">
-            {this.props.t('noTeaserValue')}
-          </div>
-        );
-
-      let postDate = formatDate(article.postDate.value);
-
-      let summary =
-        article.summary.value.trim().length > 0
-          ? article.summary.value
-          : this.props.t('noSummaryValue');
-
-      let link = `/${this.props.language.toLowerCase()}/articles/${
-        article.system.id
-      }`;
-
-      return (
-        <div className="col-md-3" key={index}>
-          <div className="article-tile">
-            <Link to={link}>{imageLink}</Link>
-            <div className="article-tile-date">{postDate}</div>
-            <div className="article-tile-content">
-              <h2 className="h4">
-                <Link to={link}>{title}</Link>
-              </h2>
-              <p className="article-tile-text">{summary}</p>
-            </div>
-          </div>
-        </div>
-      );
-    });
-
-    let article = this.state.articles[0];
+  let formatDate = value => {
+    return dateFormat(value, 'mmmm d');
+  };
 
+  var otherArticles = props.articles.slice(1).map((article, index) => {
     let title =
       article.title.value.trim().length > 0
         ? article.title.value
-        : this.props.t('noTitleValue');
+        : props.t('noTitleValue');
 
     let imageLink =
       article.teaserImage.value[0] !== undefined ? (
@@ -120,7 +29,7 @@ class LatestArticles extends Component {
         />
       ) : (
         <div className="article-tile-image placeholder-tile-image">
-          {this.props.t('noTeaserValue')}
+          {props.t('noTeaserValue')}
         </div>
       );
 
@@ -129,34 +38,77 @@ class LatestArticles extends Component {
     let summary =
       article.summary.value.trim().length > 0
         ? article.summary.value
-        : this.props.t('noSummaryValue');
+        : props.t('noSummaryValue');
 
-    let link = `/${this.props.language.toLowerCase()}/articles/${
-      article.system.id
-    }`;
-    let tabTitle = this.props.t('title');
+    let link = `/${props.language.toLowerCase()}/articles/${article.system.id}`;
 
     return (
-      <div className="row">
-        <h1 className="title-tab">{tabTitle}</h1>
-        <div className="article-tile article-tile-large">
-          <div className="col-md-12 col-lg-6">
-            <Link to={link}>{imageLink}</Link>
-          </div>
-          <div className="col-md-12 col-lg-6">
-            <div className="article-tile-date">{postDate}</div>
-            <div className="article-tile-content">
-              <h2>
-                <Link to={link}>{title}</Link>
-              </h2>
-              <p className="article-tile-text lead-paragraph">{summary}</p>
-            </div>
+      <div className="col-md-3" key={index}>
+        <div className="article-tile">
+          <Link to={link}>{imageLink}</Link>
+          <div className="article-tile-date">{postDate}</div>
+          <div className="article-tile-content">
+            <h2 className="h4">
+              <Link to={link}>{title}</Link>
+            </h2>
+            <p className="article-tile-text">{summary}</p>
           </div>
         </div>
-        {otherArticles}
       </div>
     );
-  }
-}
+  });
+
+  let article = props.articles[0];
+
+  let title =
+    article.title.value.trim().length > 0
+      ? article.title.value
+      : props.t('noTitleValue');
+
+  let imageLink =
+    article.teaserImage.value[0] !== undefined ? (
+      <img
+        alt={'Article ' + title}
+        className="article-tile-image"
+        src={article.teaserImage.value[0].url}
+        title={'Article ' + title}
+      />
+    ) : (
+      <div className="article-tile-image placeholder-tile-image">
+        {props.t('noTeaserValue')}
+      </div>
+    );
+
+  let postDate = formatDate(article.postDate.value);
+
+  let summary =
+    article.summary.value.trim().length > 0
+      ? article.summary.value
+      : props.t('noSummaryValue');
+
+  let link = `/${props.language.toLowerCase()}/articles/${article.system.id}`;
+  let tabTitle = props.t('title');
+
+  return (
+    <div className="row">
+      <h1 className="title-tab">{tabTitle}</h1>
+      <div className="article-tile article-tile-large">
+        <div className="col-md-12 col-lg-6">
+          <Link to={link}>{imageLink}</Link>
+        </div>
+        <div className="col-md-12 col-lg-6">
+          <div className="article-tile-date">{postDate}</div>
+          <div className="article-tile-content">
+            <h2>
+              <Link to={link}>{title}</Link>
+            </h2>
+            <p className="article-tile-text lead-paragraph">{summary}</p>
+          </div>
+        </div>
+      </div>
+      {otherArticles}
+    </div>
+  );
+};
 
 export default translate('LatestArticles')(LatestArticles);
diff --git a/src/Components/OurStory.js b/src/Components/OurStory.js
index 58b1611..d49bd76 100644
--- a/src/Components/OurStory.js
+++ b/src/Components/OurStory.js
@@ -1,18 +1,24 @@
 import React from 'react';
 import { translate } from 'react-translate';
 
-import StoryImage from '../Images/our-story.jpg';
-
 const OurStory = props => {
+  const fact = props.fact;
+  const images = fact.image && fact.image.value;
+  const imageUrl = images && images.length && images[0].url;
+
   return (
     <div className="row">
-      <h1 className="title-tab">{props.t('title')}</h1>
+      <h1 className="title-tab">{fact.title && fact.title.value}</h1>
       <div className="col-sm-12">
         <div
           className="ourstory-section center-text"
-          style={{ backgroundImage: 'url(' + StoryImage + ')' }}
+          style={
+            imageUrl ? { backgroundImage: 'url(' + imageUrl + ')' } : undefined
+          }
         >
-          {props.t('text')}
+          {fact.description && (
+            <div dangerouslySetInnerHTML={{ __html: fact.description.value }} />
+          )}
         </div>
       </div>
     </div>
diff --git a/src/Components/TasteOurCoffee.js b/src/Components/TasteOurCoffee.js
index 0891682..e0eb340 100644
--- a/src/Components/TasteOurCoffee.js
+++ b/src/Components/TasteOurCoffee.js
@@ -1,81 +1,39 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { translate } from 'react-translate';
 
 import Link from '../Components/LowerCaseUrlLink';
-import { CafeStore } from '../Stores/Cafe';
 
-let getState = props => {
-  return {
-    cafes: CafeStore.getCompanyCafes(props.language)
-  };
-};
-
-class TasteOurCoffee extends Component {
-  constructor(props) {
-    super(props);
-    this.state = getState(props);
-    this.onChange = this.onChange.bind(this);
-  }
-
-  componentDidMount() {
-    CafeStore.addChangeListener(this.onChange);
-    CafeStore.provideCompanyCafes(this.props.language);
-  }
-
-  componentWillUnmount() {
-    CafeStore.removeChangeListener(this.onChange);
-    CafeStore.unsubscribe();
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (prevState.language !== nextProps.language) {
-      CafeStore.provideCompanyCafes(nextProps.language);
-      return {
-        language: nextProps.language
-      };
-    }
-    return null;
-  }
-
-  onChange() {
-    this.setState(getState(this.props));
-  }
-
-  render() {
-    let cafes = this.state.cafes.map((cafe, index) => {
-      let name = cafe.system.name;
-      let imageLink = cafe.photo.value[0].url;
-
-      return (
-        <div className="col-xs-6 col-md-3" key={index}>
-          <div>
-            <Link
-              to={`/${this.props.language}/cafes`}
-              className="ourcoffee-tile-link"
-            >
-              <h2 className="ourcoffee-tile-text center-text">{name}</h2>
-              <span className="cafe-overlay"> </span>
-              <img
-                alt={name}
-                className="ourcoffee-tile-image"
-                src={imageLink}
-                title={name}
-              />
-            </Link>
-          </div>
-        </div>
-      );
-    });
+const TasteOurCoffee = props => {
+  let cafes = props.cafes.map((cafe, index) => {
+    let name = cafe.system.name;
+    let imageLink = cafe.photo.value[0].url;
 
     return (
-      <div className="row">
+      <div className="col-xs-6 col-md-3" key={index}>
         <div>
-          <h1 className="title-tab">{this.props.t('title')}</h1>
+          <Link to={`/${props.language}/cafes`} className="ourcoffee-tile-link">
+            <h2 className="ourcoffee-tile-text center-text">{name}</h2>
+            <span className="cafe-overlay"> </span>
+            <img
+              alt={name}
+              className="ourcoffee-tile-image"
+              src={imageLink}
+              title={name}
+            />
+          </Link>
         </div>
-        {cafes}
       </div>
     );
-  }
-}
+  });
+
+  return (
+    <div className="row">
+      <div>
+        <h1 className="title-tab">{props.t('title')}</h1>
+      </div>
+      {cafes}
+    </div>
+  );
+};
 
 export default translate('TasteOurCoffee')(TasteOurCoffee);
diff --git a/src/Images/banner-default.jpg b/src/Images/banner-default.jpg
deleted file mode 100644
index 4a79067..0000000
Binary files a/src/Images/banner-default.jpg and /dev/null differ
diff --git a/src/Images/our-story.jpg b/src/Images/our-story.jpg
deleted file mode 100644
index 89d1dc0..0000000
Binary files a/src/Images/our-story.jpg and /dev/null differ
diff --git a/src/Localization/en-US.json b/src/Localization/en-US.json
index 9f24251..5a26743 100644
--- a/src/Localization/en-US.json
+++ b/src/Localization/en-US.json
@@ -1,9 +1,5 @@
 {
   "locale": "en-US",
-  "Banner": {
-    "heading": "Roasting premium coffee",
-    "text": "Discover the fascinating world of Dancing Goat high-quality coffee and you will never miss a single coffee break again."
-  },
   "LatestArticles": {
     "title": "Latest articles",
     "noTitleValue": "(Article has no title)",
@@ -26,10 +22,6 @@
     "aboutLinkText": "Read the whole story",
     "cafesLinkText": "Find out more"
   },
-  "OurStory": {
-    "title": "Our Story",
-    "text": "At Dancing Goat, we strive to do things right. Not only do we source the best coffees you can get your hands on. We also make sure we have a direct relationship with our farmers. Visiting the micro farms where we source our coffees is our daily bread. This way, we can guarantee the highest quality standard all year long. No middle-men, no unfair shares. Our farmers get the best deal possible. So do you."
-  },
   "TasteOurCoffee": {
     "title": "Taste Our Coffee"
   },
diff --git a/src/Localization/es-ES.json b/src/Localization/es-ES.json
index 1c80763..f4463ef 100644
--- a/src/Localization/es-ES.json
+++ b/src/Localization/es-ES.json
@@ -1,9 +1,5 @@
 {
   "locale": "es-ES",
-  "Banner": {
-    "heading": "Café tostado de primera calidad ",
-    "text": "Descubre el fascinante mundo de Dancing Goat café de la mas alta calidad. Nunca más perderás una sola oportunidad de disfrutar un buen café."
-  },
   "LatestArticles": {
     "title": "Último artículo",
     "noTitleValue": "(El artículo no tiene título)",
@@ -26,10 +22,6 @@
     "aboutLinkText": "Leer toda la historia",
     "cafesLinkText": "Más cafés"
   },
-  "OurStory": {
-    "title": "Nuestra historia",
-    "text": "Dancing Goat originó en 1969 como una empresa de entusiastas del café. Nuestro principal objetivo siempre ha sido ofrecer una experiencia inolvidable a nuestros clientes. Conocemos a todos los agricultores personalmente y tenemos la calidad como la mayor exigencia. Con esta creencia nos hemos convertido en una marca reconocida y disfrutarda por todo el mundo."
-  },
   "TasteOurCoffee": {
     "title": "Probar nuestro café"
   },
diff --git a/src/Pages/Home.js b/src/Pages/Home.js
index c44e756..90f9826 100644
--- a/src/Pages/Home.js
+++ b/src/Pages/Home.js
@@ -13,7 +13,7 @@ import { englishCode, spanishCode } from '../Utilities/LanguageCodes';
 
 let getState = props => {
   return {
-    metaData: HomeStore.getMetaData(props.language)
+    home: HomeStore.getHome(props.language)
   };
 };
 
@@ -27,7 +27,7 @@ class Home extends Component {
 
   componentDidMount() {
     HomeStore.addChangeListener(this.onChange);
-    HomeStore.provideMetaData(this.props.language);
+    HomeStore.provideHome(this.props.language);
   }
 
   componentWillUnmount() {
@@ -37,7 +37,7 @@ class Home extends Component {
 
   static getDerivedStateFromProps(nextProps, prevState) {
     if (prevState.language !== nextProps.language) {
-      HomeStore.provideMetaData(nextProps.language);
+      HomeStore.provideHome(nextProps.language);
       return {
         language: nextProps.language
       };
@@ -50,29 +50,36 @@ class Home extends Component {
   }
 
   render() {
-    let metaData = this.state.metaData;
+    let home = this.state.home;
 
     return (
       <div className="container">
         <Metadata
-          title={metaData.metadataMetaTitle}
-          description={metaData.metadataMetaDescription}
-          ogTitle={metaData.metadataOgTitle}
-          ogImage={metaData.metadataOgImage}
-          ogDescription={metaData.metadataOgDescription}
-          twitterTitle={metaData.metadataMetaTitle}
-          twitterSite={metaData.metadataTwitterSite}
-          twitterCreator={metaData.metadataTwitterCreator}
-          twitterDescription={metaData.metadataTwitterDescription}
-          twitterImage={metaData.metadataTwitterImage}
+          title={home.metadataMetaTitle}
+          description={home.metadataMetaDescription}
+          ogTitle={home.metadataOgTitle}
+          ogImage={home.metadataOgImage}
+          ogDescription={home.metadataOgDescription}
+          twitterTitle={home.metadataMetaTitle}
+          twitterSite={home.metadataTwitterSite}
+          twitterCreator={home.metadataTwitterCreator}
+          twitterDescription={home.metadataTwitterDescription}
+          twitterImage={home.metadataTwitterImage}
         />
-        <Banner />
-        <LatestArticles language={this.props.language} />
+        {home.heroUnit &&
+          home.heroUnit.length && <Banner heroUnit={home.heroUnit[0]} />}
+        {home.articles && (
+          <LatestArticles
+            articles={home.articles}
+            language={this.props.language}
+          />
+        )}
         <LinkButton
           link={`/${this.props.language}/articles`}
           text={this.props.t('moreArticles')}
         />
-        <OurStory />
+        {home.ourStory &&
+          home.ourStory.length && <OurStory fact={home.ourStory[0]} />}
         {this.props.language &&
         this.props.language.toLowerCase() === englishCode.toLowerCase() ? (
           <LinkButton
@@ -86,7 +93,9 @@ class Home extends Component {
             text={this.props.t('aboutLinkText')}
           />
         ) : null}
-        <TasteOurCoffee language={this.props.language} />
+        {home.cafes && (
+          <TasteOurCoffee cafes={home.cafes} language={this.props.language} />
+        )}
         <LinkButton
           link={`/${this.props.language}/cafes`}
           text={this.props.t('cafesLinkText')}
diff --git a/src/Stores/Home.js b/src/Stores/Home.js
index dbc6568..0ff6c92 100644
--- a/src/Stores/Home.js
+++ b/src/Stores/Home.js
@@ -10,9 +10,9 @@ import { spinnerService } from '@chevtek/react-spinners';
 let unsubscribe = new Subject();
 let changeListeners = [];
 const resetStore = () => ({
-  metaData: initLanguageCodeObject()
+  home: initLanguageCodeObject()
 });
-let { metaData } = resetStore();
+let { home } = resetStore();
 
 let notifyChange = () => {
   changeListeners.forEach(listener => {
@@ -20,21 +20,8 @@ let notifyChange = () => {
   });
 };
 
-let fetchMetaData = language => {
-  let query = Client.items()
-    .type('home')
-    .elementsParameter([
-      'metadata__meta_title',
-      'metadata__meta_description',
-      'metadata__og_title',
-      'metadata__og_description',
-      'metadata__og_image',
-      'metadata__twitter_title',
-      'metadata__twitter_site',
-      'metadata__twitter_creator',
-      'metadata__twitter_description',
-      'metadata__twitter_image'
-    ]);
+let fetchHome = language => {
+  let query = Client.items().type('home');
 
   if (language) {
     query.languageParameter(language);
@@ -45,9 +32,9 @@ let fetchMetaData = language => {
     .pipe(takeUntil(unsubscribe))
     .subscribe(response => {
       if (language) {
-        metaData[language] = response.items[0];
+        home[language] = response.items[0];
       } else {
-        metaData[defaultLanguage] = response.items[0];
+        home[defaultLanguage] = response.items[0];
       }
       notifyChange();
     });
@@ -56,18 +43,18 @@ let fetchMetaData = language => {
 class Home {
   // Actions
 
-  provideMetaData(language, urlSlug) {
+  provideHome(language, urlSlug) {
     if (spinnerService.isShowing('apiSpinner') === false) {
       spinnerService.show('apiSpinner');
     }
-    fetchMetaData(language, urlSlug);
+    fetchHome(language, urlSlug);
   }
 
   // Methods
 
-  getMetaData(language) {
+  getHome(language) {
     spinnerService.hide('apiSpinner');
-    return metaData[language];
+    return home[language];
   }
 
   // Listeners