diff --git a/src/pages/index.js b/src/pages/index.js
index 2e874342..d83918d8 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -25,6 +25,7 @@ export default function Landing() {
       <main className="Landing">
         <Hero />
         <Designed />
+        <Timeline />
         <Learn />
         <GettingStarted />
         <Earn />
@@ -131,6 +132,13 @@ const DesignedCard = ({ title, children }) => (
   </div>
 );
 
+const Timeline = () => (
+  <div className="Timeline">
+    <img className="img__light" src="/img/timeline-lgt.png"></img>
+    <img className="img__dark" src="/img/timeline-drk.png"></img>
+  </div>
+)
+
 const Learn = () => (
   <div className="Learn">
     <div className="Learn__wrapper hp-center">
diff --git a/src/pages/index.scss b/src/pages/index.scss
index bb23f918..56be8b31 100644
--- a/src/pages/index.scss
+++ b/src/pages/index.scss
@@ -312,6 +312,27 @@ a.hp-link {
   }
 }
 
+.Timeline {
+  display: flex;
+  justify-content: center
+}
+[data-theme='dark'] .Timeline {
+  .img__light {
+    display: inherit;
+  }
+  .img__dark {
+    display: none;
+  }
+}
+[data-theme='light'] .Timeline {
+  .img__light {
+    display: none;
+  }
+  .img__dark {
+    display: inherit;
+  }
+}
+
 .Learn {
   color: white;
   background-color: var(--secondary-black);
diff --git a/static/img/timeline-drk.png b/static/img/timeline-drk.png
new file mode 100644
index 00000000..2f85f856
Binary files /dev/null and b/static/img/timeline-drk.png differ
diff --git a/static/img/timeline-lgt.png b/static/img/timeline-lgt.png
new file mode 100644
index 00000000..a8791b36
Binary files /dev/null and b/static/img/timeline-lgt.png differ