diff --git a/packages/storyteller.io/public/images/team/placeholder-pfp.jpg b/packages/storyteller.io/public/images/team/placeholder-pfp.jpg
new file mode 100644
index 0000000000..3fe2058443
Binary files /dev/null and b/packages/storyteller.io/public/images/team/placeholder-pfp.jpg differ
diff --git a/packages/storyteller.io/public/index.html b/packages/storyteller.io/public/index.html
index 7da81c079a..22a40219fb 100644
--- a/packages/storyteller.io/public/index.html
+++ b/packages/storyteller.io/public/index.html
@@ -39,7 +39,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Storyteller. Stream tech.</title>
+    <title>Storyteller AI — The Future of Storytelling</title>
 
     <!-- Twitter, Discord, etc. -->
     <meta
diff --git a/packages/storyteller.io/src/App.scss b/packages/storyteller.io/src/App.scss
index 563716eec6..fe8b38e730 100644
--- a/packages/storyteller.io/src/App.scss
+++ b/packages/storyteller.io/src/App.scss
@@ -380,8 +380,9 @@ p {
 
 .shape-1-container {
   position: absolute;
-  bottom: 48%;
+  bottom: 80%;
   left: 18%;
+  z-index: 5;
 }
 .shape-1 {
   width: 140px;
@@ -390,7 +391,6 @@ p {
   border-radius: 12px;
   transform: translate3d(0px, 0px, 0px) rotate(45deg);
   z-index: 5;
-  opacity: 0;
 }
 
 .shape-2 {
@@ -403,12 +403,11 @@ p {
   top: -20%;
   right: 18%;
   z-index: 1;
-  opacity: 0;
 }
 
 .shape-3-container {
   position: absolute;
-  bottom: 25%;
+  bottom: 60%;
   right: 25%;
 }
 
@@ -419,12 +418,11 @@ p {
   border-radius: 12px;
   transform: translate3d(0px, 0px, 0px) rotate(45deg);
   z-index: 5;
-  opacity: 0;
 }
 
 .shape-4-container {
   position: absolute;
-  bottom: 16%;
+  bottom: 36%;
   left: 25%;
 }
 
@@ -435,7 +433,6 @@ p {
   border-radius: 10px;
   transform: translate3d(0px, 0px, 0px) rotate(45deg);
   z-index: 5;
-  opacity: 0;
 }
 
 .zi-1 {
@@ -532,14 +529,14 @@ p {
   margin-left: 1.2rem;
   font-size: 26px;
   position: absolute;
-  top: 50%;
+  top: 36%;
 
   a {
-    color: rgba($white, 0.6);
+    color: rgba($white, 0.5);
     transition: 0.3s;
 
     &:hover {
-      color: lighten($white, 10%);
+      color: $primary;
       transform: translateX(2px);
     }
   }
@@ -663,15 +660,19 @@ p {
   opacity: 0.4;
 }
 
+.divider-logo-container {
+  margin-top: 220px;
+}
+
 .divider-logo {
-  height: 220px;
-  margin-top: 80px;
-  position: absolute;
+  height: 160px;
+  margin-top: -100px;
+  margin-bottom: 40px;
   transition: 0.4s;
 
-  &:hover {
-    transform: scale(1.2);
-  }
+  // &:hover {
+  //   transform: scale(1.2);
+  // }
 }
 
 .marquee-title {
@@ -693,9 +694,9 @@ p {
 }
 
 .footer-bottom {
-  padding-top: 1.2rem;
-  padding-bottom: 1.2rem;
-  font-size: 13px;
+  padding-top: 1.6rem;
+  padding-bottom: 1.6rem;
+  font-size: 14px;
   background: rgb(47, 47, 75);
 }
 
@@ -719,7 +720,7 @@ p {
 
 .footer-social-icon {
   background: rgb(47, 47, 75);
-  border-radius: 10px;
+  border-radius: 8px;
   height: 50px;
   width: 50px;
   display: flex;
@@ -727,14 +728,13 @@ p {
   justify-content: center;
   color: $white;
   transition: 0.3s;
-  border: 2px solid;
-  border-color: rgba($white, 0);
+  border: 1px solid;
+  border-color: rgba($white, 0.05);
   font-size: 20px;
 
   &:hover {
     color: $white;
-    background: lighten(rgb(47, 47, 75), 10%);
-    transform: rotate(45deg);
+    background: $primary;
   }
 }
 
@@ -761,6 +761,11 @@ p {
     background: lighten(#2c2c40, 8%);
     opacity: 0.4;
   }
+
+  &.small {
+    width: 160px;
+    height: 160px;
+  }
 }
 
 .tts-demo {
@@ -1088,8 +1093,46 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
   --swiper-theme-color: #fa6b68 !important;
 }
 
-.contact-container {
-  max-width: 700px;
+.contact-email {
+  cursor: pointer;
+  transition: all 0.4s;
+  display: inline-block;
+  position: relative;
+  font-weight: 700;
+  z-index: 2;
+  color: $white;
+  font-family: "Poppins", sans-serif;
+  text-decoration: none;
+
+  &:hover {
+    transform: scale(1.05);
+    color: $primary;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    transform: scaleX(0);
+    height: 6px;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    background-color: $primary;
+    transform-origin: bottom right;
+    transition: transform 0.25s ease-out;
+  }
+
+  &:hover::after {
+    transform: scaleX(1);
+    transform-origin: bottom left;
+  }
+}
+
+.img-team {
+  border-radius: 8px;
+  border: 1px solid;
+  border-color: rgba(#4d4d66, 0.8);
 }
 
 @media (max-width: 1199.98px) {
@@ -1262,6 +1305,10 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
       padding: 2rem;
     }
   }
+
+  .contact-email {
+    font-size: 2rem;
+  }
 }
 
 #sub-title {
@@ -1269,17 +1316,22 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
   transform: translate(8rem, 0);
 }
 
-#pascal {
+#hero-btn {
   opacity: 0;
-  transform: translate(0, 300px);
+  transform: translate(4rem, 0);
 }
 
-#basilisk {
-  opacity: 0;
-  transform: translate(300px, 0);
-}
+// #pascal {
+//   opacity: 0;
+//   transform: translate(0, 300px);
+// }
 
-#roko {
-  opacity: 0;
-  transform: translate(-300px, 0);
-}
+// #basilisk {
+//   opacity: 0;
+//   transform: translate(300px, 0);
+// }
+
+// #roko {
+//   opacity: 0;
+//   transform: translate(-300px, 0);
+// }
diff --git a/packages/storyteller.io/src/common/Footer.tsx b/packages/storyteller.io/src/common/Footer.tsx
index fd40495c8e..d3cafef0cb 100644
--- a/packages/storyteller.io/src/common/Footer.tsx
+++ b/packages/storyteller.io/src/common/Footer.tsx
@@ -16,7 +16,7 @@ function Footer(props: Props) {
       <footer data-scroll-section>
         <div className="bg-dark-solid">
           <div className="container footer-top text-center">
-            <div className="d-flex gap-4 justify-content-center p-4">
+            <div className="d-flex gap-4 justify-content-center p-4 pb-5">
               <a
                 href="https://discord.gg/fakeyou"
                 className="footer-social-icon"
@@ -53,13 +53,14 @@ function Footer(props: Props) {
           </div>
         </div>
         <div className="footer-bottom">
-          <div className="container d-flex flex-column flex-md-row text-center text-md-start gap-3">
-            <div className="flex-grow-1">
-              Copyright &copy; 2020 &mdash; 2023 Storyteller AI (makers of
-              FakeYou)
+          <div className="container d-flex flex-column text-center gap-2">
+            <div>
+              Copyright &copy; 2023 Storyteller AI. All Rights Reserved.
             </div>
 
-            <GitSha />
+            <div className="opacity-50">
+              <GitSha />
+            </div>
           </div>
         </div>
       </footer>
diff --git a/packages/storyteller.io/src/common/TopNav.tsx b/packages/storyteller.io/src/common/TopNav.tsx
index 272ba23abb..4e7ef3cb98 100644
--- a/packages/storyteller.io/src/common/TopNav.tsx
+++ b/packages/storyteller.io/src/common/TopNav.tsx
@@ -173,7 +173,7 @@ function TopNav(props: Props) {
             <li>
               <a
                 id="nav-btn-5"
-                href="#mentions"
+                href="#team"
                 className="nav-link"
                 data-scroll-to
               >
diff --git a/packages/storyteller.io/src/pages/index/IndexPage.tsx b/packages/storyteller.io/src/pages/index/IndexPage.tsx
index c358ddeac5..d42bd71882 100644
--- a/packages/storyteller.io/src/pages/index/IndexPage.tsx
+++ b/packages/storyteller.io/src/pages/index/IndexPage.tsx
@@ -36,7 +36,6 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/pagination";
 import { Autoplay, Pagination } from "swiper";
-import { useForm, ValidationError } from "@formspree/react";
 
 function IndexPage() {
   // Title Animation
@@ -54,41 +53,10 @@ function IndexPage() {
     console.log(splitTitleOutline);
 
     var tl = gsap.timeline({ delay: 0.2 });
-    tl.to(
-      "#pascal",
-      {
-        delay: 0.2,
-        duration: 1.2,
-        y: 0,
-        opacity: 1,
-        ease: "expo",
-      },
-      "<"
-    );
-    tl.to(
-      "#roko",
-      {
-        duration: 1.2,
-        x: 0,
-        opacity: 1,
-        ease: "expo",
-      },
-      "<"
-    );
-    tl.to(
-      "#basilisk",
-      {
-        duration: 1.2,
-        x: 0,
-        opacity: 1,
-        ease: "expo",
-      },
-      "<"
-    );
     tl.to(
       splitTitle.chars,
       {
-        delay: 0.3,
+        delay: 0,
         duration: 0.4,
         y: 0,
         opacity: 1,
@@ -101,7 +69,7 @@ function IndexPage() {
       splitTitleOutline.words,
       {
         delay: 0,
-        duration: 0.8,
+        duration: 0.5,
         y: 0,
         scale: 1,
         opacity: 1,
@@ -121,38 +89,20 @@ function IndexPage() {
       },
       "<"
     );
-
     tl.to(
-      ".shape-2, .shape-1, .shape-3, .shape-4",
+      "#hero-btn",
       {
-        duration: 1,
-        y: 0,
+        delay: 0.2,
+        duration: 0.8,
+        x: 0,
         scale: 1,
-        opacity: 0.6,
+        opacity: 1,
         ease: "expo",
       },
-      0.4
+      "<"
     );
   }, []);
 
-  const [state, handleSubmit] = useForm("xnqrvjbo");
-  if (state.succeeded) {
-    const reset = document.getElementById("reset");
-    const success = document.getElementById("success_message");
-
-    if (reset) reset.click();
-
-    setTimeout(function () {
-      if (success)
-        success.innerHTML =
-          '<div class="alert alert-success fw-semibold w-100 mb-4">Thank you for your message!</div>';
-    }, 500);
-
-    setTimeout(function () {
-      if (success) success.innerHTML = "";
-    }, 5000);
-  }
-
   return (
     <div data-scroll-section data-scroll-repeat="true">
       <div
@@ -188,7 +138,7 @@ function IndexPage() {
                   The Future of Storytelling
                 </span>
               </h1>
-              <p className="hero-sub-title">
+              <p id="sub-title" className="hero-sub-title">
                 We’re scientists, engineers, and creatives building the future
                 AI cloud production studio.
               </p>
@@ -343,14 +293,6 @@ function IndexPage() {
             </div>
           </div>
         </div>
-
-        {/* <div className="w-100 d-flex justify-content-center">
-            <img
-              src="/logo/Storyteller-Icon-Logo.png"
-              alt="Storyteller Logo Icon"
-              className="divider-logo"
-            />
-          </div> */}
       </div>
 
       <div className="bg-dark section-2">
@@ -526,11 +468,11 @@ function IndexPage() {
         </div>
 
         <div className="shape-2"></div>
-        <div className="shape-3-container" data-scroll data-scroll-speed="2">
+        <div className="shape-3-container" data-scroll data-scroll-speed="3">
           <div className="shape-3"></div>
         </div>
 
-        <div className="shape-1-container" data-scroll data-scroll-speed="4">
+        <div className="shape-1-container" data-scroll data-scroll-speed="3">
           <div className="shape-1"></div>
         </div>
 
@@ -1062,6 +1004,99 @@ function IndexPage() {
           </div>
         </div> */}
 
+      <div id="team" className="bg-light section-2">
+        <div>
+          <Marquee gradient={false} speed={120}>
+            <h1 className="marquee-title d-flex gap-3 gap-md-4 gap-lg-5 mt-0">
+              <span className="text-outline">Our Team</span>
+              <span className="text-red">\</span>
+              <span>Our Team</span>
+              <span className="text-red">\</span>
+              <span className="text-outline">Our Team</span>
+              <span className="text-red">\</span>
+              <span>Our Team</span>
+              <span className="text-red me-3 me-md-4 me-lg-5">\</span>
+            </h1>
+          </Marquee>
+        </div>
+        <div className="container mt-5 pt-5">
+          <div className="row g-4 g-md-5">
+            <div className="col-6 col-md-3">
+              <img
+                src="/images/team/placeholder-pfp.jpg"
+                className="img-fluid img-team mb-3"
+                alt=""
+              />
+              <p className="fw-semibold opacity-100 mb-0">Brandon</p>
+              <p>Founder / Backend</p>
+            </div>
+            <div className="col-6 col-md-3">
+              <img
+                src="/images/team/placeholder-pfp.jpg"
+                className="img-fluid img-team mb-3"
+                alt=""
+              />
+              <p className="fw-semibold opacity-100 mb-0">Scott</p>
+              <p>3D Artist</p>
+            </div>
+            <div className="col-6 col-md-3">
+              <img
+                src="/images/team/placeholder-pfp.jpg"
+                className="img-fluid img-team mb-3"
+                alt=""
+              />
+              <p className="fw-semibold opacity-100 mb-0">Paul</p>
+              <p>ML / Backend</p>
+            </div>
+            <div className="col-6 col-md-3">
+              <img
+                src="/images/team/placeholder-pfp.jpg"
+                className="img-fluid img-team mb-3"
+                alt=""
+              />
+              <p className="fw-semibold opacity-100 mb-0">Bombay</p>
+              <p>Web Designer / Frontend </p>
+            </div>
+            <div className="col-6 col-md-3">
+              <img
+                src="/images/team/placeholder-pfp.jpg"
+                className="img-fluid img-team mb-3"
+                alt=""
+              />
+              <p className="fw-semibold opacity-100 mb-0">Michael</p>
+              <p>ML / Backend</p>
+            </div>
+            <div className="col-6 col-md-3">
+              <img
+                src="/images/team/placeholder-pfp.jpg"
+                className="img-fluid img-team mb-3"
+                alt=""
+              />
+              <p className="fw-semibold opacity-100 mb-0">Echelon</p>
+              <p>Founder / Backend Engineer</p>
+            </div>
+            <div className="col-6 col-md-3">
+              <img
+                src="/images/team/placeholder-pfp.jpg"
+                className="img-fluid img-team mb-3"
+                alt=""
+              />
+              <p className="fw-semibold opacity-100 mb-0">Echelon</p>
+              <p>Founder / Backend Engineer</p>
+            </div>
+            <div className="col-6 col-md-3">
+              <img
+                src="/images/team/placeholder-pfp.jpg"
+                className="img-fluid img-team mb-3"
+                alt=""
+              />
+              <p className="fw-semibold opacity-100 mb-0">Echelon</p>
+              <p>Founder / Backend Engineer</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="mentions" className="bg-light section-2">
         <div>
           <Marquee gradient={false} speed={120}>
@@ -1243,71 +1278,28 @@ function IndexPage() {
         </div>
       </div>
 
-      <div id="contact" className="bg-light section-2">
-        <div className="container contact-container">
-          <h1 className="text-center fw-bold display-5">Contact Us</h1>
-          <h4 className="text-center opacity-75 mb-5">
-            Send us a message and we'll get back to you!
-          </h4>
-
-          <div id="success_message"></div>
-          <form
-            id="contact_form"
-            onSubmit={handleSubmit}
-            className="col-12 col-md-6 card bg-dark-solid w-100"
-          >
-            <fieldset className="d-flex flex-column gap-3 w-100">
-              <input
-                id="name"
-                type="text"
-                name="name"
-                placeholder="Name*"
-                required
-                className="col-12 form-control"
-              />
-              <ValidationError
-                prefix="Name"
-                field="name"
-                errors={state.errors}
-              />
-              <input
-                id="email"
-                type="email"
-                name="email"
-                placeholder="Email*"
-                required
-                className="col-12 mt-2 form-control"
-              />
-              <ValidationError
-                prefix="Email"
-                field="email"
-                errors={state.errors}
-              />
-              <textarea
-                id="message"
-                name="message"
-                placeholder='Say "hi" here!'
-                required
-                className="col-12 mt-2 form-control"
-                cols={40}
-                rows={4}
-                style={{ resize: "none" }}
-              />
-              <ValidationError
-                prefix="Message"
-                field="message"
-                errors={state.errors}
-              />
-            </fieldset>
-            <button
-              type="submit"
-              className="btn btn-primary mt-4 col-12"
-              disabled={state.submitting}
+      <div id="contact" className="bg-light section-2 pb-0">
+        <div className="container text-center">
+          <h4 className="opacity-75 position-relative zi-2 mb-1">Contact Us</h4>
+          <div className="position-relative">
+            <a
+              href="mailto:hello@storyteller.ai"
+              className="display-1 contact-email"
             >
-              Submit
-            </button>
-            <input type="reset" id="reset" className="d-none" />
-          </form>
+              hello@storyteller.ai
+            </a>
+            <div className="shape-bg dark small"></div>
+          </div>
+        </div>
+
+        <div className="bg-dark-solid divider-logo-container">
+          <div className="w-100 d-flex justify-content-center">
+            <img
+              src="/logo/Storyteller-Icon-Logo.png"
+              alt="Storyteller Logo Icon"
+              className="divider-logo"
+            />
+          </div>
         </div>
       </div>
     </div>