diff --git a/lib/src/screens/dashboard/dashboard_page.dart b/lib/src/screens/dashboard/dashboard_page.dart
index 1f4a4e99a..fae42f6e9 100644
--- a/lib/src/screens/dashboard/dashboard_page.dart
+++ b/lib/src/screens/dashboard/dashboard_page.dart
@@ -156,11 +156,8 @@ class _DashboardPageView extends BasePage {
                           radius: 6.0,
                           dotWidth: 6.0,
                           dotHeight: 6.0,
-                          dotColor: Theme.of(context).indicatorColor,
-                          activeDotColor: Theme.of(context)
-                              .accentTextTheme!
-                              .headlineMedium!
-                              .backgroundColor!),
+                          dotColor: Theme.of(context).extension<DashboardPageTheme>()!.indicatorDotTheme!.indicatorColor,
+                          activeDotColor: Theme.of(context).extension<DashboardPageTheme>()!.indicatorDotTheme!.activeIndicatorColor),
                     ),
                   );
                 }
diff --git a/lib/themes/bright_theme.dart b/lib/themes/bright_theme.dart
index 703ffc4a4..8811b4574 100644
--- a/lib/themes/bright_theme.dart
+++ b/lib/themes/bright_theme.dart
@@ -1,6 +1,7 @@
 import 'package:cake_wallet/themes/extensions/balance_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
+import 'package:cake_wallet/themes/extensions/indicator_dot_theme.dart';
 import 'package:cake_wallet/themes/extensions/new_wallet_theme.dart';
 import 'package:cake_wallet/themes/extensions/sync_indicator_theme.dart';
 import 'package:cake_wallet/themes/light_theme.dart';
@@ -22,11 +23,15 @@ class BrightTheme extends LightTheme {
   Color get containerColor => Palette.moderateLavender;
 
   @override
-  DashboardPageTheme get pageGradientTheme => super.pageGradientTheme.copyWith(
-      firstGradientBackgroundColor: Palette.blueCraiola,
-      secondGradientBackgroundColor: Palette.pinkFlamingo,
-      thirdGradientBackgroundColor: Palette.redHat,
-      textColor: Colors.white);
+  DashboardPageTheme get dashboardPageTheme =>
+      super.dashboardPageTheme.copyWith(
+          firstGradientBackgroundColor: Palette.blueCraiola,
+          secondGradientBackgroundColor: Palette.pinkFlamingo,
+          thirdGradientBackgroundColor: Palette.redHat,
+          textColor: Colors.white,
+          indicatorDotTheme: IndicatorDotTheme(
+              indicatorColor: Colors.white.withOpacity(0.5),
+              activeIndicatorColor: Colors.white));
 
   @override
   SyncIndicatorTheme get syncIndicatorStyle =>
@@ -147,16 +152,12 @@ class BrightTheme extends LightTheme {
           // display2 -> displaySmall
           displaySmall: TextStyle(
               color: Colors.white.withOpacity(0.5), // estimated fee (send page)
-              backgroundColor: PaletteDark.darkCyanBlue
-                  .withOpacity(0.67), // dot color for indicator on send page
               decorationColor:
                   Palette.shadowWhite // template dotted border (send page)
               ),
           // display3 -> displayMedium
           displayMedium: TextStyle(
               color: Palette.darkBlueCraiola, // template new text (send page)
-              backgroundColor: PaletteDark
-                  .darkNightBlue, // active dot color for indicator on send page
               decorationColor:
                   Palette.shadowWhite // template background color (send page)
               ),
@@ -207,7 +208,6 @@ class BrightTheme extends LightTheme {
             color: Palette.blueCraiola, // first gradient color (menu header)
             decorationColor:
                 Palette.pinkFlamingo, // second gradient color(menu header)
-            backgroundColor: Colors.white // active dot color
             ),
       ));
 }
diff --git a/lib/themes/dark_theme.dart b/lib/themes/dark_theme.dart
index 44b434921..5396a67d7 100644
--- a/lib/themes/dark_theme.dart
+++ b/lib/themes/dark_theme.dart
@@ -1,7 +1,9 @@
 import 'package:cake_wallet/themes/extensions/address_theme.dart';
 import 'package:cake_wallet/themes/extensions/balance_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart';
+import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
+import 'package:cake_wallet/themes/extensions/indicator_dot_theme.dart';
 import 'package:cake_wallet/themes/extensions/keyboard_theme.dart';
 import 'package:cake_wallet/themes/extensions/new_wallet_theme.dart';
 import 'package:cake_wallet/themes/extensions/pin_code_theme.dart';
@@ -84,6 +86,13 @@ class DarkTheme extends ThemeBase {
   AddressTheme get addressTheme =>
       AddressTheme(actionButtonColor: PaletteDark.nightBlue);
 
+  @override
+  DashboardPageTheme get dashboardPageTheme =>
+      super.dashboardPageTheme.copyWith(
+          indicatorDotTheme: IndicatorDotTheme(
+              indicatorColor: PaletteDark.cyanBlue,
+              activeIndicatorColor: Colors.white));
+
   @override
   ThemeData get themeData => super.themeData.copyWith(
       indicatorColor: PaletteDark.cyanBlue, // page indicator
@@ -184,16 +193,12 @@ class DarkTheme extends ThemeBase {
           // display2 -> displaySmall
           displaySmall: TextStyle(
               color: Colors.white, // estimated fee (send page)
-              backgroundColor:
-                  PaletteDark.cyanBlue, // dot color for indicator on send page
               decorationColor:
                   PaletteDark.darkCyanBlue // template dotted border (send page)
               ),
           // display3 -> displayMedium
           displayMedium: TextStyle(
               color: PaletteDark.darkCyanBlue, // template new text (send page)
-              backgroundColor:
-                  Colors.white, // active dot color for indicator on send page
               decorationColor: PaletteDark
                   .darkVioletBlue // template background color (send page)
               ),
@@ -246,7 +251,6 @@ class DarkTheme extends ThemeBase {
                 .deepPurpleBlue, // first gradient color (menu header)
             decorationColor: PaletteDark
                 .deepPurpleBlue, // second gradient color(menu header)
-            backgroundColor: Colors.white // active dot color
             ),
       ),
       );
diff --git a/lib/themes/light_theme.dart b/lib/themes/light_theme.dart
index 1b5c9ace1..f534462bd 100644
--- a/lib/themes/light_theme.dart
+++ b/lib/themes/light_theme.dart
@@ -1,7 +1,9 @@
 import 'package:cake_wallet/themes/extensions/address_theme.dart';
 import 'package:cake_wallet/themes/extensions/balance_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/cake_scrollbar_theme.dart';
+import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart';
 import 'package:cake_wallet/themes/extensions/exchange_page_theme.dart';
+import 'package:cake_wallet/themes/extensions/indicator_dot_theme.dart';
 import 'package:cake_wallet/themes/extensions/keyboard_theme.dart';
 import 'package:cake_wallet/themes/extensions/new_wallet_theme.dart';
 import 'package:cake_wallet/themes/extensions/pin_code_theme.dart';
@@ -85,6 +87,13 @@ class LightTheme extends ThemeBase {
   AddressTheme get addressTheme =>
       AddressTheme(actionButtonColor: Palette.shadowWhite);
 
+  @override
+  DashboardPageTheme get dashboardPageTheme =>
+      super.dashboardPageTheme.copyWith(
+          indicatorDotTheme: IndicatorDotTheme(
+              indicatorColor: PaletteDark.darkCyanBlue.withOpacity(0.67),
+              activeIndicatorColor: PaletteDark.darkNightBlue));
+
   @override
   ThemeData get themeData => super.themeData.copyWith(
       indicatorColor:
@@ -185,16 +194,12 @@ class LightTheme extends ThemeBase {
           // display2 -> displaySmall
           displaySmall: TextStyle(
               color: Colors.white.withOpacity(0.5), // estimated fee (send page)
-              backgroundColor: PaletteDark.darkCyanBlue
-                  .withOpacity(0.67), // dot color for indicator on send page
               decorationColor:
                   Palette.moderateLavender // template dotted border (send page)
               ),
           // display3 -> displayMedium
           displayMedium: TextStyle(
               color: Palette.darkBlueCraiola, // template new text (send page)
-              backgroundColor: PaletteDark
-                  .darkNightBlue, // active dot color for indicator on send page
               decorationColor:
                   Palette.blueAlice // template background color (send page)
               ),
@@ -243,7 +248,6 @@ class LightTheme extends ThemeBase {
         headlineMedium: TextStyle(
             color: Palette.blueCraiola, // first gradient color (menu header)
             decorationColor: Palette.blueGreyCraiola, // second gradient color(menu header)
-            backgroundColor: PaletteDark.darkNightBlue // active dot color
             ),
       ),
       );
diff --git a/lib/themes/theme_base.dart b/lib/themes/theme_base.dart
index acaf540ba..b719baf8d 100644
--- a/lib/themes/theme_base.dart
+++ b/lib/themes/theme_base.dart
@@ -40,7 +40,7 @@ abstract class ThemeBase {
       colorScheme: colorScheme,
       textTheme: TextTheme().apply(fontFamily: 'Lato'));
 
-  DashboardPageTheme get pageGradientTheme => DashboardPageTheme(
+  DashboardPageTheme get dashboardPageTheme => DashboardPageTheme(
       firstGradientBackgroundColor: backgroundColor,
       secondGradientBackgroundColor: backgroundColor,
       thirdGradientBackgroundColor: backgroundColor,
@@ -69,7 +69,7 @@ abstract class ThemeBase {
       cardColor: containerColor,
       dialogBackgroundColor: dialogBackgroundColor,
       extensions: [
-        pageGradientTheme,
+        dashboardPageTheme,
         scrollbarTheme,
         syncIndicatorStyle,
         keyboardTheme,