diff --git a/packages/storyteller-home/src/App.scss b/packages/storyteller-home/src/App.scss
index da372570d9..2fbcfeaca5 100644
--- a/packages/storyteller-home/src/App.scss
+++ b/packages/storyteller-home/src/App.scss
@@ -313,7 +313,7 @@ p {
   border-radius: 12px;
   transform: translate3d(0px, 0px, 0px) rotate(45deg);
   z-index: 5;
-  opacity: 0.6;
+  opacity: 0;
 }
 
 .shape-2 {
@@ -326,7 +326,7 @@ p {
   top: -10%;
   right: 18%;
   z-index: 1;
-  opacity: 0.6;
+  opacity: 0;
 }
 
 .shape-3-container {
@@ -342,7 +342,7 @@ p {
   border-radius: 12px;
   transform: translate3d(0px, 0px, 0px) rotate(45deg);
   z-index: 5;
-  opacity: 0.6;
+  opacity: 0;
 }
 
 .shape-4-container {
@@ -358,7 +358,7 @@ p {
   border-radius: 10px;
   transform: translate3d(0px, 0px, 0px) rotate(45deg);
   z-index: 5;
-  opacity: 0.6;
+  opacity: 0;
 }
 
 .zi-1 {
@@ -982,6 +982,16 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
   --swiper-theme-color: #fa6b68 !important;
 }
 
+#sub-title {
+  opacity: 0;
+  transform: translate(8rem, 0);
+}
+
+#hero-img {
+  opacity: 0;
+  transform: translate(0, 200px);
+}
+
 @media (max-width: 1199.98px) {
   .hero-img {
     min-width: 1550px;
diff --git a/packages/storyteller-home/src/common/Footer.tsx b/packages/storyteller-home/src/common/Footer.tsx
index c6374b8ef3..03b7bed812 100644
--- a/packages/storyteller-home/src/common/Footer.tsx
+++ b/packages/storyteller-home/src/common/Footer.tsx
@@ -17,16 +17,36 @@ function Footer(props: Props) {
         <div className="bg-dark-solid">
           <div className="container footer-top text-center">
             <div className="d-flex gap-4 justify-content-center p-4">
-              <a href="https://google.com" className="footer-social-icon">
+              <a
+                href="https://discord.gg/fakeyou"
+                className="footer-social-icon"
+                rel="noreferrer"
+                target="_blank"
+              >
                 <FontAwesomeIcon icon={faDiscord} />
               </a>
-              <a href="https://google.com" className="footer-social-icon">
+              <a
+                href="https://twitch.tv/FakeYouLabs"
+                className="footer-social-icon"
+                rel="noreferrer"
+                target="_blank"
+              >
                 <FontAwesomeIcon icon={faTwitch} />
               </a>
-              <a href="https://google.com" className="footer-social-icon">
+              <a
+                href="https://facebook.com/vocodes"
+                className="footer-social-icon"
+                rel="noreferrer"
+                target="_blank"
+              >
                 <FontAwesomeIcon icon={faFacebook} />
               </a>
-              <a href="https://google.com" className="footer-social-icon">
+              <a
+                href="https://twitter.com/intent/follow?screen_name=FakeYouApp"
+                className="footer-social-icon"
+                rel="noreferrer"
+                target="_blank"
+              >
                 <FontAwesomeIcon icon={faTwitter} />
               </a>
             </div>
diff --git a/packages/storyteller-home/src/common/TopNav.tsx b/packages/storyteller-home/src/common/TopNav.tsx
index 8872422bd7..7184ae6a75 100644
--- a/packages/storyteller-home/src/common/TopNav.tsx
+++ b/packages/storyteller-home/src/common/TopNav.tsx
@@ -52,11 +52,9 @@ function TopNav(props: Props) {
   const menuToggle = () => {
     setMobileMenuOpen(!mobileMenuOpen);
   };
-
   const hamburgerClassNames = mobileMenuOpen
     ? "button_container active"
     : "button_container";
-
   const menuClassNames = mobileMenuOpen ? "overlay open" : "overlay";
 
   useEffect(() => {
@@ -108,9 +106,7 @@ function TopNav(props: Props) {
           </ul>
 
           <div className="col-md-3 text-end">
-            <a className="btn btn-primary fs-6" href="#about" data-scroll-to>
-              Contact
-            </a>
+            <button className="btn btn-primary fs-6">Contact</button>
           </div>
         </div>
 
@@ -166,6 +162,7 @@ function TopNav(props: Props) {
           </ul>
         </div>
       </div>
+
       <a href="#home" className={backToTop} data-scroll-to>
         <div className="btt-shape"></div>
         Back to Top
diff --git a/packages/storyteller-home/src/pages/index/IndexPage.tsx b/packages/storyteller-home/src/pages/index/IndexPage.tsx
index 507a403de8..b341ab1693 100644
--- a/packages/storyteller-home/src/pages/index/IndexPage.tsx
+++ b/packages/storyteller-home/src/pages/index/IndexPage.tsx
@@ -33,21 +33,13 @@ import "swiper/css/pagination";
 import { Autoplay, Pagination } from "swiper";
 
 function IndexPage() {
+  // Title Animation
   useEffect(() => {
     const splitTitle = new SplitType("#hero-title", {
       types: "chars",
       charClass: "title-split",
     });
 
-    gsap.to(splitTitle.chars, {
-      delay: 0.2,
-      duration: 0.4,
-      y: 0,
-      opacity: 1,
-      stagger: 0.03,
-      ease: "expo",
-    });
-
     const splitTitleOutline = new SplitType("#hero-title-outline", {
       types: "words",
       wordClass: "title-outline-split",
@@ -55,15 +47,60 @@ function IndexPage() {
 
     console.log(splitTitleOutline);
 
-    gsap.to(splitTitleOutline.words, {
-      delay: 0.25,
-      duration: 0.8,
+    var tl = gsap.timeline({ delay: 0.2 });
+    tl.to(splitTitle.chars, {
+      delay: 0.2,
+      duration: 0.4,
       y: 0,
-      scale: 1,
       opacity: 1,
-      stagger: 0,
+      stagger: 0.03,
       ease: "expo",
     });
+    tl.to(
+      splitTitleOutline.words,
+      {
+        delay: 0,
+        duration: 0.8,
+        y: 0,
+        scale: 1,
+        opacity: 1,
+        ease: "expo",
+      },
+      "<"
+    );
+    tl.to(
+      "#sub-title",
+      {
+        delay: 0.4,
+        duration: 0.8,
+        x: 0,
+        scale: 1,
+        opacity: 1,
+        ease: "expo",
+      },
+      "<"
+    );
+    tl.to(
+      "#hero-img",
+      {
+        duration: 1,
+        y: 0,
+        opacity: 1,
+        ease: "expo",
+      },
+      0.2
+    );
+    tl.to(
+      ".shape-2, .shape-1, .shape-3, .shape-4",
+      {
+        duration: 0.4,
+        y: 0,
+        scale: 1,
+        opacity: 0.6,
+        ease: "expo",
+      },
+      0.4
+    );
   }, []);
 
   return (
@@ -96,7 +133,10 @@ function IndexPage() {
                 </span>
               </h1>
 
-              <div className="d-flex flex-column align-items-center align-items-xl-end">
+              <div
+                className="d-flex flex-column align-items-center align-items-xl-end"
+                id="sub-title"
+              >
                 <p
                   className="lead hero-sub-title fw-normal opacity-75"
                   data-scroll
@@ -108,6 +148,7 @@ function IndexPage() {
                   AI cloud production studio.
                 </p>
                 <div
+                  id="hero-btn"
                   data-scroll
                   data-scroll-speed="-5"
                   data-scroll-direction="horizontal"
@@ -150,6 +191,7 @@ function IndexPage() {
 
           <div className="d-flex justify-content-center">
             <img
+              id="hero-img"
               className="hero-img"
               src="/hero/hero-img.webp"
               alt="Storyteller HyperJail"
@@ -164,35 +206,43 @@ function IndexPage() {
             data-scroll-position="top"
           >
             <Tippy content="Discord" placement="right">
-              <a href="https://discord.gg/fakeyou">
+              <a
+                href="https://discord.gg/fakeyou"
+                rel="noreferrer"
+                target="_blank"
+              >
                 <FontAwesomeIcon icon={faDiscord} />
               </a>
             </Tippy>
             <Tippy content="Twitch" placement="right">
-              <a href="/">
+              <a
+                href="https://twitch.tv/FakeYouLabs"
+                rel="noreferrer"
+                target="_blank"
+              >
                 <FontAwesomeIcon icon={faTwitch} />
               </a>
             </Tippy>
             <Tippy content="Facebook" placement="right">
-              <a href="/">
+              <a
+                href="https://facebook.com/vocodes"
+                rel="noreferrer"
+                target="_blank"
+              >
                 <FontAwesomeIcon icon={faFacebook} />
               </a>
             </Tippy>
             <Tippy content="Twitter" placement="right">
-              <a href="/">
+              <a
+                href="https://twitter.com/intent/follow?screen_name=FakeYouApp"
+                rel="noreferrer"
+                target="_blank"
+              >
                 <FontAwesomeIcon icon={faTwitter} />
               </a>
             </Tippy>
           </div>
 
-          <div
-            className="shape-1-container"
-            data-scroll
-            data-scroll-speed="4"
-            data-scroll-position="top"
-          >
-            <div className="shape-1"></div>
-          </div>
           <div className="shape-2"></div>
           <div
             className="shape-3-container"
@@ -202,6 +252,15 @@ function IndexPage() {
           >
             <div className="shape-3"></div>
           </div>
+          <div
+            className="shape-1-container"
+            data-scroll
+            data-scroll-speed="4"
+            data-scroll-position="top"
+          >
+            <div className="shape-1"></div>
+          </div>
+
           <div
             className="shape-4-container"
             data-scroll
@@ -232,7 +291,7 @@ function IndexPage() {
             <h1 className="fw-bold display-4 about-title mt-5">
               You can run the new Hollywood and top the Billboard Hot 100
             </h1>
-            <h4 className="fw-normal opacity-75 mt-3">
+            <h4 className="fw-semibold opacity-75 mt-4">
               Our technology can turn anyone into a director, musician, or movie
               star.
             </h4>
@@ -364,9 +423,9 @@ function IndexPage() {
               </div>
               <div className="col-lg-7 d-flex flex-column justify-content-center">
                 <h1 className="fw-bold display-5">Voice Changing</h1>
-                <h6 className="fw-semibold fs-5 opacity-75 mb-4">
+                <h4 className="fw-semibold opacity-75 mb-4">
                   Now you can sound like someone else
-                </h6>
+                </h4>
                 <p className="mt-3">
                   Use offline (studio quality) or real time voice changing to
                   re-dub your film or give your live performers a new character.
@@ -464,9 +523,9 @@ function IndexPage() {
               </div>
               <div className="col-lg-7 d-flex flex-column justify-content-center">
                 <h1 className="fw-bold display-5">FakeYou</h1>
-                <h6 className="fw-semibold fs-5 opacity-75 mb-4">
+                <h4 className="fw-semibold opacity-75 mb-4">
                   Used by millions of people every month
-                </h6>
+                </h4>
                 <p className="mt-3">
                   We've built a social platform for deep learning and generative
                   models. FakeYou is a place where creators can upload and
@@ -540,9 +599,9 @@ function IndexPage() {
               </div>
               <div className="col-lg-7 d-flex flex-column justify-content-center">
                 <h1 className="fw-bold display-5">Storyteller Stream</h1>
-                <h6 className="fw-semibold fs-5 opacity-75 mb-4">
+                <h4 className="fw-semibold opacity-75 mb-4">
                   Twitch Streamers and Creators can engage and monetize
-                </h6>
+                </h4>
                 <p className="mt-3">
                   It’s tough to build an audience on Twitch. It's even tougher
                   to earn an income. We've built the most comprehensive and
@@ -580,9 +639,9 @@ function IndexPage() {
               </div>
               <div className="col-lg-7 d-flex flex-column justify-content-center">
                 <h1 className="fw-bold display-5">Storyteller Engine</h1>
-                <h6 className="fw-semibold fs-5 opacity-75 mb-4">
+                <h4 className="fw-semibold opacity-75 mb-4">
                   A fully 3D virtual set for your stream or film
-                </h6>
+                </h4>
                 <p className="mt-3">
                   Our community contributes sets, character models, props,
                   events, and more. Use motion or volumetric capture. Your
@@ -713,10 +772,9 @@ function IndexPage() {
               </div>
               <div className="col-lg-7 d-flex flex-column justify-content-center">
                 <h1 className="fw-bold display-5">Storyteller VoxelCam</h1>
-                <h6 className="fw-semibold fs-5 opacity-75 mb-4">
-                  Volumetric capture for your stream, and soon for your film
-                  set.
-                </h6>
+                <h4 className="fw-semibold opacity-75 mb-4">
+                  Volumetric capture for your stream, and for your film set.
+                </h4>
                 <p className="mt-3">
                   Webcams are boring and flat. You can use our volumetric camera
                   in-stream to make your personality come to life. This system
@@ -724,12 +782,12 @@ function IndexPage() {
                 </p>
                 <div>
                   <a
-                    href="https://fakeyou.com"
+                    href="https://discord.gg/fakeyou"
                     rel="noreferrer"
                     target="_blank"
                     className="btn btn-primary mt-4"
                   >
-                    <span>Visit Storyteller.stream</span>
+                    <span>Ask us in Discord</span>
                   </a>
                 </div>
               </div>
@@ -747,7 +805,7 @@ function IndexPage() {
 
             <h2 className="text-center mt-5 pt-5 fw-bold">Screenshots</h2>
 
-            <div className="row gx-4 gy-4 my-5 text-center">
+            <div className="row gx-4 gy-4 my-4 text-center">
               <div className="col-12 col-sm-4">
                 <div>
                   <img
@@ -797,7 +855,7 @@ function IndexPage() {
             <Swiper
               loop={true}
               autoplay={{
-                delay: 5000,
+                delay: 6000,
                 disableOnInteraction: false,
               }}
               slidesPerView={1.1}