diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx
index 751e9ed4d..2b6cf8227 100644
--- a/src/views/annual-report/annual-report.jsx
+++ b/src/views/annual-report/annual-report.jsx
@@ -70,8 +70,7 @@ class AnnualReport extends React.Component {
 
         this.state = {
             currentlyVisible: SECTIONS.message, // The currently visible section
-            dropdownVisible: false,
-            videoOpen: false
+            dropdownVisible: false
         };
 
         bindAll(this, [
@@ -880,7 +879,9 @@ class AnnualReport extends React.Component {
                                             <div className="guidelines-list">
                                                 <ul>
                                                     <li>
-                                                        <FormattedMessage id="annualReport.communityGuidelinesRespect" />
+                                                        <FormattedMessage
+                                                            id="annualReport.communityGuidelinesRespect"
+                                                        />
                                                     </li>
                                                     <li>
                                                         <FormattedMessage id="annualReport.communityGuidelinesShare" />
@@ -891,13 +892,19 @@ class AnnualReport extends React.Component {
                                                 </ul>
                                                 <ul>
                                                     <li>
-                                                        <FormattedMessage id="annualReport.communityGuidelinesConstructive" />
+                                                        <FormattedMessage
+                                                            id="annualReport.communityGuidelinesConstructive"
+                                                        />
                                                     </li>
                                                     <li>
-                                                        <FormattedMessage id="annualReport.communityGuidelinesPrivacy" />
+                                                        <FormattedMessage
+                                                            id="annualReport.communityGuidelinesPrivacy"
+                                                        />
                                                     </li>
                                                     <li>
-                                                        <FormattedMessage id="annualReport.communityGuidelinesFriendly" />
+                                                        <FormattedMessage
+                                                            id="annualReport.communityGuidelinesFriendly"
+                                                        />
                                                     </li>
                                                 </ul>
                                             </div>
@@ -987,7 +994,9 @@ class AnnualReport extends React.Component {
                                                 <div>angelical</div>
                                             </div>
                                             <Comment
-                                                comment={this.props.intl.formatMessage({id: 'annualReport.communityQuote1'})}
+                                                comment={this.props.intl.formatMessage(
+                                                    {id: 'annualReport.communityQuote1'}
+                                                )}
                                             />
                                         </div>
                                         <div className="community-quote">
@@ -999,7 +1008,9 @@ class AnnualReport extends React.Component {
                                                 <div>dlore2009</div>
                                             </div>
                                             <Comment
-                                                comment={this.props.intl.formatMessage({id: 'annualReport.communityQuote2'})}
+                                                comment={this.props.intl.formatMessage(
+                                                    {id: 'annualReport.communityQuote2'}
+                                                )}
                                             />
                                         </div>
                                         <div className="community-quote">
diff --git a/src/views/annual-report/annual-report.scss b/src/views/annual-report/annual-report.scss
index ac67d5cc8..4add3bfa3 100644
--- a/src/views/annual-report/annual-report.scss
+++ b/src/views/annual-report/annual-report.scss
@@ -604,6 +604,7 @@ p {
     .initiatives-community {
         .hero {
             width: 100%;
+            margin: 52px 0;
         }
 
         .moderation-and-guidelines {
@@ -631,6 +632,7 @@ p {
 
             ul {
                 list-style-image: url('/images/annual-report/initiatives/guideline-splash.svg');
+                margin-right: 64px;
             }
             li {
                 // vertical-align: middle;
@@ -639,10 +641,13 @@ p {
 
         .community-engagement {
             max-width: 620px;
+            text-align: center;
+            margin: 48px;
         }
 
         .community-sds {
             text-align: center;
+            margin-bottom: 68px;
 
             .sds-list {
                 display: flex;
@@ -658,6 +663,11 @@ p {
                         width: 100%;
                         border-radius: 8px;
                     }
+
+                    p {
+                        font-size: .875rem;
+                        line-height: 1.25rem;
+                    }
                 }
             }
         }
@@ -670,6 +680,8 @@ p {
             display: flex;
             flex-wrap: wrap;
             justify-content: space-between;
+            margin-top: 48px;
+            margin-bottom: 144px;
 
             .community-quote {
                 width: 380px;
@@ -683,17 +695,26 @@ p {
                     p {
                         color: $ui-white;
                         line-height: 40px;
+                        font-size: 1.25rem;
                     }
                 }
                 .comment-text, .comment-text::before, .comment-text::after {
                     border-color: $ui-blue;
                 }
+                .comment-text {
+                    padding: 1.75rem;
+                }
             }
         }
 
         .community-blm {
             display: flex;
             flex-wrap: wrap;
+            justify-content: space-between;
+
+            h2 {
+                margin-top: 32px;
+            }
 
             .blm-intro {
                 max-width: 460px;
@@ -712,18 +733,107 @@ p {
                 }
             }
 
+            .grid .thumbail {
+                box-shadow: none;
+                background-color: blue;
+            }
+
             .blm-change {
                 width: 380px;
+
+                p {
+                    font-size: 1.25rem;
+                    line-height: 2.5rem;
+                }
+            }
+        }
+
+        @media #{$intermediate-and-smaller} {
+            .inner {
+                max-width: 620px;
+            }
+
+            .moderation-and-guidelines {
+                flex-direction: column;
+            }
+
+            .community-moderation, .community-guidelines, .community-engagement {
+                margin: 32px 0;
+                width: 620px;
+                text-align: left;
+            }
+
+            .sds-list {
+                max-width: 460px;
+            }
+
+            .community-quotes {
+                .community-quote {
+                    width: 100%;
+                    text-align: left;
+                    margin: 24px 0;
+
+                    .comment-text {
+                        margin-left: 12px;
+                    }
+                }
+            }
+
+            .blm-tag {
+                align-self: center;
+            }
+
+            .community-blm {
+                margin: 16px 0;
+                justify-content: center;
+
+                .blm-image {
+                    order: -1;
+                }
+
+                .blm-intro, .blm-change {
+                    max-width: 100%;
+                    width: 100%;
+                }
+
+                .blm-change {
+                    margin-top: 80px;
+                }
+            }
+        }
+
+        @media #{$small} {
+            .inner {
+                overflow: hidden;
+            }
+
+            .hero {
+                width: 540px;
+            }
+
+            .community-moderation, .community-guidelines, .community-engagement {
+                width: 300px;
+                text-align: left;
+            }
+
+            ul {
+                margin: 0;
+            }
+
+            li {
+                margin-bottom: 0;
             }
         }
     }
 
     .video-container {
-        width: 100%;
-        overflow: hidden;
+       width: 100%;
+       height: 500px;
 
-        display: flex;
-        justify-content: center;
+       display: flex;
+       justify-content: center;
+
+       margin-bottom: 72px;
     }
 
     .video-background {
@@ -731,7 +841,7 @@ p {
         height: 500px;
         overflow: hidden;
 
-        background-size: cover;
+        background-size: auto 100%;
         background-repeat: no-repeat;
         background-position: 50% 50%;
 
@@ -739,6 +849,9 @@ p {
         align-items: center;
         justify-content: center;
 
+        width: 100%;
+        height: 100%;
+
         @media #{$big} {
               
         }
@@ -751,7 +864,7 @@ p {
     .community-team-intro {
         max-width: 780px;
         text-align: center;
-        margin: 32px 0;
+        margin-top: 32px;
 
         p {
             max-width: 620px;