diff --git a/src/components/src/AppHeader/appheader.main.tsx b/src/components/src/AppHeader/appheader.main.tsx
index 142bdbd2c..1eb208c4d 100644
--- a/src/components/src/AppHeader/appheader.main.tsx
+++ b/src/components/src/AppHeader/appheader.main.tsx
@@ -39,6 +39,7 @@ import { login } from '../utils/AuthService';
 
 import './appheader.main.less';
 import { getConfig, IEpConfig } from '../utils/ConfigProvider';
+import ImageContainer from '../ImageContainer/image.container';
 
 let Config: IEpConfig | any = {};
 let intl = { get: str => str };
@@ -283,15 +284,7 @@ class AppHeaderMain extends Component<AppHeaderMainProps, AppHeaderMainState> {
           <div className="main-container-col">
             <div className="logo-container">
               <Link to={appHeaderLinks.mainPage} className="logo">
-                <img
-                  className="logo-image"
-                  alt="Header logo"
-                  src={Config.siteImagesUrl.replace('%fileName%', headerLogoFileName)}
-                  onError={(e) => {
-                    const element: any = e.target;
-                    element.src = headerLogo;
-                  }}
-                />
+                <ImageContainer className="logo-image" fileName={headerLogoFileName} imgUrl={headerLogo} />
               </Link>
             </div>
 
diff --git a/src/components/src/B2cHomePage/b2c.home.page.tsx b/src/components/src/B2cHomePage/b2c.home.page.tsx
index 7bc359761..e0f6bbbb7 100644
--- a/src/components/src/B2cHomePage/b2c.home.page.tsx
+++ b/src/components/src/B2cHomePage/b2c.home.page.tsx
@@ -25,6 +25,7 @@ import { getConfig, IEpConfig } from '../utils/ConfigProvider';
 
 import Carousel from '../Carousel/carousel.homepage';
 import IndiRecommendationsDisplayMain from '../IndiRecommendations/indirecommendations.main';
+import ImageContainer from '../ImageContainer/image.container';
 
 import './b2c.home.page.less';
 
@@ -61,7 +62,7 @@ const B2CHomePage: React.FunctionComponent = () => {
         {/* eslint-disable-next-line no-return-assign */}
         <div className="section section-3 container">
           <div className="sub-section">
-            <img className="small-image" alt="home-espot-2" src={Config.siteImagesUrl.replace('%fileName%', homeEspot2FileName)} onError={(e: any) => { e.target.src = homeEspot2; }} />
+            <ImageContainer className="small-image" fileName={homeEspot2FileName} imgUrl={homeEspot2} />
             <div className="text-block">
               <span className="line line-1">
                 {intl.get('home-sub-espot-container2-first-line')}
@@ -75,7 +76,7 @@ const B2CHomePage: React.FunctionComponent = () => {
         <div className="section-parallax section-parallax-1 container" data-region="homeMainContentRegion">
           <Parallax y={[-50, 10]} tagOuter="figure">
             <div className="parallax-image-container">
-              <img className="parallax-image" alt="home-espot-1" src={Config.siteImagesUrl.replace('%fileName%', homeEspotParallax1FileName)} onError={(e: any) => { e.target.src = homeEspotParallax1; }} />
+              <ImageContainer className="parallax-image" fileName={homeEspotParallax1FileName} imgUrl={homeEspotParallax1} />
             </div>
           </Parallax>
           <div className="sub-section">
@@ -91,7 +92,7 @@ const B2CHomePage: React.FunctionComponent = () => {
         </div>
         <div className="section section-4 container">
           <div className="sub-section">
-            <img className="small-image image-1" alt="home-espot-3" src={Config.siteImagesUrl.replace('%fileName%', homeEspot3FileName)} onError={(e: any) => { e.target.src = homeEspot3; }} />
+            <ImageContainer className="small-image image-1" fileName={homeEspot3FileName} imgUrl={homeEspot3} />
             <div className="text-block">
               <span className="line line-1">
                 {intl.get('home-sub-espot-container3-first-line')}
@@ -100,12 +101,12 @@ const B2CHomePage: React.FunctionComponent = () => {
                 {intl.get('home-sub-espot-container3-second-line')}
               </span>
             </div>
-            <img className="small-image image-2" alt="home-espot-3" src={Config.siteImagesUrl.replace('%fileName%', homeEspot3FileName)} onError={(e: any) => { e.target.src = homeEspot3; }} />
+            <ImageContainer className="small-image image-2" fileName={homeEspot3FileName} imgUrl={homeEspot3} />
           </div>
         </div>
         <div className="section section-5 container">
           <div className="sub-section">
-            <img className="small-image" alt="home-espot-4" src={Config.siteImagesUrl.replace('%fileName%', homeEspot4FileName)} onError={(e: any) => { e.target.src = homeEspot4; }} />
+            <ImageContainer className="small-image" fileName={homeEspot4FileName} imgUrl={homeEspot4} />
             <div className="text-block">
               <span className="line line-1">
                 {intl.get('home-sub-espot-container4-first-line')}
@@ -119,7 +120,7 @@ const B2CHomePage: React.FunctionComponent = () => {
         <div className="section-parallax section-parallax-2 container" data-region="homeMainContentRegion">
           <Parallax y={[10, -30]} tagOuter="figure">
             <div className="parallax-image-container">
-              <img className="parallax-image" alt="home-espot-1" src={Config.siteImagesUrl.replace('%fileName%', homeEspotParallax2FileName)} onError={(e: any) => { e.target.src = homeEspotParallax2; }} />
+              <ImageContainer className="parallax-image" fileName={homeEspotParallax2FileName} imgUrl={homeEspotParallax2} />
             </div>
           </Parallax>
           <div className="sub-section">
diff --git a/src/components/src/Carousel/carousel.homepage.tsx b/src/components/src/Carousel/carousel.homepage.tsx
index 7ee78b8ac..e8e91eecb 100644
--- a/src/components/src/Carousel/carousel.homepage.tsx
+++ b/src/components/src/Carousel/carousel.homepage.tsx
@@ -22,6 +22,7 @@
 import React from 'react';
 import Slider from 'react-slick';
 import { getConfig, IEpConfig } from '../utils/ConfigProvider';
+import ImageContainer from '../ImageContainer/image.container';
 
 import carouselBaner1 from '../../../images/carousel-images/baner_1.jpg';
 import carouselBaner2 from '../../../images/carousel-images/baner_2.jpg';
@@ -51,7 +52,7 @@ const Carousel: React.FunctionComponent = () => {
     customPaging(i) {
       return (
         <div className="">
-          <img alt="img" src={Config.siteImagesUrl.replace('%fileName%', carouselBanerNameArray[i])} onError={(e) => { const element: any = e.target; element.src = carouselBanerArray[i]; }} />
+          <ImageContainer fileName={carouselBanerNameArray[i]} imgUrl={carouselBanerArray[i]} />
         </div>
       );
     },
@@ -78,44 +79,16 @@ const Carousel: React.FunctionComponent = () => {
       </div>
       <Slider {...settings}>
         <div>
-          <img
-            alt="img"
-            src={Config.siteImagesUrl.replace('%fileName%', carouselBaner1FileName)}
-            onError={(e) => {
-              const element: any = e.target;
-              element.src = carouselBaner1;
-            }}
-          />
+          <ImageContainer fileName={carouselBaner1FileName} imgUrl={carouselBaner1} />
         </div>
         <div>
-          <img
-            alt="img"
-            src={Config.siteImagesUrl.replace('%fileName%', carouselBaner2FileName)}
-            onError={(e) => {
-              const element: any = e.target;
-              element.src = carouselBaner2;
-            }}
-          />
+          <ImageContainer fileName={carouselBaner2FileName} imgUrl={carouselBaner2} />
         </div>
         <div>
-          <img
-            alt="img"
-            src={Config.siteImagesUrl.replace('%fileName%', carouselBaner3FileName)}
-            onError={(e) => {
-              const element: any = e.target;
-              element.src = carouselBaner3;
-            }}
-          />
+          <ImageContainer fileName={carouselBaner3FileName} imgUrl={carouselBaner3} />
         </div>
         <div>
-          <img
-            alt="img"
-            src={Config.siteImagesUrl.replace('%fileName%', carouselBaner4FileName)}
-            onError={(e) => {
-              const element: any = e.target;
-              element.src = carouselBaner4;
-            }}
-          />
+          <ImageContainer fileName={carouselBaner4FileName} imgUrl={carouselBaner4} />
         </div>
       </Slider>
     </div>
diff --git a/src/components/src/CartLineItem/cart.lineitem.tsx b/src/components/src/CartLineItem/cart.lineitem.tsx
index ffe30de36..a4455bd3a 100644
--- a/src/components/src/CartLineItem/cart.lineitem.tsx
+++ b/src/components/src/CartLineItem/cart.lineitem.tsx
@@ -29,9 +29,9 @@ import AppModalBundleConfigurationMain from '../AppModalBundleConfiguration/appm
 import DropdownCartSelection from '../DropdownCartSelection/dropdown.cart.selection.main';
 import './cart.lineitem.less';
 
-import imgPlaceholder from '../../../images/img_missing_horizontal@2x.png';
 import { ReactComponent as UpdateQuantityIcon } from '../../../images/icons/ic_update.svg';
 import { ReactComponent as RecycleBinIcon } from '../../../images/icons/ic_trash.svg';
+import ImageContainer from '../ImageContainer/image.container';
 
 let Config: IEpConfig | any = {};
 let intl = { get: str => str };
@@ -510,7 +510,7 @@ class CartLineItem extends Component<CartLineItemProps, CartLineItemState> {
             : ('')
           }
           <Link to={`${itemDetailLink}/${encodeURIComponent(itemCodeString)}`}>
-            <img src={Config.skuImagesUrl.replace('%sku%', itemCodeString)} onError={(e) => { const element: any = e.target; element.src = imgPlaceholder; }} alt="Not Available" className="cart-lineitem-thumbnail" />
+            <ImageContainer className="cart-lineitem-thumbnail" isSkuImage fileName={itemCodeString} imgUrl={Config.skuImagesUrl.replace('%sku%', itemCodeString)} />
           </Link>
         </div>
         <div className="title-options-col">
diff --git a/src/components/src/ImageContainer/README.md b/src/components/src/ImageContainer/README.md
new file mode 100644
index 000000000..6f68f5764
--- /dev/null
+++ b/src/components/src/ImageContainer/README.md
@@ -0,0 +1,23 @@
+# ImageContainer
+
+#### Description
+
+Initially trying to fetch primary file type received from the prop if not found try PNG, if not found try JPG, if not found try SVG etc.
+
+The configuration of these file types may be managed within `ep.config.json`. If no file types are provided in the configuration, the image will be used as is provided in the URL.
+
+#### Usage
+
+```js
+import ImageContainer from '../ImageContainer/image.container';
+```
+
+#### Example
+
+```js
+<ImageContainer className="parallax-image" fileName={homeEspotParallax1FileName} imgUrl={homeEspotParallax1} />
+```
+
+#### Properties
+
+<!-- PROPS -->
diff --git a/src/components/src/ImageContainer/image.container.stories.tsx b/src/components/src/ImageContainer/image.container.stories.tsx
new file mode 100644
index 000000000..223f85f26
--- /dev/null
+++ b/src/components/src/ImageContainer/image.container.stories.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright © 2019 Elastic Path Software Inc. All rights reserved.
+ *
+ * This is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This software is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this license. If not, see
+ *
+ *     https://www.gnu.org/licenses/
+ *
+ *
+ */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Readme from './README.md';
+import ImageContainer from './image.container';
+import homeEspotParallax1 from '../../../images/site-images/parallax-banner-1.jpg';
+
+storiesOf('Components|ImageContainer', module)
+  .addParameters({
+    readme: {
+      // Show readme at the addons panel
+      sidebar: Readme,
+    },
+  })
+  .add('ImageContainer', () => {
+    const homeEspotParallax1FileName = 'parallax-banner-1.jpg';
+
+    return (<ImageContainer className="parallax-image" fileName={homeEspotParallax1FileName} imgUrl={homeEspotParallax1} />);
+  });
diff --git a/src/components/src/ImageContainer/image.container.tsx b/src/components/src/ImageContainer/image.container.tsx
new file mode 100644
index 000000000..18fd626af
--- /dev/null
+++ b/src/components/src/ImageContainer/image.container.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright © 2019 Elastic Path Software Inc. All rights reserved.
+ *
+ * This is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This software is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this license. If not, see
+ *
+ *     https://www.gnu.org/licenses/
+ *
+ *
+ */
+
+import React from 'react';
+import { getConfig, IEpConfig } from '../utils/ConfigProvider';
+import imgPlaceholder from '../../../images/img_missing_horizontal@2x.png';
+
+let Config: IEpConfig | any = {};
+
+interface ImageContainerProps {
+  /** name of file */
+  fileName: string;
+  /** image URL */
+  imgUrl: string;
+  /** class name */
+  className?: string;
+  /** is a sku image */
+  isSkuImage?: boolean;
+  /** loading data */
+  onLoadData?: (...args: any[]) => any;
+}
+
+function ImageContainer(props: ImageContainerProps) {
+  const epConfig = getConfig();
+  Config = epConfig.config;
+  const {
+    fileName, imgUrl, className, isSkuImage, onLoadData,
+  } = props;
+
+  const imageSource = isSkuImage ? Config.skuImagesUrl.replace('%sku%', fileName) : Config.siteImagesUrl.replace('%fileName%', fileName);
+
+  const handleError = (e, defaultImgUrl) => {
+    const { src } = e.target;
+    if (Config.imageFileTypes && Config.imageFileTypes.enable && e.target['data-source'] !== 'default') {
+      const fallbackTypes = Config.imageFileTypes.types;
+      const initType = imgUrl.replace(/.*(?=\.)/g, '');
+      const types = (fallbackTypes && fallbackTypes.length > 0) ? [
+        initType,
+        ...fallbackTypes.filter(fileType => fileType !== initType),
+      ] : [];
+      const currentType = src.replace(/.*(?=\.)/g, '');
+      const i = types.indexOf(currentType);
+      if (types[i + 1]) {
+        e.target.src = src.replace(currentType, types[i + 1]);
+      } else {
+        e.target.src = isSkuImage ? imgPlaceholder : defaultImgUrl;
+        e.target['data-source'] = 'default';
+      }
+    } else if (e.target['data-source'] !== 'default') {
+      e.target.src = isSkuImage ? imgPlaceholder : defaultImgUrl;
+      e.target['data-source'] = 'default';
+    }
+  };
+
+  return (
+    <img
+      className={className}
+      alt="img"
+      src={imageSource}
+      onError={e => handleError(e, imgUrl)}
+      onLoad={onLoadData}
+    />
+  );
+}
+
+ImageContainer.defaultProps = {
+  className: '',
+  isSkuImage: false,
+  onLoadData: () => {},
+};
+
+export default ImageContainer;
diff --git a/src/components/src/OrderTableLineItem/ordertable.lineitem.tsx b/src/components/src/OrderTableLineItem/ordertable.lineitem.tsx
index 723f0f41c..9161f39b9 100644
--- a/src/components/src/OrderTableLineItem/ordertable.lineitem.tsx
+++ b/src/components/src/OrderTableLineItem/ordertable.lineitem.tsx
@@ -22,8 +22,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { getConfig, IEpConfig } from '../utils/ConfigProvider';
-import imgPlaceholder from '../../../images/img_missing_horizontal@2x.png';
 import './ordertable.lineitem.less';
+import ImageContainer from '../ImageContainer/image.container';
 
 let Config: IEpConfig | any = {};
 
@@ -106,15 +106,7 @@ function OrderTableLineItem(props: OrderTableLineItemProps) {
   return (
     <tr className="order-lineitem-row">
       <td className="thumbnail-col">
-        <img
-          className="thumbnail"
-          src={Config.skuImagesUrl.replace('%sku%', code)}
-          alt="Not Available"
-          onError={(e) => {
-            const element:any = e.target;
-            element.src = imgPlaceholder;
-          }}
-        />
+        <ImageContainer className="thumbnail" isSkuImage fileName={code} imgUrl={Config.skuImagesUrl.replace('%sku%', code)} />
       </td>
       <td className="title-col">
         <Link to={`${itemDetailLink}/${encodeURIComponent(code)}`}>
diff --git a/src/components/src/ProductDisplayItem/productdisplayitem.main.tsx b/src/components/src/ProductDisplayItem/productdisplayitem.main.tsx
index aa0e29b73..29e5d7827 100644
--- a/src/components/src/ProductDisplayItem/productdisplayitem.main.tsx
+++ b/src/components/src/ProductDisplayItem/productdisplayitem.main.tsx
@@ -24,7 +24,6 @@ import Slider from 'react-slick';
 import { InlineShareButtons } from 'sharethis-reactjs';
 import { login } from '../utils/AuthService';
 import { itemLookup, cortexFetchItemLookupForm } from '../utils/CortexLookup';
-import imgMissingHorizontal from '../../../images/img_missing_horizontal@2x.png';
 import ProductRecommendationsDisplayMain from '../ProductRecommendations/productrecommendations.main';
 import IndiRecommendationsDisplayMain from '../IndiRecommendations/indirecommendations.main';
 import BundleConstituentsDisplayMain from '../BundleConstituents/bundleconstituents.main';
@@ -36,6 +35,7 @@ import { useRequisitionListCountDispatch } from '../requisition-list-count-conte
 
 import './productdisplayitem.main.less';
 import PowerReview from '../PowerReview/powerreview.main';
+import ImageContainer from '../ImageContainer/image.container';
 
 // Array of zoom parameters to pass to Cortex
 const zoomArray = [
@@ -580,15 +580,7 @@ class ProductDisplayItemMain extends Component<ProductDisplayItemMainProps, Prod
     if (arFileExists) {
       return (
         <a href={Config.arKit.skuArImagesUrl.replace('%sku%', productData._code[0].code)} rel="ar">
-          <img
-            src={Config.skuImagesUrl.replace('%sku%', productData._code[0].code)}
-            onError={(e) => {
-              const element: any = e.target;
-              element.src = imgMissingHorizontal;
-            }}
-            alt={intl.get('none-available')}
-            className="itemdetail-main-img"
-          />
+          <ImageContainer className="itemdetail-main-img" isSkuImage fileName={productData._code[0].code} imgUrl={Config.skuImagesUrl.replace('%sku%', productData._code[0].code)} />
         </a>
       );
     }
@@ -596,7 +588,7 @@ class ProductDisplayItemMain extends Component<ProductDisplayItemMainProps, Prod
       <div className="product-image-carousel">
         <Slider {...settings}>
           <div>
-            <img src={Config.skuImagesUrl.replace('%sku%', productData._code[0].code)} onError={(e) => { const element: any = e.target; element.src = imgMissingHorizontal; }} alt={intl.get('none-available')} className="itemdetail-main-img" />
+            <ImageContainer className="itemdetail-main-img" isSkuImage fileName={productData._code[0].code} imgUrl={Config.skuImagesUrl.replace('%sku%', productData._code[0].code)} />
           </div>
         </Slider>
       </div>
diff --git a/src/components/src/ProductListItem/productlistitem.main.tsx b/src/components/src/ProductListItem/productlistitem.main.tsx
index 6950132d7..b0b0ddb12 100644
--- a/src/components/src/ProductListItem/productlistitem.main.tsx
+++ b/src/components/src/ProductListItem/productlistitem.main.tsx
@@ -24,9 +24,9 @@ import { Link } from 'react-router-dom';
 import { getConfig, IEpConfig } from '../utils/ConfigProvider';
 import { login } from '../utils/AuthService';
 import { itemLookup, cortexFetchItemLookupForm } from '../utils/CortexLookup';
-import imgPlaceholder from '../../../images/img_missing_horizontal@2x.png';
 
 import './productlistitem.main.less';
+import ImageContainer from '../ImageContainer/image.container';
 
 let Config: IEpConfig | any = {};
 let intl = { get: str => str };
@@ -70,6 +70,7 @@ class ProductListItemMain extends Component<ProductListItemMainProps, ProductLis
       productData: undefined,
       imageStatus: 'loading',
     };
+    this.handleImageLoaded = this.handleImageLoaded.bind(this);
   }
 
   componentDidMount() {
@@ -148,7 +149,7 @@ class ProductListItemMain extends Component<ProductListItemMainProps, ProductLis
         <div className="category-item-inner">
           <div className={`category-item-thumbnail-container ${imageStatus === 'loaded' ? 'loaded' : ''}`}>
             <Link to={`${itemDetailLink}/${encodeURIComponent(productData._code[0].code)}`}>
-              <img src={Config.skuImagesUrl.replace('%sku%', productData._code[0].code)} onError={(e: any) => { e.target.src = imgPlaceholder; }} alt="default" className="category-item-thumbnail img-responsive" onLoad={this.handleImageLoaded.bind(this)} title="" />
+              <ImageContainer className="category-item-thumbnail img-responsive" isSkuImage fileName={productData._code[0].code} imgUrl={Config.skuImagesUrl.replace('%sku%', productData._code[0].code)} onLoadData={() => { this.handleImageLoaded(); }} />
             </Link>
           </div>
           <div className="category-item-title-container">
diff --git a/src/components/src/QuickOrderForm/quickorderform.tsx b/src/components/src/QuickOrderForm/quickorderform.tsx
index 998162f41..d4e96ae57 100644
--- a/src/components/src/QuickOrderForm/quickorderform.tsx
+++ b/src/components/src/QuickOrderForm/quickorderform.tsx
@@ -23,10 +23,10 @@
 import React, { Component } from 'react';
 
 import './quickorderform.less';
-import imgPlaceholder from '../../../images/img_missing_horizontal@2x.png';
 import { login } from '../utils/AuthService';
 import { cortexFetchItemLookupForm, itemLookup } from '../utils/CortexLookup';
 import { getConfig, IEpConfig } from '../utils/ConfigProvider';
+import ImageContainer from '../ImageContainer/image.container';
 
 let Config: IEpConfig | any = {};
 let intl = { get: (str, ...args: any[]) => str };
@@ -292,15 +292,7 @@ class QuickOrderForm extends Component<QuickOrderFormProps, QuickOrderFormState>
         {(code && product._definition) ? (
           <div className="show-product">
             <div className="product-image">
-              <img
-                src={Config.skuImagesUrl.replace('%sku%', product._code[0].code)}
-                onError={(e) => {
-                  const element: any = e.target;
-                  element.src = imgPlaceholder;
-                }}
-                alt="Not Available"
-                className="cart-lineitem-thumbnail"
-              />
+              <ImageContainer className="cart-lineitem-thumbnail" isSkuImage fileName={product._code[0].code} imgUrl={Config.skuImagesUrl.replace('%sku%', product._code[0].code)} />
             </div>
             <div className="title-col" data-el-value="lineItem.displayName">
               <p>
diff --git a/src/components/src/index.ts b/src/components/src/index.ts
index 2e2063a68..8c212e6ca 100644
--- a/src/components/src/index.ts
+++ b/src/components/src/index.ts
@@ -94,6 +94,7 @@ import { CountProvider } from './cart-count-context';
 import { RequisitionListCountProvider } from './requisition-list-count-context';
 import B2BHomePage from './B2bHomePage/b2b.home.page';
 import B2CHomePage from './B2cHomePage/b2c.home.page';
+import ImageContainer from './ImageContainer/image.container';
 import DropdownCartSelection from './DropdownCartSelection/dropdown.cart.selection.main';
 
 export {
@@ -172,5 +173,6 @@ export {
   RequisitionListCountProvider,
   B2BHomePage,
   B2CHomePage,
+  ImageContainer,
   DropdownCartSelection,
 };
diff --git a/src/containers/CheckoutPage.tsx b/src/containers/CheckoutPage.tsx
index 0d2d26bab..fe1b3e216 100644
--- a/src/containers/CheckoutPage.tsx
+++ b/src/containers/CheckoutPage.tsx
@@ -511,7 +511,7 @@ class CheckoutPage extends React.Component<CheckoutPageProps, CheckoutPageState>
         <div data-region="billingAddressSelectorsRegion" className="checkout-region-inner-container">
           {this.renderBillingAddress()}
         </div>
-        <button className="ep-btn primary wide checkout-new-address-btn" disabled={isDisabled} type="button" onClick={() => { this.newAddress(); }}>
+        <button className="ep-btn primary wide checkout-new-address-btn" data-region="billingAddressButtonRegion" disabled={isDisabled} type="button" onClick={() => { this.newAddress(); }}>
           {intl.get('add-new-address')}
         </button>
       </div>
diff --git a/src/containers/MaintenancePage.tsx b/src/containers/MaintenancePage.tsx
index e09202f00..7e2e2f994 100644
--- a/src/containers/MaintenancePage.tsx
+++ b/src/containers/MaintenancePage.tsx
@@ -23,9 +23,9 @@ import React from 'react';
 import intl from 'react-intl-universal';
 import { Link } from 'react-router-dom';
 import './MaintenancePage.less';
-import Config from '../ep.config.json';
 
 import doge from '../images/site-images/maintenance-banner.png';
+import ImageContainer from '../components/src/ImageContainer/image.container';
 
 const dogeFileName = 'maintenance-banner.png';
 
@@ -56,7 +56,7 @@ function MaintenancePage() {
                 </div>
                 <div className="static-container dog-container" style={{ display: 'block' }}>
                   <div className="container" style={{ display: 'block' }}>
-                    <img alt="dog-espot-1" className="dog-espot-1" src={Config.siteImagesUrl.replace('%fileName%', dogeFileName)} onError={(e: any) => { e.target.src = doge; }} />
+                    <ImageContainer fileName={dogeFileName} imgUrl={doge} />
                   </div>
                   <h2 className="static-dog-name">
                     {intl.get('name-moki')}
diff --git a/src/ep.config.json b/src/ep.config.json
index cee48ee69..567f46935 100644
--- a/src/ep.config.json
+++ b/src/ep.config.json
@@ -30,6 +30,10 @@
   "skuImagesUrl": "https://elasticpath-demo-images.s3-us-west-2.amazonaws.com/VESTRI_VIRTUAL_V1/%sku%.png",
   "siteImagesUrl": "https://elasticpath-demo-images.s3-us-west-2.amazonaws.com/VESTRI_VIRTUAL_V1/%fileName%",
   "enableOfflineMode": false,
+  "imageFileTypes": {
+    "enable": true,
+    "types": [".png" ,".jpg", ".svg"]
+  },
   "b2b": {
     "enable": false,
     "authServiceAPI": {
diff --git a/src/tests/e2e/common.js b/src/tests/e2e/common.js
index 37d039bcf..448b3de25 100644
--- a/src/tests/e2e/common.js
+++ b/src/tests/e2e/common.js
@@ -157,6 +157,7 @@ module.exports = {
     await page.type(EXPIRY_MONTH, paymentMethod.expiryMonth);
     await page.type(EXPIRY_YEAR, paymentMethod.expiryYear);
     await page.type(SECURITY_CODE, paymentMethod.securityCode);
+    await page.waitFor(3000);
     await page.click(CONTINUE_BUTTON);
   },
 
diff --git a/src/tests/e2e/purchase.test.js b/src/tests/e2e/purchase.test.js
index dcc58fc8f..800480a12 100644
--- a/src/tests/e2e/purchase.test.js
+++ b/src/tests/e2e/purchase.test.js
@@ -54,11 +54,11 @@ async function getChartItems(page) {
   return chartItems;
 }
 
-const CART_LINK_CSS = '.cart-link';
+const CART_LINK_CSS = '.cart-link-container .cart-link';
 const HOME_PAGE_CSS = 'div.home-page-component';
 const REGISTER_BUTTON_CSS = "div[data-region='checkoutAutRegisterOptionRegion'] button.checkout-auth-option-register-btn";
 const CHECKOUT_BUTTON_CSS = "button[class='ep-btn primary btn-cmd-checkout']";
-const ADD_NEW_ADDRESS_CSS = 'button[class="ep-btn primary wide checkout-new-address-btn"]';
+const ADD_NEW_ADDRESS_CSS = 'button[data-region="billingAddressButtonRegion"]';
 const ADD_NEW_PAYMENT_CSS = 'button[class="ep-btn primary wide new-payment-btn"]';
 const ANONYMOUS_EMAIL_INPUT_CSS = 'div[data-region="anonymousCheckoutFeedbackRegion"] ~div input[id="Email"]';
 const CHECKOUT_AUTH_BUTTON_CSS = 'button[class="ep-btn primary wide checkout-auth-option-anonymous-checkout-btn"]';
@@ -113,6 +113,7 @@ describe('Purchase feature', () => {
     await page.waitFor(2000);
 
     await page.waitForSelector(CART_LINK_CSS);
+    await page.waitFor(2000);
     await page.click(CART_LINK_CSS);
 
     await page.waitForSelector(CHECKOUT_BUTTON_CSS);
@@ -434,7 +435,7 @@ describe('Purchase feature', () => {
     };
 
     await loginUser(page, userInfo);
-  
+
     await addProductToCart(page, 'Mens', '', 'Wordmark Fitted Hat');
     await addProductToCart(page, 'Mens', '', 'Men\'s Soft Shell Jacket');