diff --git a/client/src/common/components/title-card/TitleCard.jsx b/client/src/common/components/title-card/TitleCard.jsx
deleted file mode 100644
index 3f6f9a598..000000000
--- a/client/src/common/components/title-card/TitleCard.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import PropTypes from 'prop-types';
-
-import style from './TitleCard.module.scss';
-
-export default function TitleCard(props) {
-  const { label, title, subtitle, presenter } = props;
-
-  return (
-    <>
-      <div className={style.label}>{label}</div>
-      <div className={style.title}>{title}</div>
-      <div className={style.presenter}>{presenter}</div>
-      <div className={style.subtitle}>{subtitle}</div>
-    </>
-  );
-}
-
-TitleCard.propTypes = {
-  label: PropTypes.string,
-  title: PropTypes.string,
-  subtitle: PropTypes.string,
-  presenter: PropTypes.string,
-}
diff --git a/client/src/common/components/title-card/TitleCard.module.scss b/client/src/common/components/title-card/TitleCard.scss
similarity index 56%
rename from client/src/common/components/title-card/TitleCard.module.scss
rename to client/src/common/components/title-card/TitleCard.scss
index 3dbc6e430..ab95f01f7 100644
--- a/client/src/common/components/title-card/TitleCard.module.scss
+++ b/client/src/common/components/title-card/TitleCard.scss
@@ -1,24 +1,27 @@
-@use '../../../theme/main' as *;
+@use '../../../theme/main';
+@use '../../../theme/viewerDefs' as *;
 
 .label {
-  @include card-label;
+  font-size: 1.3vw;
+  color: var(--accent-color-override, $accent-color);
 }
 
 .title,
 .subtitle,
 .presenter {
-  @include ellipsis;
+  @include main.ellipsis;
 }
 
 .title {
-  @include card-title;
+  color: $title-color;
+  font-weight: 600;
   font-size: 2.5vw;
   flex: 1;
 }
 
 .subtitle,
 .presenter {
-  color: $subtitle-gray;
+  color: $subtitle-color;
 }
 
 .subtitle {
diff --git a/client/src/common/components/title-card/TitleCard.tsx b/client/src/common/components/title-card/TitleCard.tsx
new file mode 100644
index 000000000..cc93529e1
--- /dev/null
+++ b/client/src/common/components/title-card/TitleCard.tsx
@@ -0,0 +1,21 @@
+import './TitleCard.scss';
+
+interface TitleCardProps {
+  label: string;
+  title: string;
+  subtitle: string;
+  presenter: string;
+}
+
+export default function TitleCard(props: TitleCardProps) {
+  const { label, title, subtitle, presenter } = props;
+
+  return (
+    <>
+      <div className='label'>{label}</div>
+      <div className='title'>{title}</div>
+      <div className='presenter'>{presenter}</div>
+      <div className='subtitle'>{subtitle}</div>
+    </>
+  );
+}
diff --git a/client/src/theme/_main.scss b/client/src/theme/_main.scss
index ccc7cda75..8a21c2000 100644
--- a/client/src/theme/_main.scss
+++ b/client/src/theme/_main.scss
@@ -59,8 +59,6 @@ $error-red: #e53e3e;
 
 //////////////////////////////////// viewers
 $title-white: #fffd;
-$title-gray: #ddd;
-$subtitle-gray: #aaa;
 
 //////////////////////////////////// block elements
 $block-delay-color: #ecc94b;
@@ -70,17 +68,6 @@ $block-block-color: #805ad5;
 $block-icon-drag: $bg-gray-100;
 $block-border: 1px solid $bg-gray-800;
 
-//////////////////////////////////// viewer cards
-@mixin card-title {
-  color: $title-gray;
-  font-weight: 600;
-}
-
-@mixin card-label {
-  font-size: 1.3vw;
-  color: $ontime-pink;
-}
-
 //////////////////////////////////// utils
 
 @mixin ellipsis {