diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/audio_gen/AudioGen.scss b/src/website/packages/fakeyou.com/src/v2/view/pages/audio_gen/AudioGen.scss
index 7ca05b25e7..07c2edf651 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/audio_gen/AudioGen.scss
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/audio_gen/AudioGen.scss
@@ -104,7 +104,6 @@
   background-color: rgba($action, 0.8);
   border: 2px solid lighten($action, 12%);
   display: flex;
-  align-items: center;
   transition: all 0.2s;
   cursor: pointer;
 
@@ -112,6 +111,19 @@
     margin-right: 16px;
   }
 
+  &.fy-weight-picker-preview-selected {
+    border-radius: 0.5rem 0.5rem 0 0;
+  }
+
+  h2 {
+    font-size: 20px;
+    font-weight: 600;
+
+    @media (max-width: 768px) {
+      font-size: 18px;
+    }
+  }
+
   .fy-weight-picker-preview-text {
     font-size: 20px !important;
     font-weight: 600;
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/audio_gen/VoicePickerPreview.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/audio_gen/VoicePickerPreview.tsx
index d5cdeb4038..4158d64062 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/audio_gen/VoicePickerPreview.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/audio_gen/VoicePickerPreview.tsx
@@ -20,6 +20,10 @@ import { ActionButton, ActionButtonProps } from "components/common";
 import { faThumbsUp as faThumbsUpOutline } from "@fortawesome/pro-regular-svg-icons";
 import { FetchStatus } from "@storyteller/components/src/api";
 import LoadingSpinner from "components/common/LoadingSpinner";
+import {
+  LanguageLabels,
+  LanguageTag,
+} from "@storyteller/components/src/api/Languages";
 
 interface VoicePickerPreviewProps {
   selectedVoice: any;
@@ -71,125 +75,146 @@ const VoicePickerPreview: React.FC<VoicePickerPreviewProps> = ({
     style: { minHeight: "1.75rem", fontSize: "14px" },
   };
 
+  const languageLabel =
+    LanguageLabels[
+      selectedVoice?.maybe_ietf_primary_language_subtag as LanguageTag
+    ] || "-";
+
   const { t } = useLocalize("NewTTS");
 
   return (
-    <div className="fy-weight-picker-preview" onClick={openModal}>
-      <WeightCoverImage
-        {...{
-          src: preview,
-          height: isMobile ? 70 : 80,
-          width: isMobile ? 70 : 80,
-        }}
-      />
-      <div className="d-flex flex-column justify-content-center flex-grow-1">
-        <h2 className="mb-1 fw-semibold d-flex gap-2 align-items-center fs-5 fy-weight-picker-preview-text flex-wrap">
-          <div>{selectedVoice?.title || t("button.labelNoVoice")}</div>
+    <>
+      <div
+        className={`fy-weight-picker-preview ${
+          selectedVoice ? "fy-weight-picker-preview-selected" : ""
+        }`.trim()}
+        onClick={openModal}
+      >
+        <WeightCoverImage
+          {...{
+            src: preview,
+            height: isMobile ? 85 : 95,
+            width: isMobile ? 85 : 95,
+          }}
+        />
+        <div className="d-flex flex-column justify-content-center flex-grow-1">
+          <div className="d-flex gap-2 align-items-center fy-weight-picker-preview-text flex-wrap mb-1">
+            <h2 className="mb-1">
+              {selectedVoice?.title || t("button.labelNoVoice")}
+            </h2>
+          </div>
           {selectedVoice?.weight_type && (
-            <>
-              <CardBadge
-                className={`d-none d-lg-flex py-1 fy-entity-type-${
-                  selectedVoice?.weight_type || ""
-                }`}
-                label={weightType || ""}
-                small={true}
-                color={weightTagColor || ""}
-              />
-              <div className="opacity-75">
-                <Stat
-                  count={selectedVoice?.usage_count}
-                  icon={faWaveformLines}
+            <div className="d-flex flex-column flex-lg-row gap-2 align-items-lg-center mb-lg-1">
+              <div className="d-flex align-items-center gap-1">
+                <CardBadge
+                  className={`h-auto fy-entity-type-${
+                    selectedVoice?.weight_type || ""
+                  }`}
+                  label={weightType || ""}
+                  small={true}
+                  color={weightTagColor || ""}
                 />
+                {selectedVoice?.maybe_ietf_primary_language_subtag && (
+                  <CardBadge label={languageLabel} small={true} color="gray" />
+                )}
               </div>
 
-              {loggedIn ? (
-                <>
-                  {status === FetchStatus.success ? (
-                    <div onClick={e => e.stopPropagation()}>
-                      <ActionButton {...ratingButtonProps} />
-                    </div>
-                  ) : (
-                    <div
-                      className="d-flex align-items-center"
-                      style={{ minHeight: "1.75rem" }}
-                    >
-                      <LoadingSpinner thin={true} size={20} padding={false} />
-                    </div>
-                  )}
-                </>
-              ) : (
-                <span className="d-none d-lg-flex align-items-center gap-1 fs-7 opacity-75">
-                  <FontAwesomeIcon icon={faThumbsUp} />
-                  {selectedVoice?.stats?.positive_rating_count}
-                </span>
-              )}
-            </>
+              <div className="d-flex gap-2 align-items-center">
+                <div className="opacity-75">
+                  <Stat
+                    count={selectedVoice?.usage_count}
+                    icon={faWaveformLines}
+                  />
+                </div>
+
+                {loggedIn ? (
+                  <>
+                    {status === FetchStatus.success ? (
+                      <div onClick={e => e.stopPropagation()}>
+                        <ActionButton {...ratingButtonProps} />
+                      </div>
+                    ) : (
+                      <div
+                        className="d-flex align-items-center"
+                        style={{ minHeight: "1.75rem" }}
+                      >
+                        <LoadingSpinner thin={true} size={20} padding={false} />
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <span className="d-flex align-items-center gap-1 fs-7 opacity-75">
+                    <FontAwesomeIcon icon={faThumbsUp} />
+                    {selectedVoice?.stats?.positive_rating_count}
+                  </span>
+                )}
+              </div>
+            </div>
           )}
-        </h2>
-        {selectedVoice ? (
-          <span className="fs-7 d-flex gap-1 flex-column flex-lg-row">
-            <div className="d-flex align-items-center">
-              <Link
-                className="fw-medium d-flex align-items-center"
-                to={`/profile/${selectedVoice?.creator?.username || ""}`}
-                onClick={e => e.stopPropagation()}
-                style={{ gap: "6px" }}
-              >
-                <Gravatar
-                  size={20}
-                  noHeight={true}
-                  email_hash={selectedVoice?.creator?.gravatar_hash}
-                  avatarIndex={
-                    selectedVoice?.creator?.default_avatar?.image_index || 0
-                  }
-                  backgroundIndex={
-                    selectedVoice?.creator?.default_avatar?.color_index || 0
-                  }
-                />
-                {" " + selectedVoice?.creator?.display_name || ""}
-              </Link>
-              <CardBadge
-                className={`ms-2 d-flex d-lg-none fy-entity-type-${
-                  selectedVoice?.weight_type || ""
-                }`}
-                label={weightType || ""}
-                small={true}
-                color={weightTagColor || ""}
+          {selectedVoice ? null : (
+            <span className="fs-7 opacity-75">
+              {t("button.labelClickToSelect")}
+            </span>
+          )}
+        </div>
+
+        <div className="d-flex gap-2 align-items-center">
+          <span className="fw-medium opacity-75 pe-1 d-none d-lg-block">
+            {selectedVoice
+              ? t("button.labelChangeVoice")
+              : t("button.labelSelectVoice")}
+          </span>
+          <FontAwesomeIcon icon={faChevronRight} className="fs-5 me-1" />
+        </div>
+      </div>
+
+      {selectedVoice && (
+        <div
+          className="fs-7 d-flex gap-1 flex-wrap panel-inner mb-1"
+          style={{
+            padding: "0.75rem",
+            borderRadius: "0rem 0rem 0.5rem 0.5rem",
+          }}
+        >
+          <div className="d-flex gap-1 align-items-center">
+            <div className="opacity-75">
+              <span className="d-none d-lg-inline-block">Created</span> by
+            </div>
+
+            <Link
+              className="fw-medium d-flex align-items-center"
+              to={`/profile/${selectedVoice?.creator?.username || ""}`}
+              onClick={e => e.stopPropagation()}
+              style={{ gap: "6px" }}
+            >
+              {selectedVoice?.creator?.display_name || ""}
+              <Gravatar
+                size={18}
+                noHeight={true}
+                email_hash={selectedVoice?.creator?.gravatar_hash}
+                avatarIndex={
+                  selectedVoice?.creator?.default_avatar?.image_index || 0
+                }
+                backgroundIndex={
+                  selectedVoice?.creator?.default_avatar?.color_index || 0
+                }
               />
-              {!loggedIn && (
-                <span className="ms-2 d-flex d-lg-none align-items-center gap-1 fs-7 opacity-75">
-                  <FontAwesomeIcon icon={faThumbsUp} />
-                  {selectedVoice?.stats?.positive_rating_count}
-                </span>
-              )}
-            </div>
-            <div className="d-flex gap-1 align-items-center">
-              <span className="d-none d-lg-block px-1 opacity-50">|</span>
-              <Link
-                to={`/weight/${selectedVoice.weight_token}`}
-                className="fw-medium"
-                onClick={e => e.stopPropagation()}
-              >
-                {t("link.viewDetails")}
-                <FontAwesomeIcon icon={faArrowRight} className="ms-2" />
-              </Link>
-            </div>
-          </span>
-        ) : (
-          <span className="fs-7 opacity-75">
-            {t("button.labelClickToSelect")}
-          </span>
-        )}
-      </div>
-      <div className="d-flex gap-2 align-items-center">
-        <span className="fw-medium opacity-75 pe-1 d-none d-lg-block">
-          {selectedVoice
-            ? t("button.labelChangeVoice")
-            : t("button.labelSelectVoice")}
-        </span>
-        <FontAwesomeIcon icon={faChevronRight} className="fs-5 me-1" />
-      </div>
-    </div>
+            </Link>
+          </div>
+          <div className="d-flex gap-1 align-items-center">
+            <span className="px-1 opacity-50">|</span>
+            <Link
+              to={`/weight/${selectedVoice.weight_token}`}
+              className="fw-medium"
+              onClick={e => e.stopPropagation()}
+            >
+              {t("link.viewDetails")}
+              <FontAwesomeIcon icon={faArrowRight} className="ms-2" />
+            </Link>
+          </div>
+        </div>
+      )}
+    </>
   );
 };