Refactor UI components to use contentTheme colors

- Updated various screens to replace hardcoded color values with contentTheme.buttonColor for consistency.
- Changed icons in NotesView, UserDocumentsPage, EmployeeDetailPage, EmployeesScreen, ExpenseDetailScreen, and others to use updated icon styles.
- Refactored OfflineScreen and TenantSelectionScreen to utilize new wave background widget.
- Introduced ThemeEditorWidget in UserProfileBar for dynamic theme adjustments.
- Enhanced logout confirmation dialog styling to align with new theme colors.

lib/helpers/theme/admin_theme.dart

@@ -17,16 +17,20 @@ enum ContentThemeColor {
   light,
   dark,
   pink,
-  green,
   red,
-  brandRed;
+  brand,
+  button;
 
   Color get color {
-    return (AdminTheme.theme.contentTheme.getMappedIntoThemeColor[this]?['color']) ?? Colors.black;
+    return (AdminTheme.theme.contentTheme.getMappedIntoThemeColor[this]
+            ?['color']) ??
+        Colors.black;
   }
 
   Color get onColor {
-    return (AdminTheme.theme.contentTheme.getMappedIntoThemeColor[this]?['onColor']) ?? Colors.white;
+    return (AdminTheme.theme.contentTheme.getMappedIntoThemeColor[this]
+            ?['onColor']) ??
+        Colors.white;
   }
 }
 
@@ -43,8 +47,6 @@ class LeftBarTheme {
     this.activeItemBackground = const Color(0x15663399),
   });
 
-  //--------------------------------------  Left Bar Theme ----------------------------------------//
-
   static final LeftBarTheme lightLeftBarTheme = LeftBarTheme();
 
   static final LeftBarTheme darkLeftBarTheme = LeftBarTheme(
@@ -73,11 +75,11 @@ class TopBarTheme {
     this.onBackground = const Color(0xff313a46),
   });
 
-  //--------------------------------------  Left Bar Theme ----------------------------------------//
-
   static final TopBarTheme lightTopBarTheme = TopBarTheme();
 
-  static final TopBarTheme darkTopBarTheme = TopBarTheme(background: const Color(0xff2c3036), onBackground: const Color(0xffdcdcdc));
+  static final TopBarTheme darkTopBarTheme = TopBarTheme(
+      background: const Color(0xff2c3036),
+      onBackground: const Color(0xffdcdcdc));
 }
 
 class RightBarTheme {
@@ -91,8 +93,6 @@ class RightBarTheme {
     this.onDisabled = const Color(0xff313a46),
   });
 
-  //--------------------------------------  Left Bar Theme ----------------------------------------//
-
   static final RightBarTheme lightRightBarTheme = RightBarTheme(
       disabled: const Color(0xffffffff),
       onDisabled: const Color(0xffdee2e6),
@@ -117,20 +117,24 @@ class ContentTheme {
   final Color info, onInfo;
   final Color light, onLight;
   final Color dark, onDark;
-  final Color purple, onPurple;
   final Color pink, onPink;
   final Color red, onRed;
-  final Color brandRed, onBrandRed;
+
+  final Color brandColor, onBrandColor; 
+  final Color buttonColor, onButtonColor;
 
   final Color cardBackground, cardShadow, cardBorder, cardText, cardTextMuted;
   final Color title;
   final Color disabled, onDisabled;
 
   Map<ContentThemeColor, Map<String, Color>> get getMappedIntoThemeColor {
-    var c = AdminTheme.theme.contentTheme;
+    var c = this;
     return {
       ContentThemeColor.primary: {'color': c.primary, 'onColor': c.onPrimary},
-      ContentThemeColor.secondary: {'color': c.secondary, 'onColor': c.onSecondary},
+      ContentThemeColor.secondary: {
+        'color': c.secondary,
+        'onColor': c.onSecondary
+      },
       ContentThemeColor.success: {'color': c.success, 'onColor': c.onSuccess},
       ContentThemeColor.info: {'color': c.info, 'onColor': c.onInfo},
       ContentThemeColor.warning: {'color': c.warning, 'onColor': c.onWarning},
@@ -139,37 +143,44 @@ class ContentTheme {
       ContentThemeColor.dark: {'color': c.dark, 'onColor': c.onDark},
       ContentThemeColor.pink: {'color': c.pink, 'onColor': c.onPink},
       ContentThemeColor.red: {'color': c.red, 'onColor': c.onRed},
-      ContentThemeColor.brandRed: {'color': c.brandRed, 'onColor': c.onBrandRed},
+      ContentThemeColor.brand: {
+        'color': c.brandColor,
+        'onColor': c.onBrandColor
+      },
+      ContentThemeColor.button: {
+        'color': c.buttonColor,
+        'onColor': c.onButtonColor
+      },
     };
   }
 
   ContentTheme({
     this.background = const Color(0xfffafbfe),
-    this.onBackground = const Color(0xffF1F1F2),
+    this.onBackground = const Color(0xff313a46),
-    this.primary = const Color(0xff663399),
+    this.primary = const Color(0xFF49BF3C),
-    this.onPrimary = const Color(0xffffffff),
+    this.onPrimary = Colors.white,
     this.secondary = const Color(0xff6c757d),
-    this.onSecondary = const Color(0xffffffff),
+    this.onSecondary = Colors.white,
     this.success = const Color(0xff00be82),
-    this.onSuccess = const Color(0xffffffff),
+    this.onSuccess = Colors.white,
     this.danger = const Color(0xffdc3545),
-    this.onDanger = const Color(0xffffffff),
+    this.onDanger = Colors.white,
     this.warning = const Color(0xffffc107),
     this.onWarning = const Color(0xff313a46),
     this.info = const Color(0xff0dcaf0),
-    this.onInfo = const Color(0xffffffff),
+    this.onInfo = Colors.white,
     this.light = const Color(0xffeef2f7),
     this.onLight = const Color(0xff313a46),
     this.dark = const Color(0xff313a46),
-    this.onDark = const Color(0xffffffff),
+    this.onDark = Colors.white,
-    this.purple = const Color(0xff800080),
-    this.onPurple = const Color(0xffFF0000),
     this.pink = const Color(0xffFF1087),
-    this.onPink = const Color(0xffffffff),
+    this.onPink = Colors.white,
     this.red = const Color(0xffFF0000),
-    this.onRed = const Color(0xffffffff),
+    this.onRed = Colors.white,
-    this.brandRed = const Color.fromARGB(255, 255, 0, 0),
+    this.brandColor = const Color(0xffff0000),
-    this.onBrandRed = const Color(0xffffffff),
+    this.onBrandColor = Colors.white,
+    this.buttonColor = const Color(0xFF2196F3),
+    this.onButtonColor = Colors.white,
     this.cardBackground = const Color(0xffffffff),
     this.cardShadow = const Color(0xffffffff),
     this.cardBorder = const Color(0xffffffff),
@@ -180,10 +191,21 @@ class ContentTheme {
     this.onDisabled = const Color(0xffffffff),
   });
 
-  //--------------------------------------  Left Bar Theme ----------------------------------------//
+  // copyWith for dynamic updates
+  ContentTheme copyWith({
+    Color? primary,
+    Color? brandColor,
+    Color? buttonColor,
+  }) {
+    return ContentTheme(
+      primary: primary ?? this.primary,
+      brandColor: brandColor ?? this.brandColor,
+      buttonColor: buttonColor ?? this.buttonColor,
+    );
+  }
 
   static final ContentTheme lightContentTheme = ContentTheme(
-    primary: Color(0xff663399),
+    primary: Colors.indigo,
     background: const Color(0xfffafbfe),
     onBackground: const Color(0xff313a46),
     cardBorder: const Color(0xffe8ecf1),
@@ -192,12 +214,12 @@ class ContentTheme {
     cardText: const Color(0xff6c757d),
     title: const Color(0xff6c757d),
     cardTextMuted: const Color(0xff98a6ad),
-    brandRed: const Color.fromARGB(255, 255, 0, 0),
+    brandColor: const Color(0xffff0000),
-    onBrandRed: const Color(0xffffffff),
+    onBrandColor: Colors.white,
   );
 
   static final ContentTheme darkContentTheme = ContentTheme(
-    primary: Color(0xff32BFAE),
+    primary: Colors.indigo,
     background: const Color(0xff343a40),
     onBackground: const Color(0xffF1F1F2),
     disabled: const Color(0xff444d57),
@@ -208,8 +230,8 @@ class ContentTheme {
     cardText: const Color(0xffaab8c5),
     title: const Color(0xffaab8c5),
     cardTextMuted: const Color(0xff8391a2),
-    brandRed: const Color.fromARGB(255, 255, 0, 0),
+    brandColor: const Color(0xffff0000),
-    onBrandRed: const Color(0xffffffff),
+    onBrandColor: Colors.white,
   );
 }
 
@@ -226,8 +248,6 @@ class AdminTheme {
     required this.contentTheme,
   });
 
-  //--------------------------------------  Left Bar Theme ----------------------------------------//
-
   static AdminTheme theme = AdminTheme(
       leftBarTheme: LeftBarTheme.lightLeftBarTheme,
       topBarTheme: TopBarTheme.lightTopBarTheme,
@@ -236,9 +256,35 @@ class AdminTheme {
 
   static void setTheme() {
     theme = AdminTheme(
-        leftBarTheme: ThemeCustomizer.instance.theme == ThemeMode.dark ? LeftBarTheme.darkLeftBarTheme : LeftBarTheme.lightLeftBarTheme,
+        leftBarTheme: ThemeCustomizer.instance.theme == ThemeMode.dark
-        topBarTheme: ThemeCustomizer.instance.theme == ThemeMode.dark ? TopBarTheme.darkTopBarTheme : TopBarTheme.lightTopBarTheme,
+            ? LeftBarTheme.darkLeftBarTheme
-        rightBarTheme: ThemeCustomizer.instance.theme == ThemeMode.dark ? RightBarTheme.darkRightBarTheme : RightBarTheme.lightRightBarTheme,
+            : LeftBarTheme.lightLeftBarTheme,
-        contentTheme: ThemeCustomizer.instance.theme == ThemeMode.dark ? ContentTheme.darkContentTheme : ContentTheme.lightContentTheme);
+        topBarTheme: ThemeCustomizer.instance.theme == ThemeMode.dark
+            ? TopBarTheme.darkTopBarTheme
+            : TopBarTheme.lightTopBarTheme,
+        rightBarTheme: ThemeCustomizer.instance.theme == ThemeMode.dark
+            ? RightBarTheme.darkRightBarTheme
+            : RightBarTheme.lightRightBarTheme,
+        contentTheme: ThemeCustomizer.instance.theme == ThemeMode.dark
+            ? ContentTheme.darkContentTheme
+            : ContentTheme.lightContentTheme);
+  }
+
+  // Dynamic theme color update
+  static void updateThemeColors({
+    Color? primary,
+    Color? brandColor,
+    Color? buttonColor,
+  }) {
+    theme = AdminTheme(
+      leftBarTheme: theme.leftBarTheme,
+      topBarTheme: theme.topBarTheme,
+      rightBarTheme: theme.rightBarTheme,
+      contentTheme: theme.contentTheme.copyWith(
+        primary: primary,
+        brandColor: brandColor,
+        buttonColor: buttonColor,
+      ),
+    );
   }
 }

lib/helpers/theme/theme_editor_widget.dart

@@ -0,0 +1,216 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:marco/helpers/widgets/my_text.dart';
+import 'package:marco/helpers/widgets/wave_background.dart';
+import 'package:marco/helpers/theme/admin_theme.dart';
+
+class ThemeOption {
+  final String label;
+  final Color primary;
+  final Color button;
+  final Color brand;
+
+  ThemeOption(this.label, this.primary, this.button, this.brand);
+}
+
+// Define your themes
+final List<ThemeOption> themeOptions = [
+  ThemeOption("Theme 1", Colors.red, Colors.red, Colors.red),
+  ThemeOption("Theme 2", const Color(0xFF49BF3C), const Color(0xFF49BF3C), const Color(0xFF49BF3C)),
+  ThemeOption("Theme 3", const Color(0xFF3F51B5), const Color(0xFF3F51B5), const Color(0xFF3F51B5)),
+  ThemeOption("Theme 4", const Color(0xFF40B7FF), const Color(0xFF40B7FF), const Color(0xFF40B7FF)),
+];
+
+// Reactive controller
+class ThemeController extends GetxController {
+  RxInt selectedIndex = 0.obs;
+  RxBool showApplied = false.obs;
+
+  void init() {
+    final currentPrimary = AdminTheme.theme.contentTheme.primary;
+    int index = themeOptions.indexWhere((opt) => opt.primary.value == currentPrimary.value);
+    selectedIndex.value = index == -1 ? 0 : index;
+  }
+
+  void applyTheme(int index) async {
+    selectedIndex.value = index;
+    showApplied.value = true;
+
+    // Update AdminTheme
+    AdminTheme.updateThemeColors(
+      primary: themeOptions[index].primary,
+      buttonColor: themeOptions[index].button,
+      brandColor: themeOptions[index].brand,
+    );
+
+    await Future.delayed(const Duration(milliseconds: 600));
+    showApplied.value = false;
+  }
+}
+
+// Theme Editor Widget
+class ThemeEditorWidget extends StatelessWidget {
+  final VoidCallback onClose;
+  ThemeEditorWidget({Key? key, required this.onClose}) : super(key: key);
+
+  final ThemeController themeController = Get.put(ThemeController());
+
+  @override
+  Widget build(BuildContext context) {
+    themeController.init();
+
+    return Padding(
+      padding: const EdgeInsets.all(12),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          // Header
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              MyText.bodyLarge("Theme Customization", fontWeight: 600),
+              IconButton(
+                icon: const Icon(Icons.close),
+                onPressed: onClose,
+                tooltip: "Back",
+                iconSize: 20,
+              ),
+            ],
+          ),
+          const SizedBox(height: 12),
+
+          // Theme Cards
+          Center(
+            child: Obx(() => Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              alignment: WrapAlignment.center,
+              children: List.generate(themeOptions.length, (i) {
+                final theme = themeOptions[i];
+                final isSelected = themeController.selectedIndex.value == i;
+
+                return SizedBox(
+                  width: 80,
+                  child: GestureDetector(
+                    onTap: () => themeController.applyTheme(i),
+                    child: AnimatedContainer(
+                      duration: const Duration(milliseconds: 250),
+                      curve: Curves.easeInOut,
+                      padding: const EdgeInsets.all(6),
+                      decoration: BoxDecoration(
+                        color: Colors.white,
+                        borderRadius: BorderRadius.circular(12),
+                        border: Border.all(
+                          color: isSelected ? theme.brand : Colors.transparent,
+                          width: 2,
+                        ),
+                        boxShadow: [
+                          BoxShadow(
+                            color: Colors.black.withOpacity(0.05),
+                            blurRadius: 4,
+                            offset: const Offset(0, 2),
+                          ),
+                        ],
+                      ),
+                      child: Column(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          SizedBox(
+                            height: 80,
+                            child: ClipRRect(
+                              borderRadius: BorderRadius.circular(10),
+                              child: Stack(
+                                fit: StackFit.expand,
+                                children: [
+                                  CustomPaint(
+                                    painter: RedWavePainter(theme.brand, 0.15),
+                                  ),
+                                  Center(
+                                    child: Column(
+                                      mainAxisSize: MainAxisSize.min,
+                                      children: [
+                                        Text(
+                                          "Hello, User!",
+                                          textAlign: TextAlign.center,
+                                          style: TextStyle(
+                                            fontWeight: FontWeight.w600,
+                                            color: theme.primary,
+                                            fontSize: 12,
+                                          ),
+                                        ),
+                                        const SizedBox(height: 4),
+                                        SizedBox(
+                                          height: 18,
+                                          child: ElevatedButton(
+                                            style: ElevatedButton.styleFrom(
+                                              backgroundColor: theme.button,
+                                              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 0),
+                                              shape: RoundedRectangleBorder(
+                                                borderRadius: BorderRadius.circular(4),
+                                              ),
+                                              elevation: 1,
+                                              textStyle: const TextStyle(fontSize: 10),
+                                            ),
+                                            onPressed: () {},
+                                            child: const Text("Welcome"),
+                                          ),
+                                        ),
+                                      ],
+                                    ),
+                                  ),
+                                ],
+                              ),
+                            ),
+                          ),
+                          const SizedBox(height: 6),
+                          Text(
+                            theme.label,
+                            style: TextStyle(
+                              fontWeight: FontWeight.w600,
+                              fontSize: 12,
+                              color: Colors.grey[700],
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                );
+              }),
+            )),
+          ),
+
+          const SizedBox(height: 12),
+
+          // Applied Indicator
+          Obx(() => themeController.showApplied.value
+              ? Padding(
+                  padding: const EdgeInsets.only(top: 10),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Icon(Icons.check_circle,
+                          color: themeOptions[themeController.selectedIndex.value].brand, size: 20),
+                      const SizedBox(width: 6),
+                      Text(
+                        "Theme Applied!",
+                        style: TextStyle(
+                          color: themeOptions[themeController.selectedIndex.value].brand,
+                          fontWeight: FontWeight.w700,
+                        ),
+                      ),
+                    ],
+                  ),
+                )
+              : const SizedBox()),
+
+          const SizedBox(height: 16),
+          const Text(
+            "Preview and select a theme. You can change this anytime.",
+            style: TextStyle(fontSize: 13, color: Colors.black54),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/helpers/utils/base_bottom_sheet.dart

@@ -1,15 +1,17 @@
 import 'package:flutter/material.dart';
 import 'package:marco/helpers/widgets/my_spacing.dart';
 import 'package:marco/helpers/widgets/my_text.dart';
+import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
 
-class BaseBottomSheet extends StatelessWidget {
+class BaseBottomSheet extends StatefulWidget {
   final String title;
+  final String? subtitle;
   final Widget child;
   final VoidCallback onCancel;
   final VoidCallback onSubmit;
   final bool isSubmitting;
   final String submitText;
-  final Color submitColor;
+  final Color? submitColor;
   final IconData submitIcon;
   final bool showButtons;
   final Widget? bottomContent;
@@ -20,18 +22,26 @@ class BaseBottomSheet extends StatelessWidget {
     required this.child,
     required this.onCancel,
     required this.onSubmit,
+    this.subtitle,
     this.isSubmitting = false,
     this.submitText = 'Submit',
-    this.submitColor = Colors.indigo,
+    this.submitColor,
     this.submitIcon = Icons.check_circle_outline,
     this.showButtons = true,
     this.bottomContent,
   });
 
+  @override
+  State<BaseBottomSheet> createState() => _BaseBottomSheetState();
+}
+
+class _BaseBottomSheetState extends State<BaseBottomSheet> with UIMixin {
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     final mediaQuery = MediaQuery.of(context);
+    final effectiveSubmitColor =
+        widget.submitColor ?? contentTheme.primary;
 
     return SingleChildScrollView(
       padding: mediaQuery.viewInsets,
@@ -50,33 +60,50 @@ class BaseBottomSheet extends StatelessWidget {
             ],
           ),
           child: SafeArea(
-            // 👈 prevents overlap with nav bar
             top: false,
             child: Padding(
               padding: const EdgeInsets.fromLTRB(20, 16, 20, 32),
               child: Column(
                 mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                   MySpacing.height(5),
-                  Container(
+                  Center(
-                    width: 40,
+                    child: Container(
-                    height: 5,
+                      width: 40,
-                    decoration: BoxDecoration(
+                      height: 5,
-                      color: Colors.grey.shade300,
+                      decoration: BoxDecoration(
-                      borderRadius: BorderRadius.circular(10),
+                        color: Colors.grey.shade300,
+                        borderRadius: BorderRadius.circular(10),
+                      ),
                     ),
                   ),
                   MySpacing.height(12),
-                  MyText.titleLarge(title, fontWeight: 700),
+                  Center(
+                    child: MyText.titleLarge(
+                      widget.title,
+                      fontWeight: 700,
+                      textAlign: TextAlign.center,
+                    ),
+                  ),
+                  if (widget.subtitle != null &&
+                      widget.subtitle!.isNotEmpty) ...[
+                    MySpacing.height(4),
+                    MyText.bodySmall(
+                      widget.subtitle!,
+                      fontWeight: 600,
+                      color: Colors.grey[700],
+                    ),
+                  ],
                   MySpacing.height(12),
-                  child,
+                  widget.child,
                   MySpacing.height(12),
-                  if (showButtons) ...[
+                  if (widget.showButtons) ...[
                     Row(
                       children: [
                         Expanded(
                           child: ElevatedButton.icon(
-                            onPressed: onCancel,
+                            onPressed: widget.onCancel,
                             icon: const Icon(Icons.close, color: Colors.white),
                             label: MyText.bodyMedium(
                               "Cancel",
@@ -88,34 +115,40 @@ class BaseBottomSheet extends StatelessWidget {
                               shape: RoundedRectangleBorder(
                                 borderRadius: BorderRadius.circular(12),
                               ),
-                              padding: const EdgeInsets.symmetric(vertical: 8),
+                              padding:
+                                  const EdgeInsets.symmetric(vertical: 8),
                             ),
                           ),
                         ),
                         const SizedBox(width: 12),
                         Expanded(
                           child: ElevatedButton.icon(
-                            onPressed: isSubmitting ? null : onSubmit,
+                            onPressed:
-                            icon: Icon(submitIcon, color: Colors.white),
+                                widget.isSubmitting ? null : widget.onSubmit,
+                            icon:
+                                Icon(widget.submitIcon, color: Colors.white),
                             label: MyText.bodyMedium(
-                              isSubmitting ? "Submitting..." : submitText,
+                              widget.isSubmitting
+                                  ? "Submitting..."
+                                  : widget.submitText,
                               color: Colors.white,
                               fontWeight: 600,
                             ),
                             style: ElevatedButton.styleFrom(
-                              backgroundColor: submitColor,
+                              backgroundColor: effectiveSubmitColor,
                               shape: RoundedRectangleBorder(
                                 borderRadius: BorderRadius.circular(12),
                               ),
-                              padding: const EdgeInsets.symmetric(vertical: 8),
+                              padding:
+                                  const EdgeInsets.symmetric(vertical: 8),
                             ),
                           ),
                         ),
                       ],
                     ),
-                    if (bottomContent != null) ...[
+                    if (widget.bottomContent != null) ...[
                       MySpacing.height(12),
-                      bottomContent!,
+                      widget.bottomContent!,
                     ],
                   ],
                 ],

lib/helpers/widgets/wave_background.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+
+class RedWaveBackground extends StatelessWidget {
+  final Color brandRed;
+  final double heightFactor;
+
+  const RedWaveBackground({
+    super.key,
+    required this.brandRed,
+    this.heightFactor = 0.2,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      painter: RedWavePainter(brandRed, heightFactor),
+      size: Size.infinite,
+    );
+  }
+}
+
+class RedWavePainter extends CustomPainter {
+  final Color brandRed;
+  final double heightFactor;
+
+  RedWavePainter(this.brandRed, this.heightFactor);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint1 = Paint()
+      ..shader = LinearGradient(
+        colors: [brandRed, const Color.fromARGB(255, 97, 22, 22)],
+        begin: Alignment.topLeft,
+        end: Alignment.bottomRight,
+      ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));
+
+    final path1 = Path()
+      ..moveTo(0, size.height * heightFactor)
+      ..quadraticBezierTo(
+        size.width * 0.25, size.height * 0.05,
+        size.width * 0.5, size.height * 0.15,
+      )
+      ..quadraticBezierTo(
+        size.width * 0.75, size.height * 0.25,
+        size.width, size.height * 0.1,
+      )
+      ..lineTo(size.width, 0)
+      ..lineTo(0, 0)
+      ..close();
+
+    canvas.drawPath(path1, paint1);
+
+    final paint2 = Paint()..color = brandRed.withOpacity(0.15);
+    final path2 = Path()
+      ..moveTo(0, size.height * (heightFactor + 0.05))
+      ..quadraticBezierTo(
+        size.width * 0.4, size.height * 0.1,
+        size.width, size.height * 0.2,
+      )
+      ..lineTo(size.width, 0)
+      ..lineTo(0, 0)
+      ..close();
+
+    canvas.drawPath(path2, paint2);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

lib/model/document/user_document_filter_bottom_sheet.dart

@@ -8,8 +8,9 @@ import 'package:marco/helpers/widgets/my_text.dart';
 import 'package:marco/helpers/widgets/my_text_style.dart';
 import 'package:marco/model/document/document_filter_model.dart';
 import 'dart:convert';
+import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
 
-class UserDocumentFilterBottomSheet extends StatelessWidget {
+class UserDocumentFilterBottomSheet extends StatelessWidget  with UIMixin {
   final String entityId;
   final String entityTypeId;
   final DocumentController docController = Get.find<DocumentController>();
@@ -100,7 +101,7 @@ class UserDocumentFilterBottomSheet extends StatelessWidget {
                                           vertical: 10),
                                       decoration: BoxDecoration(
                                         color: docController.isUploadedAt.value
-                                            ? Colors.indigo.shade400
+                                            ? contentTheme.buttonColor
                                             : Colors.transparent,
                                         borderRadius:
                                             const BorderRadius.horizontal(
@@ -131,7 +132,7 @@ class UserDocumentFilterBottomSheet extends StatelessWidget {
                                           vertical: 10),
                                       decoration: BoxDecoration(
                                         color: !docController.isUploadedAt.value
-                                            ? Colors.indigo.shade400
+                                            ? contentTheme.buttonColor
                                             : Colors.transparent,
                                         borderRadius:
                                             const BorderRadius.horizontal(
@@ -264,7 +265,7 @@ class UserDocumentFilterBottomSheet extends StatelessWidget {
                                   onChanged: (val) =>
                                       docController.isVerified.value = val,
                                   activeColor:
-                                      Colors.indigo,
+                                      contentTheme.buttonColor,
                                   materialTapTargetSize:
                                       MaterialTapTargetSize.shrinkWrap,
                                 ),

lib/view/auth/email_login_form.dart

@@ -94,7 +94,7 @@ class _EmailLoginFormState extends State<EmailLoginForm> with UIMixin {
                                   MaterialStateProperty.resolveWith<Color>(
                                 (states) =>
                                     states.contains(WidgetState.selected)
-                                        ? contentTheme.brandRed
+                                        ? contentTheme.brandColor
                                         : Colors.white,
                               ),
                               checkColor: contentTheme.onPrimary,
@@ -132,7 +132,7 @@ class _EmailLoginFormState extends State<EmailLoginForm> with UIMixin {
                       elevation: 2,
                       padding: MySpacing.xy(80, 16),
                       borderRadiusAll: 10,
-                      backgroundColor: contentTheme.brandRed,
+                      backgroundColor: contentTheme.brandColor,
                       child: MyText.labelLarge(
                         isLoading ? 'Logging in...' : 'Login',
                         fontWeight: 700,

lib/view/auth/forgot_password_screen.dart

@@ -8,6 +8,7 @@ import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
 import 'package:marco/helpers/widgets/my_button.dart';
 import 'package:marco/helpers/widgets/my_text.dart';
 import 'package:marco/images.dart';
+import 'package:marco/helpers/widgets/wave_background.dart';
 
 class ForgotPasswordScreen extends StatefulWidget {
   const ForgotPasswordScreen({super.key});
@@ -59,7 +60,7 @@ class _ForgotPasswordScreenState extends State<ForgotPasswordScreen>
     return Scaffold(
       body: Stack(
         children: [
-          _RedWaveBackground(brandRed: contentTheme.brandRed),
+          RedWaveBackground(brandRed: contentTheme.brandColor),
           SafeArea(
             child: Center(
               child: Column(
@@ -230,8 +231,8 @@ class _ForgotPasswordScreenState extends State<ForgotPasswordScreen>
       padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 16),
       borderRadiusAll: 10,
       backgroundColor: _isLoading
-          ? contentTheme.brandRed.withOpacity(0.6)
+          ? contentTheme.brandColor.withOpacity(0.6)
-          : contentTheme.brandRed,
+          : contentTheme.brandColor,
       child: _isLoading
           ? const SizedBox(
               height: 20,
@@ -253,68 +254,13 @@ class _ForgotPasswordScreenState extends State<ForgotPasswordScreen>
   Widget _buildBackButton() {
     return TextButton.icon(
       onPressed: () async => await LocalStorage.logout(),
-      icon: const Icon(Icons.arrow_back, size: 18, color: Colors.redAccent),
+      icon:  Icon(Icons.arrow_back, size: 18, color: contentTheme.brandColor,),
       label: MyText.bodyMedium(
         'Back to Login',
-        color: contentTheme.brandRed,
+        color: contentTheme.brandColor,
         fontWeight: 600,
         fontSize: 14,
       ),
     );
   }
 }
-
-class _RedWaveBackground extends StatelessWidget {
-  final Color brandRed;
-  const _RedWaveBackground({required this.brandRed});
-
-  @override
-  Widget build(BuildContext context) {
-    return CustomPaint(
-      painter: _WavePainter(brandRed),
-      size: Size.infinite,
-    );
-  }
-}
-
-class _WavePainter extends CustomPainter {
-  final Color brandRed;
-
-  _WavePainter(this.brandRed);
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint1 = Paint()
-      ..shader = LinearGradient(
-        colors: [brandRed, const Color.fromARGB(255, 97, 22, 22)],
-        begin: Alignment.topLeft,
-        end: Alignment.bottomRight,
-      ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));
-
-    final path1 = Path()
-      ..moveTo(0, size.height * 0.2)
-      ..quadraticBezierTo(size.width * 0.25, size.height * 0.05,
-          size.width * 0.5, size.height * 0.15)
-      ..quadraticBezierTo(
-          size.width * 0.75, size.height * 0.25, size.width, size.height * 0.1)
-      ..lineTo(size.width, 0)
-      ..lineTo(0, 0)
-      ..close();
-
-    canvas.drawPath(path1, paint1);
-
-    final paint2 = Paint()..color = Colors.redAccent.withOpacity(0.15);
-    final path2 = Path()
-      ..moveTo(0, size.height * 0.25)
-      ..quadraticBezierTo(
-          size.width * 0.4, size.height * 0.1, size.width, size.height * 0.2)
-      ..lineTo(size.width, 0)
-      ..lineTo(0, 0)
-      ..close();
-
-    canvas.drawPath(path2, paint2);
-  }
-
-  @override
-  bool shouldRepaint(CustomPainter oldDelegate) => false;
-}

lib/view/auth/login_option_screen.dart

@@ -7,6 +7,7 @@ import 'package:marco/view/auth/otp_login_form.dart';
 import 'package:marco/helpers/services/api_endpoints.dart';
 import 'package:marco/view/auth/request_demo_bottom_sheet.dart';
 import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
+import 'package:marco/helpers/widgets/wave_background.dart';
 
 enum LoginOption { email, otp }
 
@@ -83,7 +84,7 @@ class _WelcomeScreenState extends State<WelcomeScreen>
                 ),
                 const SizedBox(height: 20),
                 option == LoginOption.email
-                    ?  EmailLoginForm()
+                    ? EmailLoginForm()
                     : const OTPLoginScreen(),
               ],
             ),
@@ -101,13 +102,14 @@ class _WelcomeScreenState extends State<WelcomeScreen>
     return Scaffold(
       body: Stack(
         children: [
-          _RedWaveBackground(brandRed: contentTheme.brandRed),
+          RedWaveBackground(brandRed: contentTheme.brandColor),
           SafeArea(
             child: Center(
               child: SingleChildScrollView(
                 padding: const EdgeInsets.all(24),
                 child: ConstrainedBox(
-                  constraints: BoxConstraints(maxWidth: isNarrow ? double.infinity : 420),
+                  constraints: BoxConstraints(
+                      maxWidth: isNarrow ? double.infinity : 420),
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.center,
                     children: [
@@ -166,7 +168,10 @@ class _WelcomeScreenState extends State<WelcomeScreen>
         decoration: const BoxDecoration(
           color: Colors.white,
           shape: BoxShape.circle,
-          boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 10, offset: Offset(0, 4))],
+          boxShadow: [
+            BoxShadow(
+                color: Colors.black12, blurRadius: 10, offset: Offset(0, 4))
+          ],
         ),
         child: Image.asset(Images.logoDark),
       ),
@@ -230,9 +235,10 @@ class _WelcomeScreenState extends State<WelcomeScreen>
           ),
         ),
         style: ElevatedButton.styleFrom(
-          backgroundColor: contentTheme.brandRed,
+          backgroundColor: contentTheme.brandColor,
           foregroundColor: Colors.white,
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
+          shape:
+              RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
           elevation: 4,
           shadowColor: Colors.black26,
         ),
@@ -247,55 +253,3 @@ class _WelcomeScreenState extends State<WelcomeScreen>
     );
   }
 }
-
-// Red wave background painter
-class _RedWaveBackground extends StatelessWidget {
-  final Color brandRed;
-  const _RedWaveBackground({required this.brandRed});
-
-  @override
-  Widget build(BuildContext context) {
-    return CustomPaint(
-      painter: _WavePainter(brandRed),
-      size: Size.infinite,
-    );
-  }
-}
-
-class _WavePainter extends CustomPainter {
-  final Color brandRed;
-  _WavePainter(this.brandRed);
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint1 = Paint()
-      ..shader = LinearGradient(
-        colors: [brandRed, const Color.fromARGB(255, 97, 22, 22)],
-        begin: Alignment.topLeft,
-        end: Alignment.bottomRight,
-      ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));
-
-    final path1 = Path()
-      ..moveTo(0, size.height * 0.2)
-      ..quadraticBezierTo(size.width * 0.25, size.height * 0.05, size.width * 0.5, size.height * 0.15)
-      ..quadraticBezierTo(size.width * 0.75, size.height * 0.25, size.width, size.height * 0.1)
-      ..lineTo(size.width, 0)
-      ..lineTo(0, 0)
-      ..close();
-
-    canvas.drawPath(path1, paint1);
-
-    final paint2 = Paint()..color = Colors.redAccent.withOpacity(0.15);
-    final path2 = Path()
-      ..moveTo(0, size.height * 0.25)
-      ..quadraticBezierTo(size.width * 0.4, size.height * 0.1, size.width, size.height * 0.2)
-      ..lineTo(size.width, 0)
-      ..lineTo(0, 0)
-      ..close();
-
-    canvas.drawPath(path2, paint2);
-  }
-
-  @override
-  bool shouldRepaint(CustomPainter oldDelegate) => false;
-}

lib/view/auth/mpin_auth_screen.dart

@@ -8,6 +8,8 @@ import 'package:marco/images.dart';
 import 'package:marco/helpers/services/storage/local_storage.dart';
 import 'package:marco/helpers/services/api_endpoints.dart';
 import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
+import 'package:marco/helpers/widgets/wave_background.dart';
+
 
 class MPINAuthScreen extends StatefulWidget {
   const MPINAuthScreen({super.key});
@@ -51,7 +53,7 @@ class _MPINAuthScreenState extends State<MPINAuthScreen>
     return Scaffold(
       body: Stack(
         children: [
-          _RedWaveBackground(brandRed: contentTheme.brandRed),
+          RedWaveBackground(brandRed: contentTheme.brandColor),
           SafeArea(
             child: Center(
               child: Column(
@@ -281,8 +283,8 @@ class _MPINAuthScreenState extends State<MPINAuthScreen>
         padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
         borderRadiusAll: 10,
         backgroundColor: controller.isLoading.value
-            ? contentTheme.brandRed.withOpacity(0.6)
+            ? contentTheme.brandColor.withOpacity(0.6)
-            : contentTheme.brandRed,
+            : contentTheme.brandColor,
         child: controller.isLoading.value
             ? const SizedBox(
                 height: 20,
@@ -315,11 +317,11 @@ class _MPINAuthScreenState extends State<MPINAuthScreen>
           if (isNewUser || isChangeMpin)
             TextButton.icon(
               onPressed: () => Get.toNamed('/dashboard'),
-              icon: const Icon(Icons.arrow_back,
+              icon:  Icon(Icons.arrow_back,
-                  size: 18, color: Colors.redAccent),
+                  size: 18, color: contentTheme.brandColor),
               label: MyText.bodyMedium(
                 'Back to Home Page',
-                color: contentTheme.brandRed,
+                color: contentTheme.brandColor,
                 fontWeight: 600,
                 fontSize: 14,
               ),
@@ -331,7 +333,7 @@ class _MPINAuthScreenState extends State<MPINAuthScreen>
                   size: 18, color: Colors.redAccent),
               label: MyText.bodyMedium(
                 'Go back to Login Screen',
-                color: contentTheme.brandRed,
+                color: contentTheme.brandColor,
                 fontWeight: 600,
                 fontSize: 14,
               ),
@@ -341,57 +343,3 @@ class _MPINAuthScreenState extends State<MPINAuthScreen>
     });
   }
 }
-
-class _RedWaveBackground extends StatelessWidget {
-  final Color brandRed;
-  const _RedWaveBackground({required this.brandRed});
-
-  @override
-  Widget build(BuildContext context) {
-    return CustomPaint(
-      painter: _WavePainter(brandRed),
-      size: Size.infinite,
-    );
-  }
-}
-
-class _WavePainter extends CustomPainter {
-  final Color brandRed;
-  const _WavePainter(this.brandRed);
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint1 = Paint()
-      ..shader = LinearGradient(
-        colors: [brandRed, const Color.fromARGB(255, 97, 22, 22)],
-        begin: Alignment.topLeft,
-        end: Alignment.bottomRight,
-      ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));
-
-    final path1 = Path()
-      ..moveTo(0, size.height * 0.2)
-      ..quadraticBezierTo(size.width * 0.25, size.height * 0.05,
-          size.width * 0.5, size.height * 0.15)
-      ..quadraticBezierTo(
-          size.width * 0.75, size.height * 0.25, size.width, size.height * 0.1)
-      ..lineTo(size.width, 0)
-      ..lineTo(0, 0)
-      ..close();
-
-    canvas.drawPath(path1, paint1);
-
-    final paint2 = Paint()..color = Colors.redAccent.withOpacity(0.15);
-    final path2 = Path()
-      ..moveTo(0, size.height * 0.25)
-      ..quadraticBezierTo(
-          size.width * 0.4, size.height * 0.1, size.width, size.height * 0.2)
-      ..lineTo(size.width, 0)
-      ..lineTo(0, 0)
-      ..close();
-
-    canvas.drawPath(path2, paint2);
-  }
-
-  @override
-  bool shouldRepaint(CustomPainter oldDelegate) => false;
-}

lib/view/auth/otp_login_form.dart

@@ -81,7 +81,7 @@ class _OTPLoginScreenState extends State<OTPLoginScreen> with UIMixin {
         elevation: 2,
         padding: MySpacing.xy(24, 16),
         borderRadiusAll: 10,
-        backgroundColor: isDisabled ? Colors.grey : contentTheme.brandRed,
+        backgroundColor: isDisabled ? Colors.grey : contentTheme.brandColor,
         child: controller.isSending.value
             ? SizedBox(
                 width: 20,
@@ -170,7 +170,7 @@ class _OTPLoginScreenState extends State<OTPLoginScreen> with UIMixin {
           ),
           focusedBorder: OutlineInputBorder(
             borderRadius: BorderRadius.circular(12),
-            borderSide: BorderSide(color: contentTheme.brandRed, width: 2),
+            borderSide: BorderSide(color: contentTheme.brandColor, width: 2),
           ),
         ),
       ),
@@ -220,7 +220,7 @@ class _OTPLoginScreenState extends State<OTPLoginScreen> with UIMixin {
         elevation: 2,
         padding: MySpacing.xy(24, 16),
         borderRadiusAll: 10,
-        backgroundColor: contentTheme.brandRed,
+        backgroundColor: contentTheme.brandColor,
         child: MyText.labelMedium(
           'Verify OTP',
           fontWeight: 600,

lib/view/auth/request_demo_bottom_sheet.dart

@@ -4,6 +4,7 @@ import 'package:marco/helpers/services/auth_service.dart';
 import 'package:marco/helpers/widgets/my_snackbar.dart';
 import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
 import 'package:marco/helpers/widgets/my_text.dart';
+import 'package:marco/helpers/widgets/my_spacing.dart';
 
 class OrganizationFormBottomSheet {
   static void show(BuildContext context) {
@@ -81,170 +82,203 @@ class _OrganizationFormState extends State<_OrganizationForm> with UIMixin {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return SingleChildScrollView(
-      decoration: const BoxDecoration(
+      padding: MediaQuery.of(context).viewInsets,
-        color: Colors.white,
+      child: Padding(
-        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+        padding: const EdgeInsets.only(top: 60),
-      ),
+        child: Container(
-      padding: const EdgeInsets.fromLTRB(20, 20, 20, 40),
+          decoration: BoxDecoration(
-      child: SingleChildScrollView(
+            color: Colors.white,
-        controller: widget.scrollController,
+            borderRadius: const BorderRadius.vertical(top: Radius.circular(24)),
-        child: Form(
+            boxShadow: const [
-          key: validator.formKey,
+              BoxShadow(
-          child: Column(
+                color: Colors.black12,
-            crossAxisAlignment: CrossAxisAlignment.start,
+                blurRadius: 12,
-            children: [
+                offset: Offset(0, -2),
-              Center(
-                child: Container(
-                  width: 40,
-                  height: 5,
-                  margin: const EdgeInsets.only(bottom: 20),
-                  decoration: BoxDecoration(
-                    color: Colors.grey[300],
-                    borderRadius: BorderRadius.circular(10),
-                  ),
-                ),
-              ),
-              Center(
-                child: Column(
-                  children: [
-                    MyText.titleLarge(
-                      'Adventure starts here 🚀',
-                      fontWeight: 600,
-                      color: Colors.black87,
-                    ),
-                    const SizedBox(height: 4),
-                    MyText.bodySmall(
-                      "Make your app management easy and fun!",
-                      color: Colors.grey,
-                    ),
-                  ],
-                ),
-              ),
-              const SizedBox(height: 20),
-              _sectionHeader('Organization Info'),
-              _buildTextField('organizationName', 'Organization Name'),
-              _buildTextField('email', 'Email',
-                  keyboardType: TextInputType.emailAddress),
-              _buildTextField('about', 'About Organization'),
-              _sectionHeader('Contact Details'),
-              _buildTextField('contactPerson', 'Contact Person'),
-              _buildTextField('contactNumber', 'Contact Number',
-                  keyboardType: TextInputType.phone),
-              _buildTextField('address', 'Current Address'),
-              _sectionHeader('Additional Details'),
-              _buildPopupMenuField(
-                'Organization Size',
-                _sizes,
-                _selectedSize,
-                (val) => setState(() => _selectedSize = val),
-                'Please select organization size',
-              ),
-              _buildPopupMenuField(
-                'Industry',
-                _industries.map((e) => e['name'] as String).toList(),
-                _selectedIndustryId != null
-                    ? _industries.firstWhere(
-                        (e) => e['id'] == _selectedIndustryId)['name']
-                    : null,
-                (val) {
-                  setState(() {
-                    final selectedIndustry = _industries.firstWhere(
-                      (element) => element['name'] == val,
-                      orElse: () => {},
-                    );
-                    _selectedIndustryId = selectedIndustry['id'];
-                  });
-                },
-                'Please select industry',
-              ),
-              const SizedBox(height: 12),
-              Row(
-                children: [
-                  Checkbox(
-                    value: _agreed,
-                    onChanged: (val) => setState(() => _agreed = val ?? false),
-                    fillColor: MaterialStateProperty.resolveWith((states) =>
-                        states.contains(MaterialState.selected)
-                            ? contentTheme.brandRed
-                            : Colors.white),
-                    checkColor: Colors.white,
-                    side: const BorderSide(color: Colors.red, width: 2),
-                  ),
-                  Row(
-                    children: [
-                      MyText(
-                        'I agree to the ',
-                        color: Colors.black87,
-                      ),
-                      MyText(
-                        'privacy policy & terms',
-                        color: contentTheme.brandRed,
-                        fontWeight: 600,
-                      ),
-                    ],
-                  )
-                ],
-              ),
-              const SizedBox(height: 20),
-              Row(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                children: [
-                  OutlinedButton.icon(
-                    onPressed: () => Navigator.pop(context),
-                    icon: const Icon(Icons.arrow_back, color: Colors.red),
-                    label: MyText.bodyMedium("Back", color: Colors.red),
-                    style: OutlinedButton.styleFrom(
-                      side: const BorderSide(color: Colors.red),
-                      shape: RoundedRectangleBorder(
-                        borderRadius: BorderRadius.circular(12),
-                      ),
-                      padding: const EdgeInsets.symmetric(
-                          horizontal: 20, vertical: 14),
-                    ),
-                  ),
-                  ElevatedButton.icon(
-                    onPressed: _loading ? null : _submitForm,
-                    icon: _loading
-                        ? const SizedBox(
-                            width: 18,
-                            height: 18,
-                            child: CircularProgressIndicator(
-                              color: Colors.white,
-                              strokeWidth: 2,
-                            ),
-                          )
-                        : const Icon(Icons.check_circle_outline,
-                            color: Colors.white),
-                    label: _loading
-                        ? const SizedBox.shrink()
-                        : MyText.bodyMedium("Submit", color: Colors.white),
-                    style: ElevatedButton.styleFrom(
-                      backgroundColor: Colors.indigo,
-                      shape: RoundedRectangleBorder(
-                        borderRadius: BorderRadius.circular(12),
-                      ),
-                      padding: const EdgeInsets.symmetric(
-                          horizontal: 28, vertical: 14),
-                    ),
-                  ),
-                ],
-              ),
-              const SizedBox(height: 8),
-              Center(
-                child: TextButton.icon(
-                  onPressed: () => Navigator.pop(context),
-                  icon:
-                      const Icon(Icons.arrow_back, size: 18, color: Colors.red),
-                  label: MyText.bodySmall(
-                    'Back to log in',
-                    fontWeight: 600,
-                    color: contentTheme.brandRed,
-                  ),
-                ),
               ),
             ],
           ),
+          child: SafeArea(
+            top: false,
+            child: Padding(
+              padding: const EdgeInsets.fromLTRB(20, 16, 20, 32),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Center(
+                    child: Container(
+                      width: 40,
+                      height: 5,
+                      decoration: BoxDecoration(
+                        color: Colors.grey.shade300,
+                        borderRadius: BorderRadius.circular(10),
+                      ),
+                    ),
+                  ),
+                  MySpacing.height(12),
+                  Center(
+                    child: MyText.titleLarge(
+                      'Adventure starts here 🚀',
+                      fontWeight: 700,
+                      textAlign: TextAlign.center,
+                    ),
+                  ),
+                  MySpacing.height(4),
+                  Center(
+                    child: MyText.bodySmall(
+                      "Make your app management easy and fun!",
+                      color: Colors.grey[700],
+                    ),
+                  ),
+                  MySpacing.height(12),
+                  Form(
+                    key: validator.formKey,
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        _sectionHeader('Organization Info'),
+                        _buildTextField('organizationName', 'Organization Name'),
+                        _buildTextField('email', 'Email',
+                            keyboardType: TextInputType.emailAddress),
+                        _buildTextField('about', 'About Organization'),
+                        _sectionHeader('Contact Details'),
+                        _buildTextField('contactPerson', 'Contact Person'),
+                        _buildTextField('contactNumber', 'Contact Number',
+                            keyboardType: TextInputType.phone),
+                        _buildTextField('address', 'Current Address'),
+                        _sectionHeader('Additional Details'),
+                        _buildPopupMenuField(
+                          'Organization Size',
+                          _sizes,
+                          _selectedSize,
+                          (val) => setState(() => _selectedSize = val),
+                          'Please select organization size',
+                        ),
+                        _buildPopupMenuField(
+                          'Industry',
+                          _industries.map((e) => e['name'] as String).toList(),
+                          _selectedIndustryId != null
+                              ? _industries.firstWhere(
+                                  (e) => e['id'] == _selectedIndustryId)['name']
+                              : null,
+                          (val) {
+                            setState(() {
+                              final selectedIndustry = _industries.firstWhere(
+                                (element) => element['name'] == val,
+                                orElse: () => {},
+                              );
+                              _selectedIndustryId = selectedIndustry['id'];
+                            });
+                          },
+                          'Please select industry',
+                        ),
+                        const SizedBox(height: 12),
+                        Row(
+                          children: [
+                            Checkbox(
+                              value: _agreed,
+                              onChanged: (val) =>
+                                  setState(() => _agreed = val ?? false),
+                              fillColor: MaterialStateProperty.resolveWith(
+                                  (states) => states.contains(MaterialState.selected)
+                                      ? contentTheme.brandColor
+                                      : Colors.white),
+                              checkColor: Colors.white,
+                              side: BorderSide(color: contentTheme.brandColor, width: 2),
+                            ),
+                            Flexible(
+                              child: Wrap(
+                                children: [
+                                  MyText(
+                                    'I agree to the ',
+                                    color: Colors.black87,
+                                  ),
+                                  MyText(
+                                    'privacy policy & terms',
+                                    color: contentTheme.brandColor,
+                                    fontWeight: 600,
+                                  ),
+                                ],
+                              ),
+                            ),
+                          ],
+                        ),
+                      ],
+                    ),
+                  ),
+                  MySpacing.height(12),
+                  Row(
+                    children: [
+                      Expanded(
+                        child: ElevatedButton.icon(
+                          onPressed: () => Navigator.pop(context),
+                          icon: const Icon(Icons.close, color: Colors.white),
+                          label: MyText.bodyMedium(
+                            "Cancel",
+                            color: Colors.white,
+                            fontWeight: 600,
+                          ),
+                          style: ElevatedButton.styleFrom(
+                            backgroundColor: Colors.grey,
+                            shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(12),
+                            ),
+                            padding: const EdgeInsets.symmetric(vertical: 12),
+                          ),
+                        ),
+                      ),
+                      const SizedBox(width: 12),
+                      Expanded(
+                        child: ElevatedButton.icon(
+                          onPressed: _loading ? null : _submitForm,
+                          icon: _loading
+                              ? SizedBox(
+                                  width: 18,
+                                  height: 18,
+                                  child: CircularProgressIndicator(
+                                    color: Colors.white,
+                                    strokeWidth: 2,
+                                  ),
+                                )
+                              : const Icon(Icons.check_circle_outline,
+                                  color: Colors.white),
+                          label: MyText.bodyMedium(
+                            _loading ? "Submitting..." : "Submit",
+                            color: Colors.white,
+                            fontWeight: 600,
+                          ),
+                          style: ElevatedButton.styleFrom(
+                            backgroundColor: contentTheme.buttonColor,
+                            shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(12),
+                            ),
+                            padding: const EdgeInsets.symmetric(vertical: 12),
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                  MySpacing.height(12),
+                  Center(
+                    child: TextButton.icon(
+                      onPressed: () => Navigator.pop(context),
+                      icon: Icon(
+                        Icons.arrow_back,
+                        size: 18,
+                        color: contentTheme.brandColor,
+                      ),
+                      label: MyText.bodySmall(
+                        'Back to log in',
+                        fontWeight: 600,
+                        color: contentTheme.brandColor,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
         ),
       ),
     );
@@ -300,7 +334,7 @@ class _OrganizationFormState extends State<_OrganizationForm> with UIMixin {
           ),
           focusedBorder: OutlineInputBorder(
             borderRadius: BorderRadius.circular(12),
-            borderSide: BorderSide(color: contentTheme.brandRed, width: 1.5),
+            borderSide: BorderSide(color: contentTheme.brandColor, width: 1.5),
           ),
           errorBorder: OutlineInputBorder(
             borderRadius: BorderRadius.circular(12),
@@ -377,7 +411,7 @@ class _OrganizationFormState extends State<_OrganizationForm> with UIMixin {
                     focusedBorder: OutlineInputBorder(
                       borderRadius: BorderRadius.circular(12),
                       borderSide:
-                          BorderSide(color: contentTheme.brandRed, width: 1.5),
+                          BorderSide(color: contentTheme.brandColor, width: 1.5),
                     ),
                     errorText: fieldState.errorText,
                   ),
@@ -386,8 +420,7 @@ class _OrganizationFormState extends State<_OrganizationForm> with UIMixin {
                     children: [
                       MyText.bodyMedium(
                         selectedValue ?? 'Select $label',
-                        color:
+                        color: selectedValue == null ? Colors.grey : Colors.black,
-                            selectedValue == null ? Colors.grey : Colors.black,
                       ),
                       const Icon(Icons.arrow_drop_down, color: Colors.grey),
                     ],

lib/view/directory/directory_view.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:marco/helpers/widgets/my_refresh_indicator.dart';
-
+import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
 import 'package:marco/controller/directory/directory_controller.dart';
 import 'package:marco/controller/directory/create_bucket_controller.dart';
 import 'package:marco/helpers/utils/launcher_utils.dart';
@@ -24,7 +24,7 @@ class DirectoryView extends StatefulWidget {
   State<DirectoryView> createState() => _DirectoryViewState();
 }
 
-class _DirectoryViewState extends State<DirectoryView> {
+class _DirectoryViewState extends State<DirectoryView> with UIMixin {
   final DirectoryController controller = Get.find();
   final TextEditingController searchController = TextEditingController();
   final PermissionController permissionController =
@@ -127,7 +127,7 @@ class _DirectoryViewState extends State<DirectoryView> {
                   child: ElevatedButton(
                     onPressed: () => Navigator.pop(context, true),
                     style: ElevatedButton.styleFrom(
-                      backgroundColor: Colors.indigo,
+                      backgroundColor: contentTheme.buttonColor,
                       foregroundColor: Colors.white,
                       shape: RoundedRectangleBorder(
                         borderRadius: BorderRadius.circular(5),
@@ -173,7 +173,7 @@ class _DirectoryViewState extends State<DirectoryView> {
       backgroundColor: Colors.grey[100],
       floatingActionButton: FloatingActionButton.extended(
         heroTag: 'createContact',
-        backgroundColor: Colors.red,
+        backgroundColor: contentTheme.buttonColor,
         onPressed: _handleCreateContact,
         icon: const Icon(Icons.person_add_alt_1, color: Colors.white),
         label: const Text("Add Contact", style: TextStyle(color: Colors.white)),
@@ -319,13 +319,13 @@ class _DirectoryViewState extends State<DirectoryView> {
                           PopupMenuItem<int>(
                             value: 2,
                             child: Row(
-                              children: const [
+                              children:  [
                                 Icon(Icons.add_box_outlined,
                                     size: 20, color: Colors.black87),
                                 SizedBox(width: 10),
                                 Expanded(child: Text("Create Bucket")),
                                 Icon(Icons.chevron_right,
-                                    size: 20, color: Colors.red),
+                                    size: 20, color: contentTheme.buttonColor),
                               ],
                             ),
                             onTap: () {
@@ -352,13 +352,13 @@ class _DirectoryViewState extends State<DirectoryView> {
                         PopupMenuItem<int>(
                           value: 1,
                           child: Row(
-                            children: const [
+                            children:  [
                               Icon(Icons.label_outline,
                                   size: 20, color: Colors.black87),
                               SizedBox(width: 10),
                               Expanded(child: Text("Manage Buckets")),
                               Icon(Icons.chevron_right,
-                                  size: 20, color: Colors.red),
+                                  size: 20, color: contentTheme.buttonColor),
                             ],
                           ),
                           onTap: () {
@@ -395,7 +395,7 @@ class _DirectoryViewState extends State<DirectoryView> {
                                       child: Text('Show Deleted Contacts')),
                                   Switch.adaptive(
                                     value: !controller.isActive.value,
-                                    activeColor: Colors.indigo,
+                                    activeColor: contentTheme.buttonColor,
                                     onChanged: (val) {
                                       controller.isActive.value = !val;
                                       controller.fetchContacts(active: !val);

lib/view/directory/notes_view.dart

@@ -134,8 +134,8 @@ class _NotesViewState extends State<NotesView> with UIMixin {
                     ),
                   if (note.isActive) ...[
                     IconButton(
-                      icon: Icon(isEditing ? Icons.close : Icons.edit_outlined,
+                      icon: Icon(isEditing ? Icons.close : Icons.edit,
-                          color: Colors.indigo, size: 18),
+                          color: contentTheme.buttonColor, size: 18),
                       splashRadius: 18,
                       onPressed: () {
                         controller.editingNoteId.value =
@@ -143,7 +143,7 @@ class _NotesViewState extends State<NotesView> with UIMixin {
                       },
                     ),
                     IconButton(
-                      icon: const Icon(Icons.delete_outline,
+                      icon: const Icon(Icons.delete,
                           size: 18, color: Colors.red),
                       splashRadius: 18,
                       onPressed: () async {
@@ -224,7 +224,7 @@ class _NotesViewState extends State<NotesView> with UIMixin {
                           fontWeight: 600,
                         ),
                         style: ElevatedButton.styleFrom(
-                          backgroundColor: contentTheme.primary,
+                          backgroundColor: contentTheme.buttonColor,
                           shape: RoundedRectangleBorder(
                             borderRadius: BorderRadius.circular(12),
                           ),

lib/view/document/user_document_screen.dart

@@ -19,6 +19,8 @@ import 'package:marco/model/document/document_upload_bottom_sheet.dart';
 import 'package:marco/model/document/documents_list_model.dart';
 import 'package:marco/model/document/user_document_filter_bottom_sheet.dart';
 import 'package:marco/view/document/document_details_page.dart';
+import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
+
 
 class UserDocumentsPage extends StatefulWidget {
   final String? entityId;
@@ -34,7 +36,7 @@ class UserDocumentsPage extends StatefulWidget {
   State<UserDocumentsPage> createState() => _UserDocumentsPageState();
 }
 
-class _UserDocumentsPageState extends State<UserDocumentsPage> {
+class _UserDocumentsPageState extends State<UserDocumentsPage>  with UIMixin {
   final DocumentController docController = Get.put(DocumentController());
   final PermissionController permissionController = Get.put(PermissionController());
   final DocumentDetailsController controller = Get.put(DocumentDetailsController());
@@ -395,7 +397,7 @@ class _UserDocumentsPageState extends State<UserDocumentsPage> {
                           const Expanded(child: Text('Show Deleted Documents')),
                           Switch.adaptive(
                             value: docController.showInactive.value,
-                            activeColor: Colors.indigo,
+                            activeColor: contentTheme.buttonColor,
                             onChanged: (val) {
                               docController.showInactive.value = val;
                               docController.fetchDocuments(
@@ -614,7 +616,7 @@ class _UserDocumentsPageState extends State<UserDocumentsPage> {
                   color: Colors.white,
                   fontWeight: 600,
                 ),
-                backgroundColor: Colors.red,
+                backgroundColor: contentTheme.buttonColor,
               )
             : SizedBox.shrink();
       }),

lib/view/employees/employee_detail_screen.dart

@@ -12,6 +12,8 @@ import 'package:marco/controller/permission_controller.dart';
 import 'package:marco/helpers/utils/permission_constants.dart';
 import 'package:marco/helpers/widgets/my_refresh_indicator.dart';
 import 'package:marco/model/employees/add_employee_bottom_sheet.dart';
+import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
+
 
 class EmployeeDetailPage extends StatefulWidget {
   final String employeeId;
@@ -27,7 +29,7 @@ class EmployeeDetailPage extends StatefulWidget {
   State<EmployeeDetailPage> createState() => _EmployeeDetailPageState();
 }
 
-class _EmployeeDetailPageState extends State<EmployeeDetailPage> {
+class _EmployeeDetailPageState extends State<EmployeeDetailPage>  with UIMixin {
   final EmployeesScreenController controller =
       Get.put(EmployeesScreenController());
   final PermissionController permissionController =
@@ -252,7 +254,7 @@ class _EmployeeDetailPageState extends State<EmployeeDetailPage> {
                       ),
                       IconButton(
                         icon:
-                            const Icon(Icons.edit, size: 24, color: Colors.red),
+                             Icon(Icons.edit, size: 24, color: contentTheme.buttonColor),
                         onPressed: () async {
                           final result =
                               await showModalBottomSheet<Map<String, dynamic>>(
@@ -313,7 +315,7 @@ class _EmployeeDetailPageState extends State<EmployeeDetailPage> {
               ),
             );
           },
-          backgroundColor: Colors.red,
+          backgroundColor: contentTheme.buttonColor,
           icon: const Icon(Icons.assignment),
           label: const Text(
             'Assign to Project',

lib/view/employees/employees_screen.dart

@@ -267,7 +267,7 @@ class _EmployeesScreenState extends State<EmployeesScreen> with UIMixin {
         child: Container(
           padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
           decoration: BoxDecoration(
-            color: Colors.red,
+            color: contentTheme.buttonColor,
             borderRadius: BorderRadius.circular(28),
             boxShadow: const [
               BoxShadow(
@@ -426,11 +426,11 @@ class _EmployeesScreenState extends State<EmployeesScreen> with UIMixin {
                     value: _employeeController.isAllEmployeeSelected.value,
                     onChanged: (_) => Navigator.pop(context, 'all_employees'),
                     checkColor: Colors.white,
-                    activeColor: Colors.blueAccent,
+                    activeColor: contentTheme.buttonColor,
                     side: const BorderSide(color: Colors.black, width: 1.5),
                     fillColor: MaterialStateProperty.resolveWith<Color>(
                         (states) => states.contains(MaterialState.selected)
-                            ? Colors.blueAccent
+                            ? contentTheme.buttonColor
                             : Colors.white),
                   ),
                   const Text('All Employees'),

lib/view/expense/expense_detail_screen.dart

@@ -21,6 +21,7 @@ import 'package:marco/helpers/widgets/my_text.dart';
 import 'package:marco/helpers/services/storage/local_storage.dart';
 import 'package:marco/model/employees/employee_info.dart';
 import 'package:timeline_tile/timeline_tile.dart';
+import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
 
 class ExpenseDetailScreen extends StatefulWidget {
   final String expenseId;
@@ -30,7 +31,7 @@ class ExpenseDetailScreen extends StatefulWidget {
   State<ExpenseDetailScreen> createState() => _ExpenseDetailScreenState();
 }
 
-class _ExpenseDetailScreenState extends State<ExpenseDetailScreen> {
+class _ExpenseDetailScreenState extends State<ExpenseDetailScreen> with UIMixin {
   final controller = Get.put(ExpenseDetailController());
   final projectController = Get.find<ProjectController>();
 final permissionController = Get.put(PermissionController());
@@ -195,7 +196,7 @@ final permissionController = Get.put(PermissionController());
             await showAddExpenseBottomSheet(isEdit: true);
             await controller.fetchExpenseDetails();
           },
-          backgroundColor: Colors.red,
+          backgroundColor: contentTheme.buttonColor,
           icon: const Icon(Icons.edit),
           label: MyText.bodyMedium(
               "Edit Expense", fontWeight: 600, color: Colors.white), 

lib/view/expense/expense_filter_bottom_sheet.dart

@@ -1,3 +1,5 @@
+// ignore_for_file: must_be_immutable
+
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:marco/controller/expense/expense_screen_controller.dart';
@@ -8,8 +10,9 @@ import 'package:marco/helpers/widgets/my_text.dart';
 import 'package:marco/helpers/widgets/my_text_style.dart';
 import 'package:marco/model/employees/employee_model.dart';
 import 'package:marco/model/expense/employee_selector_for_filter_bottom_sheet.dart';
+import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
 
-class ExpenseFilterBottomSheet extends StatelessWidget {
+class ExpenseFilterBottomSheet extends StatefulWidget {
   final ExpenseController expenseController;
   final ScrollController scrollController;
 
@@ -19,12 +22,17 @@ class ExpenseFilterBottomSheet extends StatelessWidget {
     required this.scrollController,
   });
 
+  @override
+  State<ExpenseFilterBottomSheet> createState() =>
+      _ExpenseFilterBottomSheetState();
+}
+
+class _ExpenseFilterBottomSheetState extends State<ExpenseFilterBottomSheet>
+    with UIMixin {
   // FIX: create search adapter
-  Future<List<EmployeeModel>> searchEmployeesForBottomSheet(
+  Future<List<EmployeeModel>> searchEmployeesForBottomSheet(String query) async {
-      String query) async {
+    await widget.expenseController.searchEmployees(query);
-    await expenseController
+    return widget.expenseController.employeeSearchResults.toList();
-        .searchEmployees(query); // async method, returns void
-    return expenseController.employeeSearchResults.toList();
   }
 
   @override
@@ -34,21 +42,21 @@ class ExpenseFilterBottomSheet extends StatelessWidget {
         title: 'Filter Expenses',
         onCancel: () => Get.back(),
         onSubmit: () {
-          expenseController.fetchExpenses();
+          widget.expenseController.fetchExpenses();
           Get.back();
         },
         submitText: 'Submit',
-        submitColor: Colors.indigo,
+        submitColor: contentTheme.buttonColor,
         submitIcon: Icons.check_circle_outline,
         child: SingleChildScrollView(
-          controller: scrollController,
+          controller: widget.scrollController,
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Align(
                 alignment: Alignment.centerRight,
                 child: TextButton(
-                  onPressed: () => expenseController.clearFilters(),
+                  onPressed: () => widget.expenseController.clearFilters(),
                   child: MyText(
                     "Reset Filter",
                     style: MyTextStyle.labelMedium(
@@ -91,11 +99,12 @@ class ExpenseFilterBottomSheet extends StatelessWidget {
       "Project",
       _popupSelector(
         context,
-        currentValue: expenseController.selectedProject.value.isEmpty
+        currentValue: widget.expenseController.selectedProject.value.isEmpty
             ? 'Select Project'
-            : expenseController.selectedProject.value,
+            : widget.expenseController.selectedProject.value,
-        items: expenseController.globalProjects,
+        items: widget.expenseController.globalProjects,
-        onSelected: (value) => expenseController.selectedProject.value = value,
+        onSelected: (value) =>
+            widget.expenseController.selectedProject.value = value,
       ),
     );
   }
@@ -105,18 +114,19 @@ class ExpenseFilterBottomSheet extends StatelessWidget {
       "Expense Status",
       _popupSelector(
         context,
-        currentValue: expenseController.selectedStatus.value.isEmpty
+        currentValue: widget.expenseController.selectedStatus.value.isEmpty
             ? 'Select Expense Status'
-            : expenseController.expenseStatuses
+            : widget.expenseController.expenseStatuses
-                    .firstWhereOrNull(
+                    .firstWhereOrNull((e) =>
-                        (e) => e.id == expenseController.selectedStatus.value)
+                        e.id == widget.expenseController.selectedStatus.value)
                     ?.name ??
                 'Select Expense Status',
-        items: expenseController.expenseStatuses.map((e) => e.name).toList(),
+        items:
+            widget.expenseController.expenseStatuses.map((e) => e.name).toList(),
         onSelected: (name) {
-          final status = expenseController.expenseStatuses
+          final status = widget.expenseController.expenseStatuses
               .firstWhere((e) => e.name == name);
-          expenseController.selectedStatus.value = status.id;
+          widget.expenseController.selectedStatus.value = status.id;
         },
       ),
     );
@@ -130,14 +140,13 @@ class ExpenseFilterBottomSheet extends StatelessWidget {
         children: [
           Obx(() {
             return SizedBox(
-              width: double.infinity, // Make it full width
+              width: double.infinity,
               child: SegmentedButton<String>(
-                segments: expenseController.dateTypes
+                segments: widget.expenseController.dateTypes
                     .map(
                       (type) => ButtonSegment(
                         value: type,
                         label: Center(
-                          // Center label text
                           child: MyText(
                             type,
                             style: MyTextStyle.bodySmall(
@@ -150,10 +159,10 @@ class ExpenseFilterBottomSheet extends StatelessWidget {
                       ),
                     )
                     .toList(),
-                selected: {expenseController.selectedDateType.value},
+                selected: {widget.expenseController.selectedDateType.value},
                 onSelectionChanged: (newSelection) {
                   if (newSelection.isNotEmpty) {
-                    expenseController.selectedDateType.value =
+                    widget.expenseController.selectedDateType.value =
                         newSelection.first;
                   }
                 },
@@ -195,28 +204,30 @@ class ExpenseFilterBottomSheet extends StatelessWidget {
             children: [
               Expanded(
                 child: _dateButton(
-                  label: expenseController.startDate.value == null
+                  label: widget.expenseController.startDate.value == null
                       ? 'Start Date'
                       : DateTimeUtils.formatDate(
-                          expenseController.startDate.value!, 'dd MMM yyyy'),
+                          widget.expenseController.startDate.value!,
+                          'dd MMM yyyy'),
                   onTap: () => _selectDate(
                     context,
-                    expenseController.startDate,
+                    widget.expenseController.startDate,
-                    lastDate: expenseController.endDate.value,
+                    lastDate: widget.expenseController.endDate.value,
                   ),
                 ),
               ),
               MySpacing.width(12),
               Expanded(
                 child: _dateButton(
-                  label: expenseController.endDate.value == null
+                  label: widget.expenseController.endDate.value == null
                       ? 'End Date'
                       : DateTimeUtils.formatDate(
-                          expenseController.endDate.value!, 'dd MMM yyyy'),
+                          widget.expenseController.endDate.value!,
+                          'dd MMM yyyy'),
                   onTap: () => _selectDate(
                     context,
-                    expenseController.endDate,
+                    widget.expenseController.endDate,
-                    firstDate: expenseController.startDate.value,
+                    firstDate: widget.expenseController.startDate.value,
                   ),
                 ),
               ),
@@ -232,8 +243,8 @@ class ExpenseFilterBottomSheet extends StatelessWidget {
       "Paid By",
       _employeeSelector(
         context: context,
-        selectedEmployees: expenseController.selectedPaidByEmployees,
+        selectedEmployees: widget.expenseController.selectedPaidByEmployees,
-        searchEmployees: searchEmployeesForBottomSheet, // FIXED
+        searchEmployees: searchEmployeesForBottomSheet,
         title: 'Search Paid By',
       ),
     );
@@ -244,19 +255,15 @@ class ExpenseFilterBottomSheet extends StatelessWidget {
       "Created By",
       _employeeSelector(
         context: context,
-        selectedEmployees: expenseController.selectedCreatedByEmployees,
+        selectedEmployees: widget.expenseController.selectedCreatedByEmployees,
-        searchEmployees: searchEmployeesForBottomSheet, // FIXED
+        searchEmployees: searchEmployeesForBottomSheet,
         title: 'Search Created By',
       ),
     );
   }
 
-  Future<void> _selectDate(
+  Future<void> _selectDate(BuildContext context, Rx<DateTime?> dateNotifier,
-    BuildContext context,
+      {DateTime? firstDate, DateTime? lastDate}) async {
-    Rx<DateTime?> dateNotifier, {
-    DateTime? firstDate,
-    DateTime? lastDate,
-  }) async {
     final DateTime? picked = await showDatePicker(
       context: context,
       initialDate: dateNotifier.value ?? DateTime.now(),
@@ -268,12 +275,10 @@ class ExpenseFilterBottomSheet extends StatelessWidget {
     }
   }
 
-  Widget _popupSelector(
+  Widget _popupSelector(BuildContext context,
-    BuildContext context, {
+      {required String currentValue,
-    required String currentValue,
+      required List<String> items,
-    required List<String> items,
+      required ValueChanged<String> onSelected}) {
-    required ValueChanged<String> onSelected,
-  }) {
     return PopupMenuButton<String>(
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
       onSelected: onSelected,
@@ -374,10 +379,12 @@ class ExpenseFilterBottomSheet extends StatelessWidget {
           return Wrap(
             spacing: 8,
             children: selectedEmployees
-                .map((emp) => Chip(
+                .map(
-                      label: MyText(emp.name),
+                  (emp) => Chip(
-                      onDeleted: () => selectedEmployees.remove(emp),
+                    label: MyText(emp.name),
-                    ))
+                    onDeleted: () => selectedEmployees.remove(emp),
+                  ),
+                )
                 .toList(),
           );
         }),
@@ -408,5 +415,4 @@ class ExpenseFilterBottomSheet extends StatelessWidget {
       ],
     );
   }
-  
 }

lib/view/expense/expense_screen.dart

@@ -11,7 +11,7 @@ import 'package:marco/view/expense/expense_filter_bottom_sheet.dart';
 import 'package:marco/helpers/widgets/expense/expense_main_components.dart';
 import 'package:marco/helpers/utils/permission_constants.dart';
 import 'package:marco/helpers/widgets/my_refresh_indicator.dart';
-
+import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
 
 class ExpenseMainScreen extends StatefulWidget {
   const ExpenseMainScreen({super.key});
@@ -21,12 +21,12 @@ class ExpenseMainScreen extends StatefulWidget {
 }
 
 class _ExpenseMainScreenState extends State<ExpenseMainScreen>
-    with SingleTickerProviderStateMixin {
+    with SingleTickerProviderStateMixin, UIMixin {
   late TabController _tabController;
   final searchController = TextEditingController();
   final expenseController = Get.put(ExpenseController());
   final projectController = Get.find<ProjectController>();
-final permissionController = Get.put(PermissionController());
+  final permissionController = Get.put(PermissionController());
 
   @override
   void initState() {
@@ -81,83 +81,85 @@ final permissionController = Get.put(PermissionController());
             .toList();
   }
 
-@override
+  @override
-Widget build(BuildContext context) {
+  Widget build(BuildContext context) {
-  return Scaffold(
+    return Scaffold(
-    backgroundColor: Colors.white,
+      backgroundColor: Colors.white,
-    appBar: ExpenseAppBar(projectController: projectController),
+      appBar: ExpenseAppBar(projectController: projectController),
-    body: Column(
+      body: Column(
-      children: [
+        children: [
-        // ---------------- TabBar ----------------
+          // ---------------- TabBar ----------------
-        Container(
+          Container(
-          color: Colors.white,
+            color: Colors.white,
-          child: TabBar(
+            child: TabBar(
-            controller: _tabController,
+              controller: _tabController,
-            labelColor: Colors.black,
+              labelColor: Colors.black,
-            unselectedLabelColor: Colors.grey,
+              unselectedLabelColor: Colors.grey,
-            indicatorColor: Colors.red,
+              indicatorColor: Colors.red,
-            tabs: const [
+              tabs: const [
-              Tab(text: "Current Month"),
+                Tab(text: "Current Month"),
-              Tab(text: "History"),
+                Tab(text: "History"),
-            ],
-          ),
-        ),
-
-        // ---------------- Gray background for rest ----------------
-        Expanded(
-          child: Container(
-            color: Colors.grey[100],
-            child: Column(
-              children: [
-                // ---------------- Search ----------------
-                Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
-                  child: SearchAndFilter(
-                    controller: searchController,
-                    onChanged: (_) => setState(() {}),
-                    onFilterTap: _openFilterBottomSheet,
-                    expenseController: expenseController,
-                  ),
-                ),
-
-                // ---------------- TabBarView ----------------
-                Expanded(
-                  child: TabBarView(
-                    controller: _tabController,
-                    children: [
-                      _buildExpenseList(isHistory: false),
-                      _buildExpenseList(isHistory: true),
-                    ],
-                  ),
-                ),
               ],
             ),
           ),
-        ),
-      ],
-    ),
 
-    // ✅ FAB reacts only to upload permission
+          // ---------------- Gray background for rest ----------------
-    floatingActionButton: Obx(() {
+          Expanded(
-      // Show loader or hide FAB while permissions are loading
+            child: Container(
-      if (permissionController.permissions.isEmpty) {
+              color: Colors.grey[100],
-        return const SizedBox.shrink();
+              child: Column(
-      }
+                children: [
+                  // ---------------- Search ----------------
+                  Padding(
+                    padding:
+                        const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
+                    child: SearchAndFilter(
+                      controller: searchController,
+                      onChanged: (_) => setState(() {}),
+                      onFilterTap: _openFilterBottomSheet,
+                      expenseController: expenseController,
+                    ),
+                  ),
 
-      final canUpload =
+                  // ---------------- TabBarView ----------------
-          permissionController.hasPermission(Permissions.expenseUpload);
+                  Expanded(
+                    child: TabBarView(
+                      controller: _tabController,
+                      children: [
+                        _buildExpenseList(isHistory: false),
+                        _buildExpenseList(isHistory: true),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+      floatingActionButton: Obx(() {
+        // Show loader or hide FAB while permissions are loading
+        if (permissionController.permissions.isEmpty) {
+          return const SizedBox.shrink();
+        }
 
-      return canUpload
+        final canUpload =
-          ? FloatingActionButton(
+            permissionController.hasPermission(Permissions.expenseUpload);
-              backgroundColor: Colors.red,
-              onPressed: showAddExpenseBottomSheet,
-              child: const Icon(Icons.add, color: Colors.white),
-            )
-          : const SizedBox.shrink();
-    }),
-  );
-}
 
+        return canUpload
+            ? FloatingActionButton.extended(
+                backgroundColor: contentTheme.buttonColor,
+                onPressed: showAddExpenseBottomSheet,
+                icon: const Icon(Icons.add, color: Colors.white),
+                label: const Text(
+                  "Add Expense",
+                  style: TextStyle(color: Colors.white, fontSize: 16),
+                ),
+              )
+            : const SizedBox.shrink();
+      }),
+    );
+  }
 
   Widget _buildExpenseList({required bool isHistory}) {
     return Obx(() {
@@ -207,4 +209,3 @@ Widget build(BuildContext context) {
     });
   }
 }
-

lib/view/layouts/offline_screen.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
 import 'package:marco/images.dart';
+import 'package:marco/helpers/widgets/wave_background.dart';
+
 
 class OfflineScreen extends StatefulWidget {
   const OfflineScreen({super.key});
@@ -39,12 +41,11 @@ class _OfflineScreenState extends State<OfflineScreen>
     return Scaffold(
       body: Stack(
         children: [
-          _RedWaveBackground(brandRed: contentTheme.brandRed),
+          RedWaveBackground(brandRed: contentTheme.brandColor),
           SafeArea(
             child: Center(
               child: Padding(
-                padding: const EdgeInsets.symmetric(
+                padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                    horizontal: 12.0),
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
@@ -88,7 +89,6 @@ class _OfflineScreenState extends State<OfflineScreen>
                       textAlign: TextAlign.center,
                       style: TextStyle(fontSize: 16, color: Colors.grey),
                     ),
-          
                   ],
                 ),
               ),
@@ -99,58 +99,3 @@ class _OfflineScreenState extends State<OfflineScreen>
     );
   }
 }
-
-class _RedWaveBackground extends StatelessWidget {
-  final Color brandRed;
-  const _RedWaveBackground({required this.brandRed});
-
-  @override
-  Widget build(BuildContext context) {
-    return CustomPaint(
-      painter: _WavePainter(brandRed),
-      size: Size.infinite,
-    );
-  }
-}
-
-class _WavePainter extends CustomPainter {
-  final Color brandRed;
-
-  _WavePainter(this.brandRed);
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint1 = Paint()
-      ..shader = LinearGradient(
-        colors: [brandRed, const Color.fromARGB(255, 97, 22, 22)],
-        begin: Alignment.topLeft,
-        end: Alignment.bottomRight,
-      ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));
-
-    final path1 = Path()
-      ..moveTo(0, size.height * 0.2)
-      ..quadraticBezierTo(size.width * 0.25, size.height * 0.05,
-          size.width * 0.5, size.height * 0.15)
-      ..quadraticBezierTo(
-          size.width * 0.75, size.height * 0.25, size.width, size.height * 0.1)
-      ..lineTo(size.width, 0)
-      ..lineTo(0, 0)
-      ..close();
-
-    canvas.drawPath(path1, paint1);
-
-    final paint2 = Paint()..color = Colors.redAccent.withOpacity(0.15);
-    final path2 = Path()
-      ..moveTo(0, size.height * 0.25)
-      ..quadraticBezierTo(
-          size.width * 0.4, size.height * 0.1, size.width, size.height * 0.2)
-      ..lineTo(size.width, 0)
-      ..lineTo(0, 0)
-      ..close();
-
-    canvas.drawPath(path2, paint2);
-  }
-
-  @override
-  bool shouldRepaint(CustomPainter oldDelegate) => false;
-}

lib/view/layouts/user_profile_right_bar.dart

@@ -13,7 +13,15 @@ import 'package:marco/view/employees/employee_profile_screen.dart';
 import 'package:marco/helpers/services/tenant_service.dart';
 import 'package:marco/view/tenant/tenant_selection_screen.dart';
 import 'package:marco/controller/tenant/tenant_switch_controller.dart';
+import 'package:marco/helpers/theme/theme_editor_widget.dart';
 
+class ThemeOption {
+  final String label;
+  final Color primary;
+  final Color button;
+  final Color brand;
+  ThemeOption(this.label, this.primary, this.button, this.brand);
+}
 
 
 class UserProfileBar extends StatefulWidget {
@@ -29,6 +37,7 @@ class _UserProfileBarState extends State<UserProfileBar>
   late EmployeeInfo employeeInfo;
   bool _isLoading = true;
   bool hasMpin = true;
+  bool _isThemeEditorVisible = false;
 
   @override
   void initState() {
@@ -58,8 +67,8 @@ class _UserProfileBarState extends State<UserProfileBar>
             decoration: BoxDecoration(
               gradient: LinearGradient(
                 colors: [
-                  Colors.white.withValues(alpha: 0.95),
+                  Colors.white.withOpacity(0.95),
-                  Colors.white.withValues(alpha: 0.85),
+                  Colors.white.withOpacity(0.85),
                 ],
                 begin: Alignment.topLeft,
                 end: Alignment.bottomRight,
@@ -67,150 +76,158 @@ class _UserProfileBarState extends State<UserProfileBar>
               borderRadius: BorderRadius.circular(22),
               boxShadow: [
                 BoxShadow(
-                  color: Colors.black.withValues(alpha: 0.06),
+                  color: Colors.black.withOpacity(0.06),
                   blurRadius: 18,
                   offset: const Offset(0, 8),
                 )
               ],
               border: Border.all(
-                color: Colors.grey.withValues(alpha: 0.25),
+                color: Colors.grey.withOpacity(0.25),
                 width: 1,
               ),
             ),
             child: SafeArea(
-              bottom: true,
+                bottom: true,
-              child: Column(
+                child: Stack(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
-                children: [
+                    Offstage(
-                  _isLoading
+                      offstage: _isThemeEditorVisible,
-                      ? const _LoadingSection()
+                      child: Column(
-                      : _userProfileSection(isCondensed),
+                        crossAxisAlignment: CrossAxisAlignment.stretch,
-
+                        children: [
-                  // --- SWITCH TENANT ROW BELOW AVATAR ---
+                          _isLoading
-                  if (!_isLoading && !isCondensed) _switchTenantRow(),
+                              ? const _LoadingSection()
-
+                              : _userProfileSection(isCondensed),
-                  MySpacing.height(12),
+                          if (!_isLoading && !isCondensed) _switchTenantRow(),
-                  Divider(
+                          MySpacing.height(12),
-                    indent: 18,
+                          Divider(
-                    endIndent: 18,
+                            indent: 18,
-                    thickness: 0.7,
+                            endIndent: 18,
-                    color: Colors.grey.withValues(alpha: 0.25),
+                            thickness: 0.7,
-                  ),
+                            color: Colors.grey.withOpacity(0.25),
-                  MySpacing.height(12),
+                          ),
-                  _supportAndSettingsMenu(isCondensed),
+                          MySpacing.height(12),
-                  const Spacer(),
+                          _supportAndSettingsMenu(isCondensed),
-                  Divider(
+                          const Spacer(),
-                    indent: 18,
+                          Divider(
-                    endIndent: 18,
+                            indent: 18,
-                    thickness: 0.35,
+                            endIndent: 18,
-                    color: Colors.grey.withValues(alpha: 0.18),
+                            thickness: 0.35,
-                  ),
+                            color: Colors.grey.withOpacity(0.18),
-                  _logoutButton(isCondensed),
+                          ),
-                ],
+                          _logoutButton(isCondensed),
-              ),
+                        ],
-            ),
+                      ),
+                    ),
+                    Offstage(
+                      offstage: !_isThemeEditorVisible,
+                      child: ThemeEditorWidget(
+                        onClose: () {
+                          setState(() => _isThemeEditorVisible = false);
+                        },
+                      ),
+                    ),
+                  ],
+                )),
           ),
         ),
       ),
     );
   }
 
-  /// Row widget to switch tenant with popup menu (button only)
+  // ==================== CONTINUE EXISTING CODE =====================
- /// Row widget to switch tenant with popup menu (button only)
+  Widget _switchTenantRow() {
-Widget _switchTenantRow() {
+    final TenantSwitchController tenantSwitchController =
-  // Use the dedicated switch controller
+        Get.put(TenantSwitchController());
-  final TenantSwitchController tenantSwitchController = 
-      Get.put(TenantSwitchController());
 
-  return Padding(
+    return Padding(
-    padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
-    child: Obx(() {
+      child: Obx(() {
-      if (tenantSwitchController.isLoading.value) {
+        if (tenantSwitchController.isLoading.value) {
-        return _loadingTenantContainer();
+          return _loadingTenantContainer();
-      }
+        }
 
-      final tenants = tenantSwitchController.tenants;
+        final tenants = tenantSwitchController.tenants;
-      if (tenants.isEmpty) return _noTenantContainer();
+        if (tenants.isEmpty) return _noTenantContainer();
 
-      final selectedTenant = TenantService.currentTenant;
+        final selectedTenant = TenantService.currentTenant;
 
-      // Sort tenants: selected tenant first
+        final sortedTenants = List.of(tenants);
-      final sortedTenants = List.of(tenants);
+        if (selectedTenant != null) {
-      if (selectedTenant != null) {
+          sortedTenants.sort((a, b) {
-        sortedTenants.sort((a, b) {
+            if (a.id == selectedTenant.id) return -1;
-          if (a.id == selectedTenant.id) return -1;
+            if (b.id == selectedTenant.id) return 1;
-          if (b.id == selectedTenant.id) return 1;
+            return 0;
-          return 0;
+          });
-        });
+        }
-      }
 
-      return PopupMenuButton<String>(
+        return PopupMenuButton<String>(
-        onSelected: (tenantId) =>
+          onSelected: (tenantId) =>
-            tenantSwitchController.switchTenant(tenantId),
+              tenantSwitchController.switchTenant(tenantId),
-        itemBuilder: (_) => sortedTenants.map((tenant) {
+          itemBuilder: (_) => sortedTenants.map((tenant) {
-          return PopupMenuItem(
+            return PopupMenuItem(
-            value: tenant.id,
+              value: tenant.id,
-            child: Row(
+              child: Row(
-              children: [
+                children: [
-                ClipRRect(
+                  ClipRRect(
-                  borderRadius: BorderRadius.circular(8),
+                    borderRadius: BorderRadius.circular(8),
-                  child: Container(
+                    child: Container(
-                    width: 20,
+                      width: 20,
-                    height: 20,
+                      height: 20,
-                    color: Colors.grey.shade200,
+                      color: Colors.grey.shade200,
-                    child: TenantLogo(logoImage: tenant.logoImage),
+                      child: TenantLogo(logoImage: tenant.logoImage),
+                    ),
                   ),
-                ),
+                  const SizedBox(width: 10),
-                const SizedBox(width: 10),
+                  Expanded(
+                    child: Text(
+                      tenant.name,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: TextStyle(
+                        fontWeight: tenant.id == selectedTenant?.id
+                            ? FontWeight.bold
+                            : FontWeight.w600,
+                        color: tenant.id == selectedTenant?.id
+                            ? contentTheme.buttonColor
+                            : Colors.black87,
+                      ),
+                    ),
+                  ),
+                  if (tenant.id == selectedTenant?.id)
+                    Icon(Icons.check_circle,
+                        color: contentTheme.buttonColor, size: 18),
+                ],
+              ),
+            );
+          }).toList(),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Icon(Icons.swap_horiz, color: contentTheme.buttonColor),
                 Expanded(
-                  child: Text(
+                  child: Padding(
-                    tenant.name,
+                    padding: const EdgeInsets.symmetric(horizontal: 6),
-                    maxLines: 1,
+                    child: Text(
-                    overflow: TextOverflow.ellipsis,
+                      "Switch Organization",
-                    style: TextStyle(
+                      maxLines: 1,
-                      fontWeight: tenant.id == selectedTenant?.id
+                      overflow: TextOverflow.ellipsis,
-                          ? FontWeight.bold
+                      style: TextStyle(
-                          : FontWeight.w600,
+                          color: contentTheme.buttonColor,
-                      color: tenant.id == selectedTenant?.id
+                          fontWeight: FontWeight.bold),
-                          ? Colors.blueAccent
-                          : Colors.black87,
                     ),
                   ),
                 ),
-                if (tenant.id == selectedTenant?.id)
+                Icon(Icons.arrow_drop_down, color: contentTheme.buttonColor),
-                  const Icon(Icons.check_circle,
-                      color: Colors.blueAccent, size: 18),
               ],
             ),
-          );
-        }).toList(),
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
-          child: Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              Icon(Icons.swap_horiz, color: Colors.blue.shade600),
-              Expanded(
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 6),
-                  child: Text(
-                    "Switch Organization",
-                    maxLines: 1,
-                    overflow: TextOverflow.ellipsis,
-                    style: TextStyle(
-                        color: Colors.blue, fontWeight: FontWeight.bold),
-                  ),
-                ),
-              ),
-              Icon(Icons.arrow_drop_down, color: Colors.blue.shade600),
-            ],
           ),
-        ),
+        );
-      );
+      }),
-    }),
+    );
-  );
+  }
-}
-
 
   Widget _loadingTenantContainer() => Container(
         padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
@@ -254,7 +271,7 @@ Widget _switchTenantRow() {
               shape: BoxShape.circle,
               boxShadow: [
                 BoxShadow(
-                  color: Theme.of(context).primaryColor.withValues(alpha: 0.15),
+                  color: Theme.of(context).primaryColor.withOpacity(0.15),
                   blurRadius: 10,
                   spreadRadius: 1,
                 ),
@@ -310,6 +327,11 @@ Widget _switchTenantRow() {
           _menuItemRow(
             icon: LucideIcons.settings,
             label: 'Settings',
+            onTap: () {
+              setState(() {
+                _isThemeEditorVisible = true;
+              });
+            },
           ),
           SizedBox(height: spacingHeight),
           _menuItemRow(
@@ -320,8 +342,6 @@ Widget _switchTenantRow() {
           _menuItemRow(
             icon: LucideIcons.lock,
             label: hasMpin ? 'Change MPIN' : 'Set MPIN',
-            iconColor: Colors.redAccent,
-            textColor: Colors.redAccent,
             onTap: _onMpinTap,
           ),
         ],
@@ -395,9 +415,9 @@ Widget _switchTenantRow() {
                   fontWeight: 700,
                 ),
           style: ElevatedButton.styleFrom(
-            backgroundColor: Colors.red.shade600,
+            backgroundColor: contentTheme.buttonColor,
             foregroundColor: Colors.white,
-            shadowColor: Colors.red.shade200,
+            shadowColor: contentTheme.buttonColor,
             padding: EdgeInsets.symmetric(
               vertical: condensed ? 14 : 18,
               horizontal: condensed ? 14 : 22,
@@ -419,54 +439,71 @@ Widget _switchTenantRow() {
   }
 
   Widget _buildLogoutDialog(BuildContext context) {
+    final theme = Theme.of(context);
+    final primaryColor = contentTheme.buttonColor;
+
     return Dialog(
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
       elevation: 10,
-      backgroundColor: Colors.white,
+      backgroundColor: theme.cardColor,
       child: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 34),
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
-            Icon(LucideIcons.log_out, size: 56, color: Colors.red.shade700),
+            // Top icon
-            const SizedBox(height: 18),
+            Icon(LucideIcons.log_out, size: 56, color: primaryColor),
-            const Text(
+            MySpacing.height(18),
+            // Title
+            MyText.titleLarge(
               "Logout Confirmation",
-              style: TextStyle(
+              fontWeight: 700,
-                  fontSize: 22,
-                  fontWeight: FontWeight.w700,
-                  color: Colors.black87),
-            ),
-            const SizedBox(height: 14),
-            const Text(
-              "Are you sure you want to logout?\nYou will need to login again to continue.",
               textAlign: TextAlign.center,
-              style: TextStyle(fontSize: 16, color: Colors.black54),
             ),
-            const SizedBox(height: 30),
+            MySpacing.height(14),
+            // Subtitle
+            MyText.bodyMedium(
+              "Are you sure you want to logout?\nYou will need to login again to continue.",
+              color: Colors.grey[700],
+              textAlign: TextAlign.center,
+            ),
+            MySpacing.height(30),
+            // Buttons
             Row(
               children: [
-                Expanded(
-                  child: TextButton(
-                    onPressed: () => Navigator.pop(context, false),
-                    style: TextButton.styleFrom(
-                        foregroundColor: Colors.grey.shade700,
-                        padding: const EdgeInsets.symmetric(vertical: 12)),
-                    child: const Text("Cancel"),
-                  ),
-                ),
-                const SizedBox(width: 18),
                 Expanded(
                   child: ElevatedButton(
-                    onPressed: () => Navigator.pop(context, true),
+                    onPressed: () => Navigator.pop(context, false),
                     style: ElevatedButton.styleFrom(
-                      backgroundColor: Colors.red.shade700,
+                      backgroundColor: Colors.grey,
                       foregroundColor: Colors.white,
                       padding: const EdgeInsets.symmetric(vertical: 14),
                       shape: RoundedRectangleBorder(
                           borderRadius: BorderRadius.circular(14)),
                     ),
-                    child: const Text("Logout"),
+                    child: MyText.bodyMedium(
+                      "Cancel",
+                      color: Colors.white,
+                      fontWeight: 600,
+                    ),
+                  ),
+                ),
+                MySpacing.width(18),
+                Expanded(
+                  child: ElevatedButton(
+                    onPressed: () => Navigator.pop(context, true),
+                    style: ElevatedButton.styleFrom(
+                      backgroundColor: primaryColor,
+                      foregroundColor: Colors.white,
+                      padding: const EdgeInsets.symmetric(vertical: 14),
+                      shape: RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(14)),
+                    ),
+                    child: MyText.bodyMedium(
+                      "Logout",
+                      color: Colors.white,
+                      fontWeight: 600,
+                    ),
                   ),
                 ),
               ],

lib/view/tenant/tenant_selection_screen.dart

@@ -8,6 +8,7 @@ import 'package:marco/helpers/widgets/my_text.dart';
 import 'package:marco/images.dart';
 import 'package:marco/controller/tenant/tenant_selection_controller.dart';
 import 'package:marco/view/splash_screen.dart';
+import 'package:marco/helpers/widgets/wave_background.dart';
 
 class TenantSelectionScreen extends StatefulWidget {
   const TenantSelectionScreen({super.key});
@@ -63,7 +64,7 @@ class _TenantSelectionScreenState extends State<TenantSelectionScreen>
       return Scaffold(
         body: Stack(
           children: [
-            _RedWaveBackground(brandRed: contentTheme.brandRed),
+            RedWaveBackground(brandRed: contentTheme.brandColor),
             SafeArea(
               child: Center(
                 child: Column(
@@ -188,12 +189,12 @@ class _BetaBadge extends StatelessWidget {
 }
 
 /// Tenant Card List
-class TenantCardList extends StatelessWidget {
+class TenantCardList extends StatelessWidget with UIMixin {
   final TenantSelectionController controller;
   final bool isLoading;
   final Function(String tenantId) onTenantSelected;
 
-  const TenantCardList({
+   TenantCardList({
     required this.controller,
     required this.isLoading,
     required this.onTenantSelected,
@@ -220,24 +221,23 @@ class TenantCardList extends StatelessWidget {
             ),
             const SizedBox(height: 16),
           ],
-
+          if (hasTenants)
-          if (hasTenants) ...controller.tenants.map(
+            ...controller.tenants.map(
-            (tenant) => _TenantCard(
+              (tenant) => _TenantCard(
-              tenant: tenant,
+                tenant: tenant,
-              onTap: () => onTenantSelected(tenant.id),
+                onTap: () => onTenantSelected(tenant.id),
+              ),
             ),
-          ),
-
           const SizedBox(height: 16),
-
           TextButton.icon(
             onPressed: () async {
               await LocalStorage.logout();
             },
-            icon: const Icon(Icons.arrow_back, size: 20, color: Colors.redAccent),
+            icon:
+                 Icon(Icons.arrow_back, size: 20, color: contentTheme.brandColor,),
             label: MyText(
               'Back to Login',
-              color: Colors.red,
+              color: contentTheme.brandColor,
               fontWeight: 600,
               fontSize: 14,
             ),
@@ -249,10 +249,10 @@ class TenantCardList extends StatelessWidget {
 }
 
 /// Single Tenant Card
-class _TenantCard extends StatelessWidget {
+class _TenantCard extends StatelessWidget with UIMixin {
   final dynamic tenant;
   final VoidCallback onTap;
-  const _TenantCard({required this.tenant, required this.onTap});
+   _TenantCard({required this.tenant, required this.onTap});
 
   @override
   Widget build(BuildContext context) {
@@ -297,7 +297,7 @@ class _TenantCard extends StatelessWidget {
                   ],
                 ),
               ),
-              const Icon(Icons.arrow_forward_ios, size: 24, color: Colors.red),
+               Icon(Icons.arrow_forward_ios, size: 24, color: contentTheme.brandColor,),
             ],
           ),
         ),
@@ -335,55 +335,3 @@ class TenantLogo extends StatelessWidget {
     }
   }
 }
-
-/// Red Wave Background
-class _RedWaveBackground extends StatelessWidget {
-  final Color brandRed;
-  const _RedWaveBackground({required this.brandRed});
-
-  @override
-  Widget build(BuildContext context) {
-    return CustomPaint(
-      painter: _WavePainter(brandRed),
-      size: Size.infinite,
-    );
-  }
-}
-
-class _WavePainter extends CustomPainter {
-  final Color brandRed;
-  _WavePainter(this.brandRed);
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint1 = Paint()
-      ..shader = LinearGradient(
-        colors: [brandRed, const Color.fromARGB(255, 97, 22, 22)],
-        begin: Alignment.topLeft,
-        end: Alignment.bottomRight,
-      ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));
-
-    final path1 = Path()
-      ..moveTo(0, size.height * 0.2)
-      ..quadraticBezierTo(
-          size.width * 0.25, size.height * 0.05, size.width * 0.5, size.height * 0.15)
-      ..quadraticBezierTo(
-          size.width * 0.75, size.height * 0.25, size.width, size.height * 0.1)
-      ..lineTo(size.width, 0)
-      ..lineTo(0, 0)
-      ..close();
-    canvas.drawPath(path1, paint1);
-
-    final paint2 = Paint()..color = Colors.redAccent.withOpacity(0.15);
-    final path2 = Path()
-      ..moveTo(0, size.height * 0.25)
-      ..quadraticBezierTo(size.width * 0.4, size.height * 0.1, size.width, size.height * 0.2)
-      ..lineTo(size.width, 0)
-      ..lineTo(0, 0)
-      ..close();
-    canvas.drawPath(path2, paint2);
-  }
-
-  @override
-  bool shouldRepaint(CustomPainter oldDelegate) => false;
-}