diff --git a/lib/screens/main_app_widgets/fav_page.dart b/lib/screens/main_app_widgets/fav_page.dart
index f1f22ed..cf321e0 100644
--- a/lib/screens/main_app_widgets/fav_page.dart
+++ b/lib/screens/main_app_widgets/fav_page.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_component_ui/provider/favorite_provider.dart';
-import 'package:flutter_component_ui/theme/theme.dart';
+
 import 'package:google_fonts/google_fonts.dart';
 import 'package:provider/provider.dart';
 
@@ -65,7 +65,10 @@ class _FavPageState extends State<FavPage> {
                 child: Text(
                   "Favourite",
                   style: TextStyle(
-                    color: MyTheme.lightBluishColor,
+                    color: Theme.of(context).brightness == Brightness.dark
+                        ? Colors.white
+                        : const Color.fromRGBO(55, 80, 206, 1),
+                   
                     fontSize: 24,
                     fontFamily: GoogleFonts.dmSans(
                       fontWeight: FontWeight.w700,
diff --git a/lib/screens/main_app_widgets/search_page.dart b/lib/screens/main_app_widgets/search_page.dart
index 91b4396..8b42f5f 100644
--- a/lib/screens/main_app_widgets/search_page.dart
+++ b/lib/screens/main_app_widgets/search_page.dart
@@ -351,7 +351,9 @@ class _SearchPageState extends State<SearchPage> {
                 child: Text(
                   "Search",
                   style: TextStyle(
-                    color: MyTheme.lightBluishColor,
+                    color: Theme.of(context).brightness == Brightness.dark
+                        ? Colors.white
+                        : const Color.fromRGBO(55, 80, 206, 1),
                     fontSize: 24,
                     fontFamily: GoogleFonts.dmSans(
                       fontWeight: FontWeight.w700,
diff --git a/lib/theme/theme.dart b/lib/theme/theme.dart
index b21bee0..8dcf781 100644
--- a/lib/theme/theme.dart
+++ b/lib/theme/theme.dart
@@ -13,7 +13,12 @@ class MyTheme {
      snackBarTheme: const SnackBarThemeData(
             backgroundColor: Colors.black,
             contentTextStyle: TextStyle(color: Colors.white)),
-        textTheme: GoogleFonts.poppinsTextTheme(ThemeData.light().textTheme),
+        textTheme:TextTheme(
+            displayLarge: GoogleFonts.poppins(
+          color: MyTheme.lightBluishColor,
+          fontSize: 20,
+          fontWeight: FontWeight.w600,
+        )),
         appBarTheme: const AppBarTheme(
           color: Colors.white,
           elevation: 0.0,
@@ -32,7 +37,13 @@ class MyTheme {
      snackBarTheme: const SnackBarThemeData(
             backgroundColor: Colors.white,
             contentTextStyle: TextStyle(color: Colors.black)),
-        textTheme: GoogleFonts.poppinsTextTheme(ThemeData.dark().textTheme),
+       textTheme: TextTheme(
+          displayLarge: GoogleFonts.poppins(
+            color: Colors.white,
+            fontSize: 20,
+            fontWeight: FontWeight.w600,
+          ),
+        ),
         appBarTheme: const AppBarTheme(
           color: Colors.white,
           elevation: 0.0,
diff --git a/lib/ui_components/alerts/alerts.dart b/lib/ui_components/alerts/alerts.dart
index 2100eba..de3ef5d 100644
--- a/lib/ui_components/alerts/alerts.dart
+++ b/lib/ui_components/alerts/alerts.dart
@@ -65,10 +65,7 @@ class _AlertScreenState extends State<AlertScreen> {
                   child: Padding(
                     padding: const EdgeInsets.all(8.0),
                     child: Text("Coloured Alerts",
-                        style: TextStyle(
-                            fontSize: 20,
-                            fontWeight: FontWeight.bold,
-                            color: MyTheme.lightBluishColor)),
+                        style:  Theme.of(context).textTheme.displayLarge,),
                   )),
               Wrap(
                 direction: Axis.horizontal,
@@ -121,10 +118,7 @@ class _AlertScreenState extends State<AlertScreen> {
                     padding: const EdgeInsets.all(8.0),
                     child: Text(
                       "Simple Alerts",
-                      style: TextStyle(
-                          fontSize: 20,
-                          fontWeight: FontWeight.bold,
-                          color: MyTheme.lightBluishColor),
+                      style:  Theme.of(context).textTheme.displayLarge,
                     ),
                   )),
               Wrap(
@@ -178,10 +172,7 @@ class _AlertScreenState extends State<AlertScreen> {
                     padding: const EdgeInsets.all(8.0),
                     child: Text(
                       "Dark Mode Alerts",
-                      style: TextStyle(
-                          fontSize: 20,
-                          fontWeight: FontWeight.bold,
-                          color: MyTheme.lightBluishColor),
+                      style:  Theme.of(context).textTheme.displayLarge,
                     ),
                   )),
               Wrap(
diff --git a/lib/ui_components/avatars/all_avatars/avatars.dart b/lib/ui_components/avatars/all_avatars/avatars.dart
index f669bf9..8aa4344 100644
--- a/lib/ui_components/avatars/all_avatars/avatars.dart
+++ b/lib/ui_components/avatars/all_avatars/avatars.dart
@@ -71,10 +71,7 @@ class _AvatarScreenState extends State<AvatarScreen> {
               Align(
                   alignment: Alignment.centerLeft,
                   child: Text("Text Avatars",
-                      style: TextStyle(
-                          fontSize: 20,
-                          fontWeight: FontWeight.bold,
-                          color: MyTheme.lightBluishColor))),
+                      style:  Theme.of(context).textTheme.displayLarge)),
               Wrap(
                 direction: Axis.horizontal,
                 children: List.generate(
@@ -121,10 +118,7 @@ class _AvatarScreenState extends State<AvatarScreen> {
               Align(
                   alignment: Alignment.centerLeft,
                   child: Text("Image Avatars",
-                      style: TextStyle(
-                          fontSize: 20,
-                          fontWeight: FontWeight.bold,
-                          color: MyTheme.lightBluishColor))),
+                      style:  Theme.of(context).textTheme.displayLarge)),
               Wrap(
                 direction: Axis.horizontal,
                 children: List.generate(
@@ -172,10 +166,7 @@ class _AvatarScreenState extends State<AvatarScreen> {
               Align(
                   alignment: Alignment.centerLeft,
                   child: Text("Icon Avatars",
-                      style: TextStyle(
-                          fontSize: 20,
-                          fontWeight: FontWeight.bold,
-                          color: MyTheme.lightBluishColor))),
+                      style:  Theme.of(context).textTheme.displayLarge)),
               Wrap(
                 direction: Axis.horizontal,
                 children: List.generate(
diff --git a/lib/ui_components/bottom_navbars/bottom_navbars.dart b/lib/ui_components/bottom_navbars/bottom_navbars.dart
index 3bd08dd..8a0916c 100644
--- a/lib/ui_components/bottom_navbars/bottom_navbars.dart
+++ b/lib/ui_components/bottom_navbars/bottom_navbars.dart
@@ -48,10 +48,7 @@ class BottomNavBarScreenState extends State<BottomNavBarScreen> {
                 child: Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Text("Basic Bottom Nav-Bars",
-                      style: TextStyle(
-                          fontSize: 20,
-                          fontWeight: FontWeight.bold,
-                          color: MyTheme.lightBluishColor)),
+                      style:  Theme.of(context).textTheme.displayLarge),
                 ),
               ),
               Wrap(
@@ -113,10 +110,7 @@ class BottomNavBarScreenState extends State<BottomNavBarScreen> {
                 child: Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Text("Animated Bottom Nav-Bars",
-                      style: TextStyle(
-                          fontSize: 20,
-                          fontWeight: FontWeight.bold,
-                          color: MyTheme.lightBluishColor)),
+                      style:  Theme.of(context).textTheme.displayLarge),
                 ),
               ),
               Wrap(
@@ -178,10 +172,7 @@ class BottomNavBarScreenState extends State<BottomNavBarScreen> {
                 child: Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Text("FAB Bottom Nav-Bars",
-                      style: TextStyle(
-                          fontSize: 20,
-                          fontWeight: FontWeight.bold,
-                          color: MyTheme.lightBluishColor)),
+                      style:  Theme.of(context).textTheme.displayLarge),
                 ),
               ),
               Wrap(
diff --git a/lib/ui_components/buttons/buttons.dart b/lib/ui_components/buttons/buttons.dart
index 2af3baf..f8276d8 100644
--- a/lib/ui_components/buttons/buttons.dart
+++ b/lib/ui_components/buttons/buttons.dart
@@ -68,10 +68,7 @@ class _ButtonScreenState extends State<ButtonScreen> {
                 child: Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Text("Elevated Buttons",
-                      style: TextStyle(
-                          fontSize: 20,
-                          fontWeight: FontWeight.bold,
-                          color: MyTheme.lightBluishColor)),
+                      style:  Theme.of(context).textTheme.displayLarge),
                 ),
               ),
               Wrap(
@@ -125,11 +122,8 @@ class _ButtonScreenState extends State<ButtonScreen> {
                 alignment: Alignment.centerLeft,
                 child: Padding(
                   padding: const EdgeInsets.all(8.0),
-                  child: Text("Ouline Buttons",
-                      style: TextStyle(
-                          fontSize: 20,
-                          fontWeight: FontWeight.bold,
-                          color: MyTheme.lightBluishColor)),
+                  child: Text("Outline Buttons",
+                      style:  Theme.of(context).textTheme.displayLarge),
                 ),
               ),
               Wrap(
@@ -184,10 +178,7 @@ class _ButtonScreenState extends State<ButtonScreen> {
                 child: Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Text("Text Buttons",
-                      style: TextStyle(
-                          fontSize: 20,
-                          fontWeight: FontWeight.bold,
-                          color: MyTheme.lightBluishColor)),
+                      style: Theme.of(context).textTheme.displayLarge),
                 ),
               ),
               Wrap(
@@ -242,10 +233,7 @@ class _ButtonScreenState extends State<ButtonScreen> {
                 child: Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: Text("Animated Buttons",
-                      style: TextStyle(
-                          fontSize: 20,
-                          fontWeight: FontWeight.bold,
-                          color: MyTheme.lightBluishColor)),
+                      style:  Theme.of(context).textTheme.displayLarge),
                 ),
               ),
               Wrap(
diff --git a/lib/ui_components/cards/cards.dart b/lib/ui_components/cards/cards.dart
index e7924ba..0989033 100644
--- a/lib/ui_components/cards/cards.dart
+++ b/lib/ui_components/cards/cards.dart
@@ -56,10 +56,7 @@ class _CardScreenState extends State<CardScreen> {
               child: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Text("Blog Cards",
-                    style: TextStyle(
-                        fontSize: 20,
-                        fontWeight: FontWeight.bold,
-                        color: MyTheme.lightBluishColor)),
+                    style: Theme.of(context).textTheme.displayLarge),
               ),
             ),
             Wrap(
@@ -113,10 +110,7 @@ class _CardScreenState extends State<CardScreen> {
               child: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Text("Social Cards",
-                    style: TextStyle(
-                        fontSize: 20,
-                        fontWeight: FontWeight.bold,
-                        color: MyTheme.lightBluishColor)),
+                    style:  Theme.of(context).textTheme.displayLarge),
               ),
             ),
             Wrap(
@@ -171,10 +165,7 @@ class _CardScreenState extends State<CardScreen> {
               child: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Text("Blog Cards Dark Mode",
-                    style: TextStyle(
-                        fontSize: 20,
-                        fontWeight: FontWeight.bold,
-                        color: MyTheme.lightBluishColor)),
+                    style:  Theme.of(context).textTheme.displayLarge),
               ),
             ),
             Wrap(
@@ -229,10 +220,7 @@ class _CardScreenState extends State<CardScreen> {
               child: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Text("Social Cards Dark Mode",
-                    style: TextStyle(
-                        fontSize: 20,
-                        fontWeight: FontWeight.bold,
-                        color: MyTheme.lightBluishColor)),
+                    style: Theme.of(context).textTheme.displayLarge),
               ),
             ),
             Wrap(
diff --git a/lib/ui_components/input_fields/input_fields.dart b/lib/ui_components/input_fields/input_fields.dart
index 12a8eff..5541378 100644
--- a/lib/ui_components/input_fields/input_fields.dart
+++ b/lib/ui_components/input_fields/input_fields.dart
@@ -77,10 +77,7 @@ class _InputFieldScreenState extends State<InputFieldScreen> {
               child: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Text("Input Fields",
-                    style: TextStyle(
-                        fontSize: 20,
-                        fontWeight: FontWeight.bold,
-                        color: MyTheme.lightBluishColor)),
+                    style: Theme.of(context).textTheme.displayLarge),
               ),
             ),
             Wrap(
@@ -133,10 +130,7 @@ class _InputFieldScreenState extends State<InputFieldScreen> {
               child: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: Text("Text Areas",
-                    style: TextStyle(
-                        fontSize: 20,
-                        fontWeight: FontWeight.bold,
-                        color: MyTheme.lightBluishColor)),
+                    style:  Theme.of(context).textTheme.displayLarge),
               ),
             ),
             Wrap(
diff --git a/lib/ui_components/messages/messages.dart b/lib/ui_components/messages/messages.dart
index a9d4fa0..881e24b 100644
--- a/lib/ui_components/messages/messages.dart
+++ b/lib/ui_components/messages/messages.dart
@@ -80,10 +80,7 @@ class _MessageScreenState extends State<MessageScreen> {
                 padding: const EdgeInsets.only(left: 12.0, top: 20),
                 child: Text(
                   "Bubble Chat",
-                  style: TextStyle(
-                      fontSize: 20,
-                      fontWeight: FontWeight.bold,
-                      color: MyTheme.lightBluishColor),
+                  style: Theme.of(context).textTheme.displayLarge
                 ),
               ),
             ),
@@ -135,10 +132,7 @@ class _MessageScreenState extends State<MessageScreen> {
                 padding: const EdgeInsets.only(left: 12.0, top: 20),
                 child: Text(
                   "Inbox Messages",
-                  style: TextStyle(
-                      fontSize: 20,
-                      fontWeight: FontWeight.bold,
-                      color: MyTheme.lightBluishColor),
+                  style:  Theme.of(context).textTheme.displayLarge
                 ),
               ),
             ),
diff --git a/lib/ui_components/pricing_cards/pricing_cards.dart b/lib/ui_components/pricing_cards/pricing_cards.dart
index 1ce8a8d..b8b3fdd 100644
--- a/lib/ui_components/pricing_cards/pricing_cards.dart
+++ b/lib/ui_components/pricing_cards/pricing_cards.dart
@@ -44,10 +44,7 @@ class _PricingCardScreenState extends State<PricingCardScreen> {
                 alignment: Alignment.centerLeft,
                 child: Text(
                   "Pricing Cards",
-                  style: TextStyle(
-                      fontSize: 20,
-                      fontWeight: FontWeight.bold,
-                      color: MyTheme.lightBluishColor),
+                  style: Theme.of(context).textTheme.displayLarge,
                 ),
               ),
               const SizedBox(height: 10),
diff --git a/lib/ui_components/radios/radio_widgets/basic_radio_button.dart b/lib/ui_components/radios/radio_widgets/basic_radio_button.dart
index 64fa3c9..ee296ca 100644
--- a/lib/ui_components/radios/radio_widgets/basic_radio_button.dart
+++ b/lib/ui_components/radios/radio_widgets/basic_radio_button.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-import '../../../theme/theme.dart';
+
 
 class BasicRadioButton extends StatefulWidget {
   const BasicRadioButton({super.key});
@@ -21,11 +21,7 @@ class _BasicRadioButtonState extends State<BasicRadioButton> {
           padding: const EdgeInsets.only(left: 20, top: 20),
           child: Text(
             "Basic Radio Button",
-            style: TextStyle(
-              fontSize: 20,
-              fontWeight: FontWeight.bold,
-              color: MyTheme.lightBluishColor,
-            ),
+            style:  Theme.of(context).textTheme.displayLarge
           ),
         ),
         const SizedBox(height: 10),
diff --git a/lib/ui_components/radios/radio_widgets/radio_button_with_custom_color.dart b/lib/ui_components/radios/radio_widgets/radio_button_with_custom_color.dart
index 8d4364c..98a9783 100644
--- a/lib/ui_components/radios/radio_widgets/radio_button_with_custom_color.dart
+++ b/lib/ui_components/radios/radio_widgets/radio_button_with_custom_color.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-import '../../../theme/theme.dart';
+
 
 class RadioButtonwithCustomColor extends StatefulWidget {
   const RadioButtonwithCustomColor({super.key});
@@ -23,11 +23,7 @@ class _RadioButtonwithCustomColorState
           padding: const EdgeInsets.only(left: 20, top: 20),
           child: Text(
             "Radio Button with Custom Colors",
-            style: TextStyle(
-              fontSize: 20,
-              fontWeight: FontWeight.bold,
-              color: MyTheme.lightBluishColor,
-            ),
+            style:  Theme.of(context).textTheme.displayLarge
           ),
         ),
         const SizedBox(height: 10),
diff --git a/lib/ui_components/radios/radio_widgets/radio_button_with_horizontal_layout.dart b/lib/ui_components/radios/radio_widgets/radio_button_with_horizontal_layout.dart
index 29ee9d4..fa6504b 100644
--- a/lib/ui_components/radios/radio_widgets/radio_button_with_horizontal_layout.dart
+++ b/lib/ui_components/radios/radio_widgets/radio_button_with_horizontal_layout.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-import '../../../theme/theme.dart';
+
 
 class RadioButtonwithHorizontalLayout extends StatefulWidget {
   const RadioButtonwithHorizontalLayout({super.key});
@@ -22,11 +22,7 @@ class _RadioButtonwithHorizontalLayoutState
           padding: const EdgeInsets.only(left: 20, top: 20),
           child: Text(
             "Radio Button with Horizontal Layout",
-            style: TextStyle(
-              fontSize: 20,
-              fontWeight: FontWeight.bold,
-              color: MyTheme.lightBluishColor,
-            ),
+            style:  Theme.of(context).textTheme.displayLarge
           ),
         ),
         const SizedBox(height: 10),
diff --git a/lib/ui_components/radios/radio_widgets/radio_button_with_text_and_styles.dart b/lib/ui_components/radios/radio_widgets/radio_button_with_text_and_styles.dart
index ada73c2..d1f66b4 100644
--- a/lib/ui_components/radios/radio_widgets/radio_button_with_text_and_styles.dart
+++ b/lib/ui_components/radios/radio_widgets/radio_button_with_text_and_styles.dart
@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 
-import '../../../theme/theme.dart';
 
 class RadioButtonwithTextandStyles extends StatefulWidget {
   const RadioButtonwithTextandStyles({super.key});
@@ -23,11 +22,7 @@ class _RadioButtonwithTextandStylesState
           padding: const EdgeInsets.only(left: 20, top: 20),
           child: Text(
             "Radio Button with Tile Color and Gesture",
-            style: TextStyle(
-              fontSize: 20,
-              fontWeight: FontWeight.bold,
-              color: MyTheme.lightBluishColor,
-            ),
+            style:  Theme.of(context).textTheme.displayLarge
           ),
         ),
         const SizedBox(height: 10),
diff --git a/lib/ui_components/segmented_controls/segmented_control_screen.dart b/lib/ui_components/segmented_controls/segmented_control_screen.dart
index 07637b8..1fd7515 100644
--- a/lib/ui_components/segmented_controls/segmented_control_screen.dart
+++ b/lib/ui_components/segmented_controls/segmented_control_screen.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import '../../provider/favorite_provider.dart';
-import '../../theme/theme.dart';
+
 import 'all_segmented_controls/segmented_controls.dart';
 
 class SegmentedControlScreen extends StatefulWidget {
@@ -61,10 +61,7 @@ class _SegmentedControlScreenState extends State<SegmentedControlScreen> {
             alignment: Alignment.centerLeft,
             child: Text(
               "Segment Control Light Mode",
-              style: TextStyle(
-                  fontSize: 20,
-                  fontWeight: FontWeight.bold,
-                  color: MyTheme.lightBluishColor),
+              style: Theme.of(context).textTheme.displayLarge
             ),
           ),
           const SizedBox(height: 10),
@@ -115,10 +112,7 @@ class _SegmentedControlScreenState extends State<SegmentedControlScreen> {
             alignment: Alignment.centerLeft,
             child: Text(
               "Segment Control Dark Mode",
-              style: TextStyle(
-                  fontSize: 20,
-                  fontWeight: FontWeight.bold,
-                  color: MyTheme.lightBluishColor),
+              style: Theme.of(context).textTheme.displayLarge
             ),
           ),
           const SizedBox(height: 10),
diff --git a/lib/ui_components/sliders/sliders.dart b/lib/ui_components/sliders/sliders.dart
index bdaab61..18c87ab 100644
--- a/lib/ui_components/sliders/sliders.dart
+++ b/lib/ui_components/sliders/sliders.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_component_ui/theme/theme.dart';
+
 import 'package:provider/provider.dart';
 
 import '../../provider/favorite_provider.dart';
@@ -56,10 +56,7 @@ class _SliderScreenState extends State<SliderScreen> {
               alignment: Alignment.centerLeft,
               child: Text(
                 "Single Point Slider",
-                style: TextStyle(
-                    fontSize: 20,
-                    fontWeight: FontWeight.bold,
-                    color: MyTheme.lightBluishColor),
+                style:  Theme.of(context).textTheme.displayLarge
               ),
             ),
             Wrap(
@@ -105,10 +102,7 @@ class _SliderScreenState extends State<SliderScreen> {
             Align(
                 alignment: Alignment.centerLeft,
                 child: Text("Dual Point Slider",
-                    style: TextStyle(
-                        fontSize: 20,
-                        fontWeight: FontWeight.bold,
-                        color: MyTheme.lightBluishColor))),
+                    style:  Theme.of(context).textTheme.displayLarge)),
             Wrap(
               direction: Axis.horizontal,
               children: List.generate(
diff --git a/lib/ui_components/steppers/steppers_widgets/basic_stepper.dart b/lib/ui_components/steppers/steppers_widgets/basic_stepper.dart
index 180ced3..27e1c51 100644
--- a/lib/ui_components/steppers/steppers_widgets/basic_stepper.dart
+++ b/lib/ui_components/steppers/steppers_widgets/basic_stepper.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-import '../../../theme/theme.dart';
+
 
 class BasicStepper extends StatefulWidget {
   const BasicStepper({super.key});
@@ -21,11 +21,7 @@ class _BasicStepperState extends State<BasicStepper> {
           padding: const EdgeInsets.only(left: 20, top: 20),
           child: Text(
             "Basic Stepper",
-            style: TextStyle(
-              fontSize: 20,
-              fontWeight: FontWeight.bold,
-              color: MyTheme.lightBluishColor,
-            ),
+            style:  Theme.of(context).textTheme.displayLarge
           ),
         ),
         Stepper(
diff --git a/lib/ui_components/steppers/steppers_widgets/stepper_with_custom_color.dart b/lib/ui_components/steppers/steppers_widgets/stepper_with_custom_color.dart
index c2d1be0..8f39b06 100644
--- a/lib/ui_components/steppers/steppers_widgets/stepper_with_custom_color.dart
+++ b/lib/ui_components/steppers/steppers_widgets/stepper_with_custom_color.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-import '../../../theme/theme.dart';
+
 
 class StepperwithCustomColor extends StatefulWidget {
   const StepperwithCustomColor({super.key});
@@ -20,11 +20,7 @@ class _StepperwithCustomColorState extends State<StepperwithCustomColor> {
           padding: const EdgeInsets.only(left: 20, top: 20),
           child: Text(
             "Stepper with Custom Color",
-            style: TextStyle(
-              fontSize: 20,
-              fontWeight: FontWeight.bold,
-              color: MyTheme.lightBluishColor,
-            ),
+            style:  Theme.of(context).textTheme.displayLarge
           ),
         ),
         Stepper(
diff --git a/lib/ui_components/steppers/steppers_widgets/stepper_with_custom_icon.dart b/lib/ui_components/steppers/steppers_widgets/stepper_with_custom_icon.dart
index 9fea4bb..0d8bf51 100644
--- a/lib/ui_components/steppers/steppers_widgets/stepper_with_custom_icon.dart
+++ b/lib/ui_components/steppers/steppers_widgets/stepper_with_custom_icon.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-import '../../../theme/theme.dart';
+
 
 class StepperwihCustomIcon extends StatefulWidget {
   const StepperwihCustomIcon({super.key});
@@ -21,11 +21,7 @@ class _StepperwihCustomIconState extends State<StepperwihCustomIcon> {
           padding: const EdgeInsets.only(left: 20, top: 20),
           child: Text(
             "Stepper with Right Icons",
-            style: TextStyle(
-              fontSize: 20,
-              fontWeight: FontWeight.bold,
-              color: MyTheme.lightBluishColor,
-            ),
+            style:  Theme.of(context).textTheme.displayLarge
           ),
         ),
         Stepper(
diff --git a/lib/ui_components/steppers/steppers_widgets/stepper_with_validation.dart b/lib/ui_components/steppers/steppers_widgets/stepper_with_validation.dart
index 976ef95..eb2207c 100644
--- a/lib/ui_components/steppers/steppers_widgets/stepper_with_validation.dart
+++ b/lib/ui_components/steppers/steppers_widgets/stepper_with_validation.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-import '../../../theme/theme.dart';
+
 
 class StepperwithValidation extends StatefulWidget {
   const StepperwithValidation({super.key});
@@ -22,11 +22,7 @@ class _StepperwithValidationState extends State<StepperwithValidation> {
           padding: const EdgeInsets.only(left: 20, top: 20),
           child: Text(
             "Stepper with Validation",
-            style: TextStyle(
-              fontSize: 20,
-              fontWeight: FontWeight.bold,
-              color: MyTheme.lightBluishColor,
-            ),
+            style: Theme.of(context).textTheme.displayLarge
           ),
         ),
         Stepper(