diff --git a/templates/fakeyou/assets/vid-1.webp b/templates/fakeyou/assets/vid-1.webp
new file mode 100644
index 0000000000..99def45a6c
Binary files /dev/null and b/templates/fakeyou/assets/vid-1.webp differ
diff --git a/templates/fakeyou/assets/vid-2.webp b/templates/fakeyou/assets/vid-2.webp
new file mode 100644
index 0000000000..0c18b23f73
Binary files /dev/null and b/templates/fakeyou/assets/vid-2.webp differ
diff --git a/templates/fakeyou/assets/vid-3.webp b/templates/fakeyou/assets/vid-3.webp
new file mode 100644
index 0000000000..1e649ab1cc
Binary files /dev/null and b/templates/fakeyou/assets/vid-3.webp differ
diff --git a/templates/fakeyou/assets/vid-4.webp b/templates/fakeyou/assets/vid-4.webp
new file mode 100644
index 0000000000..008566e76a
Binary files /dev/null and b/templates/fakeyou/assets/vid-4.webp differ
diff --git a/templates/fakeyou/style.css b/templates/fakeyou/style.css
index 9f0779421a..b45c39ccec 100644
--- a/templates/fakeyou/style.css
+++ b/templates/fakeyou/style.css
@@ -3,7 +3,7 @@ html {
 }
 
 body {
-  min-height: 100%;
+  height: 100%;
   font-family: "Fira Sans", sans-serif;
   color: #fff;
 }
@@ -124,6 +124,7 @@ p {
   ) !important;
   position: relative;
   overflow: hidden;
+  min-height: 100%;
 }
 
 .lead {
@@ -298,6 +299,58 @@ p {
   box-shadow: none;
 }
 
+.video-card {
+  border-radius: 5px;
+  border: 5px solid;
+  border-color: rgba(255, 255, 255, 0.6);
+  padding: 1rem;
+  position: relative;
+  width: 100%;
+  min-height: 220px;
+  transition: 0.2s;
+  overflow: none;
+}
+
+.video-card:hover {
+  cursor: pointer;
+  border-color: #fc6b68;
+}
+
+.video-img {
+  position: absolute;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.video-card-body {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  bottom: 0;
+  padding: 0.75rem;
+  width: 100%;
+  background: rgb(0, 0, 0);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.5) 32%,
+    rgba(0, 0, 0, 1) 100%
+  );
+}
+
+.video-card-title {
+  font-size: 14px;
+}
+
+.video-card-text {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+}
+
 @media (min-width: 992px) {
 }
 
diff --git a/templates/fakeyou/video.html b/templates/fakeyou/video.html
new file mode 100644
index 0000000000..2f4a7d0a40
--- /dev/null
+++ b/templates/fakeyou/video.html
@@ -0,0 +1,422 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Bootstrap CSS -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+
+    <script src="https://unpkg.com/scrollreveal"></script>
+    <script
+      src="https://kit.fontawesome.com/a73498f2ed.js"
+      crossorigin="anonymous"
+    ></script>
+
+    <title>FakeYou. Deep Fake Text to Speech.</title>
+  </head>
+  <body>
+    <div class="bg-gradient">
+      <div class="particles-container">
+        <div id="particles-js"></div>
+      </div>
+
+      <nav class="navbar navbar-expand-lg navbar-dark navbar-fixed py-3">
+        <div class="container">
+          <a class="navbar-brand me-5 pr-8" href="index.html">
+            <img src="assets/FakeYou-Logo-Left.png" alt="" height="34" />
+          </a>
+          <button
+            class="navbar-toggler"
+            type="button"
+            data-toggle="collapse"
+            data-target="#navbarNavDropdown"
+            aria-controls="navbarNavDropdown"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarNavDropdown">
+            <ul class="navbar-nav">
+              <li class="nav-item active">
+                <a class="nav-link" href="#">Clone Your Voice!</a>
+              </li>
+              <li class="nav-item dropdown">
+                <a
+                  class="nav-link dropdown-toggle"
+                  href="#"
+                  id="navbarDropdownMenuLink"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  Create
+                </a>
+                <div
+                  class="dropdown-menu"
+                  aria-labelledby="navbarDropdownMenuLink"
+                >
+                  <a class="dropdown-item" href="#">TTS</a>
+                  <a class="dropdown-item" href="#">Video</a>
+                </div>
+              </li>
+              <li class="nav-item dropdown">
+                <a
+                  class="nav-link dropdown-toggle"
+                  href="#"
+                  id="navbarDropdownMenuLink"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  Community
+                </a>
+                <div
+                  class="dropdown-menu"
+                  aria-labelledby="navbarDropdownMenuLink"
+                >
+                  <a class="dropdown-item" href="#">Contribute/Upload</a>
+                  <a class="dropdown-item" href="#">Leaderboard</a>
+                  <a class="dropdown-item" href="#">Patrons</a>
+                  <a class="dropdown-item" href="#">Feed</a>
+                  <a class="dropdown-item" href="#">My Data</a>
+                  <a class="dropdown-item" href="#">About Us</a>
+                  <a class="dropdown-item" href="#">Terms of Use</a>
+                </div>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Developers</a>
+              </li>
+            </ul>
+          </div>
+          <div
+            class="d-grid gap-2 d-flex justify-content-start d-none d-lg-block"
+          >
+            <a class="nav-login me-3" href="">Login</a>
+            <button type="button" class="btn btn-primary btn-lg">
+              Sign up
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      <div class="container py-5">
+        <div class="d-flex flex-column gap-3">
+          <h1 class="display-5 fw-bold">Video Lipsync Templates</h1>
+          <p class="lead">
+            Pick a template, then you can make it lip sync. If you want to use
+            your own video or image, you'll need to
+            <a class="text-link">create an account</a>. You'll then be able to
+            upload and reuse your templates whenever you want!
+          </p>
+        </div>
+      </div>
+
+      <div class="container-panel pb-5">
+        <div class="panel p-3 p-lg-4 load-hidden">
+          <div class="row">
+            <!--ADD CLASSES HERE d-flex align-items-stretch-->
+
+            <div
+              class="col-sm-6 col-md-4 col-lg-3 mb-4 d-flex align-items-stretch"
+            >
+              <div class="video-card">
+                <div class="video-card-body d-flex flex-column">
+                  <h6 class="video-card-title mb-1">Creepy Movie Sonic</h6>
+                  <p class="video-card-text">by echelon</p>
+                </div>
+                <img class="video-img" src="assets/vid-1.webp" alt="" />
+              </div>
+            </div>
+
+            <div
+              class="col-sm-6 col-md-4 col-lg-3 mb-4 d-flex align-items-stretch"
+            >
+              <div class="video-card">
+                <div class="video-card-body d-flex flex-column">
+                  <h6 class="video-card-title mb-1">
+                    Samuel L Jackson (Pulp Fiction) #1
+                  </h6>
+                  <p class="video-card-text">by Vegito1089</p>
+                </div>
+                <img class="video-img" src="assets/vid-2.webp" alt="" />
+              </div>
+            </div>
+
+            <div
+              class="col-sm-6 col-md-4 col-lg-3 mb-4 d-flex align-items-stretch"
+            >
+              <div class="video-card">
+                <div class="video-card-body d-flex flex-column">
+                  <h6 class="video-card-title mb-1">
+                    Anderson Cooper tells the news
+                  </h6>
+                  <p class="video-card-text">by Vegito1089</p>
+                </div>
+                <img class="video-img" src="assets/vid-3.webp" alt="" />
+              </div>
+            </div>
+
+            <div
+              class="col-sm-6 col-md-4 col-lg-3 mb-4 d-flex align-items-stretch"
+            >
+              <div class="video-card">
+                <div class="video-card-body d-flex flex-column">
+                  <h6 class="video-card-title mb-1">
+                    Mortal Kombat 1995 Rayden Scene 1
+                  </h6>
+                  <p class="video-card-text">by Vegito1089</p>
+                </div>
+                <img class="video-img" src="assets/vid-4.webp" alt="" />
+              </div>
+            </div>
+
+            <div
+              class="col-sm-6 col-md-4 col-lg-3 mb-4 d-flex align-items-stretch"
+            >
+              <div class="video-card">
+                <div class="video-card-body d-flex flex-column">
+                  <h6 class="video-card-title mb-1">Creepy Movie Sonic</h6>
+                  <p class="video-card-text">by echelon</p>
+                </div>
+                <img class="video-img" src="assets/vid-1.webp" alt="" />
+              </div>
+            </div>
+
+            <div
+              class="col-sm-6 col-md-4 col-lg-3 mb-4 d-flex align-items-stretch"
+            >
+              <div class="video-card">
+                <div class="video-card-body d-flex flex-column">
+                  <h6 class="video-card-title mb-1">
+                    Samuel L Jackson (Pulp Fiction) #1
+                  </h6>
+                  <p class="video-card-text">by echelon</p>
+                </div>
+                <img class="video-img" src="assets/vid-2.webp" alt="" />
+              </div>
+            </div>
+
+            <div
+              class="col-sm-6 col-md-4 col-lg-3 mb-4 d-flex align-items-stretch"
+            >
+              <div class="video-card">
+                <div class="video-card-body d-flex flex-column">
+                  <h6 class="video-card-title mb-1">Creepy Movie Sonic</h6>
+                  <p class="video-card-text">by echelon</p>
+                </div>
+                <img class="video-img" src="assets/vid-3.webp" alt="" />
+              </div>
+            </div>
+
+            <div
+              class="col-sm-6 col-md-4 col-lg-3 mb-4 d-flex align-items-stretch"
+            >
+              <div class="video-card">
+                <div class="video-card-body d-flex flex-column">
+                  <h6 class="video-card-title mb-1">Creepy Movie Sonic</h6>
+                  <p class="video-card-text">by echelon</p>
+                </div>
+                <img class="video-img" src="assets/vid-4.webp" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="container">
+        <hr />
+      </div>
+
+      <footer class="d-flex flex-column container py-5 gap-4">
+        <div
+          class="d-flex flex-column flex-lg-row align-items-center justify-content-center gap-3"
+        >
+          <a class="footer-link" href="#">Text to Speech</a>
+          <a class="footer-link" href="#">Video</a>
+          <a class="footer-link" href="#">Upload</a>
+          <a class="footer-link" href="#">Leaderboard</a>
+          <a class="footer-link" href="#">Patrons</a>
+          <a class="footer-link" href="#">Feed</a>
+          <a class="footer-link" href="#">API Docs</a>
+          <a class="footer-link" href="#">About Us</a>
+          <a class="footer-link" href="#">Terms of Use</a>
+        </div>
+        <div class="d-flex justify-content-center gap-4">
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-discord"></i
+          ></a>
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-twitch"></i
+          ></a>
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-twitter"></i
+          ></a>
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-facebook"></i
+          ></a>
+          <a class="social-icon" href="#"
+            ><i class="fa-brands fa-patreon"></i
+          ></a>
+        </div>
+        <div class="d-flex justify-content-center">
+          Built by&nbsp<a class="footer-link" href="#">echelon</a>&nbspin
+          Atlanta.
+        </div>
+      </footer>
+    </div>
+
+    <!-- Scripts -->
+    <script
+      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
+      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
+      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+      crossorigin="anonymous"
+    ></script>
+
+    <script>
+      ScrollReveal().reveal(".ani1", { delay: 100, distance: "20px" });
+      ScrollReveal().reveal(".ani2", { delay: 200, distance: "20px" });
+      ScrollReveal().reveal(".ani3", { delay: 250, distance: "20px" });
+      ScrollReveal().reveal(".ani4", { delay: 150, distance: "20px" });
+      ScrollReveal().reveal(".panel", { delay: 0, distance: "100px" });
+    </script>
+
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script type="text/javascript">
+      particlesJS("particles-js", {
+        particles: {
+          number: {
+            value: 160,
+            density: {
+              enable: true,
+              value_area: 800,
+            },
+          },
+          color: {
+            value: "#ffffff",
+          },
+          shape: {
+            type: "circle",
+            stroke: {
+              width: 0,
+              color: "#000000",
+            },
+            polygon: {
+              nb_sides: 5,
+            },
+            image: {
+              src: "img/github.svg",
+              width: 100,
+              height: 100,
+            },
+          },
+          opacity: {
+            value: 0.1,
+            random: false,
+            anim: {
+              enable: false,
+              speed: 1,
+              opacity_min: 0,
+              sync: false,
+            },
+          },
+          size: {
+            value: 4,
+            random: true,
+            anim: {
+              enable: false,
+              speed: 4,
+              size_min: 0.3,
+              sync: false,
+            },
+          },
+          line_linked: {
+            enable: false,
+            distance: 150,
+            color: "#ffffff",
+            opacity: 0.4,
+            width: 1,
+          },
+          move: {
+            enable: true,
+            speed: 0.5,
+            direction: "top",
+            random: true,
+            straight: false,
+            out_mode: "out",
+            bounce: false,
+            attract: {
+              enable: false,
+              rotateX: 600,
+              rotateY: 600,
+            },
+          },
+        },
+        interactivity: {
+          detect_on: "canvas",
+          events: {
+            onhover: {
+              enable: false,
+              mode: "bubble",
+            },
+            onclick: {
+              enable: false,
+              mode: "repulse",
+            },
+            resize: true,
+          },
+          modes: {
+            grab: {
+              distance: 400,
+              line_linked: {
+                opacity: 1,
+              },
+            },
+            bubble: {
+              distance: 250,
+              size: 0,
+              duration: 2,
+              opacity: 0,
+              speed: 3,
+            },
+            repulse: {
+              distance: 400,
+              duration: 0.4,
+            },
+            push: {
+              particles_nb: 4,
+            },
+            remove: {
+              particles_nb: 2,
+            },
+          },
+        },
+        retina_detect: true,
+      });
+    </script>
+  </body>
+</html>