diff --git a/src/components/HomepageFeatures.js b/src/components/HomepageFeatures.js
index bcdbca1f..84796b9f 100644
--- a/src/components/HomepageFeatures.js
+++ b/src/components/HomepageFeatures.js
@@ -27,6 +27,7 @@ const FeatureList = [
       </>
     ),
     icon: (<IconShortcuts />),
+    demo: '../../static/img/homepage-assets/searching-demo.gif',
   },
   {
     title: 'Theming',
@@ -40,6 +41,7 @@ const FeatureList = [
       </>
     ),
     icon: (<IconThemes />),
+    demo: '../../static/img/homepage-assets/theme-slideshow.gif',
   },
   {
     title: 'Icons',
@@ -104,6 +106,7 @@ const FeatureList = [
       </>
     ),
     icon: (<IconStatusIndicators />),
+    demo: '../../static/img/homepage-assets/status-check-demo.gif',
   },
   {
     title: 'Launching Methods',
@@ -121,6 +124,7 @@ const FeatureList = [
       </>
     ),
     icon: (<IconOpeningMethods />),
+    demo: '../../static/img/homepage-assets/workspace-demo.gif',
   },
   {
     title: 'Authentication',
@@ -158,6 +162,7 @@ const FeatureList = [
       </>
     ),
     icon: (<IconUiConfig />),
+    demo: '../../static/img/homepage-assets/config-editor-demo.gif',
   },
   {
     title: 'Easy Deployment',
@@ -182,21 +187,21 @@ const getColor = (index) => {
   }
 };
 
-function Feature({ title, description, icon, index }) {
+function Feature({ title, description, icon, demo, index }) {
   const side = index % 2 == 0 ? 'left' : 'right';
   const color = getColor(index)
   return (
     <div className={`feature align-${side} color-${color}`}>
       <div className="feature-half text">
         <div className="feature-title">{icon}<h3>{title}</h3></div>
-        <p>{description}</p>
+        {description}
         <div className="read-the-docs">
           <small>Learn more in the Docs</small>
           <Button to="/docs" color={color}>{icon} Docs</Button>
         </div>
       </div>
       <div className="feature-half assets">
-        <div className="screenshot"></div>
+        <img className="demo" src={demo} />
       </div>
     </div>
   );
diff --git a/static/img/homepage-assets/config-editor-demo.gif b/static/img/homepage-assets/config-editor-demo.gif
new file mode 100644
index 00000000..09fcd584
Binary files /dev/null and b/static/img/homepage-assets/config-editor-demo.gif differ
diff --git a/static/img/homepage-assets/logo.png b/static/img/homepage-assets/logo.png
new file mode 100644
index 00000000..78fabd25
Binary files /dev/null and b/static/img/homepage-assets/logo.png differ
diff --git a/static/img/homepage-assets/searching-demo.gif b/static/img/homepage-assets/searching-demo.gif
new file mode 100644
index 00000000..b0a3a08d
Binary files /dev/null and b/static/img/homepage-assets/searching-demo.gif differ
diff --git a/static/img/homepage-assets/status-check-demo.gif b/static/img/homepage-assets/status-check-demo.gif
new file mode 100644
index 00000000..43422a02
Binary files /dev/null and b/static/img/homepage-assets/status-check-demo.gif differ
diff --git a/static/img/homepage-assets/theme-config-demo.gif b/static/img/homepage-assets/theme-config-demo.gif
new file mode 100644
index 00000000..2cc13b73
Binary files /dev/null and b/static/img/homepage-assets/theme-config-demo.gif differ
diff --git a/static/img/homepage-assets/theme-slideshow.gif b/static/img/homepage-assets/theme-slideshow.gif
new file mode 100644
index 00000000..73f94dc5
Binary files /dev/null and b/static/img/homepage-assets/theme-slideshow.gif differ
diff --git a/static/img/homepage-assets/workspace-demo.gif b/static/img/homepage-assets/workspace-demo.gif
new file mode 100644
index 00000000..c6e186ae
Binary files /dev/null and b/static/img/homepage-assets/workspace-demo.gif differ