3 files changed, 5 insertions, 2 deletions
diff --git a/FrontEnd/src/app/index.sass b/FrontEnd/src/app/index.sass
index 348219eb..3db622f7 100644
--- a/FrontEnd/src/app/index.sass
+++ b/FrontEnd/src/app/index.sass
@@ -15,6 +15,9 @@
 
 @import './views/admin/admin'
 
+.tl-color-primary
+  color: var(--tl-primary-color)
+
 small
   line-height: 1.2
 
diff --git a/FrontEnd/src/app/views/timeline/TimelineCard.tsx b/FrontEnd/src/app/views/timeline/TimelineCard.tsx
index 0cb908cc..317eedd0 100644
--- a/FrontEnd/src/app/views/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/app/views/timeline/TimelineCard.tsx
@@ -17,7 +17,7 @@ const TimelineCard: React.FC<TimelinePageCardProps> = (props) => {
       <TimelinePageCardTemplate
         infoArea={
           <>
-            <h3 className="text-primary d-inline-block align-middle">
+            <h3 className="tl-color-primary d-inline-block align-middle">
               {timeline.title}
               <small className="ms-3 text-secondary">{timeline.name}</small>
             </h3>
diff --git a/FrontEnd/src/app/views/user/UserCard.tsx b/FrontEnd/src/app/views/user/UserCard.tsx
index df332706..4b8a401a 100644
--- a/FrontEnd/src/app/views/user/UserCard.tsx
+++ b/FrontEnd/src/app/views/user/UserCard.tsx
@@ -15,7 +15,7 @@ const UserCard: React.FC<TimelinePageCardProps> = (props) => {
       <TimelinePageCardTemplate
         infoArea={
           <>
-            <h3 className="text-primary d-inline-block align-middle">
+            <h3 className="tl-color-primary d-inline-block align-middle">
               {timeline.title}
               <small className="ms-3 text-secondary">{timeline.name}</small>
             </h3>