diff --git a/packages/storyteller-home/package.json b/packages/storyteller-home/package.json
index fa36733063..beb88583d1 100644
--- a/packages/storyteller-home/package.json
+++ b/packages/storyteller-home/package.json
@@ -31,7 +31,7 @@
     "locomotive-scroll": "^4.1.4",
     "react-locomotive-scroll": "^0.2.2",
     "react-fast-marquee": "^1.3.5",
-    "react-parallax-mouse": "^1.7.3"
+    "@tippyjs/react": "^4.2.6"
   },
   "scripts": {
     "start": "craco start",
diff --git a/packages/storyteller-home/src/App.scss b/packages/storyteller-home/src/App.scss
index 007c7fde0b..2b842a740d 100644
--- a/packages/storyteller-home/src/App.scss
+++ b/packages/storyteller-home/src/App.scss
@@ -18,6 +18,10 @@ body {
   color: $white;
 }
 
+p {
+  line-height: 1.6;
+}
+
 ::-moz-selection {
   /* Code for Firefox */
   color: $white;
@@ -199,6 +203,25 @@ body {
   }
 }
 
+.btn-secondary,
+.btn-secondary:focus,
+.btn-secondary:active {
+  background-color: $white;
+  color: #2c2c40;
+  border: 2.5px solid;
+  border-color: $white;
+  transition: 0.2s;
+  outline: none;
+  box-shadow: none;
+}
+
+.btn-secondary:hover {
+  background-color: #ccc;
+  color: #2c2c40;
+  border: 2.5px solid;
+  border-color: #ccc;
+}
+
 .btn span {
   cursor: pointer;
   display: inline-block;
@@ -402,7 +425,7 @@ body {
 
     &:hover {
       color: lighten(#7676a0, 10%);
-      transform: translateX(5px);
+      transform: translateX(2px);
     }
   }
 }
@@ -463,7 +486,7 @@ body {
   height: 100%;
   padding: 28px;
   border-radius: 12px;
-  border: 3px solid;
+  border: 2px solid;
   border-color: rgba(#4d4d66, 0.6);
   display: flex;
   align-items: center;
@@ -488,11 +511,16 @@ body {
   height: 220px;
   margin-top: 80px;
   position: absolute;
+  transition: 0.3s;
+
+  &:hover {
+    transform: scale(1.2);
+  }
 }
 
 .marquee-title {
   font-size: 7.5rem;
-  font-weight: 800;
+  font-weight: 900;
   text-transform: uppercase;
   margin-top: 7.5rem;
 
@@ -554,3 +582,41 @@ body {
     transform: rotate(45deg);
   }
 }
+
+.bg-light-solid {
+  background: #2f2f4b;
+}
+
+.bg-dark-solid {
+  background: rgb(24, 24, 39);
+}
+
+.shape-bg {
+  position: absolute;
+  width: 220px;
+  height: 220px;
+  background: #2c2c40;
+  opacity: 0.6;
+  border-radius: 24px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.tts-demo {
+  max-width: 800px;
+}
+
+.form-control,
+.form-select {
+  border-width: 1px;
+  border-color: $white;
+  border-radius: 5px;
+  padding: 0.5rem 0.75rem;
+
+  &:focus {
+    border-color: $primary;
+    outline: 0;
+    box-shadow: 0 0 0 0.1rem $primary;
+  }
+}
diff --git a/packages/storyteller-home/src/common/Footer.tsx b/packages/storyteller-home/src/common/Footer.tsx
index 7b0632527e..c788e9065d 100644
--- a/packages/storyteller-home/src/common/Footer.tsx
+++ b/packages/storyteller-home/src/common/Footer.tsx
@@ -15,7 +15,7 @@ function Footer(props: Props) {
   return (
     <>
       <footer data-scroll-section>
-        <div className="bg-dark">
+        <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">
diff --git a/packages/storyteller-home/src/pages/index/AudioSample.tsx b/packages/storyteller-home/src/pages/index/AudioSample.tsx
index 0931646686..839492284a 100644
--- a/packages/storyteller-home/src/pages/index/AudioSample.tsx
+++ b/packages/storyteller-home/src/pages/index/AudioSample.tsx
@@ -1,14 +1,13 @@
-import React, { useRef, useState } from 'react';
-import { Howl } from 'howler';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPause, faPlay } from '@fortawesome/free-solid-svg-icons';
+import React, { useRef, useState } from "react";
+import { Howl } from "howler";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPause, faPlay } from "@fortawesome/free-solid-svg-icons";
 
 interface Props {
-  sampleUrl: string,
+  sampleUrl: string;
 }
 
 function AudioSample(props: Props) {
-
   const [isPlaying, setIsPlaying] = useState(false);
 
   const howlPlayer = useRef(
@@ -16,9 +15,15 @@ function AudioSample(props: Props) {
       src: [props.sampleUrl],
       autoplay: false,
       loop: false,
-      onplay: function() { setIsPlaying(true) },
-      onpause: function() { setIsPlaying(false) },
-      onend: function() { setIsPlaying(false) },
+      onplay: function () {
+        setIsPlaying(true);
+      },
+      onpause: function () {
+        setIsPlaying(false);
+      },
+      onend: function () {
+        setIsPlaying(false);
+      },
     })
   );
 
@@ -31,17 +36,18 @@ function AudioSample(props: Props) {
       player.play();
       setIsPlaying(true);
     }
-  }
+  };
 
-  const playIcon = isPlaying ? 
-    <FontAwesomeIcon icon={faPause} /> :
-    <FontAwesomeIcon icon={faPlay} /> ;
+  const playIcon = isPlaying ? (
+    <FontAwesomeIcon className="fs-5" icon={faPause} />
+  ) : (
+    <FontAwesomeIcon className="fs-5" icon={faPlay} />
+  );
 
   return (
-    <button 
-      className="button is-info is-rounded is-outlined"
-      onClick={onClickToggle}
-      >{playIcon}</button>
+    <button className="btn btn-secondary mb-4 d-flex" onClick={onClickToggle}>
+      {playIcon}
+    </button>
   );
 }
 
diff --git a/packages/storyteller-home/src/pages/index/IndexPage.tsx b/packages/storyteller-home/src/pages/index/IndexPage.tsx
index b104cb9452..a51db0a044 100644
--- a/packages/storyteller-home/src/pages/index/IndexPage.tsx
+++ b/packages/storyteller-home/src/pages/index/IndexPage.tsx
@@ -5,10 +5,18 @@ import {
   faTwitch,
   faTwitter,
 } from "@fortawesome/free-brands-svg-icons";
-import { faArrowRightArrowLeft } from "@fortawesome/free-solid-svg-icons";
+import {
+  faArrowRight,
+  faArrowRightArrowLeft,
+  faMicrophone,
+  faVolumeHigh,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Marquee from "react-fast-marquee";
 import { TtsComponent } from "./TtsComponent";
+import Tippy from "@tippyjs/react";
+import "tippy.js/dist/tippy.css";
+import AudioSample from "./AudioSample";
 
 function IndexPage() {
   return (
@@ -127,21 +135,31 @@ function IndexPage() {
             data-scroll-direction="horizontal"
             data-scroll-position="top"
           >
-            <a href="/">
-              <FontAwesomeIcon icon={faDiscord} />
-            </a>
-            <a href="/">
-              <FontAwesomeIcon icon={faTwitch} />
-            </a>
-            <a href="/">
-              <FontAwesomeIcon icon={faFacebook} />
-            </a>
-            <a href="/">
-              <FontAwesomeIcon icon={faTwitter} />
-            </a>
-            <a href="/">
-              <FontAwesomeIcon icon={faPatreon} />
-            </a>
+            <Tippy content="Discord" placement="right">
+              <a href="https://discorg">
+                <FontAwesomeIcon icon={faDiscord} />
+              </a>
+            </Tippy>
+            <Tippy content="Twitch" placement="right">
+              <a href="/">
+                <FontAwesomeIcon icon={faTwitch} />
+              </a>
+            </Tippy>
+            <Tippy content="Facebook" placement="right">
+              <a href="/">
+                <FontAwesomeIcon icon={faFacebook} />
+              </a>
+            </Tippy>
+            <Tippy content="Twitter" placement="right">
+              <a href="/">
+                <FontAwesomeIcon icon={faTwitter} />
+              </a>
+            </Tippy>
+            <Tippy content="Patreon" placement="right">
+              <a href="/">
+                <FontAwesomeIcon icon={faPatreon} />
+              </a>
+            </Tippy>
           </div>
         </div>
         <div id="about" className="bg-light section section-pb-extra">
@@ -158,20 +176,22 @@ function IndexPage() {
             </div>
             <div className="row gx-4 gy-4 pt-4">
               <div className="col-12 col-lg-3">
-                <p className="fw-normal card bg-dark">
+                <p className="fw-normal card bg-dark-solid">
                   Music generation - vocals, instrumentals, and more
                 </p>
               </div>
               <div className="col-12 col-lg-3">
-                <p className="fw-normal card bg-dark">
+                <p className="fw-normal card bg-dark-solid">
                   Audio dubbing and transformation
                 </p>
               </div>
               <div className="col-12 col-lg-3">
-                <p className="fw-normal card bg-dark">Real time animation</p>
+                <p className="fw-normal card bg-dark-solid">
+                  Real time animation
+                </p>
               </div>
               <div className="col-12 col-lg-3">
-                <p className="fw-normal card bg-dark">
+                <p className="fw-normal card bg-dark-solid">
                   Real time Hollywood VFX without going to set
                 </p>
               </div>
@@ -230,13 +250,49 @@ function IndexPage() {
                     target="_blank"
                     className="btn btn-primary mt-4"
                   >
-                    <span>Visit FakeYou.com</span>
+                    <span>Go to FakeYou.com</span>
                   </a>
                 </div>
               </div>
             </div>
-
-            {/* <TtsComponent /> */}
+            <div className="mt-5 pt-4 text-center">
+              <h2 className="text-center mt-5 fw-bold">
+                <FontAwesomeIcon icon={faVolumeHigh} className="me-3" />
+                Try our text to speech!
+              </h2>
+              <p className="mb-5">
+                We have over 2,000 voices (with more added every day), but we've
+                selected a few to show off.
+              </p>
+              <TtsComponent />
+            </div>
+          </div>
+          <div className="text-center position-relative">
+            <div className="position-relative zi-2">
+              <h2 className="text-center mt-5 fw-bold">Want to hear more?</h2>
+              <p className="mb-4">
+                Listen to all of the 2,000+ available voices on FakeYou.
+              </p>
+              <div className="d-flex gap-3 justify-content-center">
+                <a
+                  href="https://fakeyou.com/"
+                  rel="noreferrer"
+                  target="_blank"
+                  className="btn btn-primary mt-3 d-flex"
+                >
+                  <span>Go to FakeYou.com</span>
+                </a>
+                <a
+                  href="https://fakeyou.com/clone"
+                  rel="noreferrer"
+                  target="_blank"
+                  className="btn btn-secondary mt-3 d-flex"
+                >
+                  <span>Clone my voice</span>
+                </a>
+              </div>
+            </div>
+            <div className="shape-bg"></div>
           </div>
         </div>
         <div className="bg-light section-2">
@@ -300,16 +356,83 @@ function IndexPage() {
                 </p>
                 <div>
                   <a
-                    href="https://fakeyou.com"
+                    href="https://fakeyou.com/clone"
                     rel="noreferrer"
                     target="_blank"
                     className="btn btn-primary mt-4"
                   >
-                    <span>Visit Storyteller.stream</span>
+                    <span>Transform my voice</span>
                   </a>
                 </div>
               </div>
             </div>
+            <div className="mt-5 pt-4 text-center">
+              <h2 className="text-center mt-5 fw-bold">
+                <FontAwesomeIcon icon={faMicrophone} className="me-3" />
+                Voice Changing Demo
+              </h2>
+              <p className="mb-5">
+                This is still an early beta. Voice quality will change and
+                improve substantially over time.
+              </p>
+              <div className="row gx-4 gy-4 text-center">
+                <div className="col-12 col-lg-6">
+                  <div className="card bg-light-solid justify-content-start">
+                    <AudioSample sampleUrl="/audio-samples/voice-conversion-1.mp3" />
+                    <p className="mb-0">
+                      <em className="fs-6">
+                        &ldquo;I've got a huge announcement. This just sounds
+                        really, really great. And other than some phase
+                        distortion, artifacts, this is just sounding really
+                        great. And it's good for America. And voice synthesis is
+                        amazing.&rdquo;
+                      </em>
+                    </p>
+                  </div>
+                </div>
+                <div className="col-12 col-lg-6">
+                  <div className="card bg-light-solid justify-content-start">
+                    <AudioSample sampleUrl="/audio-samples/voice-conversion-2.mp3" />
+                    <p className="mb-0">
+                      <em className="fs-6">
+                        &ldquo;My favorite game is Super Smash Bros Ultimate.
+                        It's a really, really great game. It's huge. There's so
+                        many characters.&rdquo;
+                      </em>
+                    </p>
+                  </div>
+                </div>
+                <p className="text-center my-5 pb-5">
+                  <strong className="fw-semibold fs-5">Brandon</strong>
+                  <FontAwesomeIcon icon={faArrowRight} className="mx-2" />
+                  <strong className="fw-semibold fs-5">Donald Trump</strong>
+                  <br />
+                  Real time voice to voice conversion.
+                </p>
+              </div>
+            </div>
+            <div className="text-center position-relative">
+              <div className="position-relative zi-2">
+                <h2 className="text-center mt-5 fw-bold">
+                  Sign up for your very own voice changer
+                </h2>
+                <p className="mb-4">
+                  We'll be rolling this out shortly. Get on the list! Tell us
+                  who you want to be.
+                </p>
+                <div>
+                  <a
+                    href="https://fakeyou.com/clone"
+                    rel="noreferrer"
+                    target="_blank"
+                    className="btn btn-primary mt-3"
+                  >
+                    <span>Transform my voice</span>
+                  </a>
+                </div>
+              </div>
+              <div className="shape-bg"></div>
+            </div>
           </div>
         </div>
         <div className="bg-light section-2">
diff --git a/packages/storyteller-home/src/pages/index/TtsComponent.tsx b/packages/storyteller-home/src/pages/index/TtsComponent.tsx
index fc8431fcfd..2d4defd109 100644
--- a/packages/storyteller-home/src/pages/index/TtsComponent.tsx
+++ b/packages/storyteller-home/src/pages/index/TtsComponent.tsx
@@ -154,47 +154,48 @@ function TtsComponent(props: Props) {
   });
 
   return (
-    <div className="w-100">
-      <form onSubmit={handleFormSubmit} className="main-form">
-        <div className="field">
-          <div className="control">
-            <div className="select is-fullwidth">
-              <select onChange={handleVoiceChange}>{voiceOptions}</select>
+    <div className="container d-flex justify-content-center pb-5">
+      <div className="card bg-light-solid tts-demo w-100 mb-5">
+        <form onSubmit={handleFormSubmit} className="w-100">
+          <div className="d-flex flex-column gap-3">
+            <div className="field">
+              <div className="control">
+                <div className="select">
+                  <select className="form-select" onChange={handleVoiceChange}>
+                    {voiceOptions}
+                  </select>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
 
-        <div className="field">
-          <div className="control">
-            <textarea
-              onChange={handleChangeText}
-              className="textarea is-normal"
-              value={inferenceText}
-              placeholder="Type something fun..."
-            ></textarea>
-          </div>
-        </div>
+            <div className="field">
+              <div className="control">
+                <textarea
+                  onChange={handleChangeText}
+                  className="form-control"
+                  value={inferenceText}
+                  placeholder="Type something fun..."
+                  rows={4}
+                ></textarea>
+              </div>
+            </div>
 
-        <div className="button-group">
-          <div className="columns is-mobile">
-            <div className="column has-text-centered">
-              <button className="button is-info is-large" disabled={false}>
+            <div className="d-flex justify-content-center gap-3">
+              <button className="btn btn-primary w-100" disabled={false}>
                 Generate
               </button>
-            </div>
-            <div className="column has-text-centered">
               <button
-                className="button is-info is-light is-large"
+                className="btn btn-secondary w-100"
                 onClick={() => setInferenceText("")}
               >
                 Clear
               </button>
             </div>
           </div>
-        </div>
-      </form>
+        </form>
 
-      <TtsResultsList ttsInferenceJobs={jobs} />
+        <TtsResultsList ttsInferenceJobs={jobs} />
+      </div>
     </div>
   );
 }
diff --git a/yarn.lock b/yarn.lock
index a32dadc039..a2c8b55459 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2978,13 +2978,6 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-anchor-link-smooth-scroll@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react-anchor-link-smooth-scroll/-/react-anchor-link-smooth-scroll-1.0.2.tgz#50a4aaa7c2731f644f8a7b69225669fc29bc6746"
-  integrity sha512-ZemNS6WzQN8KA4w0sy5N86qJ55Ft7OnIDGH6QIHe0LL27xkZpNINMNZGR0DacIVPU66+JrbDqi1cKms9qhcPNQ==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-autocomplete@^1.8.6":
   version "1.8.6"
   resolved "https://registry.yarnpkg.com/@types/react-autocomplete/-/react-autocomplete-1.8.6.tgz#999d0cd10ac4164ea605da04d263e5fb3fd5745f"
@@ -11409,7 +11402,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -11560,7 +11553,7 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
-raf@^3.1.0, raf@^3.4.1:
+raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
   integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -11597,11 +11590,6 @@ raw-body@2.4.2:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-anchor-link-smooth-scroll@^1.0.12:
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/react-anchor-link-smooth-scroll/-/react-anchor-link-smooth-scroll-1.0.12.tgz#5cd49c73e74be6d20b4c05a5e5c72d07ebbedac7"
-  integrity sha512-aaY+9X0yh8YnC0jBfoTKpsiCLdO/Y6pCltww+VB+NnTBPDOvnIdnp1AlazajsDitc1j+cVSQ+yNtaVeTIMQbxw==
-
 react-app-polyfill@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz#95221e0a9bd259e5ca6b177c7bb1cb6768f68fd7"
@@ -11699,22 +11687,6 @@ react-locomotive-scroll@^0.2.2:
     use-debounce "6.0.1"
     use-resize-observer "6.1.0"
 
-react-motion-prefixed@^0.6.4:
-  version "0.6.4"
-  resolved "https://registry.yarnpkg.com/react-motion-prefixed/-/react-motion-prefixed-0.6.4.tgz#730ab16b4b7ea912ef826308118cb13f9580f60b"
-  integrity sha512-MaHD6E9cweWROYYLvpfx1T+nvNvIzkjZkOa8GgM0dMOFxA499+vijQ1SdBsYk/tCuVYqIDiyKVHqKRq1Qfj2sg==
-  dependencies:
-    performance-now "^2.1.0"
-    prop-types "^15.5.8"
-    raf "^3.1.0"
-
-react-parallax-mouse@^1.7.3:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/react-parallax-mouse/-/react-parallax-mouse-1.7.3.tgz#1f711161d5758f251ea75ffeedd6fe1f17cabe7c"
-  integrity sha512-TthnGFaJ0xRR4RNeUpkaWp4N/6qejKnAlMM7H3nvYO9haW4IUEf2RHGPldhghPl5QWelsc4CG+FSaN3xuTt7dw==
-  dependencies:
-    react-motion-prefixed "^0.6.4"
-
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"