diff --git a/package.json b/package.json
index 1c4058e09..bfd1ef9de 100644
--- a/package.json
+++ b/package.json
@@ -118,9 +118,9 @@
     "qs": "^5.2.0",
     "raf": "^3.2.0",
     "rc-slider": "^3.7.2",
-    "react": "^15.1.0",
+    "react": "^15.2.0",
     "react-addons-css-transition-group": "^15.2.0",
-    "react-addons-test-utils": "^0.14.0",
+    "react-addons-test-utils": "^15.2.0",
     "react-burger-menu": "^1.4.4",
     "react-dom": "^15.1.0",
     "react-flex-carousel": "^0.1.7",
@@ -162,7 +162,7 @@
     "chai": "^3.3.0",
     "chai-as-promised": "^5.1.0",
     "compression": "^1.6.0",
-    "eslint": "1.8.0",
+    "eslint": "1.10.3",
     "eslint-config-rackt": "^1.1.1",
     "eslint-loader": "^1.0.0",
     "eslint-plugin-babel": "^3.0.0",
diff --git a/src/components/article/Audio.js b/src/components/article/Audio.js
index 98e84d733..477647fc3 100644
--- a/src/components/article/Audio.js
+++ b/src/components/article/Audio.js
@@ -191,12 +191,12 @@ class Audio extends React.Component {
   }
 
   render() {
-    const { content } = this.props
+    const { content, device } = this.props
     const {  duration, isFocused, isOncePlayed, isPlaying, seek } = this.state
     const { url, coverPhoto, title, description } = _.get(content, 0, {})
 
     return (
-      <div className={classNames(styles['audio-container'], 'row')}>
+      <div className={classNames(styles['audio-container'], { [styles['mobile']]: device === 'mobile' ? true : false })}>
         <div className={styles['audio-coverphoto']} onClick={this.handleMouseClick} onMouseEnter={this.handleOnMouseOver} onMouseLeave={this.handleOnMouseOut}>
           <div className={styles['audio-img-filter']} style={ isOncePlayed ? {
             opacity: 1
@@ -235,12 +235,14 @@ class Audio extends React.Component {
 
 Audio.propTypes = {
   content: React.PropTypes.array.isRequired,
-  customStyles: React.PropTypes.array
+  customStyles: React.PropTypes.array,
+  device: React.PropTypes.string
 }
 
 Audio.defaultProps = {
   content: [],
-  customStyles: []
+  customStyles: [],
+  device: ''
 }
 
 export { Audio }
diff --git a/src/components/article/Audio.scss b/src/components/article/Audio.scss
index 620e86b3f..a44f46064 100644
--- a/src/components/article/Audio.scss
+++ b/src/components/article/Audio.scss
@@ -8,6 +8,10 @@
 
   background-color: $white;
 
+  &.mobile {
+    width: 100%;
+  }
+
   .audio-coverphoto {
     position: relative;
     width: 100%;
@@ -84,6 +88,8 @@
       font-size: rem(15px);
       line-height: 1.5;
       color: $gray-50;
+      // reset margin 
+      margin: 0;
     }
   }
 }
diff --git a/src/components/article/BlockAlignmentWrapper.js b/src/components/article/BlockAlignmentWrapper.js
index 6103c9aef..611d8ab25 100644
--- a/src/components/article/BlockAlignmentWrapper.js
+++ b/src/components/article/BlockAlignmentWrapper.js
@@ -1,4 +1,5 @@
 'use strict'
+import classNames from 'classnames'
 import styles from './BlockAlignmentWrapper.scss'
 import React, { Component } from 'react'
 
@@ -14,10 +15,10 @@ export default function WrapComponent(WrappedComponent) {
     }
 
     render() {
-      const { alignment } = this.props
+      const { alignment, device } = this.props
 
       return (
-        <div className={styles[`align-${alignment}`]}>
+        <div className={classNames(styles[`align-${alignment}`], { [styles['mobile']]: device === 'mobile' ? true : false })}>
           <WrappedComponent
             content={this.props.content}
             customeStyles={this.props.customeStyles}
diff --git a/src/components/article/BlockAlignmentWrapper.scss b/src/components/article/BlockAlignmentWrapper.scss
index 851a9ca4e..de718147c 100644
--- a/src/components/article/BlockAlignmentWrapper.scss
+++ b/src/components/article/BlockAlignmentWrapper.scss
@@ -6,10 +6,15 @@
   margin-bottom: $twreporter-line-height;
 }
 
+.mobile {
+  width: 100%;
+  float: none;
+}
+
 .align-extend {
   @extend .align-wrapper;
   /* TBD needs to wait for mockup */
-  max-width: 1vw;
+  max-width: 100vw;
 }
 
 .align-left {
diff --git a/src/components/article/Image.js b/src/components/article/Image.js
index 00778eabb..bbe5c41a7 100644
--- a/src/components/article/Image.js
+++ b/src/components/article/Image.js
@@ -1,3 +1,4 @@
+/*eslint no-unused-vars: [2, { "args": "none" }]*/
 'use strict'
 import _ from 'lodash'
 import classNames from 'classnames'
@@ -5,6 +6,7 @@ import FitwidthMixin from './mixins/FitwidthMixin'
 import { getScreenType } from '../../lib/screen-type'
 import BlockAlignmentWrapper from './BlockAlignmentWrapper'
 import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
 import LazyLoad from 'react-lazy-load'
 import styles from './Image.scss'
 import UI_SETTING from '../../constants/ui-settings'
@@ -36,6 +38,12 @@ class Image extends FitwidthMixin(Component) {
     if (super.componentDidMount) super.componentDidMount()
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (ReactDOM.findDOMNode(this)) {
+      this.fitToParentWidth()
+    }
+  }
+
   _renderPlaceHoderImage(imageUrl, imgStyle) {
     if (imageUrl) {
       return (
diff --git a/src/components/article/ImageDiff.js b/src/components/article/ImageDiff.js
index 5d6d3dc93..4fa3a9cc8 100644
--- a/src/components/article/ImageDiff.js
+++ b/src/components/article/ImageDiff.js
@@ -37,6 +37,12 @@ class ImageDiff extends FitwidthMixin(Component) {
     if (super.componentDidMount) super.componentDidMount()
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (ReactDOM.findDOMNode(this)) {
+      this.fitToParentWidth()
+    }
+  }
+
   _renderFigure(imageObj, imgStyle) {
     if (_.get(imageObj, 'url')) {
       return (
diff --git a/src/components/article/InfoBox.js b/src/components/article/InfoBox.js
index 011496852..920184be1 100644
--- a/src/components/article/InfoBox.js
+++ b/src/components/article/InfoBox.js
@@ -6,14 +6,17 @@ import styles from './InfoBox.scss'
 import BlockAlignmentWrapper from './BlockAlignmentWrapper'
 import React from 'react' // eslint-disable-next-line
 
-export const InfoBox = ({ content }) => {
+export const InfoBox = ({ content, device }) => {
   let infoBox = _.get(content, [ 0 ], {})
 
   return (
     <div className="row">
-      <div className={classNames('inner-max', 'center-block', styles.infoBoxContainer)}>
+      <div className={classNames('inner-max', 'center-block',
+        styles['infobox-container'],
+        { [styles['mobile']]: device === 'mobile' ? true : false }
+      )}>
         <img src={boxSvg} />
-        <div className={styles.infoBoxText}>
+        <div className={styles['infobox-text']}>
           <h4>
             {infoBox.title}
           </h4>
diff --git a/src/components/article/InfoBox.scss b/src/components/article/InfoBox.scss
index fcba1eb0f..c364de883 100644
--- a/src/components/article/InfoBox.scss
+++ b/src/components/article/InfoBox.scss
@@ -3,7 +3,20 @@
 @import '../../themes/font-mixins.scss';
 @import '../../themes/media-queries.scss';
 
-.infoBoxContainer {
+@include mq($max-width: $screen-xs-max) {
+  .infobox-text {
+    h4 {
+      font-size: rem(20);
+      line-height: 1.2;
+    }
+    >div {
+      font-size: rem(15);
+      line-height: 1.8;
+    }
+  }
+}
+
+.infobox-container {
   $logo-width: rem(23);
   $logo-height: rem(24);
   background-color: $white;
@@ -19,7 +32,7 @@
       margin-top: -($logo-height / 2);
   }
 
-  .infoBoxText {
+  .infobox-text {
     padding: rem(36) rem(24) 0 rem(24);
     h4 {
       color: $gray-15;
@@ -38,18 +51,11 @@
       width: 100%;
     }
   }
-}
 
-@include mq($max-width: $screen-xs-max) {
-  .infoBoxText {
-    h4 {
-      font-size: rem(20);
-      line-height: 1.2;
-    }
-
-    >div {
-      font-size: rem(15);
-      line-height: 1.8;
+  &.mobile {
+    .infobox-text {
+      @extend .infobox-text;
     }
   }
 }
+
diff --git a/src/components/article/slideshow/navigation.js b/src/components/article/slideshow/navigation.js
index f2e4902ef..38ec1ffc1 100644
--- a/src/components/article/slideshow/navigation.js
+++ b/src/components/article/slideshow/navigation.js
@@ -1,4 +1,7 @@
 'use strict'
+import classNames from 'classnames'
+import disabledLeftNav from '../../../../static/asset/disabled-left-arrow.svg'
+import disabledRightNav from '../../../../static/asset/disabled-right-arrow.svg'
 import leftNav from '../../../../static/asset/left-arrow.svg'
 import rightNav from '../../../../static/asset/right-arrow.svg'
 import styles from './navigation.scss'
@@ -6,22 +9,22 @@ import React from 'react'
 
 const navigation = (props) => {
 
-  const { onSlideLeft, onSlideRight } = props
+  const { onSlideLeft, onSlideRight, isLeftNavDisabled, isRightNavDisabled } = props
 
   return (
     <span key="navigation">
       <img
-        className={styles['ss-left-nav']}
+        className={classNames(styles['ss-left-nav'], { [styles['disabled']]: isLeftNavDisabled })}
         onTouchStart={onSlideLeft}
         onClick={onSlideLeft}
-        src={leftNav}
+        src={ isLeftNavDisabled ? disabledLeftNav : leftNav }
       />
 
       <img
-        className={styles['ss-right-nav']}
+        className={classNames(styles['ss-right-nav'], { [styles['disabled']]: isRightNavDisabled })}
         onTouchStart={onSlideRight}
         onClick={onSlideRight}
-        src={rightNav}
+        src={ isRightNavDisabled ? disabledRightNav : rightNav }
       />
     </span>
   )
diff --git a/src/components/article/slideshow/navigation.scss b/src/components/article/slideshow/navigation.scss
index 9d29406eb..84d0c9145 100644
--- a/src/components/article/slideshow/navigation.scss
+++ b/src/components/article/slideshow/navigation.scss
@@ -15,6 +15,10 @@
   left: 0;
   top: 0;
   bottom: 0;
+
+  &.disabled {
+    cursor: auto;
+  }
 }
 
 .ss-right-nav {
@@ -22,4 +26,8 @@
   right: 0;
   top: 0;
   bottom: 0;
+
+  &.disabled {
+    cursor: auto;
+  }
 }
diff --git a/src/components/article/slideshow/slideshow.js b/src/components/article/slideshow/slideshow.js
index c38c9978a..1585db41e 100644
--- a/src/components/article/slideshow/slideshow.js
+++ b/src/components/article/slideshow/slideshow.js
@@ -11,7 +11,7 @@ import Thumbnails from './thumbnails'
 import React, { Component } from 'react' // eslint-disable-line
 import UI_SETTING from '../../../constants/ui-settings'
 
-export class Slideshow extends Component {
+class Slideshow extends Component {
   constructor(props, context) {
     super(props, context)
     this.state = {
@@ -109,9 +109,8 @@ export class Slideshow extends Component {
 
 
   render() {
-    const { content } = this.props
+    const { content, device } = this.props
     const { currentIndex } = this.state
-    // let items = this._prepareItemsForImageGallery(content)
     let { slides, thumbnails } = this._parseContent(content)
 
     let description = _.get(content, [ currentIndex, 'description' ], '')
@@ -122,7 +121,7 @@ export class Slideshow extends Component {
 
     return (
       <div
-        className={classNames(styles['ss-container'], 'row')}
+        className={classNames(styles['ss-container'], { [styles['mobile']]: device === 'mobile' ? true : false })}
         ref={i => this._slideshow = i}
       >
         <LazyLoad offsetTop={UI_SETTING.image.loadingOffset.placeholder}>
@@ -144,6 +143,8 @@ export class Slideshow extends Component {
               <Navigation
                 onSlideLeft={this.slideLeft}
                 onSlideRight={this.slideRight}
+                isLeftNavDisabled={currentIndex === 0 ? true : false}
+                isRightNavDisabled={currentIndex === _.get(content, 'length', 0) - 1 ? true : false}
               />
               <div className={styles['ss-thumbnails']} style={{
                 width: thumbnailsWidth
@@ -167,3 +168,16 @@ export class Slideshow extends Component {
   }
 }
 
+Slideshow.propTypes = {
+  content: React.PropTypes.array.isRequired,
+  customStyles: React.PropTypes.array,
+  device: React.PropTypes.string
+}
+
+Slideshow.defaultProps = {
+  content: [],
+  customStyles: [],
+  device: ''
+}
+
+export { Slideshow }
diff --git a/src/components/article/slideshow/slideshow.scss b/src/components/article/slideshow/slideshow.scss
index 1406eac0c..2fafcc869 100644
--- a/src/components/article/slideshow/slideshow.scss
+++ b/src/components/article/slideshow/slideshow.scss
@@ -6,6 +6,10 @@
 .ss-container {
   overflow: hidden;
 
+  &.mobile {
+    width: 100%;
+  }
+
   .ss-slides {
     width: 100%;
   }
diff --git a/src/containers/Article.js b/src/containers/Article.js
index 659ca0b1e..cc2d7b5c8 100644
--- a/src/containers/Article.js
+++ b/src/containers/Article.js
@@ -176,11 +176,9 @@ export default class Article extends Component {
           </div>
 
           <div className="row outer-max center-block">
-            <div className="col-md-12">
-              <ArticleComponents.Body
-                data={bodyData}
-              />
-            </div>
+            <ArticleComponents.Body
+              data={bodyData}
+            />
           </div>
 
           <div ref="progressEnding" className="inner-max center-block">
diff --git a/static/asset/disabled-left-arrow.svg b/static/asset/disabled-left-arrow.svg
new file mode 100755
index 000000000..43de8ab8d
--- /dev/null
+++ b/static/asset/disabled-left-arrow.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="33px" viewBox="0 0 18 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-arrow-left</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Tablet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tablet-Portrait" transform="translate(-82.000000, -545.000000)" fill="#BFBFBF">
+            <path d="M83.0641129,577.119841 C83.4573407,577.502549 84.1017872,577.495836 84.487682,577.120264 L99.4015645,562.605346 C100.197025,561.831164 100.193715,560.572747 99.4015645,559.801787 L84.487682,545.286869 C84.0946943,544.904394 83.4566733,544.905233 83.0552276,545.29594 L82.3320814,545.999741 C81.9339463,546.387226 81.901937,547.046208 82.2525921,547.462136 L92.5739355,559.704766 C93.2852101,560.548442 93.2886218,561.912265 92.5767407,562.75666 L82.2778789,574.972624 C81.9244161,575.391883 81.9533822,576.038823 82.3498799,576.424714 L83.0641129,577.119841 Z" id="icon-arrow-left" transform="translate(91.003452, 561.202931) scale(-1, 1) translate(-91.003452, -561.202931) "></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/asset/disabled-right-arrow.svg b/static/asset/disabled-right-arrow.svg
new file mode 100755
index 000000000..e85bda5aa
--- /dev/null
+++ b/static/asset/disabled-right-arrow.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="33px" viewBox="0 0 18 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-arrow-right</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Tablet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Tablet-Portrait" transform="translate(-668.000000, -545.000000)" fill="#BFBFBF">
+            <path d="M669.057209,577.119841 C669.450437,577.502549 670.094883,577.495836 670.480778,577.120264 L685.39466,562.605346 C686.190121,561.831164 686.186811,560.572747 685.39466,559.801787 L670.480778,545.286869 C670.08779,544.904394 669.449769,544.905233 669.048324,545.29594 L668.325177,545.999741 C667.927042,546.387226 667.895033,547.046208 668.245688,547.462136 L678.567032,559.704766 C679.278306,560.548442 679.281718,561.912265 678.569837,562.75666 L668.270975,574.972624 C667.917512,575.391883 667.946478,576.038823 668.342976,576.424714 L669.057209,577.119841 Z" id="icon-arrow-right"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file