diff --git a/lib/pages/chat/events/html_message.dart b/lib/pages/chat/events/html_message.dart
index 186266f03..d51faff01 100644
--- a/lib/pages/chat/events/html_message.dart
+++ b/lib/pages/chat/events/html_message.dart
@@ -457,6 +457,7 @@ class HtmlMessage extends StatelessWidget {
                       ),
                       width: tokenWidth,
                       animateIn: isTransitionAnimation,
+                      textColor: textColor,
                     ),
                   MouseRegion(
                     cursor: SystemMouseCursors.click,
diff --git a/lib/pangea/course_creation/new_course_page.dart b/lib/pangea/course_creation/new_course_page.dart
index 257d90497..b8348ed76 100644
--- a/lib/pangea/course_creation/new_course_page.dart
+++ b/lib/pangea/course_creation/new_course_page.dart
@@ -1,9 +1,10 @@
+import 'package:flutter/material.dart';
+
 import 'package:fluffychat/pangea/course_creation/new_course_view.dart';
 import 'package:fluffychat/pangea/course_plans/course_plan_model.dart';
 import 'package:fluffychat/pangea/course_plans/course_plans_repo.dart';
 import 'package:fluffychat/pangea/learning_settings/enums/language_level_type_enum.dart';
 import 'package:fluffychat/pangea/learning_settings/models/language_model.dart';
-import 'package:flutter/material.dart';
 
 class NewCourse extends StatefulWidget {
   final String? spaceId;
diff --git a/lib/pangea/course_plans/course_plans_repo.dart b/lib/pangea/course_plans/course_plans_repo.dart
index f3b32c691..44d2a2b58 100644
--- a/lib/pangea/course_plans/course_plans_repo.dart
+++ b/lib/pangea/course_plans/course_plans_repo.dart
@@ -1,5 +1,7 @@
 import 'dart:async';
 
+import 'package:get_storage/get_storage.dart';
+
 import 'package:fluffychat/pangea/common/config/environment.dart';
 import 'package:fluffychat/pangea/course_plans/course_plan_model.dart';
 import 'package:fluffychat/pangea/learning_settings/enums/language_level_type_enum.dart';
@@ -7,7 +9,6 @@ import 'package:fluffychat/pangea/learning_settings/models/language_model.dart';
 import 'package:fluffychat/pangea/payload_client/models/course_plan/cms_course_plan.dart';
 import 'package:fluffychat/pangea/payload_client/payload_client.dart';
 import 'package:fluffychat/widgets/matrix.dart';
-import 'package:get_storage/get_storage.dart';
 
 class CourseFilter {
   final LanguageModel? targetLanguage;
diff --git a/lib/pangea/message_token_text/token_practice_button.dart b/lib/pangea/message_token_text/token_practice_button.dart
index bb8e09e25..22fdebcfe 100644
--- a/lib/pangea/message_token_text/token_practice_button.dart
+++ b/lib/pangea/message_token_text/token_practice_button.dart
@@ -31,6 +31,7 @@ class TokenPracticeButton extends StatefulWidget {
   final TextStyle textStyle;
   final double width;
   final bool animateIn;
+  final Color textColor;
 
   const TokenPracticeButton({
     super.key,
@@ -38,6 +39,7 @@ class TokenPracticeButton extends StatefulWidget {
     required this.token,
     required this.textStyle,
     required this.width,
+    required this.textColor,
     this.animateIn = false,
   });
 
@@ -215,6 +217,7 @@ class TokenPracticeButtonState extends State<TokenPracticeButton>
         height: tokenButtonHeight,
         width: widget.width,
         textStyle: widget.textStyle,
+        textColor: widget.textColor,
         sizeAnimation: _iconSizeAnimation!,
         onHover: _setHovered,
         onTap: () => widget.overlayController!.onMorphActivitySelect(
@@ -238,6 +241,7 @@ class TokenPracticeButtonState extends State<TokenPracticeButton>
             height: _heightAnimation!.value,
             width: widget.width,
             textStyle: widget.textStyle,
+            textColor: widget.textColor,
             sizeAnimation: _iconSizeAnimation!,
             onHover: _setHovered,
             onTap: () => widget.overlayController!.onMorphActivitySelect(
@@ -264,6 +268,7 @@ class MessageTokenButtonContent extends StatelessWidget {
   final double height;
   final double width;
   final TextStyle textStyle;
+  final Color textColor;
   final Animation<double> sizeAnimation;
 
   final Function(bool)? onHover;
@@ -281,6 +286,7 @@ class MessageTokenButtonContent extends StatelessWidget {
     required this.height,
     required this.width,
     required this.textStyle,
+    required this.textColor,
     required this.sizeAnimation,
     this.onHover,
     this.onTap,
@@ -357,7 +363,7 @@ class MessageTokenButtonContent extends StatelessWidget {
               builder: (context, child) {
                 return Icon(
                   Symbols.toys_and_games,
-                  color: Theme.of(context).colorScheme.onSurface,
+                  color: textColor,
                   size: sizeAnimation.value, // Use the new animation
                 );
               },
@@ -382,8 +388,7 @@ class MessageTokenButtonContent extends StatelessWidget {
           borderRadius: _borderRadius,
           child: CustomPaint(
             painter: DottedBorderPainter(
-              color: theme.colorScheme.onSurface
-                  .withAlpha((colorAlpha * 255).toInt()),
+              color: textColor.withAlpha((colorAlpha * 255).toInt()),
               borderRadius: _borderRadius,
             ),
             child: Container(