From ff6f7821a2af5d1af879779db0a40ac458abfa55 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 12 Oct 2023 16:12:35 +0700
Subject: [PATCH 1/5] container component for page wrapping

---
 .../components/common/Container/Container.tsx | 30 ++++++++++++
 .../src/components/common/Container/index.tsx |  1 +
 .../common/PageContainer/PageContainer.tsx    | 24 ----------
 .../src/components/common/Panel/Panel.tsx     |  9 ++--
 .../layout/PageHeader/PageHeader.tsx          | 47 ++++++++++++-------
 .../src/components/layout/PageHeader/index.js |  1 -
 .../components/layout/PageHeader/index.tsx    |  1 +
 .../PageHeaderModelView.tsx                   |  6 ++-
 .../fakeyou.com/src/v2/view/PageContainer.tsx | 24 ++++++----
 .../v2/view/_common/PageHeaderWithImage.tsx   |  2 +-
 .../tts_model_search/TtsModelSearchPage.tsx   | 18 +++++++
 .../vc/vc_model_delete/VcModelDeletePage.tsx  |  2 +-
 .../vc/vc_model_edit/VcModelEditPage.tsx      |  2 +-
 .../vc/vc_model_view/VcModelViewPage.tsx      |  6 +--
 14 files changed, 110 insertions(+), 63 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/Container/Container.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Container/index.tsx
 delete mode 100644 packages/fakeyou.com/src/components/common/PageContainer/PageContainer.tsx
 delete mode 100644 packages/fakeyou.com/src/components/layout/PageHeader/index.js
 create mode 100644 packages/fakeyou.com/src/components/layout/PageHeader/index.tsx
 create mode 100644 packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx

diff --git a/packages/fakeyou.com/src/components/common/Container/Container.tsx b/packages/fakeyou.com/src/components/common/Container/Container.tsx
new file mode 100644
index 0000000000..a8ae3ca28e
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Container/Container.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+interface ContainerProps {
+  children: React.ReactNode;
+  type?: "full" | "padded" | "panel";
+}
+
+export default function PageContainer({
+  children,
+  type = "panel",
+}: ContainerProps) {
+  let containerClass = "";
+
+  switch (type) {
+    case "full":
+      containerClass = "container-fluid";
+      break;
+    case "padded":
+      containerClass = "container";
+      break;
+    case "panel":
+      containerClass = "";
+      break;
+    default:
+      containerClass = "container-fluid";
+      break;
+  }
+
+  return <div className={containerClass}>{children}</div>;
+}
diff --git a/packages/fakeyou.com/src/components/common/Container/index.tsx b/packages/fakeyou.com/src/components/common/Container/index.tsx
new file mode 100644
index 0000000000..c81c92aeb0
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Container/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Container";
diff --git a/packages/fakeyou.com/src/components/common/PageContainer/PageContainer.tsx b/packages/fakeyou.com/src/components/common/PageContainer/PageContainer.tsx
deleted file mode 100644
index c2088b8e9a..0000000000
--- a/packages/fakeyou.com/src/components/common/PageContainer/PageContainer.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { container } from "data/animation";
-import { motion } from "framer-motion";
-import React from "react";
-
-interface PageContainerProps {
-  children: React.ReactNode;
-  padding?: boolean;
-}
-
-export default function PageContainer({
-  children,
-  padding,
-}: PageContainerProps) {
-  return (
-    <motion.div
-      initial="hidden"
-      animate="visible"
-      variants={container}
-      className={`${padding ? "container" : ""}`}
-    >
-      {children}
-    </motion.div>
-  );
-}
diff --git a/packages/fakeyou.com/src/components/common/Panel/Panel.tsx b/packages/fakeyou.com/src/components/common/Panel/Panel.tsx
index 6fda465884..25e1d4281e 100644
--- a/packages/fakeyou.com/src/components/common/Panel/Panel.tsx
+++ b/packages/fakeyou.com/src/components/common/Panel/Panel.tsx
@@ -1,23 +1,22 @@
 import React from "react";
-import { motion } from "framer-motion";
-import { panel } from "data/animation";
 
 interface PanelProps {
   children: React.ReactNode;
   padding?: boolean;
   mb?: boolean;
   mt?: boolean;
+  full?: boolean;
 }
 
-export default function Panel({ children, padding, mb, mt }: PanelProps) {
+export default function Panel({ children, padding, mb, mt, full }: PanelProps) {
   return (
-    <motion.div className="container-panel" variants={panel}>
+    <div className={full ? "container-panel mw-100" : "container-panel"}>
       <div
         className={`panel ${padding ? "p-3 py-4 p-md-4" : ""}
         ${mb ? "mb-4" : ""} ${mt ? "mt-4" : ""}`}
       >
         {children}
       </div>
-    </motion.div>
+    </div>
   );
 }
diff --git a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
index e0c8b6e0e4..e28e3ddca2 100644
--- a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
+++ b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
@@ -10,24 +10,37 @@ interface Props {
   actionButtons?: JSX.Element;
 }
 
-
-export default function PageHeader({ actionButtons, childProps, showButtons, subText, titleComponent: Title, title, titleIcon }: Props) {
-  return <div className="container-panel hero-section py-4">
-    <div className="panel">
-      <div className="p-3 py-4 p-md-4">
-        { Title ? <Title {...childProps }/> : <h1 className="fw-bold text-center text-md-start">
-            { titleIcon }
-            { title }
-          </h1> }
-        <p className="text-center text-md-start pt-1">{ subText }</p>
-        { showButtons && (
-          <div className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-md-start mt-4">
-            { actionButtons }
-          </div>
-        )}
+export default function PageHeader({
+  actionButtons,
+  childProps,
+  showButtons,
+  subText,
+  titleComponent: Title,
+  title,
+  titleIcon,
+}: Props) {
+  return (
+    <div className="container-panel hero-section py-4">
+      <div className="panel">
+        <div className="p-3 py-4 p-md-4">
+          {Title ? (
+            <Title {...childProps} />
+          ) : (
+            <h1 className="fw-bold text-center text-md-start">
+              {titleIcon}
+              {title}
+            </h1>
+          )}
+          <p className="text-center text-md-start pt-1">{subText}</p>
+          {showButtons && (
+            <div className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-md-start mt-4">
+              {actionButtons}
+            </div>
+          )}
+        </div>
       </div>
     </div>
-  </div>;
-};
+  );
+}
 
 // export default PageHeader;
diff --git a/packages/fakeyou.com/src/components/layout/PageHeader/index.js b/packages/fakeyou.com/src/components/layout/PageHeader/index.js
deleted file mode 100644
index 58edd62eef..0000000000
--- a/packages/fakeyou.com/src/components/layout/PageHeader/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './PageHeader';
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/components/layout/PageHeader/index.tsx b/packages/fakeyou.com/src/components/layout/PageHeader/index.tsx
new file mode 100644
index 0000000000..c9b885cbfc
--- /dev/null
+++ b/packages/fakeyou.com/src/components/layout/PageHeader/index.tsx
@@ -0,0 +1 @@
+export { default } from "./PageHeader";
diff --git a/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx b/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx
index bdabbc4f50..331e477565 100644
--- a/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx
+++ b/packages/fakeyou.com/src/components/layout/PageHeaderModelView/PageHeaderModelView.tsx
@@ -13,6 +13,7 @@ interface PageHeaderModelViewProps {
   extras?: React.ReactNode;
   view?: "regular" | "edit" | "delete";
   modelType?: "TTS" | "V2V";
+  full?: boolean;
 }
 
 export default function PageHeaderModelView({
@@ -25,15 +26,16 @@ export default function PageHeaderModelView({
   extras,
   view = "regular",
   modelType = "TTS",
+  full,
 }: PageHeaderModelViewProps) {
   const icon = (
     <>{titleIcon && <FontAwesomeIcon icon={titleIcon} className="me-3" />}</>
   );
 
   return (
-    <div className="pt-2 pt-lg-4 pb-4">
+    <div className="pt-3 pb-4 pt-lg-4">
       {view === "regular" && (
-        <Panel padding>
+        <Panel padding full={full}>
           <div className="row gy-3">
             <div className="col-12 col-lg-8">
               <h2 className="fw-bold">
diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index 6b5bce6ef8..537ed1e29f 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -89,6 +89,7 @@ import SideNav from "components/layout/SideNav/SideNav";
 import MobileMenu from "components/layout/MobileMenu/MobileMenu";
 import { TopNav } from "./nav/TopNav";
 import { TestingPage } from "./pages/testing/TestingPage";
+import TtsModelSearchPage from "./pages/tts/tts_model_search/TtsModelSearchPage";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -317,6 +318,10 @@ class PageContainer extends React.Component<
               />
             </Route>
 
+            <Route path="/dev-tts">
+              <TtsModelSearchPage sessionWrapper={this.props.sessionWrapper} />
+            </Route>
+
             <Route path="/tts/result/:token/edit">
               <TtsResultEditPage sessionWrapper={this.props.sessionWrapper} />
             </Route>
@@ -459,7 +464,7 @@ class PageContainer extends React.Component<
             </Route>
 
             <Route path="/media/:token">
-              <Media/>
+              <Media />
             </Route>
 
             <Route path="/moderation/user/list">
@@ -580,7 +585,7 @@ class PageContainer extends React.Component<
             </Route>
 
             <Route path="/testing">
-              <TestingPage 
+              <TestingPage
                 sessionSubscriptionsWrapper={
                   this.props.sessionSubscriptionsWrapper
                 }
@@ -591,12 +596,15 @@ class PageContainer extends React.Component<
             </Route>
 
             <Route path="/face-animation">
-              <LipsyncEditor {...{ 
-                enqueueInferenceJob: this.props.enqueueInferenceJob,
-                sessionSubscriptionsWrapper:  this.props.sessionSubscriptionsWrapper,
-                inferenceJobs: this.props.inferenceJobs,
-                inferenceJobsByCategory: this.props.inferenceJobsByCategory
-              }} />
+              <LipsyncEditor
+                {...{
+                  enqueueInferenceJob: this.props.enqueueInferenceJob,
+                  sessionSubscriptionsWrapper:
+                    this.props.sessionSubscriptionsWrapper,
+                  inferenceJobs: this.props.inferenceJobs,
+                  inferenceJobsByCategory: this.props.inferenceJobsByCategory,
+                }}
+              />
             </Route>
 
             <Route path="/commissions">
diff --git a/packages/fakeyou.com/src/v2/view/_common/PageHeaderWithImage.tsx b/packages/fakeyou.com/src/v2/view/_common/PageHeaderWithImage.tsx
index 1fcd7711c5..4dfc6ce3e9 100644
--- a/packages/fakeyou.com/src/v2/view/_common/PageHeaderWithImage.tsx
+++ b/packages/fakeyou.com/src/v2/view/_common/PageHeaderWithImage.tsx
@@ -11,7 +11,7 @@ interface Props {
 
 function PageHeaderWithImage(props: Props) {
   return (
-    <div className="container-panel hero-section pt-3 pb-4 pt-lg-4">
+    <div className="container-panel pt-3 pb-4 pt-lg-4">
       <div className="panel">
         <div className="row gx-3 flex-md-row-reverse">
           <div className="col-12 col-md-5 hero-img-container d-none d-md-block">
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
new file mode 100644
index 0000000000..be8cd4b328
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import Container from "components/common/Container";
+import Panel from "components/common/Panel/Panel";
+
+interface TtsModelSearchPageProps {
+  sessionWrapper: SessionWrapper;
+}
+
+export default function TtsModelSearchPage(props: TtsModelSearchPageProps) {
+  return (
+    <Container type="panel">
+      <Panel padding={true}>
+        <div>test</div>
+      </Panel>
+    </Container>
+  );
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_delete/VcModelDeletePage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_delete/VcModelDeletePage.tsx
index 7a522c70ac..91c70835e7 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_delete/VcModelDeletePage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_delete/VcModelDeletePage.tsx
@@ -5,7 +5,7 @@ import Panel from "components/common/Panel/Panel";
 import { faSave, faTrash } from "@fortawesome/pro-solid-svg-icons";
 import PageHeaderModelView from "components/layout/PageHeaderModelView/PageHeaderModelView";
 import Button from "components/common/Button/Button";
-import PageContainer from "components/common/PageContainer/PageContainer";
+import PageContainer from "components/common/Container";
 
 interface VcModelDeletePageProps {
   sessionWrapper: SessionWrapper;
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
index 1e1c2ea9dc..6d3d6daa3f 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_edit/VcModelEditPage.tsx
@@ -6,7 +6,7 @@ import Panel from "components/common/Panel/Panel";
 import { faEye, faFilePen, faSave } from "@fortawesome/pro-solid-svg-icons";
 import PageHeaderModelView from "components/layout/PageHeaderModelView/PageHeaderModelView";
 import Button from "components/common/Button/Button";
-import PageContainer from "components/common/PageContainer/PageContainer";
+import PageContainer from "components/common/Container";
 
 interface VcModelEditPageProps {
   sessionWrapper: SessionWrapper;
diff --git a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
index cb7fcf22be..b16b6b836f 100644
--- a/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/vc/vc_model_view/VcModelViewPage.tsx
@@ -17,7 +17,7 @@ import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapp
 import { RatingButtons } from "v2/view/_common/ratings/RatingButtons";
 import { RatingStats } from "v2/view/_common/ratings/RatingStats";
 import ShareButton from "components/common/ShareButton/ShareButton";
-import PageContainer from "components/common/PageContainer/PageContainer";
+import Container from "components/common/Container/Container";
 import VcGenerateAudioPanel from "../VcGenerateAudioPanel";
 
 interface VcModelViewPageProps {
@@ -97,7 +97,7 @@ export default function VcModelViewPage(props: VcModelViewPageProps) {
   const shareButton = <ShareButton url={shareUrl} />;
 
   return (
-    <PageContainer>
+    <Container type="full">
       <PageHeaderModelView
         title={title}
         subText={subText}
@@ -180,6 +180,6 @@ export default function VcModelViewPage(props: VcModelViewPageProps) {
           sessionWrapper={props.sessionWrapper}
         />
       </Panel>
-    </PageContainer>
+    </Container>
   );
 }

From cf3f79dc5fb1593bc54b6405e4b24847d51175fe Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Thu, 12 Oct 2023 22:09:31 +0700
Subject: [PATCH 2/5] search page and many component updates

---
 .../src/components/common/Button/Button.scss  | 19 ++---
 .../src/components/common/Button/Button.tsx   | 66 ++++++++++++---
 .../src/components/common/Button/index.tsx    |  1 +
 .../common/CheckableTag/CheckableTag.scss     | 39 +++++++++
 .../common/CheckableTag/CheckableTag.tsx      | 26 ++++++
 .../components/common/CheckableTag/index.tsx  |  1 +
 .../src/components/common/Input/Input.tsx     | 24 ++++++
 .../src/components/common/Input/index.tsx     |  1 +
 .../common/ModelSearch/ModelSearch.tsx        | 20 +++++
 .../common/ModelSearch/dummyData.ts           |  4 +
 .../components/common/ModelSearch/index.tsx   |  1 +
 .../ModelSearchResults.scss                   | 29 +++++++
 .../ModelSearchResults/ModelSearchResults.tsx | 28 +++++++
 .../common/ModelSearchResults/index.tsx       |  1 +
 .../components/common/ModelTags/ModelTags.tsx | 23 ++++++
 .../src/components/common/ModelTags/index.tsx |  1 +
 .../src/components/common/Panel/index.tsx     |  1 +
 .../src/components/common/Select/Select.scss  | 68 ++++++++++++++++
 .../src/components/common/Select/Select.tsx   | 53 ++++++++++++
 .../src/components/common/Select/index.tsx    |  1 +
 .../common/ShareButton/ShareButton.tsx        |  4 +-
 .../components/common/TextArea/TextArea.tsx   | 19 +++++
 .../src/components/common/TextArea/index.tsx  |  1 +
 .../layout/MobileMenu/MobileMenu.tsx          |  4 +-
 .../layout/PageHeader/PageHeader.tsx          | 81 +++++++++++--------
 .../src/components/layout/SideNav/SideNav.tsx |  6 +-
 .../src/components/layout/index.tsx           |  5 --
 .../fakeyou.com/src/hooks/useSearch/index.ts  |  1 +
 .../src/hooks/useSearch/useSearch.tsx         | 32 ++++++++
 .../fakeyou.com/src/scss/site-refresh.scss    |  2 +-
 .../tts_model_search/TtsModelSearchPage.tsx   | 78 +++++++++++++++++-
 31 files changed, 569 insertions(+), 71 deletions(-)
 create mode 100644 packages/fakeyou.com/src/components/common/Button/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss
 create mode 100644 packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/CheckableTag/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Input/Input.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Input/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/ModelSearch/ModelSearch.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/ModelSearch/dummyData.ts
 create mode 100644 packages/fakeyou.com/src/components/common/ModelSearch/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss
 create mode 100644 packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/ModelSearchResults/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/ModelTags/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Panel/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Select/Select.scss
 create mode 100644 packages/fakeyou.com/src/components/common/Select/Select.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/Select/index.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/TextArea/TextArea.tsx
 create mode 100644 packages/fakeyou.com/src/components/common/TextArea/index.tsx
 delete mode 100644 packages/fakeyou.com/src/components/layout/index.tsx
 create mode 100644 packages/fakeyou.com/src/hooks/useSearch/index.ts
 create mode 100644 packages/fakeyou.com/src/hooks/useSearch/useSearch.tsx

diff --git a/packages/fakeyou.com/src/components/common/Button/Button.scss b/packages/fakeyou.com/src/components/common/Button/Button.scss
index d5a58e8c67..2b77945926 100644
--- a/packages/fakeyou.com/src/components/common/Button/Button.scss
+++ b/packages/fakeyou.com/src/components/common/Button/Button.scss
@@ -3,13 +3,14 @@
 .button {
   border-radius: 0.5rem;
   outline: none;
-  font-size: 15px;
-  font-weight: 500;
+  font-size: 15px !important;
+  font-weight: 500 !important;
   padding: 10px 20px;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: $white !important;
 }
 
 .button-primary,
@@ -19,19 +20,19 @@
   border: 2.5px solid;
   border-color: $primary;
   transition: 0.2s;
-  color: $white;
+  color: $white !important;
 }
 .button-primary:hover {
   background-color: lighten($primary, 5%);
   border-color: lighten($primary, 5%);
-  color: $white;
+  color: $white !important;
 }
 
 .button-secondary,
 .button-secondary:focus,
 .button-secondary:active {
   background-color: $secondary;
-  color: $white;
+  color: $white !important;
   border: 2.5px solid;
   border-color: $secondary;
   transition: 0.2s;
@@ -39,7 +40,7 @@
 
 .button-secondary:hover {
   background-color: lighten($secondary, 5%);
-  color: $white;
+  color: $white !important;
   border: 2.5px solid;
   border-color: lighten($secondary, 5%);
 }
@@ -48,7 +49,7 @@
 .button-destructive:focus,
 .button-destructive:active {
   background-color: $danger;
-  color: $white;
+  color: $white !important;
   border: 2.5px solid;
   border-color: $danger;
   transition: 0.2s;
@@ -56,7 +57,7 @@
 
 .button-destructive:hover {
   background-color: lighten($danger, 5%);
-  color: $white;
+  color: $white !important;
   border: 2.5px solid;
   border-color: lighten($danger, 5%);
 }
@@ -65,7 +66,7 @@
 .button-small:focus,
 .button-small:active {
   font-weight: 500;
-  font-size: 14px;
+  font-size: 14px !important;
   padding: 8.25px 16px;
   transition: 0.2s;
   border: none;
diff --git a/packages/fakeyou.com/src/components/common/Button/Button.tsx b/packages/fakeyou.com/src/components/common/Button/Button.tsx
index 188ca25bac..b67196aa13 100644
--- a/packages/fakeyou.com/src/components/common/Button/Button.tsx
+++ b/packages/fakeyou.com/src/components/common/Button/Button.tsx
@@ -1,4 +1,5 @@
 import React, { ButtonHTMLAttributes } from "react";
+import { Link } from "react-router-dom";
 import "./Button.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
@@ -7,29 +8,68 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   label?: string;
   icon?: IconDefinition;
   small?: boolean;
-  secondary?: boolean;
-  danger?: boolean;
+  variant?: "primary" | "secondary" | "danger";
+  to?: string; // for internal links
+  href?: string; // for external links
+  target?: "_blank" | "_self";
 }
 
 export default function Button({
   label,
   icon,
   small,
-  secondary,
-  danger,
+  variant = "primary",
+  to,
+  href,
+  target = "_self",
   ...rest
 }: ButtonProps) {
-  const buttonClasses = `button ${small ? "button-small" : ""}
-  ${
-    secondary
-      ? "button-secondary"
-      : danger
-      ? "button-destructive"
-      : "button-primary"
-  } `;
+  let buttonClass = `button`;
 
+  if (small) {
+    buttonClass += ` button-small`;
+  }
+
+  switch (variant) {
+    case "primary":
+      buttonClass += " button-primary";
+      break;
+    case "secondary":
+      buttonClass += " button-secondary";
+      break;
+    case "danger":
+      buttonClass += " button-destructive";
+      break;
+    default:
+      buttonClass += " button-primary";
+      break;
+  }
+
+  if (to) {
+    return (
+      <Link to={to} className={buttonClass}>
+        {icon && <FontAwesomeIcon icon={icon} className="me-2" />}
+        {label}
+      </Link>
+    );
+  }
+  if (href) {
+    return (
+      <a
+        href={href}
+        target={target}
+        rel="noopener noreferrer"
+        className={buttonClass}
+      >
+        {icon && <FontAwesomeIcon icon={icon} className="me-2" />}
+        {label}
+      </a>
+    );
+  }
+
+  // If neither 'to' nor 'href' are provided (regular button)
   return (
-    <button className={buttonClasses} type="button" {...rest}>
+    <button className={buttonClass} type="button" {...rest}>
       {icon && <FontAwesomeIcon icon={icon} className="me-2" />}
       {label}
     </button>
diff --git a/packages/fakeyou.com/src/components/common/Button/index.tsx b/packages/fakeyou.com/src/components/common/Button/index.tsx
new file mode 100644
index 0000000000..c4719be7c0
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Button/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Button";
diff --git a/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss
new file mode 100644
index 0000000000..f75c658315
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss
@@ -0,0 +1,39 @@
+@import "scss/colours.scss";
+
+.checkable-tag {
+  font-weight: 500;
+  border-radius: 0.5rem;
+  font-size: 13px;
+  padding: 9px 12px;
+  background-color: $secondary;
+  color: $white;
+  cursor: pointer;
+  transition: 0.2s;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: 2px solid $secondary;
+
+  &.checked {
+    background-color: lighten($secondary, 10%) !important;
+    color: $white;
+    border: 2px solid $primary !important;
+  }
+
+  .remove-icon {
+    align-items: center;
+    font-size: 14px;
+    transition: 0.2s;
+  }
+
+  &:hover {
+    background-color: lighten($secondary, 5%);
+    border: 2px solid lighten($secondary, 5%);
+  }
+
+  &:hover > .remove-icon {
+    color: $primary;
+  }
+}
diff --git a/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx
new file mode 100644
index 0000000000..6de7495d0a
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import "./CheckableTag.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark } from "@fortawesome/pro-solid-svg-icons";
+
+interface Props {
+  tag: string;
+  isSelected: boolean;
+  onToggle: (tag: string) => void;
+}
+
+export default function CheckableTag({ tag, isSelected, onToggle }: Props) {
+  return (
+    <div
+      className={`d-flex align-items-center checkable-tag ${
+        isSelected ? "checked" : ""
+      }`}
+      onClick={() => onToggle(tag)}
+    >
+      {tag}
+      {isSelected && (
+        <FontAwesomeIcon icon={faXmark} className="ms-2 remove-icon" />
+      )}
+    </div>
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/CheckableTag/index.tsx b/packages/fakeyou.com/src/components/common/CheckableTag/index.tsx
new file mode 100644
index 0000000000..877c50fb3c
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/CheckableTag/index.tsx
@@ -0,0 +1 @@
+export { default } from "./CheckableTag";
diff --git a/packages/fakeyou.com/src/components/common/Input/Input.tsx b/packages/fakeyou.com/src/components/common/Input/Input.tsx
new file mode 100644
index 0000000000..4697f07970
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Input/Input.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  icon?: IconDefinition;
+  label?: string;
+  textArea?: boolean;
+}
+
+export default function Input({ label, icon, textArea, ...rest }: InputProps) {
+  return (
+    <div>
+      {label && <label className="sub-title">{label}</label>}
+
+      <div className={`form-group ${icon ? "input-icon" : ""}`}>
+        {icon && (
+          <FontAwesomeIcon icon={icon} className="form-control-feedback" />
+        )}
+        <input className="form-control" {...rest} />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/Input/index.tsx b/packages/fakeyou.com/src/components/common/Input/index.tsx
new file mode 100644
index 0000000000..a50d7d110e
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Input/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Input";
diff --git a/packages/fakeyou.com/src/components/common/ModelSearch/ModelSearch.tsx b/packages/fakeyou.com/src/components/common/ModelSearch/ModelSearch.tsx
new file mode 100644
index 0000000000..58c00308f0
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/ModelSearch/ModelSearch.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import Input from "../Input";
+import { faSearch } from "@fortawesome/pro-solid-svg-icons";
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export default function ModelSearch({ value, onChange }: Props) {
+  return (
+    <Input
+      icon={faSearch}
+      type="text"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder="Search..."
+    />
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/ModelSearch/dummyData.ts b/packages/fakeyou.com/src/components/common/ModelSearch/dummyData.ts
new file mode 100644
index 0000000000..236d5c8acb
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/ModelSearch/dummyData.ts
@@ -0,0 +1,4 @@
+export const dummyData = [
+  { id: 1, name: "Item 1", tags: ["tag1", "tag2"] },
+  { id: 2, name: "Item 2", tags: ["tag2", "tag3"] },
+];
diff --git a/packages/fakeyou.com/src/components/common/ModelSearch/index.tsx b/packages/fakeyou.com/src/components/common/ModelSearch/index.tsx
new file mode 100644
index 0000000000..e557975288
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/ModelSearch/index.tsx
@@ -0,0 +1 @@
+export { default } from "./ModelSearch";
diff --git a/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss
new file mode 100644
index 0000000000..3a931215d3
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss
@@ -0,0 +1,29 @@
+@import "scss/colours.scss";
+
+.model-search-results {
+  background-color: lighten($panel, 6%);
+  border-radius: 0.5rem;
+  border: 1px solid lighten($panel, 12%);
+
+  .type-tag {
+    font-weight: 600;
+    border-radius: 0.4rem;
+    font-size: 13px;
+    padding: 4px 8px;
+    background-color: $secondary;
+    color: $white;
+    cursor: pointer;
+    transition: 0.2s;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    height: 100%;
+
+    &.tt2 {
+      color: #494ea9;
+      background-color: #c6c7e1;
+    }
+  }
+}
diff --git a/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx
new file mode 100644
index 0000000000..d0670d0450
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import "./ModelSearchResults.scss";
+
+interface Props {
+  data: any[];
+}
+
+export default function ModelSearchResults({ data }: Props) {
+  return (
+    <div className="row g-3">
+      {data.map((item) => (
+        <div className="col-12 col-lg-6">
+          <div className="model-search-results p-3" key={item.id}>
+            <h5 className="fw-semibold mb-0">{item.name}</h5>
+            <p className="">by {item.creator}</p>
+            <span
+              className={`type-tag ${
+                item.type === "Tacotron2" ? "tt2" : "tt2"
+              }`}
+            >
+              {item.type}
+            </span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/ModelSearchResults/index.tsx b/packages/fakeyou.com/src/components/common/ModelSearchResults/index.tsx
new file mode 100644
index 0000000000..e1326737cc
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/ModelSearchResults/index.tsx
@@ -0,0 +1 @@
+export { default } from "./ModelSearchResults";
diff --git a/packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx b/packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx
new file mode 100644
index 0000000000..b2b464bd65
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import CheckableTag from "../CheckableTag";
+
+interface Props {
+  tags: string[];
+  selectedTags: string[];
+  onSelectTag: (tag: string) => void;
+}
+
+export default function ModelTags({ tags, selectedTags, onSelectTag }: Props) {
+  return (
+    <div className="d-flex gap-2 flex-wrap">
+      {tags.map((tag) => (
+        <CheckableTag
+          key={tag}
+          tag={tag}
+          isSelected={selectedTags.includes(tag)}
+          onToggle={onSelectTag}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/ModelTags/index.tsx b/packages/fakeyou.com/src/components/common/ModelTags/index.tsx
new file mode 100644
index 0000000000..1719f41058
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/ModelTags/index.tsx
@@ -0,0 +1 @@
+export { default } from "./ModelTags";
diff --git a/packages/fakeyou.com/src/components/common/Panel/index.tsx b/packages/fakeyou.com/src/components/common/Panel/index.tsx
new file mode 100644
index 0000000000..76888ed957
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Panel/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Panel";
diff --git a/packages/fakeyou.com/src/components/common/Select/Select.scss b/packages/fakeyou.com/src/components/common/Select/Select.scss
new file mode 100644
index 0000000000..2ffb214fb9
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Select/Select.scss
@@ -0,0 +1,68 @@
+@import "scss/colours.scss";
+
+.select__control {
+  &.select {
+    height: 48px;
+    border-width: 2px;
+    padding-left: 0.15rem;
+    padding-right: 0.15rem;
+    background-color: $input-dark;
+    border-radius: 0.5rem;
+    border-color: $input-dark !important;
+    box-shadow: none;
+    cursor: pointer;
+
+    &.no-padding {
+      padding-left: 0.5rem;
+    }
+
+    &:hover {
+      background-color: lighten($input-dark, 5%);
+      border-color: lighten($input-dark, 5%) !important;
+    }
+
+    &.focused {
+      border-color: $primary !important;
+    }
+
+    &.with-icon {
+      padding-left: 2rem;
+    }
+
+    &.rounded-full {
+      border-radius: 50px;
+    }
+  }
+
+  .select-option {
+    background-color: $input-dark;
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+
+    &:hover {
+      background-color: lighten($input-dark, 8%);
+    }
+  }
+
+  .select-input,
+  .select-value {
+    color: $white;
+  }
+
+  .select-container {
+    background: $input-dark;
+    margin-top: 6px;
+    padding: 0;
+    border-radius: 0.5rem;
+    z-index: 3;
+  }
+
+  .select-separator {
+    width: 1px;
+    opacity: 0.3;
+  }
+
+  .select-placeholder {
+    color: rgba($white, 0.5) !important;
+  }
+}
diff --git a/packages/fakeyou.com/src/components/common/Select/Select.tsx b/packages/fakeyou.com/src/components/common/Select/Select.tsx
new file mode 100644
index 0000000000..a52c07f79a
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Select/Select.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import "./Select.scss";
+import {
+  default as ReactSelect,
+  Props as ReactSelectProps,
+} from "react-select";
+
+interface SelectProps extends ReactSelectProps {
+  icon?: IconDefinition;
+  label?: string;
+  rounded?: boolean;
+}
+
+export default function Select({ label, icon, rounded, ...rest }: SelectProps) {
+  const SelectFieldClass = {
+    control: (state: any) =>
+      state.isFocused
+        ? `select focused ${icon && "with-icon"} ${rounded && "rounded-full"}`
+        : `select ${icon && "with-icon"} ${rounded && "rounded-full"}`,
+    option: (state: any) =>
+      state.isFocused ? "select-option" : "select-option",
+    input: (state: any) => (state.isFocused ? "select-input" : "select-input"),
+    placeholder: (state: any) =>
+      state.isFocused ? "select-placeholder" : "select-placeholder",
+    singleValue: (state: any) =>
+      state.isFocused ? "select-value" : "select-value",
+    menu: (state: any) =>
+      state.isFocused ? "select-container" : "select-container",
+    indicatorSeparator: (state: any) =>
+      state.isFocused ? "select-separator" : "select-separator",
+  };
+
+  return (
+    <div>
+      {label && <label className="sub-title">{label}</label>}
+
+      <div className={`form-group ${icon ? "input-icon" : ""}`}>
+        {icon && (
+          <FontAwesomeIcon icon={icon} className="form-control-feedback" />
+        )}
+        <div className="w-100">
+          <ReactSelect
+            classNamePrefix="select"
+            classNames={SelectFieldClass}
+            {...rest}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/Select/index.tsx b/packages/fakeyou.com/src/components/common/Select/index.tsx
new file mode 100644
index 0000000000..cd39325ed3
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/Select/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Select";
diff --git a/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx b/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx
index a5501655b7..ed1fe885d2 100644
--- a/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx
+++ b/packages/fakeyou.com/src/components/common/ShareButton/ShareButton.tsx
@@ -35,8 +35,8 @@ export default function ShareButton(props: ShareButtonProps) {
           <Button
             label="Share Link"
             icon={faLink}
-            secondary
-            small
+            variant="secondary"
+            small={true}
             onClick={copyToClipboard}
           />
         </div>
diff --git a/packages/fakeyou.com/src/components/common/TextArea/TextArea.tsx b/packages/fakeyou.com/src/components/common/TextArea/TextArea.tsx
new file mode 100644
index 0000000000..d5fa949ea2
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TextArea/TextArea.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  textArea?: boolean;
+}
+
+export default function TextArea({ label, textArea, ...rest }: TextAreaProps) {
+  return (
+    <div>
+      {label && <label className="sub-title">{label}</label>}
+
+      <div className="form-group">
+        <textarea className="form-control" {...rest} />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/fakeyou.com/src/components/common/TextArea/index.tsx b/packages/fakeyou.com/src/components/common/TextArea/index.tsx
new file mode 100644
index 0000000000..44b0efb3db
--- /dev/null
+++ b/packages/fakeyou.com/src/components/common/TextArea/index.tsx
@@ -0,0 +1 @@
+export { default } from "./TextArea";
diff --git a/packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.tsx b/packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.tsx
index 41ba5a8b90..05c166a4fc 100644
--- a/packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.tsx
+++ b/packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.tsx
@@ -43,7 +43,7 @@ export default function MobileMenu(props: MobileMenuProps) {
           icon={faUser}
           label="Profile"
           small
-          secondary
+          variant="secondary"
           onClick={() => history.push(url)}
         />
       </>
@@ -58,7 +58,7 @@ export default function MobileMenu(props: MobileMenuProps) {
             <Button
               label="Menu"
               icon={faBars}
-              secondary
+              variant="secondary"
               small
               onClick={handleMenuButtonClick}
             />
diff --git a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
index e28e3ddca2..96ee68fd9d 100644
--- a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
+++ b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
@@ -1,46 +1,59 @@
 import React from "react";
+import Panel from "../../common/Panel";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import Button from "components/common/Button";
 
-interface Props {
-  childProps?: any;
-  titleIcon?: JSX.Element;
-  titleComponent?: React.ComponentType;
-  title?: string;
-  subText: string;
-  showButtons: boolean;
-  actionButtons?: JSX.Element;
+interface PageHeaderProps {
+  titleIcon?: IconDefinition;
+  title: string;
+  subText: string | React.ReactNode;
+  full?: boolean;
+  showButton?: boolean;
+  extension?: React.ReactNode;
+  buttonLabel?: string;
+  buttonVariant?: "primary" | "secondary" | "danger";
+  buttonTo?: string;
 }
 
 export default function PageHeader({
-  actionButtons,
-  childProps,
-  showButtons,
-  subText,
-  titleComponent: Title,
-  title,
   titleIcon,
-}: Props) {
+  title,
+  subText,
+  full,
+  showButton,
+  extension,
+  buttonLabel,
+  buttonVariant = "primary",
+  buttonTo,
+}: PageHeaderProps) {
+  const icon = (
+    <>{titleIcon && <FontAwesomeIcon icon={titleIcon} className="me-3" />}</>
+  );
+
   return (
-    <div className="container-panel hero-section py-4">
-      <div className="panel">
-        <div className="p-3 py-4 p-md-4">
-          {Title ? (
-            <Title {...childProps} />
-          ) : (
-            <h1 className="fw-bold text-center text-md-start">
-              {titleIcon}
-              {title}
-            </h1>
-          )}
-          <p className="text-center text-md-start pt-1">{subText}</p>
-          {showButtons && (
-            <div className="d-flex flex-column flex-md-row gap-3 justify-content-center justify-content-md-start mt-4">
-              {actionButtons}
+    <div className="pt-3 pb-4 pt-lg-4">
+      <Panel padding full={full}>
+        <div className="d-flex flex-column gap-4">
+          <div>
+            <div className="d-flex">
+              <h2 className="fw-bold flex-grow-1">
+                {icon}
+                {title}
+              </h2>
+              {showButton && (
+                <Button
+                  variant={buttonVariant}
+                  label={buttonLabel}
+                  to={buttonTo}
+                />
+              )}
             </div>
-          )}
+            <p>{subText}</p>
+          </div>
+          {extension && <div>{extension}</div>}
         </div>
-      </div>
+      </Panel>
     </div>
   );
 }
-
-// export default PageHeader;
diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
index 4332f6aa44..e2b1344da7 100644
--- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx
@@ -156,7 +156,7 @@ export default function SideNav(props: SideNavProps) {
       <Button
         label={t("loginButton")}
         small
-        secondary
+        variant="secondary"
         onClick={() => {
           history.push("/login");
           handleNavLinkClick();
@@ -194,7 +194,7 @@ export default function SideNav(props: SideNavProps) {
           icon={faUser}
           label={t("profileButton")}
           small
-          secondary
+          variant="secondary"
           onClick={() => {
             history.push(url);
             handleNavLinkClick();
@@ -209,7 +209,7 @@ export default function SideNav(props: SideNavProps) {
           icon={faSignOutAlt}
           label={t("logOutButton")}
           small
-          danger
+          variant="danger"
           onClick={async () => {
             await logoutHandler();
             handleNavLinkClick();
diff --git a/packages/fakeyou.com/src/components/layout/index.tsx b/packages/fakeyou.com/src/components/layout/index.tsx
deleted file mode 100644
index 110b9fc1d6..0000000000
--- a/packages/fakeyou.com/src/components/layout/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import PageHeader from './PageHeader';
-
-export {
-	PageHeader,
-};
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/hooks/useSearch/index.ts b/packages/fakeyou.com/src/hooks/useSearch/index.ts
new file mode 100644
index 0000000000..54a7749ee4
--- /dev/null
+++ b/packages/fakeyou.com/src/hooks/useSearch/index.ts
@@ -0,0 +1 @@
+export { default } from "./useSearch";
diff --git a/packages/fakeyou.com/src/hooks/useSearch/useSearch.tsx b/packages/fakeyou.com/src/hooks/useSearch/useSearch.tsx
new file mode 100644
index 0000000000..ebbf9c6a5e
--- /dev/null
+++ b/packages/fakeyou.com/src/hooks/useSearch/useSearch.tsx
@@ -0,0 +1,32 @@
+import { useState, useMemo } from "react";
+
+export default function useSearch(initialData: any[]) {
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+
+  const filteredData = useMemo(() => {
+    let tempData = [...initialData];
+
+    if (searchTerm) {
+      tempData = tempData.filter((item) =>
+        item.name.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+
+    if (selectedTags.length) {
+      tempData = tempData.filter((item) =>
+        selectedTags.every((tag) => item.tags.includes(tag))
+      );
+    }
+
+    return tempData;
+  }, [searchTerm, selectedTags, initialData]);
+
+  return {
+    searchTerm,
+    setSearchTerm,
+    selectedTags,
+    setSelectedTags,
+    filteredData,
+  };
+}
diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss
index 697a1909c3..3aa2e4c4c8 100644
--- a/packages/fakeyou.com/src/scss/site-refresh.scss
+++ b/packages/fakeyou.com/src/scss/site-refresh.scss
@@ -782,7 +782,7 @@ styles with important tags:
   }
 
   .select-placeholder {
-    color: $white !important;
+    color: $white;
   }
 
   .select-container {
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
index be8cd4b328..874d2e5c0b 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
@@ -1,17 +1,91 @@
 import React from "react";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import Container from "components/common/Container";
-import Panel from "components/common/Panel/Panel";
+import PageHeader from "components/layout/PageHeader";
+import { faMessageDots } from "@fortawesome/pro-solid-svg-icons";
+import ModelSearch from "components/common/ModelSearch";
+import Panel from "components/common/Panel";
+import useSearch from "hooks/useSearch/useSearch";
+import ModelSearchResults from "components/common/ModelSearchResults";
+import ModelTags from "components/common/ModelTags";
 
 interface TtsModelSearchPageProps {
   sessionWrapper: SessionWrapper;
 }
 
+const dummyData = [
+  {
+    id: 1,
+    name: "Spongebob",
+    tags: ["English", "High-pitched", "Character"],
+    type: "Tacotron2",
+  },
+  {
+    id: 2,
+    name: "Mariano Closs",
+    tags: ["Spanish", "Low-pitched"],
+    type: "Tacotron2",
+  },
+  {
+    id: 3,
+    name: "Cristiano  Ronaldo",
+    tags: ["Portuguese", "Low-pitched"],
+    type: "Tacotron2",
+  },
+];
+
+const allTags = [
+  "English",
+  "Spanish",
+  "Portuguese",
+  "High-pitched",
+  "Low-pitched",
+  "Character",
+];
+
 export default function TtsModelSearchPage(props: TtsModelSearchPageProps) {
+  const {
+    searchTerm,
+    setSearchTerm,
+    selectedTags,
+    setSelectedTags,
+    filteredData,
+  } = useSearch(dummyData);
+
+  const handleSelectTag = (tag: string) => {
+    setSelectedTags((prev) => {
+      if (prev.includes(tag)) {
+        return prev.filter((t) => t !== tag);
+      }
+      return [...prev, tag];
+    });
+  };
+
+  const searchTts = (
+    <div className="d-flex flex-column gap-3">
+      <ModelSearch value={searchTerm} onChange={setSearchTerm} />
+      <ModelTags
+        tags={allTags}
+        selectedTags={selectedTags}
+        onSelectTag={handleSelectTag}
+      />
+    </div>
+  );
+
   return (
     <Container type="panel">
+      <PageHeader
+        title="Text to Speech"
+        titleIcon={faMessageDots}
+        subText="Turn text into your favorite character's speaking voice."
+        showButton={true}
+        buttonLabel="Create a voice"
+        buttonVariant="secondary"
+        buttonTo="/voice-designer"
+        extension={searchTts}
+      />
       <Panel padding={true}>
-        <div>test</div>
+        <ModelSearchResults data={filteredData} />
       </Panel>
     </Container>
   );

From a65267ec7f93dbdfbf94bd23918aa2e66e541244 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 13 Oct 2023 00:40:22 +0700
Subject: [PATCH 3/5] updates

---
 .../common/CheckableTag/CheckableTag.scss     |  2 +-
 .../common/CheckableTag/CheckableTag.tsx      |  8 +-
 .../common/ModelSearch/ModelSearch.tsx        |  4 +-
 .../common/ModelSearch/dummyData.ts           |  4 -
 .../ModelSearchResults.scss                   | 14 +++-
 .../ModelSearchResults/ModelSearchResults.tsx | 75 +++++++++++++++----
 .../components/common/ModelTags/ModelTags.tsx |  8 +-
 .../layout/PageHeader/PageHeader.tsx          | 16 ++--
 .../src/hooks/useShortenNumber/index.ts       |  1 +
 .../useShortenNumber/useShortenNumber.tsx     |  6 ++
 .../tts_model_search/TtsModelSearchPage.tsx   | 41 +++++++++-
 11 files changed, 141 insertions(+), 38 deletions(-)
 delete mode 100644 packages/fakeyou.com/src/components/common/ModelSearch/dummyData.ts
 create mode 100644 packages/fakeyou.com/src/hooks/useShortenNumber/index.ts
 create mode 100644 packages/fakeyou.com/src/hooks/useShortenNumber/useShortenNumber.tsx

diff --git a/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss
index f75c658315..8274c937bf 100644
--- a/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss
+++ b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.scss
@@ -4,7 +4,7 @@
   font-weight: 500;
   border-radius: 0.5rem;
   font-size: 13px;
-  padding: 9px 12px;
+  padding: 6px 12px;
   background-color: $secondary;
   color: $white;
   cursor: pointer;
diff --git a/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx
index 6de7495d0a..6e07d0e74d 100644
--- a/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx
+++ b/packages/fakeyou.com/src/components/common/CheckableTag/CheckableTag.tsx
@@ -3,13 +3,17 @@ import "./CheckableTag.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark } from "@fortawesome/pro-solid-svg-icons";
 
-interface Props {
+interface CheckableTagProps {
   tag: string;
   isSelected: boolean;
   onToggle: (tag: string) => void;
 }
 
-export default function CheckableTag({ tag, isSelected, onToggle }: Props) {
+export default function CheckableTag({
+  tag,
+  isSelected,
+  onToggle,
+}: CheckableTagProps) {
   return (
     <div
       className={`d-flex align-items-center checkable-tag ${
diff --git a/packages/fakeyou.com/src/components/common/ModelSearch/ModelSearch.tsx b/packages/fakeyou.com/src/components/common/ModelSearch/ModelSearch.tsx
index 58c00308f0..7b84ad5f0c 100644
--- a/packages/fakeyou.com/src/components/common/ModelSearch/ModelSearch.tsx
+++ b/packages/fakeyou.com/src/components/common/ModelSearch/ModelSearch.tsx
@@ -2,12 +2,12 @@ import React from "react";
 import Input from "../Input";
 import { faSearch } from "@fortawesome/pro-solid-svg-icons";
 
-interface Props {
+interface ModelSearchProps {
   value: string;
   onChange: (value: string) => void;
 }
 
-export default function ModelSearch({ value, onChange }: Props) {
+export default function ModelSearch({ value, onChange }: ModelSearchProps) {
   return (
     <Input
       icon={faSearch}
diff --git a/packages/fakeyou.com/src/components/common/ModelSearch/dummyData.ts b/packages/fakeyou.com/src/components/common/ModelSearch/dummyData.ts
deleted file mode 100644
index 236d5c8acb..0000000000
--- a/packages/fakeyou.com/src/components/common/ModelSearch/dummyData.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const dummyData = [
-  { id: 1, name: "Item 1", tags: ["tag1", "tag2"] },
-  { id: 2, name: "Item 2", tags: ["tag2", "tag3"] },
-];
diff --git a/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss
index 3a931215d3..6c4c355bbd 100644
--- a/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss
+++ b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss
@@ -5,14 +5,20 @@
   border-radius: 0.5rem;
   border: 1px solid lighten($panel, 12%);
 
+  .creator-name {
+    font-weight: 400;
+    font-size: 14px;
+    color: $white;
+    margin-bottom: 0.5rem;
+  }
+
   .type-tag {
     font-weight: 600;
-    border-radius: 0.4rem;
+    border-radius: 0.35rem;
     font-size: 13px;
     padding: 4px 8px;
     background-color: $secondary;
     color: $white;
-    cursor: pointer;
     transition: 0.2s;
     -moz-user-select: none;
     -khtml-user-select: none;
@@ -26,4 +32,8 @@
       background-color: #c6c7e1;
     }
   }
+
+  .model-details {
+    font-size: 14px;
+  }
 }
diff --git a/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx
index d0670d0450..65f808499a 100644
--- a/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx
+++ b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx
@@ -1,28 +1,71 @@
 import React from "react";
 import "./ModelSearchResults.scss";
+import { Link } from "react-router-dom";
+import Button from "../Button";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faChartSimple,
+  faComment,
+  faHeart,
+} from "@fortawesome/pro-solid-svg-icons";
 
-interface Props {
+interface ModelSearchResultsProps {
   data: any[];
 }
 
-export default function ModelSearchResults({ data }: Props) {
+function shortenNumber(num: number): string {
+  if (Math.abs(num) < 1e3) return num.toString();
+  if (Math.abs(num) < 1e6) return (num / 1e3).toFixed(1) + "k";
+  if (Math.abs(num) < 1e9) return (num / 1e6).toFixed(1) + "M";
+  return num.toString();
+}
+
+export default function ModelSearchResults({ data }: ModelSearchResultsProps) {
   return (
     <div className="row g-3">
-      {data.map((item) => (
-        <div className="col-12 col-lg-6">
-          <div className="model-search-results p-3" key={item.id}>
-            <h5 className="fw-semibold mb-0">{item.name}</h5>
-            <p className="">by {item.creator}</p>
-            <span
-              className={`type-tag ${
-                item.type === "Tacotron2" ? "tt2" : "tt2"
-              }`}
-            >
-              {item.type}
-            </span>
+      {data.map((item) => {
+        return (
+          <div className="col-12 col-lg-6" key={item.id}>
+            <div className="model-search-results p-3">
+              <h5 className="fw-semibold mb-0">{item.name}</h5>
+              <p className="creator-name">
+                by{" "}
+                <Link className="fw-medium" to={`/profile/${item.creator}`}>
+                  {item.creator}
+                </Link>
+              </p>
+              <div className="d-flex align-items-end">
+                <div className="flex-grow-1">
+                  <span
+                    className={`type-tag ${
+                      item.type === "Tacotron2" ? "tt2" : "tt2"
+                    }`}
+                  >
+                    {item.type}
+                  </span>
+                  <div className="d-flex gap-3 model-details fw-medium mt-3">
+                    <div>
+                      <FontAwesomeIcon icon={faHeart} className="me-2" />
+                      {item.likes && shortenNumber(item.likes)}
+                    </div>
+                    <div>
+                      <FontAwesomeIcon icon={faChartSimple} className="me-2" />
+                      {item.uses && shortenNumber(item.uses)}
+                    </div>
+                    <div>
+                      <FontAwesomeIcon icon={faComment} className="me-2" />
+                      {item.comments && shortenNumber(item.comments)}
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <Button label="Use Voice" small={true} to="/" />
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
-      ))}
+        );
+      })}
     </div>
   );
 }
diff --git a/packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx b/packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx
index b2b464bd65..474334e460 100644
--- a/packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx
+++ b/packages/fakeyou.com/src/components/common/ModelTags/ModelTags.tsx
@@ -1,13 +1,17 @@
 import React from "react";
 import CheckableTag from "../CheckableTag";
 
-interface Props {
+interface ModelTagsProps {
   tags: string[];
   selectedTags: string[];
   onSelectTag: (tag: string) => void;
 }
 
-export default function ModelTags({ tags, selectedTags, onSelectTag }: Props) {
+export default function ModelTags({
+  tags,
+  selectedTags,
+  onSelectTag,
+}: ModelTagsProps) {
   return (
     <div className="d-flex gap-2 flex-wrap">
       {tags.map((tag) => (
diff --git a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
index 96ee68fd9d..62682ba82d 100644
--- a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
+++ b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
@@ -41,13 +41,15 @@ export default function PageHeader({
                 {icon}
                 {title}
               </h2>
-              {showButton && (
-                <Button
-                  variant={buttonVariant}
-                  label={buttonLabel}
-                  to={buttonTo}
-                />
-              )}
+              <div className="d-none d-md-block">
+                {showButton && (
+                  <Button
+                    variant={buttonVariant}
+                    label={buttonLabel}
+                    to={buttonTo}
+                  />
+                )}
+              </div>
             </div>
             <p>{subText}</p>
           </div>
diff --git a/packages/fakeyou.com/src/hooks/useShortenNumber/index.ts b/packages/fakeyou.com/src/hooks/useShortenNumber/index.ts
new file mode 100644
index 0000000000..393d617cc0
--- /dev/null
+++ b/packages/fakeyou.com/src/hooks/useShortenNumber/index.ts
@@ -0,0 +1 @@
+export { default } from "./useShortenNumber";
diff --git a/packages/fakeyou.com/src/hooks/useShortenNumber/useShortenNumber.tsx b/packages/fakeyou.com/src/hooks/useShortenNumber/useShortenNumber.tsx
new file mode 100644
index 0000000000..cc24407c9a
--- /dev/null
+++ b/packages/fakeyou.com/src/hooks/useShortenNumber/useShortenNumber.tsx
@@ -0,0 +1,6 @@
+export default function useShortenNumber(num: number): string {
+  if (Math.abs(num) < 1e3) return num.toString();
+  if (Math.abs(num) < 1e6) return (num / 1e3).toFixed(1) + "k";
+  if (Math.abs(num) < 1e9) return (num / 1e6).toFixed(1) + "M";
+  return num.toString();
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
index 874d2e5c0b..9989fd83be 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
@@ -2,12 +2,13 @@ import React from "react";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import Container from "components/common/Container";
 import PageHeader from "components/layout/PageHeader";
-import { faMessageDots } from "@fortawesome/pro-solid-svg-icons";
+import { faClock, faMessageDots } from "@fortawesome/pro-solid-svg-icons";
 import ModelSearch from "components/common/ModelSearch";
 import Panel from "components/common/Panel";
 import useSearch from "hooks/useSearch/useSearch";
 import ModelSearchResults from "components/common/ModelSearchResults";
 import ModelTags from "components/common/ModelTags";
+import Select from "components/common/Select";
 
 interface TtsModelSearchPageProps {
   sessionWrapper: SessionWrapper;
@@ -19,18 +20,33 @@ const dummyData = [
     name: "Spongebob",
     tags: ["English", "High-pitched", "Character"],
     type: "Tacotron2",
+    creator: "echelon",
+    likes: 14000,
+    uses: 1000000,
+    comments: 250,
+    time: new Date("2023-09-20T12:00:00Z").toISOString(),
   },
   {
     id: 2,
     name: "Mariano Closs",
     tags: ["Spanish", "Low-pitched"],
     type: "Tacotron2",
+    creator: "echelon",
+    likes: 308290,
+    uses: 30000000,
+    comments: 1200,
+    time: new Date("2023-10-12T12:00:00Z").toISOString(),
   },
   {
     id: 3,
     name: "Cristiano  Ronaldo",
     tags: ["Portuguese", "Low-pitched"],
     type: "Tacotron2",
+    creator: "echelon",
+    likes: 17500,
+    uses: 40000000,
+    comments: 250,
+    time: new Date("2023-09-20T12:00:00Z").toISOString(),
   },
 ];
 
@@ -72,12 +88,24 @@ export default function TtsModelSearchPage(props: TtsModelSearchPageProps) {
     </div>
   );
 
+  const sortOptions = [
+    { value: "most liked", label: "Most Liked" },
+    { value: "most used", label: "Most Used" },
+    { value: "moset recent", label: "Most Recent" },
+  ];
+  const sortTimeOptions = [
+    { value: "all time", label: "All Time" },
+    { value: "today", label: "Today" },
+    { value: "this week", label: "This Week" },
+    { value: "this month", label: "This Month" },
+  ];
+
   return (
     <Container type="panel">
       <PageHeader
         title="Text to Speech"
         titleIcon={faMessageDots}
-        subText="Turn text into your favorite character's speaking voice."
+        subText="Turn text into your favorite character's voice."
         showButton={true}
         buttonLabel="Create a voice"
         buttonVariant="secondary"
@@ -85,6 +113,15 @@ export default function TtsModelSearchPage(props: TtsModelSearchPageProps) {
         extension={searchTts}
       />
       <Panel padding={true}>
+        <div className="d-flex gap-2 mb-3">
+          <Select options={sortOptions} defaultValue={sortOptions[0]} />
+          <Select
+            icon={faClock}
+            options={sortTimeOptions}
+            defaultValue={sortTimeOptions[0]}
+          />
+        </div>
+
         <ModelSearchResults data={filteredData} />
       </Panel>
     </Container>

From 8cc9b57abf0b38bb6923e0a530311760174c9945 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 13 Oct 2023 00:44:42 +0700
Subject: [PATCH 4/5] added more dummy data

---
 .../tts_model_search/TtsModelSearchPage.tsx   | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
index 9989fd83be..c221b84d32 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
@@ -48,6 +48,39 @@ const dummyData = [
     comments: 250,
     time: new Date("2023-09-20T12:00:00Z").toISOString(),
   },
+  {
+    id: 4,
+    name: "Messi",
+    tags: ["Portuguese", "Low-pitched"],
+    type: "Tacotron2",
+    creator: "echelon",
+    likes: 17500,
+    uses: 40000000,
+    comments: 250,
+    time: new Date("2023-09-20T12:00:00Z").toISOString(),
+  },
+  {
+    id: 5,
+    name: "Morty",
+    tags: ["English", "High-pitched", "Character"],
+    type: "Tacotron2",
+    creator: "echelon",
+    likes: 14000,
+    uses: 1000000,
+    comments: 250,
+    time: new Date("2023-09-20T12:00:00Z").toISOString(),
+  },
+  {
+    id: 6,
+    name: "Bad Bunny",
+    tags: ["Spanish", "Low-pitched"],
+    type: "Tacotron2",
+    creator: "echelon",
+    likes: 308290,
+    uses: 30000000,
+    comments: 1200,
+    time: new Date("2023-10-12T12:00:00Z").toISOString(),
+  },
 ];
 
 const allTags = [

From 3050c66a98841a4d25e22545e619476bfccd2534 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 13 Oct 2023 00:59:14 +0700
Subject: [PATCH 5/5] minor updates

---
 .../ModelSearchResults/ModelSearchResults.scss    |  1 +
 .../src/components/common/Select/Select.scss      |  4 ++++
 .../src/components/common/Select/Select.tsx       | 15 +++++++++++++--
 .../tts/tts_model_search/TtsModelSearchPage.tsx   |  9 +++++++--
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss
index 6c4c355bbd..0105a9fc09 100644
--- a/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss
+++ b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.scss
@@ -34,6 +34,7 @@
   }
 
   .model-details {
+    color: rgba($white, 0.8);
     font-size: 14px;
   }
 }
diff --git a/packages/fakeyou.com/src/components/common/Select/Select.scss b/packages/fakeyou.com/src/components/common/Select/Select.scss
index 2ffb214fb9..325d4a91cf 100644
--- a/packages/fakeyou.com/src/components/common/Select/Select.scss
+++ b/packages/fakeyou.com/src/components/common/Select/Select.scss
@@ -66,3 +66,7 @@
     color: rgba($white, 0.5) !important;
   }
 }
+
+.select-small {
+  font-size: 14px !important;
+}
diff --git a/packages/fakeyou.com/src/components/common/Select/Select.tsx b/packages/fakeyou.com/src/components/common/Select/Select.tsx
index a52c07f79a..7f1e44e8a7 100644
--- a/packages/fakeyou.com/src/components/common/Select/Select.tsx
+++ b/packages/fakeyou.com/src/components/common/Select/Select.tsx
@@ -11,9 +11,16 @@ interface SelectProps extends ReactSelectProps {
   icon?: IconDefinition;
   label?: string;
   rounded?: boolean;
+  small?: boolean;
 }
 
-export default function Select({ label, icon, rounded, ...rest }: SelectProps) {
+export default function Select({
+  label,
+  icon,
+  rounded,
+  small,
+  ...rest
+}: SelectProps) {
   const SelectFieldClass = {
     control: (state: any) =>
       state.isFocused
@@ -36,7 +43,11 @@ export default function Select({ label, icon, rounded, ...rest }: SelectProps) {
     <div>
       {label && <label className="sub-title">{label}</label>}
 
-      <div className={`form-group ${icon ? "input-icon" : ""}`}>
+      <div
+        className={`form-group ${icon ? "input-icon" : ""} ${
+          small && "select-small"
+        }`}
+      >
         {icon && (
           <FontAwesomeIcon icon={icon} className="form-control-feedback" />
         )}
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
index c221b84d32..10da0cb594 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx
@@ -146,9 +146,14 @@ export default function TtsModelSearchPage(props: TtsModelSearchPageProps) {
         extension={searchTts}
       />
       <Panel padding={true}>
-        <div className="d-flex gap-2 mb-3">
-          <Select options={sortOptions} defaultValue={sortOptions[0]} />
+        <div className="d-flex gap-2 mb-4">
           <Select
+            small={true}
+            options={sortOptions}
+            defaultValue={sortOptions[0]}
+          />
+          <Select
+            small={true}
             icon={faClock}
             options={sortTimeOptions}
             defaultValue={sortTimeOptions[0]}