diff --git a/.gitignore b/.gitignore
index f1537093b7..fd1d201408 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,4 +17,5 @@ yarn-error.log
 templates/storyteller-stream-green
 
 packages/fakeyou.com/.env
+packages/storyteller.io/.env
 packages/power.stream/.env
diff --git a/packages/storyteller.io/public/hero/brandon-hyperjail.webm b/packages/storyteller.io/public/hero/brandon-hyperjail.webm
new file mode 100644
index 0000000000..ff0b4bab7a
Binary files /dev/null and b/packages/storyteller.io/public/hero/brandon-hyperjail.webm differ
diff --git a/packages/storyteller.io/public/index.html b/packages/storyteller.io/public/index.html
index 6f859a9510..7da81c079a 100644
--- a/packages/storyteller.io/public/index.html
+++ b/packages/storyteller.io/public/index.html
@@ -73,8 +73,10 @@
     </script>
 
     <!-- Font -->
+    <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@300;400;500;600;700;800;900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
       rel="stylesheet"
     />
 
diff --git a/packages/storyteller.io/public/logo/storyteller_kitsune_logo_3000.png b/packages/storyteller.io/public/logo/storyteller_kitsune_logo_3000.png
deleted file mode 100644
index 294c3a5719..0000000000
Binary files a/packages/storyteller.io/public/logo/storyteller_kitsune_logo_3000.png and /dev/null differ
diff --git a/packages/storyteller.io/public/logo/storytellerai-logo.png b/packages/storyteller.io/public/logo/storytellerai-logo.png
new file mode 100644
index 0000000000..e2d5eea122
Binary files /dev/null and b/packages/storyteller.io/public/logo/storytellerai-logo.png differ
diff --git a/packages/storyteller.io/public/storyteller-nav-logo-mascot-pink.png b/packages/storyteller.io/public/storyteller-nav-logo-mascot-pink.png
deleted file mode 100644
index 0057c9bf51..0000000000
Binary files a/packages/storyteller.io/public/storyteller-nav-logo-mascot-pink.png and /dev/null differ
diff --git a/packages/storyteller.io/src/App.scss b/packages/storyteller.io/src/App.scss
index 546c0669ff..0d9b1ecb90 100644
--- a/packages/storyteller.io/src/App.scss
+++ b/packages/storyteller.io/src/App.scss
@@ -6,7 +6,8 @@ $button-text-color: #666;
 $primary: #fa6b68;
 $white: #ffffff;
 
-$body-font-family: "Fira Sans", serif;
+$heading-font-family: "Poppins", sans-serif;
+$body-font-family: "Fira Sans", sans-serif;
 
 html {
   // cursor: none;
@@ -19,15 +20,24 @@ html {
 
 body {
   font-family: $body-font-family;
-  font-weight: 300; // For Fira Sans
+  font-weight: 400;
   color: $white;
   background: rgb(47, 47, 75);
 }
 
+h1,
+h2,
+h3 {
+  font-family: $heading-font-family;
+  letter-spacing: -0.5px;
+  font-weight: 700;
+}
+
 p {
-  line-height: 1.6;
+  font-size: 16px;
+  line-height: 1.7;
   opacity: 0.8;
-  font-weight: 300;
+  font-weight: 400;
 }
 
 ::-moz-selection {
@@ -74,11 +84,40 @@ p {
     rgba(34, 34, 56, 1) 0%,
     rgba(23, 23, 37, 1) 100%
   );
-  height: 1200px;
+  height: 100vh;
   overflow: hidden;
   position: relative;
 }
 
+.bg-hero-2 {
+  background: rgb(34, 34, 56);
+  background: linear-gradient(
+    180deg,
+    rgba(34, 34, 56, 1) 0%,
+    rgba(23, 23, 37, 1) 100%
+  );
+  height: 925px;
+  overflow: hidden;
+  position: relative;
+}
+
+.bg-overlay {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(11, 12, 20, 0.6);
+  position: absolute;
+  top: 0;
+}
+
+.bg-video {
+  object-fit: cover;
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 #logo {
   transition: 0.3s all;
 
@@ -251,53 +290,87 @@ p {
   font-size: 16px;
 }
 
-.hero-title-container {
-  position: relative;
-}
-
 .hero-title {
-  font-size: 7.5rem;
-  font-weight: 900;
-  text-transform: uppercase;
+  font-size: 5.6rem;
+  font-weight: 700;
   width: 100%;
-  padding-top: 130px;
-  letter-spacing: 3px;
-  // text-shadow: 0px 10px 100px #171725;
+  // letter-spacing: 3px;
+  text-shadow: 0px 5px 12px rgba(#0d0d14, 0.2);
   z-index: 1;
-  white-space: nowrap;
-  position: relative;
+  // white-space: nowrap;
+  margin: 0;
+  line-height: 1.1;
 
   .hero-title-one {
     text-align: left;
     overflow: hidden;
+    margin: 0;
+    line-height: 1;
+    padding-bottom: 12px;
 
     span {
       color: $primary;
     }
   }
+}
 
-  .hero-title-two {
-    margin-top: -35px;
-    text-align: right;
-    overflow: hidden;
-  }
+.hero-title-container {
+  position: absolute;
+  bottom: 100px;
+  padding: 0;
 }
 
 .hero-sub-title {
-  max-width: 320px;
-  margin-top: -10px;
-  text-align: end;
-  font-size: 18px;
+  font-weight: 400;
+  font-size: 24px;
+  margin-top: -18px;
+  color: #e7e7e7;
+  line-height: 1.4;
 }
 
-.hero-title-outline {
-  position: absolute;
-  width: 100%;
-  transform: scale(1.72);
-  top: -44px;
-  overflow: hidden;
-  -webkit-text-stroke: 1px rgba($white, 0.06);
-}
+// .hero-title {
+//   font-size: 7.5rem;
+//   font-weight: 900;
+//   text-transform: uppercase;
+//   width: 100%;
+//   padding-top: 130px;
+//   // letter-spacing: 3px;
+//   // text-shadow: 0px 10px 100px #171725;
+//   z-index: 1;
+//   white-space: nowrap;
+//   position: relative;
+
+//   .hero-title-one {
+//     text-align: left;
+//     overflow: hidden;
+
+//     span {
+//       color: $primary;
+//     }
+//   }
+
+//   .hero-title-two {
+//     margin-top: -35px;
+//     text-align: right;
+//     overflow: hidden;
+//   }
+// }
+
+// .hero-sub-title {
+//   max-width: 320px;
+//   margin-top: -10px;
+//   text-align: end;
+//   font-size: 18px;
+// }
+
+// .hero-title-outline {
+//   position: absolute;
+//   width: 100%;
+//   transform: scale(1.72);
+//   top: -44px;
+//   overflow: hidden;
+//   -webkit-text-stroke: 1px rgba($white, 0.06);
+// }
 
 .text-outline {
   color: transparent;
@@ -326,7 +399,7 @@ p {
   border-radius: 16px;
   transform: translate3d(0px, 0px, 0px) rotate(45deg);
   position: absolute;
-  top: -10%;
+  top: -20%;
   right: 18%;
   z-index: 1;
   opacity: 0;
@@ -334,13 +407,13 @@ p {
 
 .shape-3-container {
   position: absolute;
-  bottom: 40%;
-  right: 26%;
+  bottom: 25%;
+  right: 25%;
 }
 
 .shape-3 {
-  width: 100px;
-  height: 100px;
+  width: 150px;
+  height: 150px;
   background: #2c2c40;
   border-radius: 12px;
   transform: translate3d(0px, 0px, 0px) rotate(45deg);
@@ -350,8 +423,8 @@ p {
 
 .shape-4-container {
   position: absolute;
-  bottom: 30%;
-  left: 32%;
+  bottom: 16%;
+  left: 25%;
 }
 
 .shape-4 {
@@ -413,7 +486,6 @@ p {
   background-color: #2f2f4a;
   width: 100%;
   height: 25%;
-  border-radius: 80px 80px 0 0;
 }
 
 .bg-light {
@@ -426,7 +498,7 @@ p {
 }
 
 .bg-dark {
-  background: rgb(23, 23, 37);
+  background: rgb(25, 25, 41);
   background: linear-gradient(
     180deg,
     rgba(23, 23, 37, 1) 0%,
@@ -462,11 +534,11 @@ p {
   top: 50%;
 
   a {
-    color: #7676a0;
+    color: rgba($white, 0.6);
     transition: 0.3s;
 
     &:hover {
-      color: lighten(#7676a0, 10%);
+      color: lighten($white, 10%);
       transform: translateX(2px);
     }
   }
@@ -602,13 +674,12 @@ p {
 }
 
 .marquee-title {
-  font-size: 7.5rem;
-  font-weight: 900;
-  text-transform: uppercase;
-  margin-top: 7.5rem;
+  font-size: 5.5rem;
+  font-weight: 800;
+  margin-top: 5.5rem;
 
   .text-outline {
-    -webkit-text-stroke: 2px rgba(#4d4d66, 1);
+    -webkit-text-stroke: 2px rgba(#5f5f7a, 1);
   }
 }
 
@@ -631,7 +702,7 @@ p {
   font-size: 10rem;
   color: rgba($white, 0);
   -webkit-text-stroke: 2px rgba(#4d4d66, 0.3);
-  letter-spacing: 3px;
+  // letter-spacing: 3px;
   font-weight: 900;
   margin: 0;
 }
@@ -1046,27 +1117,28 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
     border-radius: 0 0 0 0;
   }
 
-  .hero-title {
-    font-size: 8vw;
-    white-space: nowrap;
-    line-height: 1;
-    letter-spacing: normal;
+  // .hero-title {
+  //   font-size: 8vw;
+  //   white-space: nowrap;
+  //   line-height: 1;
+  //   // letter-spacing: normal;
 
-    .hero-title-one {
-      text-align: center;
-    }
+  //   .hero-title-one {
+  //     text-align: center;
+  //   }
 
-    .hero-title-two {
-      text-align: center;
-      margin: 0;
-    }
+  //   .hero-title-two {
+  //     text-align: center;
+  //     margin: 0;
+  //   }
+  // }
+
+  .hero-sub-title {
+    font-size: 18px;
   }
 
   .hero-sub-title {
-    max-width: 50%;
-    width: 100%;
-    margin-top: 10px;
-    text-align: center;
+    margin-top: 18px;
   }
 
   .lead {
@@ -1127,18 +1199,18 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
     height: 180px;
   }
 
-  .bg-hero {
-    min-height: 1020px;
-    max-height: 1020px;
-  }
+  // .bg-hero {
+  //   min-height: 1020px;
+  //   max-height: 1020px;
+  // }
 
   .hero-title {
     font-size: 11.5vw;
   }
 
-  .hero-sub-title {
-    max-width: 90%;
-  }
+  // .hero-sub-title {
+  //   max-width: 90%;
+  // }
 
   .shape-1-container {
     left: 12%;
diff --git a/packages/storyteller.io/src/common/TopNav.tsx b/packages/storyteller.io/src/common/TopNav.tsx
index d90a7b78e5..1f43d47281 100644
--- a/packages/storyteller.io/src/common/TopNav.tsx
+++ b/packages/storyteller.io/src/common/TopNav.tsx
@@ -75,9 +75,9 @@ function TopNav(props: Props) {
           >
             <img
               id="logo"
-              src="/logo/Storyteller-Logo.png"
+              src="/logo/storytellerai-logo.png"
               alt="Storyteller Logo"
-              height="36"
+              height="34"
               className="mb-2"
             />
           </a>
@@ -119,10 +119,10 @@ function TopNav(props: Props) {
           >
             <img
               id="logo"
-              src="/logo/Storyteller-Logo.png"
+              src="/logo/storytellerai-logo.png"
               alt="Storyteller Logo"
-              height="36"
-              className="mb-2"
+              height="30"
+              className="mt-2"
             />
           </a>
           <button
diff --git a/packages/storyteller.io/src/pages/index/IndexPage.tsx b/packages/storyteller.io/src/pages/index/IndexPage.tsx
index 9840a983f6..1280ea0bc0 100644
--- a/packages/storyteller.io/src/pages/index/IndexPage.tsx
+++ b/packages/storyteller.io/src/pages/index/IndexPage.tsx
@@ -153,88 +153,96 @@ function IndexPage() {
     <>
       <div id="home" data-scroll-section>
         <div className="bg-hero">
-          <div className="container">
-            <div className="hero-title-container">
-              <h1
-                id="hero-title"
-                className="hero-title d-flex flex-column text-center"
-              >
-                <span
-                  className="hero-title-one align-items-center zi-2"
-                  data-scroll
-                  data-scroll-speed="3"
-                  data-scroll-direction="horizontal"
-                  data-scroll-position="top"
-                >
-                  The <span>Future</span>
-                </span>
-                <span
-                  className="hero-title-two zi-2"
-                  data-scroll
-                  data-scroll-speed="-3"
-                  data-scroll-direction="horizontal"
-                  data-scroll-position="top"
-                >
-                  of Production
-                </span>
-              </h1>
-
-              <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
-                  data-scroll-speed="-4"
-                  data-scroll-direction="horizontal"
-                  data-scroll-position="top"
+          <video
+            className="bg-video"
+            src="/hero/brandon-hyperjail.webm"
+            autoPlay
+            loop
+            playsInline
+            muted
+          ></video>
+          <div className="bg-overlay">
+            <div className="container">
+              <div className="hero-title-container">
+                {/* Desktop Title */}
+                <h1
+                  id="hero-title"
+                  className="hero-title mb-0 d-none d-lg-block"
                 >
+                  <span className="hero-title-one align-items-center zi-2">
+                    The Future of Storytelling
+                  </span>
+                </h1>
+                {/* Mobile Title */}
+                <h1 className="hero-title d-lg-none">
+                  <span className="hero-title-one align-items-center zi-2">
+                    The Future of Storytelling
+                  </span>
+                </h1>
+                <p className="hero-sub-title">
                   We’re scientists, engineers, and creatives building the future
                   AI cloud production studio.
                 </p>
-                <div
-                  id="hero-btn"
-                  data-scroll
-                  data-scroll-speed="-5"
-                  data-scroll-direction="horizontal"
-                  data-scroll-position="top"
-                  className="zi-10 mt-2"
-                >
-                  <a className="btn btn-primary" href="#about" data-scroll-to>
-                    <span>Explore</span>
+                <div id="hero-btn" className="pt-4 mt-3">
+                  <a
+                    className="btn btn-primary d-inline-flex"
+                    href="#about"
+                    data-scroll-to
+                  >
+                    <span>Explore Storyteller</span>
                   </a>
                 </div>
               </div>
-
-              <div className="hero-title-outline noselect">
-                <h1
-                  id="hero-title-outline"
-                  className="hero-title d-flex flex-column text-center"
-                >
-                  <span
-                    className="hero-title-one align-items-center text-outline"
-                    data-scroll
-                    data-scroll-speed="-4"
-                    data-scroll-direction="horizontal"
-                    data-scroll-position="top"
-                  >
-                    The Future
-                  </span>
-                  <span
-                    className="hero-title-two text-outline"
-                    data-scroll
-                    data-scroll-speed="4"
-                    data-scroll-direction="horizontal"
-                    data-scroll-position="top"
-                  >
-                    of Production
-                  </span>
-                </h1>
-              </div>
             </div>
           </div>
 
+          <div
+            className="d-none d-xl-flex social-icons flex-column gap-4 align-items-center"
+            data-scroll
+            data-scroll-speed="8"
+            data-scroll-direction="horizontal"
+            data-scroll-position="top"
+          >
+            <Tippy content="Discord" placement="right">
+              <a
+                href={ThirdPartyLinks.FAKEYOU_DISCORD}
+                rel="noreferrer"
+                target="_blank"
+              >
+                <FontAwesomeIcon icon={faDiscord} />
+              </a>
+            </Tippy>
+            <Tippy content="Twitch" placement="right">
+              <a
+                href="https://twitch.tv/FakeYouLabs"
+                rel="noreferrer"
+                target="_blank"
+              >
+                <FontAwesomeIcon icon={faTwitch} />
+              </a>
+            </Tippy>
+            <Tippy content="Facebook" placement="right">
+              <a
+                href="https://facebook.com/vocodes"
+                rel="noreferrer"
+                target="_blank"
+              >
+                <FontAwesomeIcon icon={faFacebook} />
+              </a>
+            </Tippy>
+            <Tippy content="Twitter" placement="right">
+              <a
+                href="https://twitter.com/intent/follow?screen_name=FakeYouApp"
+                rel="noreferrer"
+                target="_blank"
+              >
+                <FontAwesomeIcon icon={faTwitter} />
+              </a>
+            </Tippy>
+          </div>
+        </div>
+
+        <div className="bg-hero-2 d-none d-lg-block">
           <div className="d-flex justify-content-center">
             {/* <img
               id="hero-img"
@@ -337,7 +345,7 @@ function IndexPage() {
           <div
             className="shape-3-container"
             data-scroll
-            data-scroll-speed="3"
+            data-scroll-speed="2"
             data-scroll-position="top"
           >
             <div className="shape-3"></div>
@@ -360,20 +368,21 @@ function IndexPage() {
             <div className="shape-4"></div>
           </div>
         </div>
+
         <div
           id="about"
           className="bg-light section section-pb-extra about-section"
         >
           <Marquee gradient={false} speed={100}>
-            <h1 className="marquee-title d-flex gap-3 gap-md-4 gap-lg-5">
+            <h1 className="marquee-title d-flex gap-3 gap-md-4 gap-lg-5 mt-4 mb-5">
               <span className="text-outline">Storyteller</span>
-              <span className="text-red">\\</span>
+              <span className="text-red">\</span>
               <span>Storyteller</span>
-              <span className="text-red">\\</span>
+              <span className="text-red">\</span>
               <span className="text-outline">Storyteller</span>
-              <span className="text-red">\\</span>
+              <span className="text-red">\</span>
               <span>Storyteller</span>
-              <span className="text-red me-3 me-md-4 me-lg-5">\\</span>
+              <span className="text-red me-3 me-md-4 me-lg-5">\</span>
             </h1>
           </Marquee>
 
@@ -381,7 +390,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-semibold opacity-75 mt-4">
+            <h4 className="fw-normal opacity-75 mt-4">
               Our technology can turn anyone into a director, musician, or movie
               star.
             </h4>
@@ -390,30 +399,6 @@ function IndexPage() {
           <div className="about-cards-container mt-4 mb-5">
             <div className="container text-center d-flex flex-column align-items-center">
               <div className="row gx-4 gy-5 pt-4 position-relative">
-                <div
-                  className="shape-5-container"
-                  data-scroll
-                  data-scroll-speed="4"
-                  data-scroll-position="top"
-                >
-                  <div className="shape-5"></div>
-                </div>
-                <div
-                  className="shape-6-container"
-                  data-scroll
-                  data-scroll-speed="4"
-                  data-scroll-position="top"
-                >
-                  <div className="shape-6"></div>
-                </div>
-                <div
-                  className="shape-7-container"
-                  data-scroll
-                  data-scroll-speed="3"
-                  data-scroll-position="top"
-                >
-                  <div className="shape-7"></div>
-                </div>
                 <div className="col-12 col-md-6 col-lg-3">
                   <p className="fw-normal card bg-dark-solid pt-5 about-card">
                     <FontAwesomeIcon icon={faMusic} className="about-icon" />
@@ -491,14 +476,14 @@ function IndexPage() {
           <div id="products">
             <Marquee gradient={false} speed={100}>
               <h1 className="marquee-title d-flex gap-3 gap-md-4 gap-lg-5">
-                <span>What we do</span>
-                <span className="text-red">\\</span>
-                <span className="text-outline">What we do</span>
-                <span className="text-red">\\</span>
-                <span>What we do</span>
-                <span className="text-red">\\</span>
-                <span className="text-outline">What we do</span>
-                <span className="text-red me-3 me-md-4 me-lg-5">\\</span>
+                <span>What We Do</span>
+                <span className="text-red">\</span>
+                <span className="text-outline">What We Do</span>
+                <span className="text-red">\</span>
+                <span>What We Do</span>
+                <span className="text-red">\</span>
+                <span className="text-outline">What We Do</span>
+                <span className="text-red me-3 me-md-4 me-lg-5">\</span>
               </h1>
             </Marquee>
           </div>
@@ -513,7 +498,7 @@ function IndexPage() {
               </div>
               <div className="col-lg-7 d-flex flex-column justify-content-center">
                 <h1 className="fw-bold display-5">Voice Changing</h1>
-                <h4 className="fw-semibold opacity-75 mb-4">
+                <h4 className="fw-normal opacity-75 mb-4">
                   Now you can sound like someone else
                 </h4>
                 <p className="mt-3">
@@ -541,11 +526,13 @@ function IndexPage() {
                 This is still an early beta. Voice quality will change and
                 improve substantially over time.
               </p>
-              <p className="text-center my-4 pt-5">
+              <p className="pt-5 opacity-100 mb-0">
                 <strong className="fw-semibold fs-5">Brandon</strong>
                 <FontAwesomeIcon icon={faArrowRight} className="mx-2" />
                 <strong className="fw-semibold fs-5">Donald Trump</strong>
                 <br />
+              </p>
+              <p className="text-center pb-3">
                 Real time voice to voice conversion.
               </p>
               <div className="row gx-4 gy-4 text-center pb-5">
@@ -613,7 +600,7 @@ function IndexPage() {
               </div>
               <div className="col-lg-7 d-flex flex-column justify-content-center">
                 <h1 className="fw-bold display-5">FakeYou</h1>
-                <h4 className="fw-semibold opacity-75 mb-4">
+                <h4 className="fw-normal opacity-75 mb-4">
                   Used by millions of people every month
                 </h4>
                 <p className="mt-3">
@@ -693,7 +680,7 @@ function IndexPage() {
               </div>
               <div className="col-lg-7 d-flex flex-column justify-content-center">
                 <h1 className="fw-bold display-5">Power Stream</h1>
-                <h4 className="fw-semibold opacity-75 mb-4">
+                <h4 className="fw-normal opacity-75 mb-4">
                   Twitch Streamers and Creators can engage and monetize
                 </h4>
                 <p className="mt-3">
@@ -733,7 +720,7 @@ function IndexPage() {
               </div>
               <div className="col-lg-7 d-flex flex-column justify-content-center">
                 <h1 className="fw-bold display-5">Storyteller Engine</h1>
-                <h4 className="fw-semibold opacity-75 mb-4">
+                <h4 className="fw-normal opacity-75 mb-4">
                   A fully 3D virtual set for your stream or film
                 </h4>
                 <p className="mt-3">
@@ -866,7 +853,7 @@ function IndexPage() {
               </div>
               <div className="col-lg-7 d-flex flex-column justify-content-center">
                 <h1 className="fw-bold display-5">Storyteller VoxelCam</h1>
-                <h4 className="fw-semibold opacity-75 mb-4">
+                <h4 className="fw-normal opacity-75 mb-4">
                   Volumetric capture for your stream, and for your film set.
                 </h4>
                 <p className="mt-3">
@@ -933,14 +920,14 @@ function IndexPage() {
           <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">Press and mentions</span>
-                <span className="text-red">\\</span>
-                <span>Press and mentions</span>
-                <span className="text-red">\\</span>
-                <span className="text-outline">Press and mentions</span>
-                <span className="text-red">\\</span>
-                <span>Press and mentions</span>
-                <span className="text-red me-3 me-md-4 me-lg-5">\\</span>
+                <span className="text-outline">Press & Mentions</span>
+                <span className="text-red">\</span>
+                <span>Press & Mentions</span>
+                <span className="text-red">\</span>
+                <span className="text-outline">Press & Mentions</span>
+                <span className="text-red">\</span>
+                <span>Press & Mentions</span>
+                <span className="text-red me-3 me-md-4 me-lg-5">\</span>
               </h1>
             </Marquee>
           </div>
diff --git a/packages/storyteller.io/src/pages/index/Landing-old b/packages/storyteller.io/src/pages/index/Landing-old
new file mode 100644
index 0000000000..43e76fed26
--- /dev/null
+++ b/packages/storyteller.io/src/pages/index/Landing-old
@@ -0,0 +1,208 @@
+<div className="bg-hero">
+          <div className="container">
+            <div className="hero-title-container">
+              <h1
+                id="hero-title"
+                className="hero-title d-flex flex-column text-center"
+              >
+                <span
+                  className="hero-title-one align-items-center zi-2"
+                  data-scroll
+                  data-scroll-speed="3"
+                  data-scroll-direction="horizontal"
+                  data-scroll-position="top"
+                >
+                  The <span>Future</span>
+                </span>
+                <span
+                  className="hero-title-two zi-2"
+                  data-scroll
+                  data-scroll-speed="-3"
+                  data-scroll-direction="horizontal"
+                  data-scroll-position="top"
+                >
+                  of Production
+                </span>
+              </h1>
+
+              <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
+                  data-scroll-speed="-4"
+                  data-scroll-direction="horizontal"
+                  data-scroll-position="top"
+                >
+                  We’re scientists, engineers, and creatives building the future
+                  AI cloud production studio.
+                </p>
+                <div
+                  id="hero-btn"
+                  data-scroll
+                  data-scroll-speed="-5"
+                  data-scroll-direction="horizontal"
+                  data-scroll-position="top"
+                  className="zi-10 mt-2"
+                >
+                  <a className="btn btn-primary" href="#about" data-scroll-to>
+                    <span>Explore</span>
+                  </a>
+                </div>
+              </div>
+
+              <div className="hero-title-outline noselect">
+                <h1
+                  id="hero-title-outline"
+                  className="hero-title d-flex flex-column text-center"
+                >
+                  <span
+                    className="hero-title-one align-items-center text-outline"
+                    data-scroll
+                    data-scroll-speed="-4"
+                    data-scroll-direction="horizontal"
+                    data-scroll-position="top"
+                  >
+                    The Future
+                  </span>
+                  <span
+                    className="hero-title-two text-outline"
+                    data-scroll
+                    data-scroll-speed="4"
+                    data-scroll-direction="horizontal"
+                    data-scroll-position="top"
+                  >
+                    of Production
+                  </span>
+                </h1>
+              </div>
+            </div>
+          </div>
+
+          <div className="d-flex justify-content-center">
+            {/* <img
+              id="hero-img"
+              className="hero-img"
+              src="/hero/hero-img.webp"
+              alt="Storyteller HyperJail"
+            /> */}
+
+            <div
+              className="hero-img roko"
+              data-scroll
+              data-scroll-speed="1"
+              data-scroll-direction="horizontal"
+              data-scroll-position="top"
+            >
+              <img
+                id="roko"
+                src="/hero/hyperjail_IsolatedRoko_RimWEB.png"
+                alt=""
+              />
+            </div>
+
+            <div
+              className="hero-img basilisk"
+              data-scroll
+              data-scroll-speed="-1"
+              data-scroll-direction="horizontal"
+              data-scroll-position="top"
+            >
+              <img
+                id="basilisk"
+                src="/hero/hyperjail_IsolatedBasilisk_RimWEB.png"
+                alt=""
+              />
+            </div>
+
+            <div
+              className="hero-img pascal"
+              data-scroll
+              data-scroll-speed="1"
+              data-scroll-direction="vertical"
+              data-scroll-position="top"
+            >
+              <img
+                id="pascal"
+                src="/hero/hyperjail_IsolatedPascal_RimWEB.png"
+                alt=""
+              />
+            </div>
+
+            <div className="bg-floor"></div>
+          </div>
+
+          <div
+            className="d-none d-lg-flex social-icons flex-column gap-4 align-items-center"
+            data-scroll
+            data-scroll-speed="8"
+            data-scroll-direction="horizontal"
+            data-scroll-position="top"
+          >
+            <Tippy content="Discord" placement="right">
+              <a
+                href={ThirdPartyLinks.FAKEYOU_DISCORD}
+                rel="noreferrer"
+                target="_blank"
+              >
+                <FontAwesomeIcon icon={faDiscord} />
+              </a>
+            </Tippy>
+            <Tippy content="Twitch" placement="right">
+              <a
+                href="https://twitch.tv/FakeYouLabs"
+                rel="noreferrer"
+                target="_blank"
+              >
+                <FontAwesomeIcon icon={faTwitch} />
+              </a>
+            </Tippy>
+            <Tippy content="Facebook" placement="right">
+              <a
+                href="https://facebook.com/vocodes"
+                rel="noreferrer"
+                target="_blank"
+              >
+                <FontAwesomeIcon icon={faFacebook} />
+              </a>
+            </Tippy>
+            <Tippy content="Twitter" placement="right">
+              <a
+                href="https://twitter.com/intent/follow?screen_name=FakeYouApp"
+                rel="noreferrer"
+                target="_blank"
+              >
+                <FontAwesomeIcon icon={faTwitter} />
+              </a>
+            </Tippy>
+          </div>
+
+          <div className="shape-2"></div>
+          <div
+            className="shape-3-container"
+            data-scroll
+            data-scroll-speed="3"
+            data-scroll-position="top"
+          >
+            <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
+            data-scroll-speed="2"
+            data-scroll-position="top"
+          >
+            <div className="shape-4"></div>
+          </div>
+        </div>
\ No newline at end of file