diff --git a/src/components/timeline-card/timeline-card.scss b/src/components/timeline-card/timeline-card.scss
index 7ac525627..592b46320 100644
--- a/src/components/timeline-card/timeline-card.scss
+++ b/src/components/timeline-card/timeline-card.scss
@@ -1,4 +1,5 @@
 @import "../../colors";
+@import "../../frameless";
 
 .timeline-card{
   width: 450px;
@@ -22,9 +23,15 @@
   }
   &.left{
     margin-left: calc((100% - 980px)/2);
+    @media #{$intermediate-and-smaller} {
+      margin: auto;
+    }
   }
   &.right{
-    margin-left: calc(100% - ((100% - 980px)/2) - 450px);
+    margin-left: calc(100% - ((100% - 980px)/2) - 470px);
+    @media #{$intermediate-and-smaller} {
+      margin: auto;
+    }
   }
   img{
     margin-top: 10px;
diff --git a/src/views/annual-report/2020/index/annual-report.jsx b/src/views/annual-report/2020/index/annual-report.jsx
index 498653b1a..f2b012724 100644
--- a/src/views/annual-report/2020/index/annual-report.jsx
+++ b/src/views/annual-report/2020/index/annual-report.jsx
@@ -1401,7 +1401,7 @@ class AnnualReport extends React.Component {
                                 {/* go into timeline section */}
                                 <div className="year-in-review">
                                     <img className="upper-wave" src="/images/annual-report/2020/community/Timeline/Wave (upper).svg" />
-                                    <div className="inner center">
+                                    <div className="inner center yr">
                                         <h2>
                                             <FormattedMessage id="annualReport.yearInReview" />
                                         </h2>
@@ -1556,6 +1556,12 @@ class AnnualReport extends React.Component {
                                         image="/images/annual-report/2020/community/Timeline/Images/scratchtober.jpg"
                                         attribution="project by u/IDK_HAVE_SOME_NUMBER"
                                     />
+                                    <div className="illustrations">
+                                        <img className="april" src="/images/annual-report/2020/community/Timeline/April Illustration.svg" />
+                                        <img className="may" src="/images/annual-report/2020/community/Timeline/May Illustration.svg" />
+                                        <img className="june" src="/images/annual-report/2020/community/Timeline/June Illustration.svg" />
+                                        <img className="july" src="/images/annual-report/2020/community/Timeline/July Illustration.svg" />
+                                    </div>
                                     <img className="lower-wave" src="/images/annual-report/2020/community/Timeline/Wave (lower).svg" />
                                 </div>
 
diff --git a/src/views/annual-report/2020/index/annual-report.scss b/src/views/annual-report/2020/index/annual-report.scss
index c5deb3955..9d8119388 100644
--- a/src/views/annual-report/2020/index/annual-report.scss
+++ b/src/views/annual-report/2020/index/annual-report.scss
@@ -1377,11 +1377,39 @@ img.comment-viz{
             z-index: 0;
         }
         .inner {
-            &.center{
+            &.center.yr{
                 text-align: center;
-                margin-top: 80px;
                 max-width: 600px;
-                margin: auto;
+                margin: 10px auto 80px;
+            }
+        }
+        .illustrations{
+            position: absolute;
+            width: 970px;
+            margin-left: calc((100% - 980px)/2);
+            top: 950px;
+            @media #{$intermediate-and-smaller} {
+                display: none;
+            }
+            img{
+                display: block;
+                position: absolute;
+                &.april{
+                    position: absolute;
+                    right: 0px;
+                }
+                &.may{
+                    left: 0px;
+                    top: 700px;
+                }
+                &.june{
+                    right: -50px;
+                    top: 1230px;
+                }
+                &.july{
+                    left: 0px;
+                    top: 1800px;
+                }
             }
         }
         .lower-wave{