diff --git a/src/routes.json b/src/routes.json
index 055b6818f..b2335719b 100644
--- a/src/routes.json
+++ b/src/routes.json
@@ -11,7 +11,8 @@
         "pattern": "^/annual-report/?$",
         "routeAlias": "/annual-report/?$",
         "view": "annual-report/annual-report",
-        "title": "annual-report"
+        "title": "annual-report",
+        "viewportWidth": "device-width"
     },
     {
         "name": "camp",
diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx
index 29eb1a238..5c9f5580e 100644
--- a/src/views/annual-report/annual-report.jsx
+++ b/src/views/annual-report/annual-report.jsx
@@ -284,44 +284,100 @@ class AnnualReport extends React.Component {
                     ref={this.setRef(SECTIONS.milestones)}
                 >
                     <div className="inner">
-                        <div className="milestones-intro">
-                            <h2>
-                                <FormattedMessage id="annualReport.milestonesTitle" />
-                            </h2>
-                            <p>
-                                <FormattedMessage id="annualReport.milestonesDescription" />
-                            </p>
+                        <div className="milestones-wrapper">
+                            <div className="milestone-boxes">
+                                <h2>
+                                    <FormattedMessage id="annualReport.milestonesTitle" />
+                                </h2>
+                                <p>
+                                    <FormattedMessage id="annualReport.milestonesDescription" />
+                                </p>
+                                <MediaQuery minWidth={frameless.tabletPortrait}>
+                                    <img src="/images/annual-report/milestones/timeline1.svg" />
+                                </MediaQuery>
+                            </div>
+                            <div className="milestone-boxes">
+                                <div className="milestone-box first">
+                                    <h4>
+                                        2003
+                                        {/* TODO should this be localized? */}
+                                    </h4>
+                                    <p>
+                                        <FormattedMessage id="annualReport.milestones2003Message" />
+                                    </p>
+                                </div>
+                                <div className="milestone-box">
+                                    <h4>
+                                        2004
+                                        {/* TODO should this be localized? */}
+                                    </h4>
+                                    <p>
+                                        <FormattedMessage id="annualReport.milestones2004Message" />
+                                    </p>
+                                    <img src="/images/annual-report/milestones/2004_Clubhouse.jpg" />
+                                </div>
+                                <div className="milestone-box last">
+                                    <h4>
+                                        2007
+                                        {/* TODO should this be localized? */}
+                                    </h4>
+                                    <p>
+                                        <FormattedMessage id="annualReport.milestones2007Message" />
+                                    </p>
+                                    <img src="/images/annual-report/milestones/2007_EarlyScratch.png" />
+                                </div>
+                            </div>
                         </div>
-                        <div className="milestones-boxes">
-                            <div className="milestone-box first">
-                                <h4>
-                                    2003
-                                    {/* TODO should this be localized? */}
-                                </h4>
-                                <p>
-                                    <FormattedMessage id="annualReport.milestones2003Message" />
-                                </p>
-                            </div>
-                            <div className="milestone-box">
-                                <h4>
-                                    2004
-                                    {/* TODO should this be localized? */}
-                                </h4>
-                                <p>
-                                    <FormattedMessage id="annualReport.milestones2004Message" />
-                                </p>
-                                <img src="/images/annual-report/milestones/2004_Clubhouse.jpg" />
-                            </div>
-                            <div className="milestone-box last">
-                                <h4>
-                                    2007
-                                    {/* TODO should this be localized? */}
-                                </h4>
-                                <p>
-                                    <FormattedMessage id="annualReport.milestones2007Message" />
-                                </p>
-                                <img src="/images/annual-report/milestones/2007_EarlyScratch.png" />
+                        <MediaQuery minWidth={frameless.tabletPortrait}>
+                            <img src="/images/annual-report/milestones/timeline_line_right.svg" />
+                        </MediaQuery>
+                        <div className="milestones-wrapper">
+                            <div className="milestone-boxes">
+                                <div className="milestone-box">
+                                    <h4>
+                                        2008
+                                        {/* TODO should this be localized? */}
+                                    </h4>
+                                    <p>
+                                        <FormattedMessage id="annualReport.milestones2008Message" />
+                                    </p>
+                                    <img src="/images/annual-report/milestones/2008_Conference.jpg" />
+                                </div>
+                                <div className="milestone-box">
+                                    <h4>
+                                        2009
+                                        {/* TODO should this be localized? */}
+                                    </h4>
+                                    <p>
+                                        <FormattedMessage id="annualReport.milestones2009Message1.4" />
+                                    </p>
+                                    <img src="/images/annual-report/milestones/2009_Scratch1_4.png" />
+                                </div>
+                                <div className="milestone-box">
+                                    <h4>
+                                        2009
+                                        {/* TODO should this be localized? */}
+                                    </h4>
+                                    <p>
+                                        <FormattedMessage id="annualReport.milestones2009MessageScratchDay" />
+                                    </p>
+                                </div>
+                                <div className="milestone-box">
+                                    <h4>
+                                        2010
+                                        {/* TODO should this be localized? */}
+                                    </h4>
+                                    <p>
+                                        <FormattedMessage id="annualReport.milestones2010Message" />
+                                    </p>
+                                </div>
                             </div>
+                            <MediaQuery 
+                                className="milestone-boxes"
+                                minWidth={frameless.tabletPortrait}
+                            >
+                                <img src="/images/annual-report/milestones/timeline2.svg" />
+                            </MediaQuery>
                         </div>
                     </div>
                 </div>
diff --git a/src/views/annual-report/annual-report.scss b/src/views/annual-report/annual-report.scss
index b70b0c4b0..b8f4c0372 100644
--- a/src/views/annual-report/annual-report.scss
+++ b/src/views/annual-report/annual-report.scss
@@ -168,6 +168,8 @@ h5 {
     .inner {
         width: 940px;
         display: flex;
+        flex-direction: column;
+        align-items: center;
     }
 
     h2, h4 p {
@@ -178,14 +180,25 @@ h5 {
         font-size: 1.25rem;
     }
 
-    .milestones-intro {
-        margin-right: 20px;
+    .milestones-wrapper {
+        display: flex;
     }
 
-    .milestones-boxes {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
+    .milestones-intro {
+       //margin-right: 88px;
+        display: flex;
+        flex-direction: column;
+
+        img {
+            flex-grow: 2;
+        }
+    }
+
+    .milestone-boxes {
+        margin: 0 44px;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
     }
 
     .milestone-box {
@@ -213,7 +226,7 @@ h5 {
 
 .financials-section {
     .inner {
-        max-width: 780px;
+        /** max-width: 780px; **/
         padding: 80px 0;
     }
 
@@ -320,7 +333,7 @@ h5 {
 
     @media #{$intermediate-and-smaller} {
         .inner {
-            max-width: 620px;
+            // max-width: 620px;
             padding: 72px 0;
         }
 
@@ -340,7 +353,7 @@ h5 {
 
     @media #{$medium-and-smaller} {
         .inner {
-            max-width: 460px;
+            // max-width: 460px;
             padding: 64px 0;
         }
 
@@ -351,7 +364,8 @@ h5 {
 
     @media #{$small} {
         .inner {
-            max-width: 300px;
+            /** max-width: 300px; **/
+            width: 100%;
         }
 
         h2 {
diff --git a/src/views/annual-report/l10n.json b/src/views/annual-report/l10n.json
index 8d12429c1..1cd46a231 100644
--- a/src/views/annual-report/l10n.json
+++ b/src/views/annual-report/l10n.json
@@ -67,6 +67,11 @@
     "annualReport.milestones2003Message": "Awarded National Science Foundation grant to start development of Scratch",
     "annualReport.milestones2004Message": "Offered first Scratch workshop at Computer Clubhouse Teen Summit",
     "annualReport.milestones2007Message": "Public launch of Scratch programming language and online community",
+    "annualReport.milestones2008Message": "Organized first Scratch Conference for educators and developers",
+    "annualReport.milestones2009Message1.4": "Released Scratch 1.4, translated into more than 40 languages",
+    "annualReport.milestones2009MessageScratchDay": "Hosted first Scratch Day event for children and families",
+    "annualReport.milestones2010Message": "Scratch online community reaches 1 million members",
+
 
     "annualReport.financialsTitle": "Financials - 2019",
     "annualReport.financialsRevenue": "Revenues",