diff --git a/website/index.html b/website/index.html
index b7b75df..15c80b6 100644
--- a/website/index.html
+++ b/website/index.html
@@ -34,11 +34,12 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     <title>Watch Party</title>
   </head>
   <!-- Global site tag (gtag.js) - Google Analytics -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2">
-  </script>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-87498806-2"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
+    function gtag() {
+      dataLayer.push(arguments);
+    }
     gtag('js', new Date());
 
     gtag('config', 'UA-87498806-2');
@@ -66,7 +67,11 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <div data-beta-support class="supported-logo" id="googleplay"></div>
         <div data-beta-support class="supported-logo" id="crunchyroll"></div>
       </div>
-      <a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button duplicate">
+      <a
+        data-font="sans-bold"
+        href="https://request.chromewatchparty.com"
+        class="link-button duplicate"
+      >
         Get Chrome Extension
       </a>
       <a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button">
@@ -76,7 +81,9 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
     <div class="features">
       <p data-font="sans-bold" class="title subtitle">FEATURES</p>
       <div class="feature-card">
-        <div class="feature-icon" id="sync"></div>
+        <div class="feature-icon" id="sync">
+          <video src="./media/features/Sync.mp4" />
+        </div>
         <p data-font="sans" class="feature-text">
           Watch Party syncs play, pause and timestamp.
         </p>
@@ -132,7 +139,11 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <div class="explanation">
           <div>
             <h4 data-font="sans-bold">TO BE OR NOT TO BE</h4>
-            <p data-font="sans">Watch Party is built to not be in your way. There when you need it, gone when you don't. The sidebar is now resizeable, and now supports having access to Watch Party in fullscreen. (Use the fullscreen button in the sidebar)</p>  
+            <p data-font="sans">
+              Watch Party is built to not be in your way. There when you need it, gone when you
+              don't. The sidebar is now resizeable, and now supports having access to Watch Party in
+              fullscreen. (Use the fullscreen button in the sidebar)
+            </p>
           </div>
         </div>
       </div>
@@ -159,7 +170,10 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <div class="explanation">
           <div>
             <h4 data-font="sans-bold">Stay in control</h4>
-            <p data-font="sans">Find your settings by clicking on title card (when you're in a party) or in the settings panel (when you're creating or joining) </p>  
+            <p data-font="sans">
+              Find your settings by clicking on title card (when you're in a party) or in the
+              settings panel (when you're creating or joining)
+            </p>
           </div>
         </div>
       </div>
@@ -174,18 +188,19 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
               <div id="tm">
                 <div id="tt">
                   <span>12:00:00 PM</span>
-                  <div id="ri"></div></div>
+                  <div id="ri"></div>
+                </div>
                 <p>Hiya buddy!</p>
               </div>
             </div>
             <div id="ti" class="mm">
               <div id="tn">AYUSHYA</div>
-              <div id="tr">Hiya buddy!
-              </div>
+              <div id="tr">Hiya buddy!</div>
               <div id="tm">
                 <div id="tt">
                   <span>12:00:00 PM</span>
-                  <div id="ri"></div></div>
+                  <div id="ri"></div>
+                </div>
                 <p>OH GOD NO! PLEASE GOD NO! NO!</p>
               </div>
             </div>
@@ -202,7 +217,8 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
             <div id="ti" class="mm">
               <div id="tn">SOMEONE</div>
               <div id="tr">
-                <img src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif" /></div>
+                <img src="https://media.giphy.com/media/d10dMmzqCYqQ0/giphy.gif" />
+              </div>
               <div id="tm">
                 <div id="tt">
                   <span>12:00:00 PM</span>
@@ -211,19 +227,20 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
                 <p>Let's watch The Office</p>
               </div>
             </div>
-
           </div>
         </div>
         <div class="explanation">
           <div>
             <h4 data-font="sans-bold">FULL FEATURED CHAT</h4>
-            <p data-font="sans">A brand new, completely revamped chat user interface, now has replies, shows pending messages, and improves the Giphy GIF picker</p>  
+            <p data-font="sans">
+              A brand new, completely revamped chat user interface, now has replies, shows pending
+              messages, and improves the Giphy GIF picker
+            </p>
           </div>
         </div>
       </div>
 
       <div class="pop-feature">
-
         <div id="title-card-container">
           <div id="title-card">
             <h5 data-font="sans-bold" id="title-card-title">WATCH PARTY</h5>
@@ -236,17 +253,21 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
             <h6 data-font="sans" id="title-card-tagline">USERS ON CALL</h6>
             <p data-font="sans" id="call-user-chip">Ayushya</p>
             <p data-font="sans" id="call-user-chip" class="not-me-user-chip">Someone</p>
-            <p data-font="sans" id="call-user-chip" class="not-me-user-chip">Won't Stop Talking <input type="range" value="2" min="0" max="10"></p>
+            <p data-font="sans" id="call-user-chip" class="not-me-user-chip">
+              Won't Stop Talking <input type="range" value="2" min="0" max="10" />
+            </p>
           </div>
         </div>
         <div class="explanation">
           <div>
             <h4 data-font="sans-bold">MADE FOR YOU & YOUR GANG</h4>
-            <p data-font="sans">See who's in your party, get on a call with your party, and volume control for the person who just won't stop talking. </p>
+            <p data-font="sans">
+              See who's in your party, get on a call with your party, and volume control for the
+              person who just won't stop talking.
+            </p>
           </div>
         </div>
       </div>
-
     </div>
     <footer data-font="sans">
       <p class="title built-with">
diff --git a/website/media/features/Chat.mp4 b/website/media/features/Chat.mp4
new file mode 100644
index 0000000..7fb816f
Binary files /dev/null and b/website/media/features/Chat.mp4 differ
diff --git a/website/media/features/Custom.mp4 b/website/media/features/Custom.mp4
new file mode 100644
index 0000000..4b92232
Binary files /dev/null and b/website/media/features/Custom.mp4 differ
diff --git a/website/media/features/Delete.mp4 b/website/media/features/Delete.mp4
new file mode 100644
index 0000000..f76db4b
Binary files /dev/null and b/website/media/features/Delete.mp4 differ
diff --git a/website/media/features/Hideable.mp4 b/website/media/features/Hideable.mp4
new file mode 100644
index 0000000..acf0d68
Binary files /dev/null and b/website/media/features/Hideable.mp4 differ
diff --git a/website/media/features/Phone.mp4 b/website/media/features/Phone.mp4
new file mode 100644
index 0000000..add3c4b
Binary files /dev/null and b/website/media/features/Phone.mp4 differ
diff --git a/website/media/features/Signup.mp4 b/website/media/features/Signup.mp4
new file mode 100644
index 0000000..5f5c979
Binary files /dev/null and b/website/media/features/Signup.mp4 differ
diff --git a/website/media/features/Sync.mp4 b/website/media/features/Sync.mp4
new file mode 100644
index 0000000..6b6317c
Binary files /dev/null and b/website/media/features/Sync.mp4 differ