diff --git a/packages/fakeyou/public/mascot/guide.webp b/packages/fakeyou/public/mascot/guide.webp
new file mode 100644
index 0000000000..b69a658423
Binary files /dev/null and b/packages/fakeyou/public/mascot/guide.webp differ
diff --git a/packages/fakeyou/public/mascot/tou.webp b/packages/fakeyou/public/mascot/tou.webp
new file mode 100644
index 0000000000..94c3155774
Binary files /dev/null and b/packages/fakeyou/public/mascot/tou.webp differ
diff --git a/packages/fakeyou/src/v2/view/NewTopNavFc.tsx b/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
index c4d3b22a68..c10654e55f 100644
--- a/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
+++ b/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
@@ -16,6 +16,7 @@ import {
   faSignOutAlt,
   faComputer,
   faLaptop,
+  faBook,
 } from "@fortawesome/free-solid-svg-icons";
 import { faDiscord, faPatreon } from "@fortawesome/free-brands-svg-icons";
 import { Logout } from "@storyteller/components/src/api/session/Logout";
@@ -411,6 +412,16 @@ function NewTopNavFc(props: Props) {
                         Patrons
                       </Link>
                     </li>
+                    <li data-bs-toggle="offcanvas">
+                      <Link
+                        className="dropdown-item"
+                        to="/guide"
+                        title="to guide"
+                      >
+                        <FontAwesomeIcon icon={faBook} className="me-2" />
+                        Guide
+                      </Link>
+                    </li>
                     <li data-bs-toggle="offcanvas">
                       <Link
                         className="dropdown-item"
diff --git a/packages/fakeyou/src/v2/view/NewVocodesContainer.tsx b/packages/fakeyou/src/v2/view/NewVocodesContainer.tsx
index 4aedfbd4b0..c8113b8a61 100644
--- a/packages/fakeyou/src/v2/view/NewVocodesContainer.tsx
+++ b/packages/fakeyou/src/v2/view/NewVocodesContainer.tsx
@@ -1,140 +1,136 @@
-import React from 'react';
-import { AboutPage } from './about/about_page/AboutPage';
-import { FirehoseEventListFc } from './firehose/FirehoseEventListFc';
-import { LoginPage } from './login/LoginPage';
-import { ModerationFc } from './moderation/moderation_main/ModerationFc';
-import { ModerationIpBanListFc } from './moderation/moderation_ip_ban_list/ModerationIpBanListFc';
-import { ModerationViewIpBanFc } from './moderation/moderation_view_ip_ban/ModerationViewIpBanFc';
-import { NewFooterNavFc } from './NewFooterNavFc';
-import { NewTopNavFc } from './NewTopNavFc';
-import { ProfileEditFc } from './profile/profile_edit/ProfileEditFc';
-import { ProfileFc } from './profile/profile_view/ProfileFc';
-import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
-import { SignupPage } from './signup/SignupPage';
-import { Switch, Route } from 'react-router-dom';
-import { TermsPage } from './about/terms_page/TermsPage';
-import { TtsInferenceJob, W2lInferenceJob } from '../../App';
-import { TtsModelDeletePage } from './tts/tts_model_delete/TtsModelDeletePage';
-import { TtsModelEditPage } from './tts/tts_model_edit/TtsModelEditPage';
-import { TtsModelUploadJob } from '@storyteller/components/src/jobs/TtsModelUploadJobs';
-import { VocoderUploadJob } from '@storyteller/components/src/jobs/VocoderUploadJobs';
-import { TtsModelViewPage } from './tts/tts_model_view/TtsModelViewPage';
-import { TtsResultDeletePage } from './tts/tts_result_delete/TtsResultDeletePage';
-import { TtsResultViewPage } from './tts/tts_result_view/TtsResultViewPage';
-import { ContributeIndexPage } from './contribute/ContributeIndexPage';
-import { UploadTtsModelPage } from './upload/UploadTtsModelPage';
-import { UploadW2lPhotoPage } from './upload/UploadW2lPhotoPage';
-import { UploadW2lVideoPage } from './upload/UploadW2lVideoPage';
-import { W2lResultViewFc } from './w2l/w2l_result_view/W2lResultViewFc';
-import { W2lTemplateListFc } from './w2l/w2l_template_list/W2lTemplateListFc';
-import { W2lTemplateUploadJob } from '@storyteller/components/src/jobs/W2lTemplateUploadJobs';
-import { W2lTemplateViewFc } from './w2l/w2l_template_view/W2lTemplateViewFc';
-import { TtsResultEditPage } from './tts/tts_result_edit/TtsResultEditPage';
-import { W2lResultEditFc } from './w2l/w2l_result_edit/W2lResultEditFc';
-import { W2lTemplateDeleteFc } from './w2l/w2l_template_delete/W2lTemplateDeleteFc';
-import { W2lTemplateEditFc } from './w2l/w2l_template_edit/W2lTemplateEditFc';
-import { W2lResultDeleteFc } from './w2l/w2l_result_delete/W2lResultDeleteFc';
-import { W2lTemplateApproveFc } from './w2l/w2l_template_approve/W2lTemplateApproveFc';
-import { TtsModelListPage } from './tts/tts_model_list/TtsModelListPage';
-import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsModels';
-import { ProfileBanFc } from './profile/profile_ban/ProfileBanFc';
-import { ModerationUserListFc } from './moderation/moderation_user_list/ModerationUserList';
-import { LeaderboardFc } from './leaderboard/LeaderboardFc';
-import { ModerationJobStatsFc } from './moderation/moderation_job_stats/ModerationJobStatsFc';
-import { ModerationPendingW2lTemplatesFc } from './moderation/moderation_pending_w2l_templates/ModerationPendingW2lTemplatesFc';
-import { ModerationVoiceStatsFc } from './moderation/moderation_voice_stats/ModerationVoiceStatsFc';
-import { CreateCategoryPage } from './category/CreateCategoryPage';
-import { TtsEditCategoriesPage } from './tts/tts_edit_categories/TtsEditCategoriesPage';
-import { ModerationTtsCategoryListPage } from './moderation/categories/ModerationTtsCategoryListPage';
-import { ModerationTtsCategoryEditPage } from './moderation/categories/ModerationTtsCategoryEditPage';
-import { ModerationCategoryDeletePage } from './moderation/categories/ModerationCategoryDeletePage';
-import { TtsCategoryType } from '../../AppWrapper';
-import { PatronPage } from './patrons/PatronPage';
-import ScrollToTop from './_common/ScrollToTop';
-import { Language } from '@storyteller/components/src/i18n/Language';
-import { VoiceCloneRequestPage } from './clone_voice_requests/VoiceCloneRequestPage';
-import { VocodesPage } from './vocodes/VocodesPage';
-import { UploadVocoderPage } from './upload/UploadVocoderPage';
+import React from "react";
+import { AboutPage } from "./about/about_page/AboutPage";
+import { GuidePage } from "./about/guide_page/GuidePage";
+import { FirehoseEventListFc } from "./firehose/FirehoseEventListFc";
+import { LoginPage } from "./login/LoginPage";
+import { ModerationFc } from "./moderation/moderation_main/ModerationFc";
+import { ModerationIpBanListFc } from "./moderation/moderation_ip_ban_list/ModerationIpBanListFc";
+import { ModerationViewIpBanFc } from "./moderation/moderation_view_ip_ban/ModerationViewIpBanFc";
+import { NewFooterNavFc } from "./NewFooterNavFc";
+import { NewTopNavFc } from "./NewTopNavFc";
+import { ProfileEditFc } from "./profile/profile_edit/ProfileEditFc";
+import { ProfileFc } from "./profile/profile_view/ProfileFc";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { SignupPage } from "./signup/SignupPage";
+import { Switch, Route } from "react-router-dom";
+import { TermsPage } from "./about/terms_page/TermsPage";
+import { TtsInferenceJob, W2lInferenceJob } from "../../App";
+import { TtsModelDeletePage } from "./tts/tts_model_delete/TtsModelDeletePage";
+import { TtsModelEditPage } from "./tts/tts_model_edit/TtsModelEditPage";
+import { TtsModelUploadJob } from "@storyteller/components/src/jobs/TtsModelUploadJobs";
+import { VocoderUploadJob } from "@storyteller/components/src/jobs/VocoderUploadJobs";
+import { TtsModelViewPage } from "./tts/tts_model_view/TtsModelViewPage";
+import { TtsResultDeletePage } from "./tts/tts_result_delete/TtsResultDeletePage";
+import { TtsResultViewPage } from "./tts/tts_result_view/TtsResultViewPage";
+import { ContributeIndexPage } from "./contribute/ContributeIndexPage";
+import { UploadTtsModelPage } from "./upload/UploadTtsModelPage";
+import { UploadW2lPhotoPage } from "./upload/UploadW2lPhotoPage";
+import { UploadW2lVideoPage } from "./upload/UploadW2lVideoPage";
+import { W2lResultViewFc } from "./w2l/w2l_result_view/W2lResultViewFc";
+import { W2lTemplateListFc } from "./w2l/w2l_template_list/W2lTemplateListFc";
+import { W2lTemplateUploadJob } from "@storyteller/components/src/jobs/W2lTemplateUploadJobs";
+import { W2lTemplateViewFc } from "./w2l/w2l_template_view/W2lTemplateViewFc";
+import { TtsResultEditPage } from "./tts/tts_result_edit/TtsResultEditPage";
+import { W2lResultEditFc } from "./w2l/w2l_result_edit/W2lResultEditFc";
+import { W2lTemplateDeleteFc } from "./w2l/w2l_template_delete/W2lTemplateDeleteFc";
+import { W2lTemplateEditFc } from "./w2l/w2l_template_edit/W2lTemplateEditFc";
+import { W2lResultDeleteFc } from "./w2l/w2l_result_delete/W2lResultDeleteFc";
+import { W2lTemplateApproveFc } from "./w2l/w2l_template_approve/W2lTemplateApproveFc";
+import { TtsModelListPage } from "./tts/tts_model_list/TtsModelListPage";
+import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
+import { ProfileBanFc } from "./profile/profile_ban/ProfileBanFc";
+import { ModerationUserListFc } from "./moderation/moderation_user_list/ModerationUserList";
+import { LeaderboardFc } from "./leaderboard/LeaderboardFc";
+import { ModerationJobStatsFc } from "./moderation/moderation_job_stats/ModerationJobStatsFc";
+import { ModerationPendingW2lTemplatesFc } from "./moderation/moderation_pending_w2l_templates/ModerationPendingW2lTemplatesFc";
+import { ModerationVoiceStatsFc } from "./moderation/moderation_voice_stats/ModerationVoiceStatsFc";
+import { CreateCategoryPage } from "./category/CreateCategoryPage";
+import { TtsEditCategoriesPage } from "./tts/tts_edit_categories/TtsEditCategoriesPage";
+import { ModerationTtsCategoryListPage } from "./moderation/categories/ModerationTtsCategoryListPage";
+import { ModerationTtsCategoryEditPage } from "./moderation/categories/ModerationTtsCategoryEditPage";
+import { ModerationCategoryDeletePage } from "./moderation/categories/ModerationCategoryDeletePage";
+import { TtsCategoryType } from "../../AppWrapper";
+import { PatronPage } from "./patrons/PatronPage";
+import ScrollToTop from "./_common/ScrollToTop";
+import { Language } from "@storyteller/components/src/i18n/Language";
+import { VoiceCloneRequestPage } from "./clone_voice_requests/VoiceCloneRequestPage";
+import { VocodesPage } from "./vocodes/VocodesPage";
+import { UploadVocoderPage } from "./upload/UploadVocoderPage";
 
 interface Props {
-  sessionWrapper: SessionWrapper,
-  querySessionAction: () => void,
+  sessionWrapper: SessionWrapper;
+  querySessionAction: () => void;
 
-  isShowingVocodesNotice: boolean,
-  clearVocodesNotice: () => void,
+  isShowingVocodesNotice: boolean;
+  clearVocodesNotice: () => void;
 
-  isShowingLangaugeNotice: boolean,
-  clearLanguageNotice: () => void,
-  displayLanguage: Language,
-  primaryLanguageCode: string,
+  isShowingLangaugeNotice: boolean;
+  clearLanguageNotice: () => void;
+  displayLanguage: Language;
+  primaryLanguageCode: string;
 
-  isShowingTwitchTtsNotice: boolean,
-  clearTwitchTtsNotice: () => void,
+  isShowingTwitchTtsNotice: boolean;
+  clearTwitchTtsNotice: () => void;
 
-  isShowingPleaseFollowNotice: boolean,
-  clearPleaseFollowNotice: () => void,
+  isShowingPleaseFollowNotice: boolean;
+  clearPleaseFollowNotice: () => void;
 
-  isShowingBootstrapLanguageNotice: boolean,
-  clearBootstrapLanguageNotice: () => void,
+  isShowingBootstrapLanguageNotice: boolean;
+  clearBootstrapLanguageNotice: () => void;
 
-  enqueueTtsJob: (jobToken: string) => void,
-  ttsInferenceJobs: Array<TtsInferenceJob>,
+  enqueueTtsJob: (jobToken: string) => void;
+  ttsInferenceJobs: Array<TtsInferenceJob>;
 
-  enqueueW2lJob: (jobToken: string) => void,
-  w2lInferenceJobs: Array<W2lInferenceJob>,
+  enqueueW2lJob: (jobToken: string) => void;
+  w2lInferenceJobs: Array<W2lInferenceJob>;
 
-  enqueueTtsModelUploadJob: (jobToken: string) => void,
-  ttsModelUploadJobs: Array<TtsModelUploadJob>,
+  enqueueTtsModelUploadJob: (jobToken: string) => void;
+  ttsModelUploadJobs: Array<TtsModelUploadJob>;
 
-  enqueueW2lTemplateUploadJob: (jobToken: string) => void,
-  w2lTemplateUploadJobs: Array<W2lTemplateUploadJob>,
+  enqueueW2lTemplateUploadJob: (jobToken: string) => void;
+  w2lTemplateUploadJobs: Array<W2lTemplateUploadJob>;
 
-  enqueueVocoderUploadJob: (jobToken: string) => void,
-  vocoderUploadJobs: Array<VocoderUploadJob>,
+  enqueueVocoderUploadJob: (jobToken: string) => void;
+  vocoderUploadJobs: Array<VocoderUploadJob>;
 
-  textBuffer: string,
-  setTextBuffer: (textBuffer: string) => void,
-  clearTextBuffer: () => void,
+  textBuffer: string;
+  setTextBuffer: (textBuffer: string) => void;
+  clearTextBuffer: () => void;
 
-  ttsModels: Array<TtsModelListItem>,
-  setTtsModels: (ttsVoices: Array<TtsModelListItem>) => void,
+  ttsModels: Array<TtsModelListItem>;
+  setTtsModels: (ttsVoices: Array<TtsModelListItem>) => void;
 
-  allTtsCategories: TtsCategoryType[],
-  setAllTtsCategories: (allTtsCategories: TtsCategoryType[]) => void,
+  allTtsCategories: TtsCategoryType[];
+  setAllTtsCategories: (allTtsCategories: TtsCategoryType[]) => void;
 
-  allTtsCategoriesByTokenMap: Map<string, TtsCategoryType>,
-  allTtsModelsByTokenMap: Map<string, TtsModelListItem>,
-  ttsModelsByCategoryToken: Map<string, Set<TtsModelListItem>>,
+  allTtsCategoriesByTokenMap: Map<string, TtsCategoryType>;
+  allTtsModelsByTokenMap: Map<string, TtsModelListItem>;
+  ttsModelsByCategoryToken: Map<string, Set<TtsModelListItem>>;
 
-  dropdownCategories: TtsCategoryType[][],
-  setDropdownCategories: (dropdownCategories: TtsCategoryType[][]) => void,
-  selectedCategories: TtsCategoryType[],
-  setSelectedCategories: (selectedCategories: TtsCategoryType[]) => void,
+  dropdownCategories: TtsCategoryType[][];
+  setDropdownCategories: (dropdownCategories: TtsCategoryType[][]) => void;
+  selectedCategories: TtsCategoryType[];
+  setSelectedCategories: (selectedCategories: TtsCategoryType[]) => void;
 
-  maybeSelectedTtsModel?: TtsModelListItem,
-  setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void,
+  maybeSelectedTtsModel?: TtsModelListItem;
+  setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void;
 }
 
-interface State {
-}
+interface State {}
 
 class NewVocodesContainer extends React.Component<Props, State> {
-
   constructor(props: Props) {
     super(props);
 
-    this.state = {
-    }
+    this.state = {};
   }
 
-  logout = () => {
-  }
+  logout = () => {};
 
   public render() {
     return (
       <div id="main" className="mainwrap">
         <div id="viewable">
-
           <NewTopNavFc
             logoutHandler={this.logout}
             sessionWrapper={this.props.sessionWrapper}
@@ -145,15 +141,11 @@ class NewVocodesContainer extends React.Component<Props, State> {
 
           <Switch>
             <Route path="/firehose">
-              <FirehoseEventListFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <FirehoseEventListFc sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/leaderboard">
-              <LeaderboardFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <LeaderboardFc sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/login">
@@ -163,28 +155,21 @@ class NewVocodesContainer extends React.Component<Props, State> {
               />
             </Route>
 
-
             <Route path="/profile/:username/edit">
-              <ProfileEditFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <ProfileEditFc sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/profile/:username/ban">
-              <ProfileBanFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <ProfileBanFc sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/profile/:username">
-              <ProfileFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <ProfileFc sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/signup">
               <SignupPage
-                querySessionCallback={() => { }}
+                querySessionCallback={() => {}}
                 sessionWrapper={this.props.sessionWrapper}
               />
             </Route>
@@ -199,21 +184,15 @@ class NewVocodesContainer extends React.Component<Props, State> {
             */}
 
             <Route path="/tts/result/:token/edit">
-              <TtsResultEditPage
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <TtsResultEditPage sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/tts/result/:token/delete">
-              <TtsResultDeletePage
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <TtsResultDeletePage sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/tts/result/:token">
-              <TtsResultViewPage
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <TtsResultViewPage sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/tts/:token/edit">
@@ -225,9 +204,7 @@ class NewVocodesContainer extends React.Component<Props, State> {
             </Route>
 
             <Route path="/tts/:token/delete">
-              <TtsModelDeletePage
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <TtsModelDeletePage sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/tts/:token/categories">
@@ -248,27 +225,19 @@ class NewVocodesContainer extends React.Component<Props, State> {
             </Route>
 
             <Route path="/w2l/result/:token/edit">
-              <W2lResultEditFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <W2lResultEditFc sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/w2l/result/:token/delete">
-              <W2lResultDeleteFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <W2lResultDeleteFc sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/w2l/result/:token">
-              <W2lResultViewFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <W2lResultViewFc sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/w2l/:templateToken/edit">
-              <W2lTemplateEditFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <W2lTemplateEditFc sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/w2l/:templateToken/approval">
@@ -278,9 +247,7 @@ class NewVocodesContainer extends React.Component<Props, State> {
             </Route>
 
             <Route path="/w2l/:templateToken/delete">
-              <W2lTemplateDeleteFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <W2lTemplateDeleteFc sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/w2l/:templateSlug">
@@ -292,16 +259,16 @@ class NewVocodesContainer extends React.Component<Props, State> {
             </Route>
 
             <Route path="/video">
-              <W2lTemplateListFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <W2lTemplateListFc sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/upload/w2l_photo">
               <UploadW2lPhotoPage
                 sessionWrapper={this.props.sessionWrapper}
                 w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
-                enqueueW2lTemplateUploadJob={this.props.enqueueW2lTemplateUploadJob}
+                enqueueW2lTemplateUploadJob={
+                  this.props.enqueueW2lTemplateUploadJob
+                }
               />
             </Route>
 
@@ -309,7 +276,9 @@ class NewVocodesContainer extends React.Component<Props, State> {
               <UploadW2lVideoPage
                 sessionWrapper={this.props.sessionWrapper}
                 w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
-                enqueueW2lTemplateUploadJob={this.props.enqueueW2lTemplateUploadJob}
+                enqueueW2lTemplateUploadJob={
+                  this.props.enqueueW2lTemplateUploadJob
+                }
               />
             </Route>
 
@@ -330,15 +299,11 @@ class NewVocodesContainer extends React.Component<Props, State> {
             </Route>
 
             <Route path="/contribute">
-              <ContributeIndexPage
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <ContributeIndexPage sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/category/create">
-              <CreateCategoryPage
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <CreateCategoryPage sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/moderation/user/list">
@@ -396,9 +361,7 @@ class NewVocodesContainer extends React.Component<Props, State> {
             </Route>
 
             <Route path="/moderation">
-              <ModerationFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <ModerationFc sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route exact={true} path="/clone">
@@ -406,9 +369,7 @@ class NewVocodesContainer extends React.Component<Props, State> {
             </Route>
 
             <Route path="/patrons">
-              <PatronPage
-                sessionWrapper={this.props.sessionWrapper}
-              />
+              <PatronPage sessionWrapper={this.props.sessionWrapper} />
             </Route>
 
             <Route path="/about">
@@ -419,8 +380,12 @@ class NewVocodesContainer extends React.Component<Props, State> {
               <TermsPage />
             </Route>
 
+            <Route path="/guide">
+              <GuidePage />
+            </Route>
+
             <Route path="/old">
-              <VocodesPage/>
+              <VocodesPage />
             </Route>
 
             <Route path="/">
@@ -433,10 +398,16 @@ class NewVocodesContainer extends React.Component<Props, State> {
                 displayLanguage={this.props.displayLanguage}
                 isShowingTwitchTtsNotice={this.props.isShowingTwitchTtsNotice}
                 clearTwitchTtsNotice={this.props.clearTwitchTtsNotice}
-                isShowingPleaseFollowNotice={this.props.isShowingPleaseFollowNotice}
+                isShowingPleaseFollowNotice={
+                  this.props.isShowingPleaseFollowNotice
+                }
                 clearPleaseFollowNotice={this.props.clearPleaseFollowNotice}
-                isShowingBootstrapLanguageNotice={this.props.isShowingBootstrapLanguageNotice}
-                clearBootstrapLanguageNotice={this.props.clearBootstrapLanguageNotice}
+                isShowingBootstrapLanguageNotice={
+                  this.props.isShowingBootstrapLanguageNotice
+                }
+                clearBootstrapLanguageNotice={
+                  this.props.clearBootstrapLanguageNotice
+                }
                 enqueueTtsJob={this.props.enqueueTtsJob}
                 ttsInferenceJobs={this.props.ttsInferenceJobs}
                 ttsModelUploadJobs={this.props.ttsModelUploadJobs}
@@ -449,7 +420,9 @@ class NewVocodesContainer extends React.Component<Props, State> {
                 setTtsModels={this.props.setTtsModels}
                 allTtsCategories={this.props.allTtsCategories}
                 setAllTtsCategories={this.props.setAllTtsCategories}
-                allTtsCategoriesByTokenMap={this.props.allTtsCategoriesByTokenMap}
+                allTtsCategoriesByTokenMap={
+                  this.props.allTtsCategoriesByTokenMap
+                }
                 allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap}
                 ttsModelsByCategoryToken={this.props.ttsModelsByCategoryToken}
                 dropdownCategories={this.props.dropdownCategories}
@@ -460,17 +433,13 @@ class NewVocodesContainer extends React.Component<Props, State> {
                 setMaybeSelectedTtsModel={this.props.setMaybeSelectedTtsModel}
               />
             </Route>
-
           </Switch>
 
-          <NewFooterNavFc
-            sessionWrapper={this.props.sessionWrapper}
-          />
-
+          <NewFooterNavFc sessionWrapper={this.props.sessionWrapper} />
         </div>
       </div>
-    )
+    );
   }
 }
 
-export { NewVocodesContainer }
+export { NewVocodesContainer };
diff --git a/packages/fakeyou/src/v2/view/about/guide_page/GuidePage.tsx b/packages/fakeyou/src/v2/view/about/guide_page/GuidePage.tsx
new file mode 100644
index 0000000000..91b23a6a63
--- /dev/null
+++ b/packages/fakeyou/src/v2/view/about/guide_page/GuidePage.tsx
@@ -0,0 +1,137 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { container, item, panel, image } from "../../../../data/animation";
+import { Link } from "react-router-dom";
+
+interface Props {}
+
+function GuidePage(props: Props) {
+  return (
+    <motion.div initial="hidden" animate="visible" variants={container}>
+      <div className="container">
+        <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
+                src="/mascot/guide.webp"
+                className="img-fluid"
+                width="516"
+                height="444"
+                alt="FakeYou Kitsune Mascot!"
+                variants={image}
+              />
+            </div>
+          </div>
+          <div className="col-lg-6 px-md-2 ps-lg-5 ps-xl-2">
+            <div className="text-center text-lg-start">
+              <div>
+                <motion.h1
+                  className="display-5 fw-bold lh-1 mb-3"
+                  variants={item}
+                >
+                  FakeYou TTS Guide
+                </motion.h1>
+              </div>
+              <div className="mb-5">
+                <motion.p className="lead px-5 px-lg-0" variants={item}>
+                  <h4>How to generate the best sounding TTS</h4>
+                </motion.p>
+              </div>
+              <div>
+                <motion.div
+                  variants={item}
+                  className="d-flex justify-content-center justify-content-lg-start mb-5 mb-lg-0"
+                >
+                  <Link to="/">
+                    <button className="btn btn-primary">
+                      Generate your TTS
+                    </button>
+                  </Link>
+                </motion.div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <motion.div className="container-panel pt-4 pb-5" variants={panel}>
+        <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0">
+          <h1 className="panel-title fw-bold">Quick Tips</h1>
+          <div className="py-6 d-flex flex-column gap-4">
+            <p>
+              These are some tips to generate the best sounding text-to-speech.
+            </p>
+            <div>
+              <h2 className="mb-4">Preventing TTS strokes</h2>
+              <p>
+                A TTS stroke is when the generated audio becomes garbled and
+                incoherent.
+              </p>
+              <p>
+                This can be fixed by adding an ending punctuation as without
+                one, this will happen frequently. If the message still messes
+                up, add a comma at the start and end so the program can take a
+                brief pause and usually corrects it.
+              </p>
+            </div>
+            <div>
+              <h2 className="mb-4">
+                Purposefully misspelling words to get correct
+                pronunciation/manner of speech
+              </h2>
+              <p>
+                Sometimes the TTS program cannot accurately read the word or you
+                want a word pronounced a certain way. You can experiment with
+                it. For example, to say the word "ass" with a certain hit, spell
+                it as "asz". Or another example, Games = Gaymes.
+              </p>
+            </div>
+            <div>
+              <h2 className="mb-4">Fluffing</h2>
+              <p>
+                To get a certain emotion and personality in the message you
+                want, add fluff. To do this, add the first sentence with words
+                that you have no intention of using. Like bunch of cursing and
+                such. "
+                <span style={{ textDecoration: "line-through" }}>
+                  Fuck you bitch! I hate you!
+                </span>{" "}
+                I cant believe you said that to me!". You can remove the first
+                sentence you had no intention of using in an audio editor of
+                your choice like Audacity.
+              </p>
+            </div>
+            <div>
+              <h2 className="mb-4">Yelling</h2>
+              <p>
+                This only works if the dataset has yelling and transcript
+                properly. When you do the transcript of a character that yells,
+                add an exclamation mark on the transcript clip that has yelling
+                and periods for normal speech. This will easier trigger angry
+                emotions. But the yelling will likely not happen with smaller
+                datasets or if the yelling is not at all in the dataset.
+              </p>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      <motion.div className="container-panel pt-4 pb-5" variants={panel}>
+        <div className="panel p-3 p-lg-4 load-hidden mt-5 mt-lg-0">
+          <h2 className="panel-title fw-bold">Generate your TTS now!</h2>
+          <div className="py-6 d-flex flex-column gap-4">
+            <div>
+              <Link to="/">
+                <button className="btn btn-primary w-100">
+                  Go to text-to-speech generation page
+                </button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+export { GuidePage };
diff --git a/packages/fakeyou/src/v2/view/about/terms_page/TermsPage.tsx b/packages/fakeyou/src/v2/view/about/terms_page/TermsPage.tsx
index 65da2e2a3a..d0d6373b72 100644
--- a/packages/fakeyou/src/v2/view/about/terms_page/TermsPage.tsx
+++ b/packages/fakeyou/src/v2/view/about/terms_page/TermsPage.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { motion } from "framer-motion";
-import { container, item, panel } from "../../../../data/animation";
+import { container, item, panel, image } from "../../../../data/animation";
 import { ThirdPartyLinks } from "@storyteller/components/src/constants/ThirdPartyLinks";
 
 interface Props {}
@@ -8,15 +8,36 @@ interface Props {}
 function TermsPage(props: Props) {
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
-      <div className="container pt-5 pb-0 pb-lg-5 text-center text-lg-start">
-        <div className="d-flex flex-column">
-          <div>
-            <motion.h1 className="display-5 fw-bold" variants={item}>
-              Terms and Conditions
-            </motion.h1>
-            <motion.h4 className="mb-4 text-light" variants={item}>
-              Please use this technology responsibly.
-            </motion.h4>
+      <div className="container">
+        <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
+                src="/mascot/tou.webp"
+                className="img-fluid"
+                width="516"
+                height="444"
+                alt="FakeYou Kitsune Mascot!"
+                variants={image}
+              />
+            </div>
+          </div>
+          <div className="col-lg-6 px-md-2 ps-lg-5 ps-xl-2">
+            <div className="text-center text-lg-start">
+              <div>
+                <motion.h1
+                  className="display-5 fw-bold lh-1 mb-3"
+                  variants={item}
+                >
+                  Terms and Conditions
+                </motion.h1>
+              </div>
+              <div>
+                <motion.p className="lead" variants={item}>
+                  <h4>Please use this technology responsibly.</h4>
+                </motion.p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/fakeyou/src/v2/view/patrons/PatronPage.tsx b/packages/fakeyou/src/v2/view/patrons/PatronPage.tsx
index 200ad23b8f..14875e89ee 100644
--- a/packages/fakeyou/src/v2/view/patrons/PatronPage.tsx
+++ b/packages/fakeyou/src/v2/view/patrons/PatronPage.tsx
@@ -28,7 +28,10 @@ function PatronPage(props: Props) {
               expensive server bills.
             </motion.p>
 
-            <motion.div className="d-flex" variants={item}>
+            <motion.div
+              className="d-flex justify-content-center justify-content-lg-start"
+              variants={item}
+            >
               <a
                 href={ThirdPartyLinks.FAKEYOU_PATREON}
                 target="_blank"