diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index fcd7848f2b..a5f5b5d634 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -910,6 +910,48 @@ styles with important tags:
     font-size: 14px;
     color: #fc6b68;
   }
+
+  .hero-img-container {
+    position: relative;
+    min-height: 100%;
+    overflow: hidden;
+
+    // &:after {
+    //   content: "";
+    //   position: absolute;
+    //   z-index: 1;
+    //   bottom: 0;
+    //   left: 0;
+    //   pointer-events: none;
+    //   background-image: linear-gradient(
+    //     to bottom,
+    //     rgba($panel, 0),
+    //     rgba($panel, 1) 90%
+    //   );
+    //   width: 100%;
+    //   height: 2em;
+    // }
+  }
+
+  .hero-img {
+    pointer-events: none;
+    position: absolute;
+    width: 80%;
+    margin: auto;
+    top: -26%;
+    right: 4%;
+  }
+
+  // .hero-img-container-mobile {
+  //   // margin-top: 100px;
+  // }
+
+  .hero-img-mobile {
+    pointer-events: none;
+    width: 65%;
+    margin-bottom: -4%;
+    margin-top: -30%;
+  }
 }
 
 select {
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
index d9e7a744f1..aa854e8177 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsModelListPage.tsx
@@ -477,129 +477,116 @@ function TtsModelListPage(props: Props) {
         sessionSubscriptionsWrapper={props.sessionSubscriptionsWrapper}
       />
 
-      <motion.div className="container-panel pt-4 pb-5 mb-4" variants={panel}>
-        <div className="panel p-3 p-lg-4 mt-5 mt-lg-0">
+      <motion.div className="container-panel pb-5 mb-4" variants={panel}>
+        <div className="panel p-3 py-4 p-lg-4">
           <i className="fas fa-volume-high"></i>
-          <h1 className="panel-title fw-bold px-3 px-lg-0">
-            <FontAwesomeIcon icon={faVolumeUp} className="me-3" />
-            {t("tts.TtsModelListPage.formTitle")}
-          </h1>
-          <div className="py-6">
-            <div className="d-flex gap-4">
-              <form
-                className="w-100 d-flex flex-column"
-                onSubmit={handleFormSubmit}
-              >
-                {/* Explore Rollout */}
 
-                <SearchOmnibar
-                  allTtsCategories={props.allTtsCategories}
-                  allTtsModels={props.ttsModels}
-                  allTtsCategoriesByTokenMap={props.allTtsCategoriesByTokenMap}
-                  allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
-                  ttsModelsByCategoryToken={props.ttsModelsByCategoryToken}
-                  dropdownCategories={props.dropdownCategories}
-                  setDropdownCategories={props.setDropdownCategories}
-                  selectedCategories={props.selectedCategories}
-                  setSelectedCategories={props.setSelectedCategories}
-                  maybeSelectedTtsModel={props.maybeSelectedTtsModel}
-                  setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
-                  selectedTtsLanguageScope={props.selectedTtsLanguageScope}
-                  setSelectedTtsLanguageScope={
-                    props.setSelectedTtsLanguageScope
-                  }
-                />
+          <div className="d-flex gap-4">
+            <form
+              className="w-100 d-flex flex-column"
+              onSubmit={handleFormSubmit}
+            >
+              {/* Explore Rollout */}
 
-                {/*
+              <SearchOmnibar
+                allTtsCategories={props.allTtsCategories}
+                allTtsModels={props.ttsModels}
+                allTtsCategoriesByTokenMap={props.allTtsCategoriesByTokenMap}
+                allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
+                ttsModelsByCategoryToken={props.ttsModelsByCategoryToken}
+                dropdownCategories={props.dropdownCategories}
+                setDropdownCategories={props.setDropdownCategories}
+                selectedCategories={props.selectedCategories}
+                setSelectedCategories={props.setSelectedCategories}
+                maybeSelectedTtsModel={props.maybeSelectedTtsModel}
+                setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
+                selectedTtsLanguageScope={props.selectedTtsLanguageScope}
+                setSelectedTtsLanguageScope={props.setSelectedTtsLanguageScope}
+              />
+
+              {/*
                 
                 
                 EXPLORE OMNIBAR GOES HERE TODO
                 
                 */}
 
-                {directViewLink}
+              {directViewLink}
 
-                <div className="row gx-5 gy-5">
-                  <div className="col-12 col-lg-6 d-flex flex-column gap-3">
-                    <div className="d-flex flex-column gap-3 h-100">
-                      <div className="d-flex gap-2">
-                        <label className="sub-title pb-0">
-                          {t("tts.TtsModelListPage.form.yourTextLabel")}
-                        </label>
-                        {/*<a href="/" className="ms-1">
+              <div className="row gx-5 gy-5">
+                <div className="col-12 col-lg-6 d-flex flex-column gap-3">
+                  <div className="d-flex flex-column gap-3 h-100">
+                    <div className="d-flex gap-2">
+                      <label className="sub-title pb-0">
+                        {t("tts.TtsModelListPage.form.yourTextLabel")}
+                      </label>
+                      {/*<a href="/" className="ms-1">
                           <FontAwesomeIcon icon={faShuffle} />
                         </a>*/}
-                      </div>
-                      <textarea
-                        onClick={() => {
-                          Analytics.ttsClickTextInputBox();
-                        }}
-                        onChange={handleChangeText}
-                        className="form-control text-message h-100"
-                        value={props.textBuffer}
-                        placeholder={t(
-                          "tts.TtsModelListPage.form.textInputHint",
-                          {
-                            voice:
-                              props.maybeSelectedTtsModel?.title || "the voice",
-                          }
-                        )}
-                      ></textarea>
-                      <div className="d-flex gap-3">
-                        <button
-                          className={speakButtonClass}
-                          disabled={
-                            remainingCharactersButtonDisabled ||
-                            noTextInputButtonDisabled
-                          }
-                          onClick={handleLoading}
-                          type="submit"
-                        >
-                          <FontAwesomeIcon
-                            icon={faVolumeHigh}
-                            className="me-2"
-                          />
-                          {t("tts.TtsModelListPage.form.buttons.speak")}
-
-                          {loading && <LoadingIcon />}
-                        </button>
-                        <button
-                          className="btn btn-destructive w-100"
-                          onClick={handleClearClick}
-                          disabled={noTextInputButtonDisabled}
-                        >
-                          <FontAwesomeIcon
-                            icon={faDeleteLeft}
-                            className="me-2"
-                          />
-                          {t("tts.TtsModelListPage.form.buttons.clear")}
-                        </button>
-                      </div>
                     </div>
-                  </div>
-                  <div className="col-12 col-lg-6">
-                    <div className="d-flex flex-column gap-3">
-                      <h4 className="text-center text-lg-start">
-                        <FontAwesomeIcon
-                          icon={faBarsStaggered}
-                          className="me-3"
-                        />
-                        {t("tts.TtsModelListPage.sessionTtsResultsLabel")}
-                      </h4>
-                      <div className="d-flex flex-column gap-3 session-tts-section">
-                        <SessionTtsInferenceResultList
-                          ttsInferenceJobs={props.ttsInferenceJobs}
-                          sessionSubscriptionsWrapper={
-                            props.sessionSubscriptionsWrapper
-                          }
-                        />
-                      </div>
+                    <textarea
+                      onClick={() => {
+                        Analytics.ttsClickTextInputBox();
+                      }}
+                      onChange={handleChangeText}
+                      className="form-control text-message h-100"
+                      value={props.textBuffer}
+                      placeholder={t(
+                        "tts.TtsModelListPage.form.textInputHint",
+                        {
+                          voice:
+                            props.maybeSelectedTtsModel?.title || "the voice",
+                        }
+                      )}
+                    ></textarea>
+                    <div className="d-flex gap-3">
+                      <button
+                        className={speakButtonClass}
+                        disabled={
+                          remainingCharactersButtonDisabled ||
+                          noTextInputButtonDisabled
+                        }
+                        onClick={handleLoading}
+                        type="submit"
+                      >
+                        <FontAwesomeIcon icon={faVolumeHigh} className="me-2" />
+                        {t("tts.TtsModelListPage.form.buttons.speak")}
+
+                        {loading && <LoadingIcon />}
+                      </button>
+                      <button
+                        className="btn btn-destructive w-100"
+                        onClick={handleClearClick}
+                        disabled={noTextInputButtonDisabled}
+                      >
+                        <FontAwesomeIcon icon={faDeleteLeft} className="me-2" />
+                        {t("tts.TtsModelListPage.form.buttons.clear")}
+                      </button>
                     </div>
                   </div>
                 </div>
-                {maybeError}
-              </form>
-            </div>
+                <div className="col-12 col-lg-6">
+                  <div className="d-flex flex-column gap-3">
+                    <h4 className="text-center text-lg-start">
+                      <FontAwesomeIcon
+                        icon={faBarsStaggered}
+                        className="me-3"
+                      />
+                      {t("tts.TtsModelListPage.sessionTtsResultsLabel")}
+                    </h4>
+                    <div className="d-flex flex-column gap-3 session-tts-section">
+                      <SessionTtsInferenceResultList
+                        ttsInferenceJobs={props.ttsInferenceJobs}
+                        sessionSubscriptionsWrapper={
+                          props.sessionSubscriptionsWrapper
+                        }
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              {maybeError}
+            </form>
           </div>
         </div>
 
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx
index f7ce5dbf29..5e86045ad6 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/TtsPageHero.tsx
@@ -9,6 +9,7 @@ import {
   faStar,
   faUser,
   faArrowRight,
+  faVolumeHigh,
 } from "@fortawesome/free-solid-svg-icons";
 import { item, image } from "../../../../../data/animation";
 import { motion } from "framer-motion";
@@ -23,8 +24,8 @@ interface Props {
 export function TtsPageHero(props: Props) {
   const randomImage = useMemo(() => {
     const images = [
-      // "mascot/kitsune_pose2.webp",
-      // "mascot/kitsune_wizard.webp",
+      "mascot/kitsune_pose2.webp",
+      "mascot/kitsune_wizard.webp",
       // "mascot/halloween_1.webp",
       // "mascot/halloween_2.webp",
       // "mascot/halloween_3.webp",
@@ -32,7 +33,7 @@ export function TtsPageHero(props: Props) {
       // "mascot/xmas_2.webp",
       // "mascot/xmas_3.webp",
       // "mascot/xmas_4.webp",
-      "mascot/chinese_new_year.webp",
+      // "mascot/chinese_new_year.webp",
     ];
 
     return images[Math.floor(Math.random() * images.length)];
@@ -114,8 +115,41 @@ export function TtsPageHero(props: Props) {
   }
 
   return (
-    <div className="container hero-section">
-      <div className="row gx-3 flex-lg-row-reverse align-items-center">
+    <div className="container-panel hero-section pt-4 pt-lg-5 pb-5">
+      <div className="panel">
+        <div className="row gx-3 flex-md-row-reverse">
+          <div className="col-12 col-md-6 hero-img-container d-none d-md-block">
+            <motion.img
+              src={randomImage}
+              className="hero-img"
+              alt="FakeYou Mascot"
+              variants={image}
+            />
+          </div>
+          <div className="col-12 col-md-6">
+            <div className="p-3 py-4 p-lg-4">
+              <h1 className="fw-bold text-center text-md-start">
+                <FontAwesomeIcon icon={faVolumeHigh} className="me-3" />
+                Text to Speech
+              </h1>
+              <p className="text-center text-md-start">
+                {t("tts.TtsModelListPage.formTitle")}
+              </p>
+              <motion.div
+                className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-md-start mt-4"
+                variants={item}
+              >
+                {upgradeButton}
+                {signUpButton}
+                {viewPricingButton}
+                {myProfileButton}
+              </motion.div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* <div className="row gx-3 flex-lg-row-reverse align-items-center">
         <div className="col-lg-6">
           <div className="d-flex justify-content-center">
             <motion.img
@@ -157,7 +191,7 @@ export function TtsPageHero(props: Props) {
             {myProfileButton}
           </motion.div>
         </div>
-      </div>
+      </div> */}
     </div>
   );
 }