diff --git a/src/components/text-and-media-snippet/text-and-media-snippet.jsx b/src/components/text-and-media-snippet/text-and-media-snippet.jsx
index dd30d5fca..0c6bd1bdf 100644
--- a/src/components/text-and-media-snippet/text-and-media-snippet.jsx
+++ b/src/components/text-and-media-snippet/text-and-media-snippet.jsx
@@ -12,18 +12,19 @@ const TextAndMediaSnippet = props => (
                 {props.type === 'video' &&
                     <VideoPreview
                         buttonMessage=""
-                        thumbnail={props.large_image}
+                        thumbnail={props.largeImage}
                         thumbnailWidth="300"
                         videoHeight="216"
-                        videoId={props.video_id}
+                        videoId={props.videoId}
                         videoWidth="380"
                         alt={props.alt}
+                        spinnerColor={props.spinnerColor}
                     />
                 }
                 {props.type !== 'video' &&
                     <img
                         className="large"
-                        src={props.large_image}
+                        src={props.largeImage}
                         alt={props.alt}
                     />
                 }
@@ -47,7 +48,7 @@ const TextAndMediaSnippet = props => (
             <div className="half">
                 <img
                     className="large"
-                    src={props.large_image}
+                    src={props.largeImage}
                     alt={props.alt}
                 />
             </div>
@@ -56,7 +57,7 @@ const TextAndMediaSnippet = props => (
             <div className="half">
                 <img
                     className="large"
-                    src={props.large_image}
+                    src={props.largeImage}
                     alt={props.alt}
                 />
             </div>
@@ -67,14 +68,15 @@ const TextAndMediaSnippet = props => (
 TextAndMediaSnippet.propTypes = {
     title: PropTypes.string,
     paragraph: PropTypes.string,
-    large_image: PropTypes.string,
+    largeImage: PropTypes.string,
     className: PropTypes.string,
-    video_id: PropTypes.string,
+    videoId: PropTypes.string,
     type: PropTypes.string,
     alt: PropTypes.string,
     link: PropTypes.string,
     linkText: PropTypes.string,
-    paragraph2: PropTypes.string
+    paragraph2: PropTypes.string,
+    spinnerColor: PropTypes.string
 };
 
 module.exports = TextAndMediaSnippet;
diff --git a/src/components/timeline-card/timeline-card.jsx b/src/components/timeline-card/timeline-card.jsx
index cbc0d64c8..b9f3b8726 100644
--- a/src/components/timeline-card/timeline-card.jsx
+++ b/src/components/timeline-card/timeline-card.jsx
@@ -30,6 +30,7 @@ const TimelineCard = props => (
                 videoId={props.videoId}
                 videoWidth="380"
                 alt={props.alt}
+                spinnerColor={props.spinnerColor}
             />
         }
         {!props.videoId && props.image &&
@@ -55,7 +56,8 @@ TimelineCard.propTypes = {
     attribution: PropTypes.string,
     className: PropTypes.string,
     alt: PropTypes.string,
-    projectBy: PropTypes.string
+    projectBy: PropTypes.string,
+    spinnerColor: PropTypes.string
 };
 
 module.exports = TimelineCard;
diff --git a/src/components/video-preview/video-preview.jsx b/src/components/video-preview/video-preview.jsx
index d2d01fcd2..9d5b3e4d6 100644
--- a/src/components/video-preview/video-preview.jsx
+++ b/src/components/video-preview/video-preview.jsx
@@ -39,7 +39,12 @@ class VideoPreview extends React.Component {
                 {this.state.videoOpen ?
                     (
                         <div className="spinner-video-container">
-                            {this.state.spinnerVisible ? <Spinner className="loading-spinner" /> : null}
+                            {this.state.spinnerVisible ?
+                                <Spinner
+                                    className="loading-spinner"
+                                    color={this.props.spinnerColor}
+                                /> : null
+                            }
                             <Video
                                 className="video"
                                 height={this.props.videoHeight}
@@ -91,7 +96,8 @@ VideoPreview.propTypes = {
     videoHeight: PropTypes.string,
     videoId: PropTypes.string.isRequired,
     videoWidth: PropTypes.string,
-    alt: PropTypes.string
+    alt: PropTypes.string,
+    spinnerColor: PropTypes.string
 };
 
 module.exports = VideoPreview;
diff --git a/src/views/annual-report/2020/annual-report.jsx b/src/views/annual-report/2020/annual-report.jsx
index b252708c6..82679f963 100644
--- a/src/views/annual-report/2020/annual-report.jsx
+++ b/src/views/annual-report/2020/annual-report.jsx
@@ -1130,7 +1130,7 @@ class AnnualReport extends React.Component {
                                             title={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2020.connectivityCountryChileTitle'}
                                             )}
-                                            list_icon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
+                                            listIcon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
                                             country={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2020.connectivityCountryChile'}
                                             )}
@@ -1143,7 +1143,7 @@ class AnnualReport extends React.Component {
                                             paragraph={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2020.connectivityCountryChileParagraph'}
                                             )}
-                                            large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Scratch Al Sur graphic.svg"
+                                            largeImage="/images/annual-report/2020/connectivity/Scratch Around the World/Scratch Al Sur graphic.svg"
                                         />
                                         <CountryBlurb
                                             className="regular"
@@ -1151,7 +1151,7 @@ class AnnualReport extends React.Component {
                                             title={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2020.connectivityCountryBrazilTitle'}
                                             )}
-                                            list_icon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
+                                            listIcon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
                                             country={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2020.connectivityCountryBrazil'}
                                             )}
@@ -1164,7 +1164,7 @@ class AnnualReport extends React.Component {
                                             paragraph={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2020.connectivityCountryBrazilParagraph'}
                                             )}
-                                            large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Brazil Creative Learning Network graphic.svg"
+                                            largeImage="/images/annual-report/2020/connectivity/Scratch Around the World/Brazil Creative Learning Network graphic.svg"
                                         />
                                         <CountryBlurb
                                             className="reverse"
@@ -1172,7 +1172,7 @@ class AnnualReport extends React.Component {
                                             title={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2020.connectivityCountryIndiaTitle'}
                                             )}
-                                            list_icon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
+                                            listIcon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
                                             country={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2020.connectivityCountryIndia'}
                                             )}
@@ -1189,7 +1189,7 @@ class AnnualReport extends React.Component {
                                             linkText={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2020.connectivityCountryIndiaParagraphLinkText'}
                                             )}
-                                            large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Quest Alliance graphic.svg"
+                                            largeImage="/images/annual-report/2020/connectivity/Scratch Around the World/Quest Alliance graphic.svg"
                                         />
                                         <CountryBlurb
                                             className="regular"
@@ -1197,7 +1197,7 @@ class AnnualReport extends React.Component {
                                             title={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2020.connectivityCountryUSATitle'}
                                             )}
-                                            list_icon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
+                                            listIcon="/images/annual-report/2020/Symbols-UI/Location_icon.svg"
                                             country={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2020.connectivityCountryUSA'}
                                             )}
@@ -1214,7 +1214,7 @@ class AnnualReport extends React.Component {
                                             linkText={this.props.intl.formatMessage(
                                                 {id: 'annualReport.2020.connectivityCountryUSAParagraphLinkText'}
                                             )}
-                                            large_image="/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry Pi graphic.svg"
+                                            largeImage="/images/annual-report/2020/connectivity/Scratch Around the World/Raspberry Pi graphic.svg"
                                         />
                                     </div>
                                     <div className="resources">
@@ -1241,7 +1241,7 @@ class AnnualReport extends React.Component {
                                                 {id: 'annualReport.2020.altTutorial'}
                                             )}
                                             type="image"
-                                            large_image="/images/annual-report/2020/connectivity/TutorialUI.svg"
+                                            largeImage="/images/annual-report/2020/connectivity/TutorialUI.svg"
                                         />
                                         <TextAndMediaSnippet
                                             className="regular"
@@ -1255,8 +1255,9 @@ class AnnualReport extends React.Component {
                                                 {id: 'annualReport.2020.altGettingStarted'}
                                             )}
                                             type="video"
-                                            video_id="xfh9bvbeik"
-                                            large_image="/images/annual-report/2020/connectivity/Getting Started with Scratch video.png"
+                                            videoId="xfh9bvbeik"
+                                            largeImage="/images/annual-report/2020/connectivity/Getting Started with Scratch video.png"
+                                            spinnerColor="blue"
                                         />
                                         <TextAndMediaSnippet
                                             className="full-width"
@@ -1270,7 +1271,7 @@ class AnnualReport extends React.Component {
                                                 {id: 'annualReport.2020.altEditor'}
                                             )}
                                             type="image"
-                                            large_image="/images/annual-report/2020/connectivity/isiXhosa_scratcheditor.jpg"
+                                            largeImage="/images/annual-report/2020/connectivity/isiXhosa_scratcheditor.jpg"
                                         />
                                     </div>
                                 </div>
@@ -1464,7 +1465,7 @@ class AnnualReport extends React.Component {
                                                 {id: 'annualReport.2020.altHackYourWindow'}
                                             )}
                                             type="image"
-                                            large_image="/images/annual-report/2020/adaptation/hackyourwindow_gif.gif"
+                                            largeImage="/images/annual-report/2020/adaptation/hackyourwindow_gif.gif"
                                         />
                                     </div>
                                     <div className="left-align">
@@ -1506,7 +1507,7 @@ class AnnualReport extends React.Component {
                                                 {id: 'annualReport.2020.adaptationSnapshot1TextC'}
                                             )}
                                             type="image"
-                                            large_image="/images/annual-report/2020/adaptation/Computer Clubhouse Illustration.svg"
+                                            largeImage="/images/annual-report/2020/adaptation/Computer Clubhouse Illustration.svg"
                                         />
                                     </div>
                                     <div className="flex-content lg">
@@ -1522,7 +1523,7 @@ class AnnualReport extends React.Component {
                                                 {id: 'annualReport.2020.altImageBubbles'}
                                             )}
                                             type="image"
-                                            large_image="/images/annual-report/2020/adaptation/BYIS Graphic.svg"
+                                            largeImage="/images/annual-report/2020/adaptation/BYIS Graphic.svg"
                                         />
                                     </div>
                                 </div>
@@ -1847,6 +1848,7 @@ class AnnualReport extends React.Component {
                                         )}
                                         image="/images/annual-report/2020/community/Timeline/Images/blmvideo.png"
                                         videoId="r1pmlyylye"
+                                        spinnerColor="blue"
                                     />
                                     <img
                                         className="connector"
diff --git a/src/views/annual-report/2020/annual-report.scss b/src/views/annual-report/2020/annual-report.scss
index fc05cd728..0eda92fec 100644
--- a/src/views/annual-report/2020/annual-report.scss
+++ b/src/views/annual-report/2020/annual-report.scss
@@ -1722,6 +1722,10 @@ img.comment-viz{
         width: 100%;
         max-width: 900px;
         margin: -50px auto 0;
+        @media #{$intermediate-and-smaller} {
+            margin-top: 0px;
+            flex-direction: column;
+        }
         .tweets{
             max-width: 600px;
             width: 100%;
diff --git a/src/views/annual-report/2020/country-blurb/country-blurb.jsx b/src/views/annual-report/2020/country-blurb/country-blurb.jsx
index 76c7731b5..47b153fde 100644
--- a/src/views/annual-report/2020/country-blurb/country-blurb.jsx
+++ b/src/views/annual-report/2020/country-blurb/country-blurb.jsx
@@ -5,7 +5,7 @@ const React = require('react');
 require('./country-blurb.scss');
 
 // Class names regular and reverse indicate whether the image should
-// be placed on the right of left of the text in wider layouts. 
+// be placed on the right of left of the text in wider layouts.
 // At smaller widths, the image will always be stacked on top.
 // Because the right column would typically stack under the left
 // I've named this class reverse since it is using flexbox reverse
@@ -17,7 +17,7 @@ const CountryBlurb = props => (
             <div className="half">
                 <img
                     className="large"
-                    src={props.large_image}
+                    src={props.largeImage}
                     alt={props.alt}
                 />
             </div>
@@ -32,7 +32,7 @@ const CountryBlurb = props => (
                     <h5>{props.title}</h5>
                     <div className="location">
                         <img
-                            src={props.list_icon}
+                            src={props.listIcon}
                             alt="location icon"
                         />
                         <span>{props.country}</span>
@@ -50,7 +50,7 @@ const CountryBlurb = props => (
             <div className="half">
                 <img
                     className="large"
-                    src={props.large_image}
+                    src={props.largeImage}
                     alt={props.alt}
                 />
             </div>
@@ -61,11 +61,11 @@ const CountryBlurb = props => (
 CountryBlurb.propTypes = {
     icon: PropTypes.string,
     title: PropTypes.string,
-    list_icon: PropTypes.string,
+    listIcon: PropTypes.string,
     country: PropTypes.string,
     paragraph: PropTypes.string,
     className: PropTypes.string,
-    large_image: PropTypes.string,
+    largeImage: PropTypes.string,
     alt: PropTypes.string,
     iconAlt: PropTypes.string,
     link: PropTypes.string,