From 0fc18f66101853fe33c68fad0120c07d05ea9df0 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Mon, 29 Jan 2024 18:13:53 +0700
Subject: [PATCH] footer fixed to bottom

---
 packages/fakeyou.com/src/AppNew.scss          |   33 -
 packages/fakeyou.com/src/scss/nav.scss        |    4 +
 .../fakeyou.com/src/v2/view/PageContainer.tsx | 1295 +++++++++--------
 .../fakeyou.com/src/v2/view/nav/FooterNav.tsx |  279 ++--
 4 files changed, 809 insertions(+), 802 deletions(-)

diff --git a/packages/fakeyou.com/src/AppNew.scss b/packages/fakeyou.com/src/AppNew.scss
index 07cef4f768..c7683717df 100644
--- a/packages/fakeyou.com/src/AppNew.scss
+++ b/packages/fakeyou.com/src/AppNew.scss
@@ -38,12 +38,6 @@ $headings-font-family: "Fira Sans", sans-serif;
     overflow-wrap: anywhere;
   }
 
-  //old wrapper
-  // .mainwrap {
-  //   max-width: 800px;
-  //   margin: auto;
-  // }
-
   canvas#spectrogram {
     margin: 0.5em 0;
     transform: scaleY(-1);
@@ -58,37 +52,10 @@ $headings-font-family: "Fira Sans", sans-serif;
     box-shadow: none;
   }
 
-  /*p {
-    a:link, 
-    a:visited {
-      color: rgb(119, 165, 235);
-      font-weight: bold;
-    }
-    a:hover, 
-    a:active{
-      color: rgb(85, 133, 204);
-      font-weight: bold;
-    }
-  }*/
-
-  // p {
-  //   a:before {
-  //     content: " ";
-  //   }
-  // }
-
   #main {
     position: relative; // Footer attachment.
     min-height: 100vh;
     overflow: hidden;
-
-    &.low-spec {
-      .animation-wrapper {
-        display: none;
-        visibility: hidden;
-        content-visibility: hidden;
-      }
-    }
   }
 
   .social {
diff --git a/packages/fakeyou.com/src/scss/nav.scss b/packages/fakeyou.com/src/scss/nav.scss
index 3d5ca0697a..33663dd2bd 100644
--- a/packages/fakeyou.com/src/scss/nav.scss
+++ b/packages/fakeyou.com/src/scss/nav.scss
@@ -52,6 +52,10 @@ $topbar-height: 66px;
 }
 
 #page-content-wrapper {
+  height: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   position: relative;
   padding-left: 260px;
diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index a225a0934e..48c683e656 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -240,137 +240,544 @@ class PageContainer extends React.Component<
 
           <div id="page-content-wrapper">
             <MobileMenu sessionWrapper={this.props.sessionWrapper} />
-            <Switch>
-              <Route path="/firehose">
-                <FirehoseEventListPage
-                  sessionWrapper={this.props.sessionWrapper}
+            <div id="main">
+              <Switch>
+                <Route path="/firehose">
+                  <FirehoseEventListPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/news">
+                  <NewsPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
+
+                <Route path="/channels">
+                  <ChannelsPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
+
+                <Route path="/leaderboard">
+                  <LeaderboardPage sessionWrapper={this.props.sessionWrapper} />
+                </Route>
+
+                <Route path="/login">
+                  <LoginPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    querySessionAction={this.props.querySessionAction}
+                    querySessionSubscriptionsAction={
+                      this.props.querySessionSubscriptionsAction
+                    }
+                  />
+                </Route>
+
+                <Route path="/password-reset/verify">
+                  <PasswordResetVerificationPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    querySessionAction={this.props.querySessionAction}
+                    querySessionSubscriptionsAction={
+                      this.props.querySessionSubscriptionsAction
+                    }
+                  />
+                </Route>
+
+                <Route path="/password-reset">
+                  <PasswordResetEmailPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/profile/:username/edit">
+                  <ProfileEditFc sessionWrapper={this.props.sessionWrapper} />
+                </Route>
+
+                <Route path="/profile/:username/ban">
+                  <ProfileBanFc sessionWrapper={this.props.sessionWrapper} />
+                </Route>
+
+                {/* New Profile Page */}
+                <Route path="/profile/:username">
+                  <NewProfilePage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
+
+                <Route path="/signup">
+                  <SignupPage
+                    querySessionCallback={() => {}}
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/pricing" exact={true}>
+                  <PricingPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
+
+                <Route path="/checkout_success" exact={true}>
+                  <CheckoutSuccessPage
+                    querySessionCallback={() => {}}
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+                <Route path="/checkout_cancel" exact={true}>
+                  <CheckoutCancelPage
+                    querySessionCallback={() => {}}
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+                <Route path="/portal_success" exact={true}>
+                  <PortalSuccessPage
+                    querySessionCallback={() => {}}
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/upload/sd">
+                  <UploadSdWeightPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/media/:token">
+                  <MediaPage />
+                </Route>
+
+                <Route path="/explore">
+                  <ExplorePage />
+                </Route>
+
+                <Route path="/weight/:weight_token/edit">
+                  <WeightEditPage sessionWrapper={this.props.sessionWrapper} />
+                </Route>
+
+                <Route
+                  path="/weight/:weight_token"
+                  render={props => (
+                    <WeightPage
+                      key={props.match.params.weight_token}
+                      sessionSubscriptionsWrapper={
+                        this.props.sessionSubscriptionsWrapper
+                      }
+                      inferenceJobs={this.props.inferenceJobs}
+                      enqueueInferenceJob={this.props.enqueueInferenceJob}
+                      inferenceJobsByCategory={
+                        this.props.inferenceJobsByCategory
+                      }
+                      ttsInferenceJobs={this.props.ttsInferenceJobs}
+                      enqueueTtsJob={this.props.enqueueTtsJob}
+                    />
+                  )}
                 />
-              </Route>
 
-              <Route path="/news">
-                <NewsPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  sessionSubscriptionsWrapper={
-                    this.props.sessionSubscriptionsWrapper
-                  }
-                />
-              </Route>
+                <Route path="/search/weights">
+                  <SearchPage />
+                </Route>
 
-              <Route path="/channels">
-                <ChannelsPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  sessionSubscriptionsWrapper={
-                    this.props.sessionSubscriptionsWrapper
-                  }
-                />
-              </Route>
+                <Route path="/tts/result/:token/edit">
+                  <TtsResultEditPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-              <Route path="/leaderboard">
-                <LeaderboardPage sessionWrapper={this.props.sessionWrapper} />
-              </Route>
+                <Route path="/tts/result/:token/delete">
+                  <TtsResultDeletePage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-              <Route path="/login">
-                <LoginPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  querySessionAction={this.props.querySessionAction}
-                  querySessionSubscriptionsAction={
-                    this.props.querySessionSubscriptionsAction
-                  }
-                />
-              </Route>
+                <Route path="/tts/result/:token">
+                  <TtsResultViewPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-              <Route path="/password-reset/verify">
-                <PasswordResetVerificationPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  querySessionAction={this.props.querySessionAction}
-                  querySessionSubscriptionsAction={
-                    this.props.querySessionSubscriptionsAction
-                  }
-                />
-              </Route>
+                <Route path="/tts/:token/edit">
+                  <TtsModelEditPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    enqueueTtsJob={this.props.enqueueTtsJob}
+                    ttsInferenceJobs={this.props.ttsInferenceJobs}
+                  />
+                </Route>
 
-              <Route path="/password-reset">
-                <PasswordResetEmailPage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
+                <Route path="/tts/:token/delete">
+                  <TtsModelDeletePage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-              <Route path="/profile/:username/edit">
-                <ProfileEditFc sessionWrapper={this.props.sessionWrapper} />
-              </Route>
+                <Route path="/tts/:token/categories">
+                  <TtsEditCategoriesPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-              <Route path="/profile/:username/ban">
-                <ProfileBanFc sessionWrapper={this.props.sessionWrapper} />
-              </Route>
+                <Route path="/tts/:token">
+                  <TtsModelViewPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                    enqueueTtsJob={this.props.enqueueTtsJob}
+                    inferenceJobs={this.props.inferenceJobs}
+                    ttsInferenceJobs={this.props.ttsInferenceJobs}
+                    textBuffer={this.props.textBuffer}
+                    setTextBuffer={this.props.setTextBuffer}
+                    clearTextBuffer={this.props.clearTextBuffer}
+                  />
+                </Route>
 
-              {/* New Profile Page */}
-              <Route path="/profile/:username">
-                <NewProfilePage
-                  sessionWrapper={this.props.sessionWrapper}
-                  sessionSubscriptionsWrapper={
-                    this.props.sessionSubscriptionsWrapper
-                  }
-                />
-              </Route>
+                <Route path="/w2l/result/:token/edit">
+                  <W2lResultEditPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-              <Route path="/signup">
-                <SignupPage
-                  querySessionCallback={() => {}}
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
+                <Route path="/w2l/result/:token/delete">
+                  <W2lResultDeletePage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-              <Route path="/pricing" exact={true}>
-                <PricingPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  sessionSubscriptionsWrapper={
-                    this.props.sessionSubscriptionsWrapper
-                  }
-                />
-              </Route>
+                <Route path="/w2l/result/:token">
+                  <W2lResultViewPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-              <Route path="/checkout_success" exact={true}>
-                <CheckoutSuccessPage
-                  querySessionCallback={() => {}}
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-              <Route path="/checkout_cancel" exact={true}>
-                <CheckoutCancelPage
-                  querySessionCallback={() => {}}
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-              <Route path="/portal_success" exact={true}>
-                <PortalSuccessPage
-                  querySessionCallback={() => {}}
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
+                <Route path="/w2l/:templateToken/edit">
+                  <W2lTemplateEditPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-              <Route path="/upload/sd">
-                <UploadSdWeightPage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
+                <Route path="/w2l/:templateToken/approval">
+                  <W2lTemplateApprovePage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-              <Route path="/media/:token">
-                <MediaPage />
-              </Route>
+                <Route path="/w2l/:templateToken/delete">
+                  <W2lTemplateDeletePage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-              <Route path="/explore">
-                <ExplorePage />
-              </Route>
+                <Route path="/w2l/:templateSlug">
+                  <W2lTemplateViewPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    enqueueW2lJob={this.props.enqueueW2lJob}
+                    w2lInferenceJobs={this.props.w2lInferenceJobs}
+                  />
+                </Route>
 
-              <Route path="/weight/:weight_token/edit">
-                <WeightEditPage sessionWrapper={this.props.sessionWrapper} />
-              </Route>
+                <Route path="/video">
+                  <W2lTemplateListPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
 
-              <Route
-                path="/weight/:weight_token"
-                render={props => (
-                  <WeightPage
-                    key={props.match.params.weight_token}
+                <Route path="/upload/w2l_photo">
+                  <UploadW2lPhotoPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
+                    enqueueW2lTemplateUploadJob={
+                      this.props.enqueueW2lTemplateUploadJob
+                    }
+                  />
+                </Route>
+
+                <Route path="/upload/w2l_video">
+                  <UploadW2lVideoPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
+                    enqueueW2lTemplateUploadJob={
+                      this.props.enqueueW2lTemplateUploadJob
+                    }
+                  />
+                </Route>
+
+                <Route path="/upload/tts">
+                  <UploadTtsModelPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    ttsModelUploadJobs={this.props.ttsModelUploadJobs}
+                    enqueueTtsModelUploadJob={
+                      this.props.enqueueTtsModelUploadJob
+                    }
+                  />
+                </Route>
+
+                <Route path="/upload/voice_conversion">
+                  <UploadVoiceConversionModel
+                    sessionWrapper={this.props.sessionWrapper}
+                    voiceConversionModelUploadJobs={
+                      this.props.voiceConversionModelUploadJobs
+                    }
+                    enqueueVoiceConversionModelUploadJob={
+                      this.props.enqueueVoiceConversionModelUploadJob
+                    }
+                  />
+                </Route>
+
+                <Route path="/upload/vocoder" exact={true}>
+                  <UploadVocoderPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    vocoderUploadJobs={this.props.vocoderUploadJobs}
+                    enqueueVocoderUploadJob={this.props.enqueueVocoderUploadJob}
+                  />
+                </Route>
+
+                <Route path="/contribute">
+                  <ContributeIndexPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/category/create">
+                  <CreateCategoryPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/moderation/user/list">
+                  <ModerationUserListFc
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/moderation/ip_bans/:ipAddress">
+                  <ModerationViewIpBanFc
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/moderation/ip_bans">
+                  <ModerationIpBanListFc
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/moderation/voice_stats">
+                  <ModerationVoiceStatsFc
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/moderation/job_stats">
+                  <ModerationJobStatsFc
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/moderation/job_control">
+                  <ModerationJobControlPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/moderation/tts_category/list">
+                  <ModerationTtsCategoryListPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/moderation/tts_category/edit/:token">
+                  <ModerationTtsCategoryEditPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/moderation/category/delete/:token">
+                  <ModerationCategoryDeletePage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/moderation/approve/w2l_templates">
+                  <ModerationPendingW2lTemplatesFc
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/moderation">
+                  <ModerationFc sessionWrapper={this.props.sessionWrapper} />
+                </Route>
+
+                <Route exact={true} path="/clone">
+                  <VoiceCloneRequestPage />
+                </Route>
+
+                <Route path="/patrons">
+                  <PatronPage sessionWrapper={this.props.sessionWrapper} />
+                </Route>
+
+                <Route path="/product-usage">
+                  <ProductUsageInfoPage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/voice-conversion/:token/delete">
+                  <VcModelDeletePage
+                    sessionWrapper={this.props.sessionWrapper}
+                  />
+                </Route>
+
+                <Route path="/voice-conversion/:token/edit">
+                  <VcModelEditPage sessionWrapper={this.props.sessionWrapper} />
+                </Route>
+
+                <Route path="/voice-conversion/:token">
+                  <VcModelViewPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                    inferenceJobsByCategory={this.props.inferenceJobsByCategory}
+                    setMaybeSelectedInferenceJob={
+                      this.props.maybeSelectedVoiceConversionModel
+                    }
+                  />
+                </Route>
+
+                <Route path="/voice-conversion">
+                  <VcModelListPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                    voiceConversionModels={this.props.voiceConversionModels}
+                    setVoiceConversionModels={
+                      this.props.setVoiceConversionModels
+                    }
+                    maybeSelectedVoiceConversionModel={
+                      this.props.maybeSelectedVoiceConversionModel
+                    }
+                    setMaybeSelectedVoiceConversionModel={
+                      this.props.setMaybeSelectedVoiceConversionModel
+                    }
+                    enqueueInferenceJob={this.props.enqueueInferenceJob}
+                    inferenceJobs={this.props.inferenceJobs}
+                    inferenceJobsByCategory={this.props.inferenceJobsByCategory}
+                  />
+                </Route>
+
+                <Route path="/about">
+                  <AboutPage />
+                </Route>
+
+                <Route path="/face-animator/:mediaToken?">
+                  <FaceAnimator
+                    {...{
+                      enqueueInferenceJob: this.props.enqueueInferenceJob,
+                      sessionSubscriptionsWrapper:
+                        this.props.sessionSubscriptionsWrapper,
+                      inferenceJobs: this.props.inferenceJobs,
+                      inferenceJobsByCategory:
+                        this.props.inferenceJobsByCategory,
+                    }}
+                  />
+                </Route>
+
+                <Route path="/fbx-to-gltf/:mediaToken?">
+                  <FbxToGltfPage />
+                </Route>
+
+                <Route path="/studio">
+                  <StorytellerStudioListPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
+
+                <Route path="/commissions">
+                  <CommunityCommissionsPage />
+                </Route>
+
+                <Route path="/terms">
+                  <TermsPage />
+                </Route>
+
+                <Route path="/privacy">
+                  <PrivacyPage />
+                </Route>
+
+                <Route path="/guide">
+                  <GuidePage />
+                </Route>
+
+                <Route path="/old">
+                  <VocodesPage />
+                </Route>
+
+                <Route path="/dev-upload">
+                  <DevUpload />
+                </Route>
+
+                {/* Route for initial voice creation */}
+                <Route exact path="/voice-designer/create">
+                  <VoiceDesignerFormPage
+                    {...{
+                      enqueueInferenceJob: this.props.enqueueInferenceJob,
+                      sessionWrapper: this.props.sessionWrapper,
+                      sessionSubscriptionsWrapper:
+                        this.props.sessionSubscriptionsWrapper,
+                    }}
+                  />
+                </Route>
+
+                {/* Route for editing the dataset details */}
+                <Route exact path="/voice-designer/dataset/:dataset_token/edit">
+                  <VoiceDesignerFormPage
+                    {...{
+                      enqueueInferenceJob: this.props.enqueueInferenceJob,
+                      sessionWrapper: this.props.sessionWrapper,
+                      sessionSubscriptionsWrapper:
+                        this.props.sessionSubscriptionsWrapper,
+                    }}
+                  />
+                </Route>
+
+                {/* Route for handling dataset token for uploading samples */}
+                <Route
+                  exact
+                  path="/voice-designer/dataset/:dataset_token/upload"
+                >
+                  <VoiceDesignerFormPage
+                    {...{
+                      enqueueInferenceJob: this.props.enqueueInferenceJob,
+                      sessionWrapper: this.props.sessionWrapper,
+                      sessionSubscriptionsWrapper:
+                        this.props.sessionSubscriptionsWrapper,
+                    }}
+                  />
+                </Route>
+
+                <Route path="/voice-designer/voice/:voice_token/edit">
+                  <VoiceDesignerVoiceEditPage />
+                </Route>
+
+                <Route path="/voice-designer/voice/:voice_token">
+                  <VoiceDesignerUseVoicePage
+                    sessionWrapper={this.props.sessionWrapper}
                     sessionSubscriptionsWrapper={
                       this.props.sessionSubscriptionsWrapper
                     }
@@ -378,529 +785,159 @@ class PageContainer extends React.Component<
                     enqueueInferenceJob={this.props.enqueueInferenceJob}
                     inferenceJobsByCategory={this.props.inferenceJobsByCategory}
                     ttsInferenceJobs={this.props.ttsInferenceJobs}
-                    enqueueTtsJob={this.props.enqueueTtsJob}
                   />
-                )}
-              />
+                </Route>
 
-              <Route path="/search/weights">
-                <SearchPage />
-              </Route>
+                <Route path="/voice-designer">
+                  <VoiceDesignerMainPage />
+                </Route>
 
-              <Route path="/tts/result/:token/edit">
-                <TtsResultEditPage sessionWrapper={this.props.sessionWrapper} />
-              </Route>
+                <Route path="/generate-speech">
+                  <GenerateSpeechPage />
+                </Route>
 
-              <Route path="/tts/result/:token/delete">
-                <TtsResultDeletePage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
+                <Route path="/video-mocap/:mediaToken?">
+                  <VideoMocap
+                    {...{
+                      enqueueInferenceJob: this.props.enqueueInferenceJob,
+                      sessionSubscriptionsWrapper:
+                        this.props.sessionSubscriptionsWrapper,
+                      inferenceJobs: this.props.inferenceJobs,
+                      inferenceJobsByCategory:
+                        this.props.inferenceJobsByCategory,
+                    }}
+                  />
+                </Route>
 
-              <Route path="/tts/result/:token">
-                <TtsResultViewPage sessionWrapper={this.props.sessionWrapper} />
-              </Route>
+                <Route path="/character/donald-trump">
+                  <TrumpTtsPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                    enqueueTtsJob={this.props.enqueueTtsJob}
+                    inferenceJobs={this.props.inferenceJobs}
+                    ttsInferenceJobs={this.props.ttsInferenceJobs}
+                    ttsModelUploadJobs={this.props.ttsModelUploadJobs}
+                    w2lInferenceJobs={this.props.w2lInferenceJobs}
+                    w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
+                    textBuffer={this.props.textBuffer}
+                    setTextBuffer={this.props.setTextBuffer}
+                    clearTextBuffer={this.props.clearTextBuffer}
+                    ttsModels={this.props.ttsModels}
+                    setTtsModels={this.props.setTtsModels}
+                    allTtsCategories={this.props.allTtsCategories}
+                    setAllTtsCategories={this.props.setAllTtsCategories}
+                    allTtsCategoriesByTokenMap={
+                      this.props.allTtsCategoriesByTokenMap
+                    }
+                    computedTtsCategoryAssignments={
+                      this.props.computedTtsCategoryAssignments
+                    }
+                    setComputedTtsCategoryAssignments={
+                      this.props.setComputedTtsCategoryAssignments
+                    }
+                    allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap}
+                    ttsModelsByCategoryToken={
+                      this.props.ttsModelsByCategoryToken
+                    }
+                    dropdownCategories={this.props.dropdownCategories}
+                    setDropdownCategories={this.props.setDropdownCategories}
+                    selectedCategories={this.props.selectedCategories}
+                    setSelectedCategories={this.props.setSelectedCategories}
+                    maybeSelectedTtsModel={this.props.maybeSelectedTtsModel}
+                    setMaybeSelectedTtsModel={
+                      this.props.setMaybeSelectedTtsModel
+                    }
+                    selectedTtsLanguageScope={
+                      this.props.selectedTtsLanguageScope
+                    }
+                    setSelectedTtsLanguageScope={
+                      this.props.setSelectedTtsLanguageScope
+                    }
+                  />
+                </Route>
 
-              <Route path="/tts/:token/edit">
-                <TtsModelEditPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  enqueueTtsJob={this.props.enqueueTtsJob}
-                  ttsInferenceJobs={this.props.ttsInferenceJobs}
-                />
-              </Route>
+                <Route path="/tts" exact={true}>
+                  <TtsModelListPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                    isShowingVocodesNotice={this.props.isShowingVocodesNotice}
+                    clearVocodesNotice={this.props.clearVocodesNotice}
+                    isShowingLanguageNotice={this.props.isShowingLangaugeNotice}
+                    clearLanguageNotice={this.props.clearLanguageNotice}
+                    displayLanguage={this.props.displayLanguage}
+                    isShowingTwitchTtsNotice={
+                      this.props.isShowingTwitchTtsNotice
+                    }
+                    clearTwitchTtsNotice={this.props.clearTwitchTtsNotice}
+                    isShowingPleaseFollowNotice={
+                      this.props.isShowingPleaseFollowNotice
+                    }
+                    clearPleaseFollowNotice={this.props.clearPleaseFollowNotice}
+                    isShowingBootstrapLanguageNotice={
+                      this.props.isShowingBootstrapLanguageNotice
+                    }
+                    clearBootstrapLanguageNotice={
+                      this.props.clearBootstrapLanguageNotice
+                    }
+                    enqueueInferenceJob={this.props.enqueueInferenceJob}
+                    inferenceJobs={this.props.inferenceJobs}
+                    inferenceJobsByCategory={this.props.inferenceJobsByCategory}
+                    enqueueTtsJob={this.props.enqueueTtsJob}
+                    ttsInferenceJobs={this.props.ttsInferenceJobs}
+                    ttsModelUploadJobs={this.props.ttsModelUploadJobs}
+                    w2lInferenceJobs={this.props.w2lInferenceJobs}
+                    w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
+                    textBuffer={this.props.textBuffer}
+                    setTextBuffer={this.props.setTextBuffer}
+                    clearTextBuffer={this.props.clearTextBuffer}
+                    ttsModels={this.props.ttsModels}
+                    setTtsModels={this.props.setTtsModels}
+                    allTtsCategories={this.props.allTtsCategories}
+                    setAllTtsCategories={this.props.setAllTtsCategories}
+                    allTtsCategoriesByTokenMap={
+                      this.props.allTtsCategoriesByTokenMap
+                    }
+                    computedTtsCategoryAssignments={
+                      this.props.computedTtsCategoryAssignments
+                    }
+                    setComputedTtsCategoryAssignments={
+                      this.props.setComputedTtsCategoryAssignments
+                    }
+                    allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap}
+                    ttsModelsByCategoryToken={
+                      this.props.ttsModelsByCategoryToken
+                    }
+                    dropdownCategories={this.props.dropdownCategories}
+                    setDropdownCategories={this.props.setDropdownCategories}
+                    selectedCategories={this.props.selectedCategories}
+                    setSelectedCategories={this.props.setSelectedCategories}
+                    maybeSelectedTtsModel={this.props.maybeSelectedTtsModel}
+                    setMaybeSelectedTtsModel={
+                      this.props.setMaybeSelectedTtsModel
+                    }
+                    selectedTtsLanguageScope={
+                      this.props.selectedTtsLanguageScope
+                    }
+                    setSelectedTtsLanguageScope={
+                      this.props.setSelectedTtsLanguageScope
+                    }
+                  />
+                </Route>
 
-              <Route path="/tts/:token/delete">
-                <TtsModelDeletePage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/tts/:token/categories">
-                <TtsEditCategoriesPage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/tts/:token">
-                <TtsModelViewPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  sessionSubscriptionsWrapper={
-                    this.props.sessionSubscriptionsWrapper
-                  }
-                  enqueueTtsJob={this.props.enqueueTtsJob}
-                  inferenceJobs={this.props.inferenceJobs}
-                  ttsInferenceJobs={this.props.ttsInferenceJobs}
-                  textBuffer={this.props.textBuffer}
-                  setTextBuffer={this.props.setTextBuffer}
-                  clearTextBuffer={this.props.clearTextBuffer}
-                />
-              </Route>
-
-              <Route path="/w2l/result/:token/edit">
-                <W2lResultEditPage sessionWrapper={this.props.sessionWrapper} />
-              </Route>
-
-              <Route path="/w2l/result/:token/delete">
-                <W2lResultDeletePage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/w2l/result/:token">
-                <W2lResultViewPage sessionWrapper={this.props.sessionWrapper} />
-              </Route>
-
-              <Route path="/w2l/:templateToken/edit">
-                <W2lTemplateEditPage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/w2l/:templateToken/approval">
-                <W2lTemplateApprovePage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/w2l/:templateToken/delete">
-                <W2lTemplateDeletePage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/w2l/:templateSlug">
-                <W2lTemplateViewPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  enqueueW2lJob={this.props.enqueueW2lJob}
-                  w2lInferenceJobs={this.props.w2lInferenceJobs}
-                />
-              </Route>
-
-              <Route path="/video">
-                <W2lTemplateListPage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/upload/w2l_photo">
-                <UploadW2lPhotoPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
-                  enqueueW2lTemplateUploadJob={
-                    this.props.enqueueW2lTemplateUploadJob
-                  }
-                />
-              </Route>
-
-              <Route path="/upload/w2l_video">
-                <UploadW2lVideoPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
-                  enqueueW2lTemplateUploadJob={
-                    this.props.enqueueW2lTemplateUploadJob
-                  }
-                />
-              </Route>
-
-              <Route path="/upload/tts">
-                <UploadTtsModelPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  ttsModelUploadJobs={this.props.ttsModelUploadJobs}
-                  enqueueTtsModelUploadJob={this.props.enqueueTtsModelUploadJob}
-                />
-              </Route>
-
-              <Route path="/upload/voice_conversion">
-                <UploadVoiceConversionModel
-                  sessionWrapper={this.props.sessionWrapper}
-                  voiceConversionModelUploadJobs={
-                    this.props.voiceConversionModelUploadJobs
-                  }
-                  enqueueVoiceConversionModelUploadJob={
-                    this.props.enqueueVoiceConversionModelUploadJob
-                  }
-                />
-              </Route>
-
-              <Route path="/upload/vocoder" exact={true}>
-                <UploadVocoderPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  vocoderUploadJobs={this.props.vocoderUploadJobs}
-                  enqueueVocoderUploadJob={this.props.enqueueVocoderUploadJob}
-                />
-              </Route>
-
-              <Route path="/contribute">
-                <ContributeIndexPage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/category/create">
-                <CreateCategoryPage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/moderation/user/list">
-                <ModerationUserListFc
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/moderation/ip_bans/:ipAddress">
-                <ModerationViewIpBanFc
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/moderation/ip_bans">
-                <ModerationIpBanListFc
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/moderation/voice_stats">
-                <ModerationVoiceStatsFc
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/moderation/job_stats">
-                <ModerationJobStatsFc
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/moderation/job_control">
-                <ModerationJobControlPage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/moderation/tts_category/list">
-                <ModerationTtsCategoryListPage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/moderation/tts_category/edit/:token">
-                <ModerationTtsCategoryEditPage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/moderation/category/delete/:token">
-                <ModerationCategoryDeletePage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/moderation/approve/w2l_templates">
-                <ModerationPendingW2lTemplatesFc
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/moderation">
-                <ModerationFc sessionWrapper={this.props.sessionWrapper} />
-              </Route>
-
-              <Route exact={true} path="/clone">
-                <VoiceCloneRequestPage />
-              </Route>
-
-              <Route path="/patrons">
-                <PatronPage sessionWrapper={this.props.sessionWrapper} />
-              </Route>
-
-              <Route path="/product-usage">
-                <ProductUsageInfoPage
-                  sessionWrapper={this.props.sessionWrapper}
-                />
-              </Route>
-
-              <Route path="/voice-conversion/:token/delete">
-                <VcModelDeletePage sessionWrapper={this.props.sessionWrapper} />
-              </Route>
-
-              <Route path="/voice-conversion/:token/edit">
-                <VcModelEditPage sessionWrapper={this.props.sessionWrapper} />
-              </Route>
-
-              <Route path="/voice-conversion/:token">
-                <VcModelViewPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  sessionSubscriptionsWrapper={
-                    this.props.sessionSubscriptionsWrapper
-                  }
-                  inferenceJobsByCategory={this.props.inferenceJobsByCategory}
-                  setMaybeSelectedInferenceJob={
-                    this.props.maybeSelectedVoiceConversionModel
-                  }
-                />
-              </Route>
-
-              <Route path="/voice-conversion">
-                <VcModelListPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  sessionSubscriptionsWrapper={
-                    this.props.sessionSubscriptionsWrapper
-                  }
-                  voiceConversionModels={this.props.voiceConversionModels}
-                  setVoiceConversionModels={this.props.setVoiceConversionModels}
-                  maybeSelectedVoiceConversionModel={
-                    this.props.maybeSelectedVoiceConversionModel
-                  }
-                  setMaybeSelectedVoiceConversionModel={
-                    this.props.setMaybeSelectedVoiceConversionModel
-                  }
-                  enqueueInferenceJob={this.props.enqueueInferenceJob}
-                  inferenceJobs={this.props.inferenceJobs}
-                  inferenceJobsByCategory={this.props.inferenceJobsByCategory}
-                />
-              </Route>
-
-              <Route path="/about">
-                <AboutPage />
-              </Route>
-
-              <Route path="/face-animator/:mediaToken?">
-                <FaceAnimator
-                  {...{
-                    enqueueInferenceJob: this.props.enqueueInferenceJob,
-                    sessionSubscriptionsWrapper:
-                      this.props.sessionSubscriptionsWrapper,
-                    inferenceJobs: this.props.inferenceJobs,
-                    inferenceJobsByCategory: this.props.inferenceJobsByCategory,
-                  }}
-                />
-              </Route>
-
-              <Route path="/fbx-to-gltf/:mediaToken?">
-                <FbxToGltfPage />
-              </Route>
-
-              <Route path="/studio">
-                <StorytellerStudioListPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  sessionSubscriptionsWrapper={
-                    this.props.sessionSubscriptionsWrapper
-                  }
-                />
-              </Route>
-
-              <Route path="/commissions">
-                <CommunityCommissionsPage />
-              </Route>
-
-              <Route path="/terms">
-                <TermsPage />
-              </Route>
-
-              <Route path="/privacy">
-                <PrivacyPage />
-              </Route>
-
-              <Route path="/guide">
-                <GuidePage />
-              </Route>
-
-              <Route path="/old">
-                <VocodesPage />
-              </Route>
-
-              <Route path="/dev-upload">
-                <DevUpload />
-              </Route>
-
-              {/* Route for initial voice creation */}
-              <Route exact path="/voice-designer/create">
-                <VoiceDesignerFormPage
-                  {...{
-                    enqueueInferenceJob: this.props.enqueueInferenceJob,
-                    sessionWrapper: this.props.sessionWrapper,
-                    sessionSubscriptionsWrapper:
-                      this.props.sessionSubscriptionsWrapper,
-                  }}
-                />
-              </Route>
-
-              {/* Route for editing the dataset details */}
-              <Route exact path="/voice-designer/dataset/:dataset_token/edit">
-                <VoiceDesignerFormPage
-                  {...{
-                    enqueueInferenceJob: this.props.enqueueInferenceJob,
-                    sessionWrapper: this.props.sessionWrapper,
-                    sessionSubscriptionsWrapper:
-                      this.props.sessionSubscriptionsWrapper,
-                  }}
-                />
-              </Route>
-
-              {/* Route for handling dataset token for uploading samples */}
-              <Route exact path="/voice-designer/dataset/:dataset_token/upload">
-                <VoiceDesignerFormPage
-                  {...{
-                    enqueueInferenceJob: this.props.enqueueInferenceJob,
-                    sessionWrapper: this.props.sessionWrapper,
-                    sessionSubscriptionsWrapper:
-                      this.props.sessionSubscriptionsWrapper,
-                  }}
-                />
-              </Route>
-
-              <Route path="/voice-designer/voice/:voice_token/edit">
-                <VoiceDesignerVoiceEditPage />
-              </Route>
-
-              <Route path="/voice-designer/voice/:voice_token">
-                <VoiceDesignerUseVoicePage
-                  sessionWrapper={this.props.sessionWrapper}
-                  sessionSubscriptionsWrapper={
-                    this.props.sessionSubscriptionsWrapper
-                  }
-                  inferenceJobs={this.props.inferenceJobs}
-                  enqueueInferenceJob={this.props.enqueueInferenceJob}
-                  inferenceJobsByCategory={this.props.inferenceJobsByCategory}
-                  ttsInferenceJobs={this.props.ttsInferenceJobs}
-                />
-              </Route>
-
-              <Route path="/voice-designer">
-                <VoiceDesignerMainPage />
-              </Route>
-
-              <Route path="/generate-speech">
-                <GenerateSpeechPage />
-              </Route>
-
-              <Route path="/video-mocap/:mediaToken?">
-                <VideoMocap
-                  {...{
-                    enqueueInferenceJob: this.props.enqueueInferenceJob,
-                    sessionSubscriptionsWrapper:
-                      this.props.sessionSubscriptionsWrapper,
-                    inferenceJobs: this.props.inferenceJobs,
-                    inferenceJobsByCategory: this.props.inferenceJobsByCategory,
-                  }}
-                />
-              </Route>
-
-              <Route path="/character/donald-trump">
-                <TrumpTtsPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  sessionSubscriptionsWrapper={
-                    this.props.sessionSubscriptionsWrapper
-                  }
-                  enqueueTtsJob={this.props.enqueueTtsJob}
-                  inferenceJobs={this.props.inferenceJobs}
-                  ttsInferenceJobs={this.props.ttsInferenceJobs}
-                  ttsModelUploadJobs={this.props.ttsModelUploadJobs}
-                  w2lInferenceJobs={this.props.w2lInferenceJobs}
-                  w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
-                  textBuffer={this.props.textBuffer}
-                  setTextBuffer={this.props.setTextBuffer}
-                  clearTextBuffer={this.props.clearTextBuffer}
-                  ttsModels={this.props.ttsModels}
-                  setTtsModels={this.props.setTtsModels}
-                  allTtsCategories={this.props.allTtsCategories}
-                  setAllTtsCategories={this.props.setAllTtsCategories}
-                  allTtsCategoriesByTokenMap={
-                    this.props.allTtsCategoriesByTokenMap
-                  }
-                  computedTtsCategoryAssignments={
-                    this.props.computedTtsCategoryAssignments
-                  }
-                  setComputedTtsCategoryAssignments={
-                    this.props.setComputedTtsCategoryAssignments
-                  }
-                  allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap}
-                  ttsModelsByCategoryToken={this.props.ttsModelsByCategoryToken}
-                  dropdownCategories={this.props.dropdownCategories}
-                  setDropdownCategories={this.props.setDropdownCategories}
-                  selectedCategories={this.props.selectedCategories}
-                  setSelectedCategories={this.props.setSelectedCategories}
-                  maybeSelectedTtsModel={this.props.maybeSelectedTtsModel}
-                  setMaybeSelectedTtsModel={this.props.setMaybeSelectedTtsModel}
-                  selectedTtsLanguageScope={this.props.selectedTtsLanguageScope}
-                  setSelectedTtsLanguageScope={
-                    this.props.setSelectedTtsLanguageScope
-                  }
-                />
-              </Route>
-
-              <Route path="/tts" exact={true}>
-                <TtsModelListPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  sessionSubscriptionsWrapper={
-                    this.props.sessionSubscriptionsWrapper
-                  }
-                  isShowingVocodesNotice={this.props.isShowingVocodesNotice}
-                  clearVocodesNotice={this.props.clearVocodesNotice}
-                  isShowingLanguageNotice={this.props.isShowingLangaugeNotice}
-                  clearLanguageNotice={this.props.clearLanguageNotice}
-                  displayLanguage={this.props.displayLanguage}
-                  isShowingTwitchTtsNotice={this.props.isShowingTwitchTtsNotice}
-                  clearTwitchTtsNotice={this.props.clearTwitchTtsNotice}
-                  isShowingPleaseFollowNotice={
-                    this.props.isShowingPleaseFollowNotice
-                  }
-                  clearPleaseFollowNotice={this.props.clearPleaseFollowNotice}
-                  isShowingBootstrapLanguageNotice={
-                    this.props.isShowingBootstrapLanguageNotice
-                  }
-                  clearBootstrapLanguageNotice={
-                    this.props.clearBootstrapLanguageNotice
-                  }
-                  enqueueInferenceJob={this.props.enqueueInferenceJob}
-                  inferenceJobs={this.props.inferenceJobs}
-                  inferenceJobsByCategory={this.props.inferenceJobsByCategory}
-                  enqueueTtsJob={this.props.enqueueTtsJob}
-                  ttsInferenceJobs={this.props.ttsInferenceJobs}
-                  ttsModelUploadJobs={this.props.ttsModelUploadJobs}
-                  w2lInferenceJobs={this.props.w2lInferenceJobs}
-                  w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
-                  textBuffer={this.props.textBuffer}
-                  setTextBuffer={this.props.setTextBuffer}
-                  clearTextBuffer={this.props.clearTextBuffer}
-                  ttsModels={this.props.ttsModels}
-                  setTtsModels={this.props.setTtsModels}
-                  allTtsCategories={this.props.allTtsCategories}
-                  setAllTtsCategories={this.props.setAllTtsCategories}
-                  allTtsCategoriesByTokenMap={
-                    this.props.allTtsCategoriesByTokenMap
-                  }
-                  computedTtsCategoryAssignments={
-                    this.props.computedTtsCategoryAssignments
-                  }
-                  setComputedTtsCategoryAssignments={
-                    this.props.setComputedTtsCategoryAssignments
-                  }
-                  allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap}
-                  ttsModelsByCategoryToken={this.props.ttsModelsByCategoryToken}
-                  dropdownCategories={this.props.dropdownCategories}
-                  setDropdownCategories={this.props.setDropdownCategories}
-                  selectedCategories={this.props.selectedCategories}
-                  setSelectedCategories={this.props.setSelectedCategories}
-                  maybeSelectedTtsModel={this.props.maybeSelectedTtsModel}
-                  setMaybeSelectedTtsModel={this.props.setMaybeSelectedTtsModel}
-                  selectedTtsLanguageScope={this.props.selectedTtsLanguageScope}
-                  setSelectedTtsLanguageScope={
-                    this.props.setSelectedTtsLanguageScope
-                  }
-                />
-              </Route>
-
-              <Route path="/" exact={true}>
-                <LandingPage
-                  sessionWrapper={this.props.sessionWrapper}
-                  sessionSubscriptionsWrapper={
-                    this.props.sessionSubscriptionsWrapper
-                  }
-                />
-              </Route>
-            </Switch>
+                <Route path="/" exact={true}>
+                  <LandingPage
+                    sessionWrapper={this.props.sessionWrapper}
+                    sessionSubscriptionsWrapper={
+                      this.props.sessionSubscriptionsWrapper
+                    }
+                  />
+                </Route>
+              </Switch>
+            </div>
             <FooterNav sessionWrapper={this.props.sessionWrapper} />
           </div>
         </div>
diff --git a/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx b/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx
index 97957e554a..b59d7614e3 100644
--- a/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx
+++ b/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx
@@ -18,6 +18,7 @@ import {
   GetServerInfoSuccessResponse,
 } from "@storyteller/components/src/api/server/GetServerInfo";
 import { useLocalize } from "hooks";
+import { Container } from "components/common";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -77,152 +78,150 @@ function FooterNav(props: Props) {
   }
 
   return (
-    <div>
-      <footer id="footer">
-        <div className="container py-5">
-          <div className="row gx-5 gy-5">
-            <div className="col-12 col-lg-3 d-flex flex-column gap-4 align-items-center align-items-lg-start">
-              <Link to="/">
-                <img
-                  src="/fakeyou/FakeYou-Logo.png"
-                  alt="FakeYou: Cartoon and Celebrity Text to Speech"
-                  height="36"
-                />
-              </Link>
-              <div className="d-flex gap-3">
-                <a
-                  className="social-icon"
-                  href={ThirdPartyLinks.FAKEYOU_DISCORD}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  title="Join our Discord Server"
-                >
-                  <FontAwesomeIcon icon={faDiscord} className="me-2" />
-                </a>
-                <a
-                  className="social-icon"
-                  href={ThirdPartyLinks.FAKEYOU_TWITTER_WITH_FOLLOW_INTENT}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  title="Follow us on Twitter"
-                >
-                  <FontAwesomeIcon icon={faTwitter} className="me-2" />
-                </a>
-                <a
-                  className="social-icon"
-                  href={ThirdPartyLinks.FAKEYOU_TIKTOK}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  title="Follow us on Tiktok"
-                >
-                  <FontAwesomeIcon icon={faTiktok} className="me-2" />
-                </a>
-                <a
-                  className="social-icon"
-                  href={ThirdPartyLinks.FAKEYOU_TWITCH}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  title="Subscribe to our Twitch Channel"
-                >
-                  <FontAwesomeIcon icon={faTwitch} className="me-2" />
-                </a>
-              </div>
-            </div>
-            <div className="py-2 col-12 col-lg-3 d-flex flex-column gap-2 gap-lg-3 align-items-center align-items-lg-start">
-              <p className="fw-bold">{t("productsTitle")}</p>
-              <li>
-                <Link to="/tts">{t("productTts")}</Link>
-              </li>
-
-              <li>
-                <Link to="/voice-conversion">{t("productVc")}</Link>
-              </li>
-
-              <li>
-                <Link to="/voice-designer">Voice Designer</Link>
-              </li>
-
-              <li>
-                <Link to="/face-animator">{t("productFaceAnimator")}</Link>
-              </li>
-
-              <li>
-                <Link to="/contribute">{t("productUploadModels")}</Link>
-              </li>
-            </div>
-            <div className="py-2 col-12 col-lg-3 d-flex flex-column gap-2 gap-lg-3 align-items-center align-items-lg-start">
-              <p className="fw-bold">{t("communityTitle")}</p>
-
-              <li>
-                <a
-                  href={ThirdPartyLinks.FAKEYOU_DISCORD}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {t("communityDiscord")}
-                </a>
-              </li>
-
-              <li>
-                <Link to="/leaderboard">{t("communityLeaderboard")}</Link>
-              </li>
-
-              <li>
-                <Link to="/guide">{t("communityGuide")}</Link>
-              </li>
-
-              <li>
-                <Link to={myDataLink}>{t("communityProfile")}</Link>
-              </li>
-            </div>
-            <div className="py-2 col-12 col-lg-3 d-flex flex-column gap-2 gap-lg-3 align-items-center align-items-lg-start">
-              <p className="fw-bold">{t("infoTitle")}</p>
-              <li>
-                <Link to={WebUrl.pricingPageWithReferer("footer")}>
-                  {t("infoPricing")}
-                </Link>
-              </li>
-              <li>
-                <Link to={WebUrl.aboutUsPage()}>{t("infoAbout")}</Link>
-              </li>
-
-              <li>
-                <Link to={WebUrl.termsPage()}>{t("infoTerms")}</Link>
-              </li>
-
-              <li>
-                <Link to={WebUrl.privacyPage()}>{t("infoPrivacyPolicy")}</Link>
-              </li>
-              <li>
-                <a href={WebUrl.developerDocs()}>{t("infoApiDocs")}</a>
-              </li>
-            </div>
-          </div>
-
-          <div className="pt-4">
-            <hr />
-          </div>
-
-          <div className="d-flex flex-column flex-lg-row pt-2 align-items-center gap-0 gap-lg-4">
-            <span className="flex-grow-1">
-              © 2023 FakeYou by{" "}
-              <a href="https://storyteller.ai" target="_blank" rel="noreferrer">
-                Storyteller.ai
+    <footer id="footer">
+      <Container type="panel" className="py-5">
+        <div className="row g-5">
+          <div className="col-12 col-lg-3 d-flex flex-column gap-4 align-items-center align-items-lg-start">
+            <Link to="/">
+              <img
+                src="/fakeyou/FakeYou-Logo.png"
+                alt="FakeYou: Cartoon and Celebrity Text to Speech"
+                height="34"
+              />
+            </Link>
+            <div className="d-flex gap-3">
+              <a
+                className="social-icon"
+                href={ThirdPartyLinks.FAKEYOU_DISCORD}
+                target="_blank"
+                rel="noopener noreferrer"
+                title="Join our Discord Server"
+              >
+                <FontAwesomeIcon icon={faDiscord} className="me-2" />
+              </a>
+              <a
+                className="social-icon"
+                href={ThirdPartyLinks.FAKEYOU_TWITTER_WITH_FOLLOW_INTENT}
+                target="_blank"
+                rel="noopener noreferrer"
+                title="Follow us on Twitter"
+              >
+                <FontAwesomeIcon icon={faTwitter} className="me-2" />
+              </a>
+              <a
+                className="social-icon"
+                href={ThirdPartyLinks.FAKEYOU_TIKTOK}
+                target="_blank"
+                rel="noopener noreferrer"
+                title="Follow us on Tiktok"
+              >
+                <FontAwesomeIcon icon={faTiktok} className="me-2" />
+              </a>
+              <a
+                className="social-icon"
+                href={ThirdPartyLinks.FAKEYOU_TWITCH}
+                target="_blank"
+                rel="noopener noreferrer"
+                title="Subscribe to our Twitch Channel"
+              >
+                <FontAwesomeIcon icon={faTwitch} className="me-2" />
               </a>
-            </span>
-            <div className="d-flex flex-column flex-lg-row align-items-center mt-4 mt-lg-0">
-              {moderationLink}
             </div>
+          </div>
+          <div className="py-2 col-12 col-lg-3 d-flex flex-column gap-2 gap-lg-3 align-items-center align-items-lg-start">
+            <p className="fw-bold">{t("productsTitle")}</p>
+            <li>
+              <Link to="/tts">{t("productTts")}</Link>
+            </li>
 
-            {serverGitSha}
+            <li>
+              <Link to="/voice-conversion">{t("productVc")}</Link>
+            </li>
 
-            <div className="d-flex flex-column flex-lg-row align-items-center">
-              <GitSha prefix="FE: " />
-            </div>
+            <li>
+              <Link to="/voice-designer">Voice Designer</Link>
+            </li>
+
+            <li>
+              <Link to="/face-animator">{t("productFaceAnimator")}</Link>
+            </li>
+
+            <li>
+              <Link to="/contribute">{t("productUploadModels")}</Link>
+            </li>
+          </div>
+          <div className="py-2 col-12 col-lg-3 d-flex flex-column gap-2 gap-lg-3 align-items-center align-items-lg-start">
+            <p className="fw-bold">{t("communityTitle")}</p>
+
+            <li>
+              <a
+                href={ThirdPartyLinks.FAKEYOU_DISCORD}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {t("communityDiscord")}
+              </a>
+            </li>
+
+            <li>
+              <Link to="/leaderboard">{t("communityLeaderboard")}</Link>
+            </li>
+
+            <li>
+              <Link to="/guide">{t("communityGuide")}</Link>
+            </li>
+
+            <li>
+              <Link to={myDataLink}>{t("communityProfile")}</Link>
+            </li>
+          </div>
+          <div className="py-2 col-12 col-lg-3 d-flex flex-column gap-2 gap-lg-3 align-items-center align-items-lg-start">
+            <p className="fw-bold">{t("infoTitle")}</p>
+            <li>
+              <Link to={WebUrl.pricingPageWithReferer("footer")}>
+                {t("infoPricing")}
+              </Link>
+            </li>
+            <li>
+              <Link to={WebUrl.aboutUsPage()}>{t("infoAbout")}</Link>
+            </li>
+
+            <li>
+              <Link to={WebUrl.termsPage()}>{t("infoTerms")}</Link>
+            </li>
+
+            <li>
+              <Link to={WebUrl.privacyPage()}>{t("infoPrivacyPolicy")}</Link>
+            </li>
+            <li>
+              <a href={WebUrl.developerDocs()}>{t("infoApiDocs")}</a>
+            </li>
           </div>
         </div>
-      </footer>
-    </div>
+
+        <div className="pt-4">
+          <hr />
+        </div>
+
+        <div className="d-flex flex-column flex-lg-row pt-2 align-items-center gap-2 gap-xl-4 flex-wrap">
+          <span className="flex-grow-1">
+            © 2023 FakeYou by{" "}
+            <a href="https://storyteller.ai" target="_blank" rel="noreferrer">
+              Storyteller.ai
+            </a>
+          </span>
+          <div className="d-flex flex-column flex-lg-row align-items-center mt-4 mt-lg-0">
+            {moderationLink}
+          </div>
+
+          {serverGitSha}
+
+          <div className="d-flex flex-column flex-lg-row align-items-center">
+            <GitSha prefix="FE: " />
+          </div>
+        </div>
+      </Container>
+    </footer>
   );
 }