chore: bump version to 1.0.9+31082025

- Changed color scheme from ShadBlueColorScheme to ShadZincColorScheme in main.dart
- Added getMostRecentIntake method in SupplementProvider to retrieve the latest intake for a supplement
- Integrated TodayScheduleScreen into HomeScreen with a new BottomNavigationBar item
- Updated SupplementsListScreen title and adjusted layout for better UX
- Enhanced SupplementCard to support undoing last taken action and improved popover menu options
- Added popover package for better UI interactions

.kilocode/mcp.json

@@ -0,0 +1,14 @@
+{
+  "mcpServers": {
+    "context7": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "@upstash/context7-mcp"
+      ],
+      "env": {
+        "DEFAULT_MINIMUM_TOKENS": ""
+      }
+    }
+  }
+}

lib/main.dart

@@ -1,11 +1,9 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
-import 'package:flutter/foundation.dart';
-import 'package:flutter/material.dart';
 import 'package:flutter_local_notifications/flutter_local_notifications.dart'; // Import this
-import 'package:provider/provider.dart';
 import 'package:supplements/logging.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
 
 import 'providers/settings_provider.dart';
 import 'providers/simple_sync_provider.dart';
@@ -95,22 +93,16 @@ class MyApp extends StatelessWidget {
             });
           });
 
-          return MaterialApp(
+          return ShadApp(
             navigatorKey: navigatorKey,
             title: 'Supplements Tracker',
-            theme: ThemeData(
-              colorScheme: ColorScheme.fromSeed(
-                seedColor: Colors.blue,
-                brightness: Brightness.light,
-              ),
-              useMaterial3: true,
+            theme: ShadThemeData(
+              brightness: Brightness.light,
+              colorScheme: const ShadZincColorScheme.light(),
             ),
-            darkTheme: ThemeData(
-              colorScheme: ColorScheme.fromSeed(
-                seedColor: Colors.blue,
-                brightness: Brightness.dark,
-              ),
-              useMaterial3: true,
+            darkTheme: ShadThemeData(
+              brightness: Brightness.dark,
+              colorScheme: const ShadZincColorScheme.dark(),
             ),
             themeMode: settingsProvider.themeMode,
             home: const HomeScreen(),

lib/providers/settings_provider.dart

@@ -10,10 +10,6 @@ enum ThemeOption {
 class SettingsProvider extends ChangeNotifier {
   ThemeOption _themeOption = ThemeOption.system;
 
-  // Profile fields
-  DateTime? _dateOfBirth;
-  String? _gender;
-
   // Time range settings (stored as hours, 0-23)
   int _morningStart = 5;
   int _morningEnd = 10;
@@ -76,13 +72,6 @@ class SettingsProvider extends ChangeNotifier {
     final themeIndex = prefs.getInt('theme_option') ?? 0;
     _themeOption = ThemeOption.values[themeIndex];
 
-    // Load profile fields
-    final dobString = prefs.getString('date_of_birth');
-    if (dobString != null) {
-      _dateOfBirth = DateTime.tryParse(dobString);
-    }
-    _gender = prefs.getString('gender');
-
     // Load time range settings
     _morningStart = prefs.getInt('morning_start') ?? 5;
     _morningEnd = prefs.getInt('morning_end') ?? 10;
@@ -112,8 +101,6 @@ class SettingsProvider extends ChangeNotifier {
   }
 
   Future<void> setDateOfBirthAndGender(DateTime dateOfBirth, String gender) async {
-    _dateOfBirth = dateOfBirth;
-    _gender = gender;
     notifyListeners();
 
     final prefs = await SharedPreferences.getInstance();

lib/providers/supplement_provider.dart

@@ -87,7 +87,7 @@ class SupplementProvider with ChangeNotifier, WidgetsBindingObserver {
 
       if (currentDate != lastCheckDate) {
         if (kDebugMode) {
-          printLog('Date changed detected: ${lastCheckDate} -> ${currentDate}');
+          printLog('Date changed detected: $lastCheckDate -> $currentDate');
           printLog('Refreshing today\'s intakes for new day...');
         }
 
@@ -175,9 +175,6 @@ class SupplementProvider with ChangeNotifier, WidgetsBindingObserver {
       printLog('Adding supplement: ${supplement.name}');
       final id = await _databaseHelper.insertSupplement(supplement);
       printLog('Supplement inserted with ID: $id');
-      final newSupplement = supplement.copyWith(id: id);
-
-      // Notifications will be rescheduled in grouped mode after reloading supplements
 
       await loadSupplements();
       printLog('Supplements reloaded, count: ${_supplements.length}');
@@ -370,6 +367,24 @@ class SupplementProvider with ChangeNotifier, WidgetsBindingObserver {
     return _todayIntakes.where((intake) => intake['supplement_id'] == supplementId).length;
   }
 
+  /// Get the most recent intake for a supplement today
+  Map<String, dynamic>? getMostRecentIntake(int supplementId) {
+    final supplementIntakes = _todayIntakes
+        .where((intake) => intake['supplement_id'] == supplementId)
+        .toList();
+
+    if (supplementIntakes.isEmpty) return null;
+
+    // Sort by takenAt time (most recent first)
+    supplementIntakes.sort((a, b) {
+      final aTime = DateTime.parse(a['takenAt']);
+      final bTime = DateTime.parse(b['takenAt']);
+      return bTime.compareTo(aTime); // Descending order
+    });
+
+    return supplementIntakes.first;
+  }
+
   Map<String, double> get dailyIngredientIntake {
     final Map<String, double> ingredientIntake = {};
 

lib/screens/add_supplement_screen.dart

@@ -166,7 +166,7 @@ class _AddSupplementScreenState extends State<AddSupplementScreen> {
                 Expanded(
                   flex: 1,
                   child: DropdownButtonFormField<String>(
-                    value: controller.selectedUnit,
+                    initialValue: controller.selectedUnit,
                     decoration: const InputDecoration(
                       labelText: 'Unit',
                       border: OutlineInputBorder(),
@@ -317,7 +317,7 @@ class _AddSupplementScreenState extends State<AddSupplementScreen> {
                   Expanded(
                     flex: 1,
                     child: DropdownButtonFormField<String>(
-                      value: _selectedUnitType,
+                      initialValue: _selectedUnitType,
                       decoration: const InputDecoration(
                         labelText: 'Type',
                         border: OutlineInputBorder(),
@@ -342,7 +342,7 @@ class _AddSupplementScreenState extends State<AddSupplementScreen> {
               // Show ingredients summary
               if (_ingredientControllers.isNotEmpty && _ingredientControllers.any((c) => c.nameController.text.isNotEmpty && (double.tryParse(c.amountController.text) ?? 0) > 0))
                 Card(
-                  color: Theme.of(context).colorScheme.primaryContainer.withOpacity(0.3),
+                  color: Theme.of(context).colorScheme.primaryContainer.withValues(alpha: 0.3),
                   child: Padding(
                     padding: const EdgeInsets.all(12),
                     child: Column(

lib/screens/archived_supplements_screen.dart

@@ -164,9 +164,9 @@ class _ArchivedSupplementCard extends StatelessWidget {
       child: Container(
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(16),
-          color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
+          color: Theme.of(context).colorScheme.surfaceContainerHighest.withValues(alpha: 0.3),
           border: Border.all(
-            color: Theme.of(context).colorScheme.outline.withOpacity(0.2),
+            color: Theme.of(context).colorScheme.outline.withValues(alpha: 0.2),
             width: 1,
           ),
         ),
@@ -180,7 +180,7 @@ class _ArchivedSupplementCard extends StatelessWidget {
                   Container(
                     padding: const EdgeInsets.all(8),
                     decoration: BoxDecoration(
-                      color: Theme.of(context).colorScheme.outline.withOpacity(0.1),
+                      color: Theme.of(context).colorScheme.outline.withValues(alpha: 0.1),
                       shape: BoxShape.circle,
                     ),
                     child: Icon(
@@ -262,7 +262,7 @@ class _ArchivedSupplementCard extends StatelessWidget {
                 Container(
                   padding: const EdgeInsets.all(12),
                   decoration: BoxDecoration(
-                    color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
+                    color: Theme.of(context).colorScheme.surfaceContainerHighest.withValues(alpha: 0.3),
                     borderRadius: BorderRadius.circular(8),
                   ),
                   child: Column(
@@ -284,7 +284,7 @@ class _ArchivedSupplementCard extends StatelessWidget {
                           return Container(
                             padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                             decoration: BoxDecoration(
-                              color: Theme.of(context).colorScheme.outline.withOpacity(0.1),
+                              color: Theme.of(context).colorScheme.outline.withValues(alpha: 0.1),
                               borderRadius: BorderRadius.circular(6),
                             ),
                             child: Text(

lib/screens/debug_notifications_screen.dart

@@ -383,8 +383,8 @@ class _DebugNotificationsScreenState extends State<DebugNotificationsScreen> {
     final createdAt = DateTime.fromMillisecondsSinceEpoch(e.createdAtEpochMs).toLocal();
     
     // Format times more clearly
-    final scheduledStr = '${scheduledAt.toString().substring(0, 16)}';
-    final createdStr = '${createdAt.toString().substring(0, 16)}';
+    final scheduledStr = scheduledAt.toString().substring(0, 16);
+    final createdStr = createdAt.toString().substring(0, 16);
     
     // Show status and timing info
     final statusStr = inQueue ? '🟡 Pending' : '✅ Completed/Canceled';

lib/screens/history_screen.dart

@@ -15,12 +15,10 @@ class HistoryScreen extends StatefulWidget {
 class _HistoryScreenState extends State<HistoryScreen> {
   int _selectedMonth = DateTime.now().month;
   int _selectedYear = DateTime.now().year;
-  DateTime? _selectedDay;
 
   @override
   void initState() {
     super.initState();
-    _selectedDay = DateTime.now(); // Set today as the default selected day
     WidgetsBinding.instance.addPostFrameCallback((_) {
       context.read<SupplementProvider>().loadMonthlyIntakes(_selectedYear, _selectedMonth);
     });
@@ -32,16 +30,33 @@ class _HistoryScreenState extends State<HistoryScreen> {
       appBar: AppBar(
         title: const Text('Intake History'),
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        actions: [
+          IconButton(
+            icon: const Icon(Icons.calendar_today),
+            onPressed: _showMonthPicker,
+            tooltip: 'Select Month',
+          ),
+        ],
       ),
-      body: _buildCalendarView(),
+      body: _buildCompactHistoryView(),
     );
   }
 
-  Widget _buildCalendarView() {
+  Widget _buildCompactHistoryView() {
     return Column(
       children: [
+        // Month selector header
         Container(
-          padding: const EdgeInsets.all(16),
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+          decoration: BoxDecoration(
+            color: Theme.of(context).colorScheme.surface,
+            border: Border(
+              bottom: BorderSide(
+                color: Theme.of(context).colorScheme.outline.withValues(alpha: 0.2),
+                width: 1,
+              ),
+            ),
+          ),
           child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
@@ -55,22 +70,19 @@ class _HistoryScreenState extends State<HistoryScreen> {
                       _selectedMonth--;
                     }
                   });
-                  context.read<SupplementProvider>().loadMonthlyIntakes(_selectedYear, _selectedMonth);
+                  WidgetsBinding.instance.addPostFrameCallback((_) {
+                    context.read<SupplementProvider>().loadMonthlyIntakes(_selectedYear, _selectedMonth);
+                  });
                 },
                 icon: const Icon(Icons.chevron_left),
+                iconSize: 20,
               ),
-              InkWell(
-                onTap: _showMonthPicker,
-                borderRadius: BorderRadius.circular(8),
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-                  child: Text(
-                    DateFormat('MMMM yyyy').format(DateTime(_selectedYear, _selectedMonth)),
-                    style: const TextStyle(
-                      fontSize: 18,
-                      fontWeight: FontWeight.bold,
-                    ),
-                  ),
+              Text(
+                DateFormat('MMMM yyyy').format(DateTime(_selectedYear, _selectedMonth)),
+                style: TextStyle(
+                  fontSize: 16,
+                  fontWeight: FontWeight.w600,
+                  color: Theme.of(context).colorScheme.onSurface,
                 ),
               ),
               IconButton(
@@ -85,76 +97,191 @@ class _HistoryScreenState extends State<HistoryScreen> {
                         _selectedMonth++;
                       }
                     });
-                    context.read<SupplementProvider>().loadMonthlyIntakes(_selectedYear, _selectedMonth);
+                    WidgetsBinding.instance.addPostFrameCallback((_) {
+                      context.read<SupplementProvider>().loadMonthlyIntakes(_selectedYear, _selectedMonth);
+                    });
                   }
                 },
                 icon: const Icon(Icons.chevron_right),
+                iconSize: 20,
               ),
             ],
           ),
         ),
+        // History list
         Expanded(
           child: Consumer<SupplementProvider>(
             builder: (context, provider, child) {
-              // Group intakes by date
-              final groupedIntakes = <String, List<Map<String, dynamic>>>{};
-              for (final intake in provider.monthlyIntakes) {
-                final date = DateTime.parse(intake['takenAt']);
-                final dateKey = DateFormat('yyyy-MM-dd').format(date);
-                groupedIntakes.putIfAbsent(dateKey, () => []);
-                groupedIntakes[dateKey]!.add(intake);
+              if (provider.monthlyIntakes.isEmpty) {
+                return Center(
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Icon(
+                        Icons.history,
+                        size: 48,
+                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                      ),
+                      const SizedBox(height: 16),
+                      Text(
+                        'No intake history for this month',
+                        style: TextStyle(
+                          fontSize: 16,
+                          color: Theme.of(context).colorScheme.onSurfaceVariant,
+                        ),
+                      ),
+                    ],
+                  ),
+                );
               }
 
-              return LayoutBuilder(
-                builder: (context, constraints) {
-                  final isWideScreen = constraints.maxWidth > 800;
+              // Sort intakes by date (most recent first)
+              final sortedIntakes = List<Map<String, dynamic>>.from(provider.monthlyIntakes)
+                ..sort((a, b) => DateTime.parse(b['takenAt']).compareTo(DateTime.parse(a['takenAt'])));
 
-                  if (isWideScreen) {
-                    // Desktop/tablet layout: side-by-side
-                    return Row(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        // Calendar on the left
-                        Expanded(
-                          flex: 2,
-                          child: Container(
-                            margin: const EdgeInsets.all(16),
-                            child: _buildCalendar(groupedIntakes),
-                          ),
-                        ),
-                        // Selected day details on the right
-                        Expanded(
-                          flex: 3,
-                          child: Container(
-                            // add a bit more horizontal spacing between calendar and card
-                            margin: const EdgeInsets.fromLTRB(8, 16, 16, 16),
-                            child: SingleChildScrollView(
-                              child: _buildSelectedDayDetails(groupedIntakes),
+              return ListView.builder(
+                padding: const EdgeInsets.symmetric(vertical: 8),
+                itemCount: sortedIntakes.length,
+                itemBuilder: (context, index) {
+                  final intake = sortedIntakes[index];
+                  final takenAt = DateTime.parse(intake['takenAt']);
+                  final units = (intake['unitsTaken'] as num?)?.toDouble() ?? 1.0;
+
+                  // Check if we need a date header
+                  final previousIntake = index > 0 ? sortedIntakes[index - 1] : null;
+                  final showDateHeader = previousIntake == null ||
+                      DateFormat('yyyy-MM-dd').format(DateTime.parse(previousIntake['takenAt'])) !=
+                          DateFormat('yyyy-MM-dd').format(takenAt);
+
+                  return Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      if (showDateHeader) ...[
+                        Container(
+                          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+                          child: Text(
+                            DateFormat('EEEE, MMMM d').format(takenAt),
+                            style: TextStyle(
+                              fontSize: 14,
+                              fontWeight: FontWeight.w600,
+                              color: Theme.of(context).colorScheme.primary,
                             ),
                           ),
                         ),
                       ],
-                    );
-                  } else {
-                    // Mobile layout: vertical stack
-                    return SingleChildScrollView(
-                      child: Column(
-                        children: [
-                          // Calendar
-                          Container(
-                            margin: const EdgeInsets.symmetric(horizontal: 16),
-                            child: _buildCalendar(groupedIntakes),
+                      Dismissible(
+                        key: Key('intake_${intake['id']}'),
+                        direction: DismissDirection.endToStart,
+                        background: Container(
+                          alignment: Alignment.centerRight,
+                          padding: const EdgeInsets.only(right: 20),
+                          color: Colors.red.shade400,
+                          child: const Icon(
+                            Icons.delete,
+                            color: Colors.white,
                           ),
-                          const SizedBox(height: 16),
-                          // Selected day details
-                          Container(
-                            margin: const EdgeInsets.symmetric(horizontal: 16),
-                            child: _buildSelectedDayDetails(groupedIntakes),
+                        ),
+                        confirmDismiss: (direction) async {
+                          return await showDialog(
+                            context: context,
+                            builder: (context) => AlertDialog(
+                              title: const Text('Delete Intake'),
+                              content: Text('Delete ${intake['supplementName']} taken at ${DateFormat('HH:mm').format(takenAt)}?'),
+                              actions: [
+                                TextButton(
+                                  onPressed: () => Navigator.of(context).pop(false),
+                                  child: const Text('Cancel'),
+                                ),
+                                TextButton(
+                                  onPressed: () => Navigator.of(context).pop(true),
+                                  style: TextButton.styleFrom(foregroundColor: Colors.red),
+                                  child: const Text('Delete'),
+                                ),
+                              ],
+                            ),
+                          );
+                        },
+                        onDismissed: (direction) {
+                          context.read<SupplementProvider>().deleteIntake(intake['id']);
+                        },
+                        child: Container(
+                          margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 2),
+                          child: Card(
+                            margin: EdgeInsets.zero,
+                            elevation: 2,
+                            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+                            child: InkWell(
+                              onTap: () => _deleteIntake(context, intake['id'], intake['supplementName']),
+                              borderRadius: BorderRadius.circular(12),
+                              splashColor: Theme.of(context).colorScheme.primary.withValues(alpha: 0.4),
+                              highlightColor: Theme.of(context).colorScheme.primary.withValues(alpha: 0.3),
+                              child: Container(
+                                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                                child: Row(
+                                children: [
+                                  Container(
+                                    padding: const EdgeInsets.all(6),
+                                    decoration: BoxDecoration(
+                                      color: Theme.of(context).colorScheme.primary.withValues(alpha: 0.1),
+                                      shape: BoxShape.circle,
+                                    ),
+                                    child: Icon(
+                                      Icons.medication,
+                                      color: Theme.of(context).colorScheme.primary,
+                                      size: 18,
+                                    ),
+                                  ),
+                                  const SizedBox(width: 12),
+                                  Expanded(
+                                    child: Column(
+                                      crossAxisAlignment: CrossAxisAlignment.start,
+                                      children: [
+                                        Text(
+                                          intake['supplementName'],
+                                          style: TextStyle(
+                                            fontSize: 14,
+                                            fontWeight: FontWeight.bold,
+                                            color: Theme.of(context).colorScheme.onSurface,
+                                          ),
+                                        ),
+                                        const SizedBox(height: 2),
+                                        Text(
+                                          '${DateFormat('HH:mm').format(takenAt)} • ${units.toStringAsFixed(units % 1 == 0 ? 0 : 1)} ${intake['supplementUnitType'] ?? 'units'}',
+                                          style: TextStyle(
+                                            fontSize: 11,
+                                            color: Theme.of(context).colorScheme.onSurfaceVariant,
+                                          ),
+                                        ),
+                                        if (intake['notes'] != null && intake['notes'].toString().isNotEmpty) ...[
+                                          const SizedBox(height: 2),
+                                          Text(
+                                            intake['notes'],
+                                            style: TextStyle(
+                                              fontSize: 11,
+                                              fontStyle: FontStyle.italic,
+                                              color: Theme.of(context).colorScheme.onSurfaceVariant.withValues(alpha: 0.8),
+                                            ),
+                                            maxLines: 2,
+                                            overflow: TextOverflow.ellipsis,
+                                          ),
+                                        ],
+                                      ],
+                                    ),
+                                  ),
+                                  Icon(
+                                    Icons.delete_outline,
+                                    size: 18,
+                                    color: Theme.of(context).colorScheme.onSurfaceVariant.withValues(alpha: 0.5),
+                                  ),
+                                ],
+                              ),
+                            ),
                           ),
-                        ],
+                        ),
                       ),
-                    );
-                  }
+                      ),
+                    ],
+                  );
                 },
               );
             },
@@ -187,12 +314,14 @@ class _HistoryScreenState extends State<HistoryScreen> {
     );
 
     if (picked != null) {
+      if (!context.mounted) return;
       setState(() {
         _selectedMonth = picked.month;
         _selectedYear = picked.year;
-        _selectedDay = picked; // Set the selected day to the picked date
       });
-      context.read<SupplementProvider>().loadMonthlyIntakes(_selectedYear, _selectedMonth);
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        context.read<SupplementProvider>().loadMonthlyIntakes(_selectedYear, _selectedMonth);
+      });
     }
   }
 
@@ -210,13 +339,16 @@ class _HistoryScreenState extends State<HistoryScreen> {
           ElevatedButton(
             onPressed: () async {
               await context.read<SupplementProvider>().deleteIntake(intakeId);
+              if (!context.mounted) return;
               Navigator.of(context).pop();
 
               // Force refresh of the UI
               setState(() {});
 
               // Force refresh of the current view data
-              context.read<SupplementProvider>().loadMonthlyIntakes(_selectedYear, _selectedMonth);
+              WidgetsBinding.instance.addPostFrameCallback((_) {
+                context.read<SupplementProvider>().loadMonthlyIntakes(_selectedYear, _selectedMonth);
+              });
 
               ScaffoldMessenger.of(context).showSnackBar(
                 SnackBar(
@@ -233,471 +365,7 @@ class _HistoryScreenState extends State<HistoryScreen> {
     );
   }
 
-  Widget _buildCalendar(Map<String, List<Map<String, dynamic>>> groupedIntakes) {
-    final firstDayOfMonth = DateTime(_selectedYear, _selectedMonth, 1);
-    final lastDayOfMonth = DateTime(_selectedYear, _selectedMonth + 1, 0);
-    final firstWeekday = firstDayOfMonth.weekday;
-    final daysInMonth = lastDayOfMonth.day;
 
-    // Calculate how many cells we need (including empty ones for alignment)
-    final totalCells = ((daysInMonth + firstWeekday - 1) / 7).ceil() * 7;
-    final weeks = (totalCells / 7).ceil();
-
-    return LayoutBuilder(
-      builder: (context, constraints) {
-        final isWideScreen = constraints.maxWidth > 800;
-        // Calculate calendar height based on number of weeks needed
-        final cellHeight = isWideScreen ? 56.0 : 48.0;
-        final calendarContentHeight = (weeks * cellHeight) + 60; // +60 for headers and padding
-        final calendarHeight = isWideScreen ? 400.0 : calendarContentHeight;
-
-        return Card(
-          child: Container(
-            height: calendarHeight,
-            child: Padding(
-              padding: const EdgeInsets.all(16),
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  // Calendar header (weekdays)
-                  Row(
-                    children: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-                        .map((day) => Expanded(
-                              child: Center(
-                                child: Text(
-                                  day,
-                                  style: TextStyle(
-                                    fontWeight: FontWeight.bold,
-                                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                                    fontSize: isWideScreen ? 14 : 12,
-                                  ),
-                                ),
-                              ),
-                            ))
-                        .toList(),
-                  ),
-                  const SizedBox(height: 8),
-                  // Calendar grid
-                  Expanded(
-                    child: GridView.builder(
-                      shrinkWrap: true,
-                      physics: const ClampingScrollPhysics(),
-                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-                        crossAxisCount: 7,
-                        childAspectRatio: 1.0,
-                        mainAxisSpacing: 4,
-                        crossAxisSpacing: 4,
-                      ),
-                      itemCount: totalCells,
-                      itemBuilder: (context, index) {
-                        final dayNumber = index - firstWeekday + 2;
-
-                        if (dayNumber < 1 || dayNumber > daysInMonth) {
-                          return const SizedBox(); // Empty cell
-                        }
-
-                        final date = DateTime(_selectedYear, _selectedMonth, dayNumber);
-                        final dateKey = DateFormat('yyyy-MM-dd').format(date);
-                        final hasIntakes = groupedIntakes.containsKey(dateKey);
-                        final intakeCount = hasIntakes ? groupedIntakes[dateKey]!.length : 0;
-                        final isSelected = _selectedDay != null &&
-                                           DateFormat('yyyy-MM-dd').format(_selectedDay!) == dateKey;
-                        final isToday = DateFormat('yyyy-MM-dd').format(DateTime.now()) == dateKey;
-
-                        return GestureDetector(
-                          onTap: () {
-                            setState(() {
-                              _selectedDay = date;
-                            });
-                          },
-                          child: Container(
-                            margin: const EdgeInsets.all(1),
-                            decoration: BoxDecoration(
-                              color: isSelected
-                                  ? Theme.of(context).colorScheme.primary
-                                  : hasIntakes
-                                      ? Theme.of(context).colorScheme.primaryContainer
-                                      : null,
-                              border: isToday
-                                  ? Border.all(color: Theme.of(context).colorScheme.secondary, width: 2)
-                                  : null,
-                              borderRadius: BorderRadius.circular(8),
-                            ),
-                            child: Stack(
-                              children: [
-                                Center(
-                                  child: Text(
-                                    '$dayNumber',
-                                    style: TextStyle(
-                                      color: isSelected
-                                          ? Theme.of(context).colorScheme.onPrimary
-                                          : hasIntakes
-                                              ? Theme.of(context).colorScheme.onPrimaryContainer
-                                              : Theme.of(context).colorScheme.onSurface,
-                                      fontWeight: isToday ? FontWeight.bold : FontWeight.normal,
-                                      fontSize: isWideScreen ? 16 : 14,
-                                    ),
-                                  ),
-                                ),
-                                if (hasIntakes)
-                                  Positioned(
-                                    top: 2,
-                                    right: 2,
-                                    child: Container(
-                                      padding: EdgeInsets.all(isWideScreen ? 3 : 2),
-                                      decoration: BoxDecoration(
-                                        color: isSelected
-                                            ? Theme.of(context).colorScheme.onPrimary
-                                            : Theme.of(context).colorScheme.primary,
-                                        borderRadius: BorderRadius.circular(8),
-                                      ),
-                                      constraints: BoxConstraints(
-                                        minWidth: isWideScreen ? 18 : 16,
-                                        minHeight: isWideScreen ? 18 : 16,
-                                      ),
-                                      child: Text(
-                                        '$intakeCount',
-                                        style: TextStyle(
-                                          color: isSelected
-                                              ? Theme.of(context).colorScheme.primary
-                                              : Theme.of(context).colorScheme.onPrimary,
-                                          fontSize: isWideScreen ? 11 : 10,
-                                          fontWeight: FontWeight.bold,
-                                        ),
-                                        textAlign: TextAlign.center,
-                                      ),
-                                    ),
-                                  ),
-                              ],
-                            ),
-                          ),
-                        );
-                      },
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          ),
-        );
-      },
-    );
-  }
-
-  Widget _buildSelectedDayDetails(Map<String, List<Map<String, dynamic>>> groupedIntakes) {
-    return LayoutBuilder(
-      builder: (context, constraints) {
-        final isWideScreen = constraints.maxWidth > 600;
-
-        if (_selectedDay == null) {
-          return Card(
-            child: Center(
-              child: Padding(
-                padding: const EdgeInsets.all(32),
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    Icon(
-                      Icons.touch_app,
-                      size: isWideScreen ? 64 : 48,
-                      color: Theme.of(context).colorScheme.onSurfaceVariant,
-                    ),
-                    const SizedBox(height: 16),
-                    Text(
-                      'Tap a date on the calendar to see details',
-                      style: TextStyle(
-                        fontSize: isWideScreen ? 18 : 16,
-                        color: Theme.of(context).colorScheme.onSurfaceVariant,
-                      ),
-                      textAlign: TextAlign.center,
-                    ),
-                  ],
-                ),
-              ),
-            ),
-          );
-        }
-
-        final dateKey = DateFormat('yyyy-MM-dd').format(_selectedDay!);
-        final dayIntakes = groupedIntakes[dateKey] ?? [];
-
-        if (dayIntakes.isEmpty) {
-          return Card(
-            child: Center(
-              child: Padding(
-                padding: const EdgeInsets.all(32),
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    Icon(
-                      Icons.event_available,
-                      size: isWideScreen ? 64 : 48,
-                      color: Theme.of(context).colorScheme.onSurfaceVariant,
-                    ),
-                    const SizedBox(height: 16),
-                    Text(
-                      'No supplements taken on ${DateFormat('MMM d, yyyy').format(_selectedDay!)}',
-                      style: TextStyle(
-                        fontSize: isWideScreen ? 18 : 16,
-                        color: Theme.of(context).colorScheme.onSurfaceVariant,
-                      ),
-                      textAlign: TextAlign.center,
-                    ),
-                  ],
-                ),
-              ),
-            ),
-          );
-        }
-
-        return Card(
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Container(
-                width: double.infinity,
-                padding: EdgeInsets.all(isWideScreen ? 20 : 16),
-                decoration: BoxDecoration(
-                  color: Theme.of(context).colorScheme.primaryContainer,
-                  borderRadius: const BorderRadius.only(
-                    topLeft: Radius.circular(12),
-                    topRight: Radius.circular(12),
-                  ),
-                ),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      DateFormat('EEEE, MMM d, yyyy').format(_selectedDay!),
-                      style: TextStyle(
-                        fontSize: isWideScreen ? 20 : 18,
-                        fontWeight: FontWeight.bold,
-                        color: Theme.of(context).colorScheme.onPrimaryContainer,
-                      ),
-                    ),
-                    const SizedBox(height: 4),
-                    Text(
-                      '${dayIntakes.length} supplement${dayIntakes.length != 1 ? 's' : ''} taken',
-                      style: TextStyle(
-                        fontSize: isWideScreen ? 16 : 14,
-                        color: Theme.of(context).colorScheme.onPrimaryContainer.withOpacity(0.8),
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-              Padding(
-                padding: EdgeInsets.all(isWideScreen ? 20 : 16),
-                child: Builder(
-                  builder: (context) {
-                    final settingsProvider = Provider.of<SettingsProvider>(context, listen: false);
-                    // Sort once per render
-                    final sortedDayIntakes = List<Map<String, dynamic>>.from(dayIntakes)
-                      ..sort((a, b) => DateTime.parse(a['takenAt']).compareTo(DateTime.parse(b['takenAt'])));
-                    // Helpers
-                    String timeCategory(DateTime dt) {
-                      final h = dt.hour;
-                      if (h >= settingsProvider.morningStart && h <= settingsProvider.morningEnd) return 'morning';
-                      if (h >= settingsProvider.afternoonStart && h <= settingsProvider.afternoonEnd) return 'afternoon';
-                      if (h >= settingsProvider.eveningStart && h <= settingsProvider.eveningEnd) return 'evening';
-                      final ns = settingsProvider.nightStart;
-                      final ne = settingsProvider.nightEnd;
-                      final inNight = ns <= ne ? (h >= ns && h <= ne) : (h >= ns || h <= ne);
-                      return inNight ? 'night' : 'anytime';
-                    }
-                    String? sectionRange(String cat) {
-                      switch (cat) {
-                        case 'morning':
-                          return settingsProvider.morningRange;
-                        case 'afternoon':
-                          return settingsProvider.afternoonRange;
-                        case 'evening':
-                          return settingsProvider.eveningRange;
-                        case 'night':
-                          return settingsProvider.nightRange;
-                        default:
-                          return null;
-                      }
-                    }
-                    Widget headerFor(String cat) {
-                      late final IconData icon;
-                      late final Color color;
-                      late final String title;
-                      switch (cat) {
-                        case 'morning':
-                          icon = Icons.wb_sunny;
-                          color = Colors.orange;
-                          title = 'Morning';
-                          break;
-                        case 'afternoon':
-                          icon = Icons.light_mode;
-                          color = Colors.blue;
-                          title = 'Afternoon';
-                          break;
-                        case 'evening':
-                          icon = Icons.nightlight_round;
-                          color = Colors.indigo;
-                          title = 'Evening';
-                          break;
-                        case 'night':
-                          icon = Icons.bedtime;
-                          color = Colors.purple;
-                          title = 'Night';
-                          break;
-                        default:
-                          icon = Icons.schedule;
-                          color = Colors.grey;
-                          title = 'Anytime';
-                      }
-                      final range = sectionRange(cat);
-                      return Container(
-                        margin: const EdgeInsets.only(bottom: 12),
-                        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-                        decoration: BoxDecoration(
-                          color: color.withOpacity(0.1),
-                          borderRadius: BorderRadius.circular(12),
-                          border: Border.all(
-                            color: color.withOpacity(0.3),
-                            width: 1,
-                          ),
-                        ),
-                        child: Row(
-                          children: [
-                            Container(
-                              padding: const EdgeInsets.all(8),
-                              decoration: BoxDecoration(
-                                color: color.withOpacity(0.2),
-                                shape: BoxShape.circle,
-                              ),
-                              child: Icon(
-                                icon,
-                                size: 20,
-                                color: color,
-                              ),
-                            ),
-                            const SizedBox(width: 12),
-                            Expanded(
-                              child: Column(
-                                crossAxisAlignment: CrossAxisAlignment.start,
-                                children: [
-                                  Text(
-                                    title,
-                                    style: TextStyle(
-                                      fontSize: 18,
-                                      fontWeight: FontWeight.bold,
-                                      color: color,
-                                    ),
-                                  ),
-                                  if (range != null) ...[
-                                    Text(
-                                      '($range)',
-                                      style: TextStyle(
-                                        fontSize: 12,
-                                        fontWeight: FontWeight.w500,
-                                        color: color.withOpacity(0.8),
-                                      ),
-                                    ),
-                                  ],
-                                ],
-                              ),
-                            ),
-                          ],
-                        ),
-                      );
-                    }
-                    // Build a non-scrollable list so the card auto-expands to fit content
-                    final List<Widget> children = [];
-                    for (int index = 0; index < sortedDayIntakes.length; index++) {
-                      final intake = sortedDayIntakes[index];
-                      final takenAt = DateTime.parse(intake['takenAt']);
-                      final units = (intake['unitsTaken'] as num?)?.toDouble() ?? 1.0;
-                      final currentCategory = timeCategory(takenAt);
-                      final needsHeader = index == 0
-                          ? true
-                          : currentCategory != timeCategory(DateTime.parse(sortedDayIntakes[index - 1]['takenAt']));
-                      if (needsHeader) {
-                        children.add(headerFor(currentCategory));
-                      }
-                      children.add(
-                        Card(
-                          margin: const EdgeInsets.only(bottom: 12),
-                          elevation: 2,
-                          child: Padding(
-                            padding: EdgeInsets.all(isWideScreen ? 16 : 12),
-                            child: Row(
-                              children: [
-                                CircleAvatar(
-                                  backgroundColor: Theme.of(context).colorScheme.primary,
-                                  radius: isWideScreen ? 24 : 20,
-                                  child: Icon(
-                                    Icons.medication,
-                                    color: Theme.of(context).colorScheme.onPrimary,
-                                    size: isWideScreen ? 24 : 20,
-                                  ),
-                                ),
-                                SizedBox(width: isWideScreen ? 16 : 12),
-                                Expanded(
-                                  child: Column(
-                                    crossAxisAlignment: CrossAxisAlignment.start,
-                                    children: [
-                                      Text(
-                                        intake['supplementName'],
-                                        style: TextStyle(
-                                          fontWeight: FontWeight.w600,
-                                          fontSize: isWideScreen ? 16 : 14,
-                                        ),
-                                      ),
-                                      const SizedBox(height: 4),
-                                      Text(
-                                        '${units.toStringAsFixed(units % 1 == 0 ? 0 : 1)} ${intake['supplementUnitType'] ?? 'units'} at ${DateFormat('HH:mm').format(takenAt)}',
-                                        style: TextStyle(
-                                          color: Theme.of(context).colorScheme.primary,
-                                          fontWeight: FontWeight.w500,
-                                          fontSize: isWideScreen ? 14 : 12,
-                                        ),
-                                      ),
-                                      if (intake['notes'] != null && intake['notes'].toString().isNotEmpty) ...[
-                                        const SizedBox(height: 4),
-                                        Text(
-                                          intake['notes'],
-                                          style: TextStyle(
-                                            fontSize: isWideScreen ? 13 : 12,
-                                            fontStyle: FontStyle.italic,
-                                            color: Theme.of(context).colorScheme.onSurfaceVariant,
-                                          ),
-                                        ),
-                                      ],
-                                    ],
-                                  ),
-                                ),
-                                IconButton(
-                                  icon: Icon(
-                                    Icons.delete_outline,
-                                    color: Colors.red.shade400,
-                                    size: isWideScreen ? 24 : 20,
-                                  ),
-                                  onPressed: () => _deleteIntake(context, intake['id'], intake['supplementName']),
-                                  tooltip: 'Delete intake',
-                                ),
-                              ],
-                            ),
-                          ),
-                        ),
-                      );
-                    }
-                    return Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: children,
-                    );
-                  },
-                ),
-              ),
-            ],
-          ),
-        );
-      },
-    );
-  }
 
   @override
   void dispose() {

lib/screens/home_screen.dart

@@ -6,6 +6,7 @@ import 'add_supplement_screen.dart';
 import 'history_screen.dart';
 import 'settings_screen.dart';
 import 'supplements_list_screen.dart';
+import 'today_schedule_screen.dart';
 
 class HomeScreen extends StatefulWidget {
   const HomeScreen({super.key});
@@ -18,6 +19,7 @@ class _HomeScreenState extends State<HomeScreen> {
   int _currentIndex = 0;
 
   final List<Widget> _screens = [
+    const TodayScheduleScreen(),
     const SupplementsListScreen(),
     const HistoryScreen(),
     const SettingsScreen(),
@@ -45,11 +47,18 @@ class _HomeScreenState extends State<HomeScreen> {
           });
         },
         type: BottomNavigationBarType.fixed,
+        selectedItemColor: Theme.of(context).colorScheme.primary,
+        unselectedItemColor: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.4),
+        backgroundColor: Theme.of(context).colorScheme.surface,
         items: const [
           BottomNavigationBarItem(
-            icon: Icon(Icons.medication),
+            icon: Icon(Icons.medication_liquid_sharp),
             label: 'Supplements',
           ),
+          BottomNavigationBarItem(
+            icon: Icon(Icons.edit_calendar_rounded),
+            label: 'Edit',
+          ),
           BottomNavigationBarItem(
             icon: Icon(Icons.history),
             label: 'History',
@@ -60,7 +69,7 @@ class _HomeScreenState extends State<HomeScreen> {
           ),
         ],
       ),
-      floatingActionButton: _currentIndex == 0
+      floatingActionButton: _currentIndex == 1
           ? FloatingActionButton(
               onPressed: () async {
                 await Navigator.of(context).push(

lib/screens/settings_screen.dart

@@ -67,8 +67,6 @@ class SettingsScreen extends StatelessWidget {
                       ),
                       const SizedBox(height: 16),
                       RadioListTile<ThemeOption>(
-                        title: const Text('Follow System'),
-                        subtitle: const Text('Use system theme setting'),
                         value: ThemeOption.system,
                         groupValue: settingsProvider.themeOption,
                         onChanged: (value) {
@@ -76,10 +74,10 @@ class SettingsScreen extends StatelessWidget {
                             settingsProvider.setThemeOption(value);
                           }
                         },
+                        title: const Text('Follow System'),
+                        subtitle: const Text('Use system theme setting'),
                       ),
                       RadioListTile<ThemeOption>(
-                        title: const Text('Light Theme'),
-                        subtitle: const Text('Always use light theme'),
                         value: ThemeOption.light,
                         groupValue: settingsProvider.themeOption,
                         onChanged: (value) {
@@ -87,10 +85,10 @@ class SettingsScreen extends StatelessWidget {
                             settingsProvider.setThemeOption(value);
                           }
                         },
+                        title: const Text('Light Theme'),
+                        subtitle: const Text('Always use light theme'),
                       ),
                       RadioListTile<ThemeOption>(
-                        title: const Text('Dark Theme'),
-                        subtitle: const Text('Always use dark theme'),
                         value: ThemeOption.dark,
                         groupValue: settingsProvider.themeOption,
                         onChanged: (value) {
@@ -98,6 +96,8 @@ class SettingsScreen extends StatelessWidget {
                             settingsProvider.setThemeOption(value);
                           }
                         },
+                        title: const Text('Dark Theme'),
+                        subtitle: const Text('Always use dark theme'),
                       ),
                     ],
                   ),
@@ -261,9 +261,9 @@ class _TimeRangeSelector extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.all(12),
       decoration: BoxDecoration(
-        color: color.withOpacity(0.1),
+        color: color.withValues(alpha: 0.1),
         borderRadius: BorderRadius.circular(8),
-        border: Border.all(color: color.withOpacity(0.3)),
+        border: Border.all(color: color.withValues(alpha: 0.3)),
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,

lib/screens/supplements_list_screen.dart

@@ -18,7 +18,7 @@ class SupplementsListScreen extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: const Text('My Supplements'),
+        title: const Text('Edit Supplements'),
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
         actions: [
           Consumer<SimpleSyncProvider>(
@@ -100,19 +100,18 @@ class SupplementsListScreen extends StatelessWidget {
               await provider.loadSupplements();
               await provider.refreshDailyStatus();
             },
-            child: _buildGroupedSupplementsList(context, provider.supplements, settingsProvider),
+            child: _buildGroupedSupplementsList(context, provider.supplements, settingsProvider, provider),
           );
         },
       ),
     );
   }
 
-  Widget _buildGroupedSupplementsList(BuildContext context, List<Supplement> supplements, SettingsProvider settingsProvider) {
-    final provider = Provider.of<SupplementProvider>(context, listen: false);
+  Widget _buildGroupedSupplementsList(BuildContext context, List<Supplement> supplements, SettingsProvider settingsProvider, SupplementProvider provider) {
     final groupedSupplements = _groupSupplementsByTimeOfDay(supplements, settingsProvider);
 
     return ListView(
-      padding: const EdgeInsets.all(16),
+      padding: const EdgeInsets.fromLTRB(16, 16, 16, 80),
       children: [
         if (groupedSupplements['morning']!.isNotEmpty) ...[
           _buildSectionHeader('Morning (${settingsProvider.morningRange})', Icons.wb_sunny, Colors.orange, groupedSupplements['morning']!.length),
@@ -124,6 +123,7 @@ class SupplementsListScreen extends StatelessWidget {
               onDelete: () => _deleteSupplement(context, supplement),
               onArchive: () => _archiveSupplement(context, supplement),
               onDuplicate: () => context.read<SupplementProvider>().duplicateSupplement(supplement.id!),
+              showCompletionStatus: false,
             ),
           ),
           const SizedBox(height: 16),
@@ -139,6 +139,7 @@ class SupplementsListScreen extends StatelessWidget {
               onDelete: () => _deleteSupplement(context, supplement),
               onArchive: () => _archiveSupplement(context, supplement),
               onDuplicate: () => context.read<SupplementProvider>().duplicateSupplement(supplement.id!),
+              showCompletionStatus: false,
             ),
           ),
           const SizedBox(height: 16),
@@ -154,6 +155,7 @@ class SupplementsListScreen extends StatelessWidget {
               onDelete: () => _deleteSupplement(context, supplement),
               onArchive: () => _archiveSupplement(context, supplement),
               onDuplicate: () => context.read<SupplementProvider>().duplicateSupplement(supplement.id!),
+              showCompletionStatus: false,
             ),
           ),
           const SizedBox(height: 16),
@@ -169,6 +171,7 @@ class SupplementsListScreen extends StatelessWidget {
               onDelete: () => _deleteSupplement(context, supplement),
               onArchive: () => _archiveSupplement(context, supplement),
               onDuplicate: () => context.read<SupplementProvider>().duplicateSupplement(supplement.id!),
+              showCompletionStatus: false,
             ),
           ),
           const SizedBox(height: 16),
@@ -184,9 +187,11 @@ class SupplementsListScreen extends StatelessWidget {
               onDelete: () => _deleteSupplement(context, supplement),
               onArchive: () => _archiveSupplement(context, supplement),
               onDuplicate: () => context.read<SupplementProvider>().duplicateSupplement(supplement.id!),
+              showCompletionStatus: false,
             ),
           ),
         ],
+
       ],
     );
   }
@@ -196,10 +201,10 @@ class SupplementsListScreen extends StatelessWidget {
       margin: const EdgeInsets.only(bottom: 12),
       padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
       decoration: BoxDecoration(
-        color: color.withOpacity(0.1),
+        color: color.withValues(alpha: 0.1),
         borderRadius: BorderRadius.circular(12),
         border: Border.all(
-          color: color.withOpacity(0.3),
+          color: color.withValues(alpha: 0.3),
           width: 1,
         ),
       ),
@@ -208,7 +213,7 @@ class SupplementsListScreen extends StatelessWidget {
           Container(
             padding: const EdgeInsets.all(8),
             decoration: BoxDecoration(
-              color: color.withOpacity(0.2),
+              color: color.withValues(alpha: 0.2),
               shape: BoxShape.circle,
             ),
             child: Icon(
@@ -236,7 +241,7 @@ class SupplementsListScreen extends StatelessWidget {
                     style: TextStyle(
                       fontSize: 12,
                       fontWeight: FontWeight.w500,
-                      color: color.withOpacity(0.8),
+                      color: color.withValues(alpha: 0.8),
                     ),
                   ),
                 ],
@@ -246,7 +251,7 @@ class SupplementsListScreen extends StatelessWidget {
           Container(
             padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
             decoration: BoxDecoration(
-              color: color.withOpacity(0.15),
+              color: color.withValues(alpha: 0.15),
               borderRadius: BorderRadius.circular(12),
             ),
             child: Text(
@@ -280,267 +285,6 @@ class SupplementsListScreen extends StatelessWidget {
     return grouped;
   }
 
-  void _showTakeDialog(BuildContext context, Supplement supplement) {
-    final unitsController = TextEditingController(text: supplement.numberOfUnits.toString());
-    final notesController = TextEditingController();
-    DateTime selectedDateTime = DateTime.now();
-    bool useCustomTime = false;
-
-    showDialog(
-      context: context,
-      builder: (context) => StatefulBuilder(
-        builder: (context, setState) {
-          return AlertDialog(
-            title: Text('Take ${supplement.name}'),
-            content: Column(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Row(
-                  children: [
-                    Expanded(
-                      child: TextField(
-                        controller: unitsController,
-                        keyboardType: const TextInputType.numberWithOptions(decimal: true),
-                        decoration: InputDecoration(
-                          labelText: 'Number of ${supplement.unitType}',
-                          border: const OutlineInputBorder(),
-                          suffixText: supplement.unitType,
-                        ),
-                        onChanged: (value) => setState(() {}),
-                      ),
-                    ),
-                  ],
-                ),
-                const SizedBox(height: 8),
-                Container(
-                  padding: const EdgeInsets.all(8),
-                  decoration: BoxDecoration(
-                    color: Theme.of(context).colorScheme.surfaceVariant,
-                    borderRadius: BorderRadius.circular(4),
-                  ),
-                  child: Row(
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    children: [
-                      Text(
-                        'Total dosage:',
-                        style: TextStyle(
-                          fontSize: 12,
-                          color: Theme.of(context).colorScheme.onSurfaceVariant,
-                        ),
-                      ),
-                      Text(
-                        supplement.ingredientsDisplay,
-                        style: TextStyle(
-                          fontSize: 12,
-                          fontWeight: FontWeight.w600,
-                          color: Theme.of(context).colorScheme.onSurface,
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-                const SizedBox(height: 16),
-
-                // Time selection section
-                Container(
-                  padding: const EdgeInsets.all(12),
-                  decoration: BoxDecoration(
-                    color: Theme.of(context).colorScheme.primaryContainer.withOpacity(0.3),
-                    borderRadius: BorderRadius.circular(8),
-                    border: Border.all(
-                      color: Theme.of(context).colorScheme.primary.withOpacity(0.3),
-                    ),
-                  ),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Row(
-                        children: [
-                          Icon(
-                            Icons.access_time,
-                            size: 16,
-                            color: Theme.of(context).colorScheme.primary,
-                          ),
-                          const SizedBox(width: 6),
-                          Text(
-                            'When did you take it?',
-                            style: TextStyle(
-                              fontSize: 12,
-                              fontWeight: FontWeight.w600,
-                              color: Theme.of(context).colorScheme.primary,
-                            ),
-                          ),
-                        ],
-                      ),
-                      const SizedBox(height: 8),
-                      Row(
-                        children: [
-                          Expanded(
-                            child: RadioListTile<bool>(
-                              dense: true,
-                              contentPadding: EdgeInsets.zero,
-                              title: const Text('Just now', style: TextStyle(fontSize: 12)),
-                              value: false,
-                              groupValue: useCustomTime,
-                              onChanged: (value) => setState(() => useCustomTime = value!),
-                            ),
-                          ),
-                          Expanded(
-                            child: RadioListTile<bool>(
-                              dense: true,
-                              contentPadding: EdgeInsets.zero,
-                              title: const Text('Custom time', style: TextStyle(fontSize: 12)),
-                              value: true,
-                              groupValue: useCustomTime,
-                              onChanged: (value) => setState(() => useCustomTime = value!),
-                            ),
-                          ),
-                        ],
-                      ),
-                      if (useCustomTime) ...[
-                        const SizedBox(height: 8),
-                        Container(
-                          width: double.infinity,
-                          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-                          decoration: BoxDecoration(
-                            color: Theme.of(context).colorScheme.surface,
-                            borderRadius: BorderRadius.circular(6),
-                            border: Border.all(
-                              color: Theme.of(context).colorScheme.outline.withOpacity(0.5),
-                            ),
-                          ),
-                          child: Column(
-                            children: [
-                              // Date picker
-                              Row(
-                                children: [
-                                  Icon(
-                                    Icons.calendar_today,
-                                    size: 14,
-                                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                                  ),
-                                  const SizedBox(width: 8),
-                                  Expanded(
-                                    child: Text(
-                                      'Date: ${selectedDateTime.day}/${selectedDateTime.month}/${selectedDateTime.year}',
-                                      style: const TextStyle(fontSize: 12),
-                                    ),
-                                  ),
-                                  TextButton(
-                                    onPressed: () async {
-                                      final date = await showDatePicker(
-                                        context: context,
-                                        initialDate: selectedDateTime,
-                                        firstDate: DateTime.now().subtract(const Duration(days: 7)),
-                                        lastDate: DateTime.now(),
-                                      );
-                                      if (date != null) {
-                                        setState(() {
-                                          selectedDateTime = DateTime(
-                                            date.year,
-                                            date.month,
-                                            date.day,
-                                            selectedDateTime.hour,
-                                            selectedDateTime.minute,
-                                          );
-                                        });
-                                      }
-                                    },
-                                    child: const Text('Change', style: TextStyle(fontSize: 10)),
-                                  ),
-                                ],
-                              ),
-                              const SizedBox(height: 4),
-                              // Time picker
-                              Row(
-                                children: [
-                                  Icon(
-                                    Icons.access_time,
-                                    size: 14,
-                                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                                  ),
-                                  const SizedBox(width: 8),
-                                  Expanded(
-                                    child: Text(
-                                      'Time: ${selectedDateTime.hour.toString().padLeft(2, '0')}:${selectedDateTime.minute.toString().padLeft(2, '0')}',
-                                      style: const TextStyle(fontSize: 12),
-                                    ),
-                                  ),
-                                  TextButton(
-                                    onPressed: () async {
-                                      final time = await showTimePicker(
-                                        context: context,
-                                        initialTime: TimeOfDay.fromDateTime(selectedDateTime),
-                                      );
-                                      if (time != null) {
-                                        setState(() {
-                                          selectedDateTime = DateTime(
-                                            selectedDateTime.year,
-                                            selectedDateTime.month,
-                                            selectedDateTime.day,
-                                            time.hour,
-                                            time.minute,
-                                          );
-                                        });
-                                      }
-                                    },
-                                    child: const Text('Change', style: TextStyle(fontSize: 10)),
-                                  ),
-                                ],
-                              ),
-                            ],
-                          ),
-                        ),
-                      ],
-                    ],
-                  ),
-                ),
-                const SizedBox(height: 16),
-                TextField(
-                  controller: notesController,
-                  decoration: const InputDecoration(
-                    labelText: 'Notes (optional)',
-                    border: OutlineInputBorder(),
-                  ),
-                  maxLines: 2,
-                ),
-              ],
-            ),
-            actions: [
-              TextButton(
-                onPressed: () => Navigator.of(context).pop(),
-                child: const Text('Cancel'),
-              ),
-              ElevatedButton(
-                onPressed: () {
-                  final unitsTaken = double.tryParse(unitsController.text) ?? supplement.numberOfUnits.toDouble();
-                  // For now, we'll record 0 as total dosage since we're transitioning to ingredients
-                  // This will be properly implemented when we add the full ingredient tracking
-                  final totalDosageTaken = 0.0;
-                  context.read<SupplementProvider>().recordIntake(
-                        supplement.id!,
-                        totalDosageTaken,
-                        unitsTaken: unitsTaken,
-                        notes: notesController.text.isNotEmpty ? notesController.text : null,
-                        takenAt: useCustomTime ? selectedDateTime : null,
-                      );
-                  Navigator.of(context).pop();
-                  ScaffoldMessenger.of(context).showSnackBar(
-                    SnackBar(
-                      content: Text('${supplement.name} recorded!'),
-                      backgroundColor: Colors.green,
-                    ),
-                  );
-                },
-                child: const Text('Record'),
-              ),
-            ],
-          );
-        },
-      ),
-    );
-  }
-
   void _editSupplement(BuildContext context, Supplement supplement) {
     Navigator.of(context).push(
       MaterialPageRoute(

lib/screens/today_schedule_screen.dart

@@ -0,0 +1,456 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:popover/popover.dart';
+
+import '../models/supplement.dart';
+import '../providers/settings_provider.dart';
+import '../providers/simple_sync_provider.dart';
+import '../providers/supplement_provider.dart';
+import '../services/database_sync_service.dart';
+import '../widgets/dialogs/take_supplement_dialog.dart';
+
+class TodayScheduleScreen extends StatelessWidget {
+  const TodayScheduleScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text("My Supplements"),
+        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        actions: [
+          Consumer<SimpleSyncProvider>(
+            builder: (context, syncProvider, child) {
+              if (!syncProvider.isConfigured) {
+                return const SizedBox.shrink();
+              }
+
+              return IconButton(
+                icon: syncProvider.isSyncing
+                    ? const SizedBox(
+                        width: 20,
+                        height: 20,
+                        child: CircularProgressIndicator(strokeWidth: 2),
+                      )
+                    : syncProvider.status == SyncStatus.completed &&
+                      syncProvider.lastSyncTime != null &&
+                      DateTime.now().difference(syncProvider.lastSyncTime!).inSeconds < 5
+                        ? const Icon(Icons.check, color: Colors.green)
+                        : const Icon(Icons.sync),
+                onPressed: syncProvider.isSyncing ? null : () {
+                  syncProvider.syncDatabase();
+                },
+                tooltip: syncProvider.isSyncing ? 'Syncing...' : 'Force Sync',
+              );
+            },
+          ),
+        ],
+      ),
+      body: Consumer2<SupplementProvider, SettingsProvider>(
+        builder: (context, provider, settingsProvider, child) {
+          if (provider.isLoading) {
+            return const Center(child: CircularProgressIndicator());
+          }
+
+          if (provider.todayIntakes.isEmpty && provider.supplements.isEmpty) {
+            return Center(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Icon(
+                    Icons.schedule,
+                    size: 64,
+                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                  ),
+                  const SizedBox(height: 16),
+                  Text(
+                    'No schedule for today',
+                    style: TextStyle(
+                      fontSize: 18,
+                      color: Theme.of(context).colorScheme.onSurfaceVariant,
+                    ),
+                  ),
+                  const SizedBox(height: 8),
+                  Text(
+                    'Add supplements with reminder times to see your schedule',
+                    style: TextStyle(
+                      color: Theme.of(context).colorScheme.onSurfaceVariant,
+                    ),
+                  ),
+                ],
+              ),
+            );
+          }
+
+          return RefreshIndicator(
+            onRefresh: () async {
+              await provider.loadSupplements();
+              await provider.refreshDailyStatus();
+            },
+            child: _buildTimelineView(context, provider, settingsProvider),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildTimelineView(BuildContext context, SupplementProvider provider, SettingsProvider settingsProvider) {
+    final scheduledItems = _getScheduledItems(provider.supplements, provider.todayIntakes);
+    final groupedItems = _groupScheduledItemsByTimeOfDay(scheduledItems);
+
+    return ListView(
+      padding: const EdgeInsets.all(16),
+      children: [
+        if (groupedItems['morning']!.isNotEmpty) ...[
+          _buildTimeSectionHeader('Morning', Icons.wb_sunny, Colors.orange),
+          ...groupedItems['morning']!.map((item) => _buildScheduledItem(context, item)),
+          const SizedBox(height: 12),
+        ],
+
+        if (groupedItems['afternoon']!.isNotEmpty) ...[
+          _buildTimeSectionHeader('Afternoon', Icons.light_mode, Colors.blue),
+          ...groupedItems['afternoon']!.map((item) => _buildScheduledItem(context, item)),
+          const SizedBox(height: 12),
+        ],
+
+        if (groupedItems['evening']!.isNotEmpty) ...[
+          _buildTimeSectionHeader('Evening', Icons.nightlight_round, Colors.indigo),
+          ...groupedItems['evening']!.map((item) => _buildScheduledItem(context, item)),
+          const SizedBox(height: 12),
+        ],
+
+        if (groupedItems['night']!.isNotEmpty) ...[
+          _buildTimeSectionHeader('Night', Icons.bedtime, Colors.purple),
+          ...groupedItems['night']!.map((item) => _buildScheduledItem(context, item)),
+        ],
+      ],
+    );
+  }
+
+  Widget _buildTimeSectionHeader(String title, IconData icon, Color color) {
+    return Container(
+      margin: const EdgeInsets.only(bottom: 8, top: 8),
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+      decoration: BoxDecoration(
+        color: color.withValues(alpha: 0.1),
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: Row(
+        children: [
+          Icon(icon, size: 16, color: color),
+          const SizedBox(width: 8),
+          Text(
+            title,
+            style: TextStyle(
+              fontSize: 14,
+              fontWeight: FontWeight.w600,
+              color: color,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildScheduledItem(BuildContext context, Map<String, dynamic> item) {
+    final time = item['time'] as String;
+    final supplement = item['supplement'] as Supplement;
+    final status = item['status'] as String;
+    final actualTime = item['actualTime'] as String?;
+
+    final isCompleted = status == 'on_time' || status == 'off_time';
+    final isOnTime = status == 'on_time';
+
+    return Builder(
+      builder: (context) => InkWell(
+        onTap: () {
+          showPopover(
+            context: context,
+            bodyBuilder: (context) => Container(
+              constraints: const BoxConstraints(maxWidth: 150),
+              decoration: BoxDecoration(
+                color: Theme.of(context).colorScheme.surface,
+                borderRadius: BorderRadius.circular(12),
+                border: Border.all(
+                  color: Theme.of(context).colorScheme.outline.withValues(alpha: 0.3),
+                  width: 1,
+                ),
+                boxShadow: [
+                  BoxShadow(
+                    color: Theme.of(context).colorScheme.shadow.withValues(alpha: 0.1),
+                    blurRadius: 8,
+                    offset: const Offset(0, 2),
+                  ),
+                ],
+              ),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  if (isCompleted)
+                    _buildPopoverItem(
+                      context: context,
+                      icon: Icons.undo,
+                      label: 'Undo Last Taken',
+                      onTap: () async {
+                        Navigator.of(context).pop();
+                        final provider = context.read<SupplementProvider>();
+                        final mostRecentIntake = provider.getMostRecentIntake(supplement.id!);
+                        if (mostRecentIntake != null) {
+                          await provider.deleteIntake(mostRecentIntake['id']);
+                          // Refresh the schedule after undoing
+                          if (context.mounted) {
+                            provider.refreshDailyStatus();
+                          }
+                        }
+                      },
+                      color: Colors.orange,
+                    ),
+                  _buildPopoverItem(
+                    context: context,
+                    icon: isCompleted ? Icons.add_circle_outline : Icons.medication,
+                    label: isCompleted ? 'Take Again' : 'Take',
+                    onTap: () async {
+                      Navigator.of(context).pop();
+                      await showTakeSupplementDialog(context, supplement);
+                      // Refresh the schedule after taking
+                      if (context.mounted) {
+                        context.read<SupplementProvider>().refreshDailyStatus();
+                      }
+                    },
+                  ),
+                ],
+              ),
+            ),
+            direction: PopoverDirection.top,
+            width: 180,
+            height: null,
+            arrowHeight: 0,
+            arrowWidth: 0,
+            backgroundColor: Colors.transparent,
+            shadow: const [],
+          );
+        },
+        borderRadius: BorderRadius.circular(8),
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 150),
+          margin: const EdgeInsets.only(bottom: 6),
+          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+          decoration: BoxDecoration(
+            color: isCompleted
+                ? Theme.of(context).colorScheme.surface
+                : Theme.of(context).colorScheme.primary.withValues(alpha: 0.05),
+            borderRadius: BorderRadius.circular(8),
+            border: Border.all(
+              color: isCompleted
+                  ? Theme.of(context).colorScheme.outline.withValues(alpha: 0.3)
+                  : Theme.of(context).colorScheme.primary.withValues(alpha: 0.3),
+            ),
+          ),
+          child: Row(
+            children: [
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    time,
+                    style: TextStyle(
+                      fontSize: 12,
+                      fontWeight: FontWeight.w500,
+                      color: isCompleted
+                          ? Theme.of(context).colorScheme.onSurfaceVariant
+                          : Theme.of(context).colorScheme.primary,
+                    ),
+                  ),
+                  if (actualTime != null && actualTime != time)
+                    Text(
+                      'Taken: $actualTime',
+                      style: TextStyle(
+                        fontSize: 10,
+                        color: Theme.of(context).colorScheme.onSurfaceVariant.withValues(alpha: 0.6),
+                      ),
+                    ),
+                ],
+              ),
+              const SizedBox(width: 12),
+              Expanded(
+                child: Text(
+                  supplement.name,
+                  style: TextStyle(
+                    fontSize: 14,
+                    fontWeight: FontWeight.w500,
+                    color: isCompleted
+                        ? Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.7)
+                        : Theme.of(context).colorScheme.onSurface,
+                    decoration: isCompleted ? TextDecoration.lineThrough : null,
+                  ),
+                ),
+              ),
+              if (isCompleted)
+                Row(
+                  children: [
+                    if (!isOnTime)
+                      Icon(
+                        Icons.schedule,
+                        size: 14,
+                        color: Colors.orange,
+                      ),
+                    const SizedBox(width: 4),
+                    Icon(
+                      Icons.check_circle,
+                      size: 16,
+                      color: isOnTime ? Colors.green : Colors.orange,
+                    ),
+                  ],
+                )
+              else
+                Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+                  decoration: BoxDecoration(
+                    color: Theme.of(context).colorScheme.primary,
+                    borderRadius: BorderRadius.circular(12),
+                  ),
+                  child: Text(
+                    'Pending',
+                    style: TextStyle(
+                      fontSize: 10,
+                      color: Theme.of(context).colorScheme.onPrimary,
+                      fontWeight: FontWeight.w500,
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildPopoverItem({
+    required BuildContext context,
+    required IconData icon,
+    required String label,
+    required VoidCallback onTap,
+    Color? color,
+  }) {
+    return InkWell(
+      onTap: onTap,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+        child: Row(
+          children: [
+            Icon(
+              icon,
+              size: 18,
+              color: color ?? Theme.of(context).colorScheme.onSurface,
+            ),
+            const SizedBox(width: 12),
+            Text(
+              label,
+              style: TextStyle(
+                fontSize: 14,
+                color: color ?? Theme.of(context).colorScheme.onSurface,
+                fontWeight: FontWeight.w500,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  List<Map<String, dynamic>> _getScheduledItems(List<Supplement> supplements, List<Map<String, dynamic>> todayIntakes) {
+    final List<Map<String, dynamic>> scheduledItems = [];
+
+    for (final supplement in supplements) {
+      for (final reminderTime in supplement.reminderTimes) {
+        // Parse reminder time (format: "HH:MM")
+        final parts = reminderTime.split(':');
+        final hour = int.parse(parts[0]);
+        final minute = int.parse(parts[1]);
+
+        // Check if this reminder has been taken today
+        String status = 'pending';
+        String? actualTime;
+
+        for (final intake in todayIntakes) {
+          if (intake['supplement_id'] == supplement.id) {
+            final takenAt = DateTime.parse(intake['takenAt']);
+            final reminderDateTime = DateTime(
+              takenAt.year,
+              takenAt.month,
+              takenAt.day,
+              hour,
+              minute,
+            );
+
+            // Check if taken within 1 hour of reminder time
+            final timeDiff = (takenAt.difference(reminderDateTime)).inMinutes.abs();
+            if (timeDiff <= 60) {
+              status = 'on_time';
+              actualTime = '${takenAt.hour.toString().padLeft(2, '0')}:${takenAt.minute.toString().padLeft(2, '0')}';
+            } else {
+              status = 'off_time';
+              actualTime = '${takenAt.hour.toString().padLeft(2, '0')}:${takenAt.minute.toString().padLeft(2, '0')}';
+            }
+            break;
+          }
+        }
+
+        scheduledItems.add({
+          'time': reminderTime,
+          'supplement': supplement,
+          'status': status,
+          'actualTime': actualTime,
+        });
+      }
+    }
+
+    // Sort by time
+    scheduledItems.sort((a, b) {
+      final timeA = a['time'] as String;
+      final timeB = b['time'] as String;
+      return timeA.compareTo(timeB);
+    });
+
+    return scheduledItems;
+  }
+
+  Map<String, List<Map<String, dynamic>>> _groupScheduledItemsByTimeOfDay(List<Map<String, dynamic>> scheduledItems) {
+    final Map<String, List<Map<String, dynamic>>> grouped = {
+      'morning': <Map<String, dynamic>>[],
+      'afternoon': <Map<String, dynamic>>[],
+      'evening': <Map<String, dynamic>>[],
+      'night': <Map<String, dynamic>>[],
+    };
+
+    for (final item in scheduledItems) {
+      final time = item['time'] as String;
+      final parts = time.split(':');
+      final hour = int.parse(parts[0]);
+
+      String category;
+      if (hour >= 6 && hour < 12) {
+        category = 'morning';
+      } else if (hour >= 12 && hour < 18) {
+        category = 'afternoon';
+      } else if (hour >= 18 && hour < 22) {
+        category = 'evening';
+      } else {
+        category = 'night';
+      }
+
+      grouped[category]!.add(item);
+    }
+
+    // Sort items by time within each category
+    for (final category in grouped.keys) {
+      grouped[category]!.sort((a, b) {
+        final timeA = a['time'] as String;
+        final timeB = b['time'] as String;
+        return timeA.compareTo(timeB);
+      });
+    }
+
+    return grouped;
+  }
+}

lib/services/auto_sync_service.dart

@@ -232,7 +232,7 @@ class AutoSyncService {
     if (_consecutiveFailures >= _autoDisableThreshold) {
       _autoDisabledDueToErrors = true;
       if (kDebugMode) {
-        printLog('AutoSyncService: Auto-sync disabled due to ${_consecutiveFailures} consecutive failures');
+        printLog('AutoSyncService: Auto-sync disabled due to $_consecutiveFailures consecutive failures');
       }
       
       // For configuration errors, disable immediately

lib/services/notification_router.dart

@@ -93,6 +93,7 @@ class NotificationRouter {
     }
 
     final context = _navigatorKey!.currentContext!;
+    if (!context.mounted) return;
     final provider = context.read<SupplementProvider>();
 
     if (payload == null) {
@@ -113,6 +114,7 @@ class NotificationRouter {
         if (s == null) {
           // Attempt reload once
           await provider.loadSupplements();
+          if (!context.mounted) return;
           try {
             s = provider.supplements.firstWhere((el) => el.id == id);
           } catch (_) {
@@ -124,6 +126,7 @@ class NotificationRouter {
           // Ensure we close any existing dialog first
           _popAnyDialog(context);
           await showTakeSupplementDialog(context, s, hideTime: false);
+          if (!context.mounted) return;
         } else {
           printLog('⚠️ Supplement id=$id not found for single-take routing');
           _showSnack(context, 'Supplement not found');
@@ -145,6 +148,7 @@ class NotificationRouter {
 
         _popAnyDialog(context);
         await showBulkTakeDialog(context, list);
+        if (!context.mounted) return;
       }
     } else {
       printLog('⚠️ Unknown payload type: $type');
@@ -158,8 +162,9 @@ class NotificationRouter {
     }
 
     // Try to wait for providers to be ready to build rich content.
-    final ready = await _waitUntilReady(timeout: const Duration(seconds: 5));
     BuildContext? ctx = _navigatorKey?.currentContext;
+    final ready = await _waitUntilReady(timeout: const Duration(seconds: 5));
+    if (ctx != null && !ctx.mounted) ctx = null;
 
     SupplementProvider? provider;
     if (ready && ctx != null) {
@@ -262,6 +267,7 @@ class NotificationRouter {
       final key = _navigatorKey;
       final ctx = key?.currentContext;
       if (ctx != null) {
+        if (!ctx.mounted) continue;
         try {
           final provider = Provider.of<SupplementProvider>(ctx, listen: false);
           if (!provider.isLoading) {
@@ -283,8 +289,10 @@ class NotificationRouter {
   }
 
   void _showSnack(BuildContext context, String message) {
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(content: Text(message)),
-    );
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(content: Text(message)),
+      );
+    });
   }
 }

lib/services/simple_notification_service.dart

@@ -187,7 +187,7 @@ class SimpleNotificationService {
         final units = s.numberOfUnits;
         final unitType = s.unitType;
         final perUnit = s.ingredientsPerUnit;
-        return '${s.name} — $units $unitType (${perUnit})';
+        return '${s.name} — $units $unitType ($perUnit)';
       }).toList();
       final body = bodyLines.join('\n');
 
@@ -275,7 +275,7 @@ class SimpleNotificationService {
           createdAtEpochMs: createdAtMs,
           title: title,
           payload: payloadStr,
-          singleId: isSingle ? items.first.id as int? : null,
+          singleId: isSingle ? items.first.id : null,
           timeKey: isSingle ? null : timeKey,
         ),
       );

lib/widgets/dialogs/bulk_take_dialog.dart

@@ -51,10 +51,10 @@ Future<void> showBulkTakeDialog(
                           return Container(
                             padding: const EdgeInsets.all(12),
                             decoration: BoxDecoration(
-                              color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.5),
+                              color: Theme.of(context).colorScheme.surfaceContainerHighest.withValues(alpha: 0.5),
                               borderRadius: BorderRadius.circular(8),
                               border: Border.all(
-                                color: Theme.of(context).colorScheme.outline.withOpacity(0.3),
+                                color: Theme.of(context).colorScheme.outline.withValues(alpha: 0.3),
                               ),
                             ),
                             child: Column(
@@ -108,7 +108,7 @@ Future<void> showBulkTakeDialog(
                                     color: Theme.of(context).colorScheme.surface,
                                     borderRadius: BorderRadius.circular(6),
                                     border: Border.all(
-                                      color: Theme.of(context).colorScheme.outline.withOpacity(0.3),
+                                      color: Theme.of(context).colorScheme.outline.withValues(alpha: 0.3),
                                     ),
                                   ),
                                   child: Row(

lib/widgets/dialogs/take_supplement_dialog.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
 
 import '../../models/supplement.dart';
 import '../../providers/supplement_provider.dart';
@@ -16,260 +17,227 @@ Future<void> showTakeSupplementDialog(
   DateTime selectedDateTime = DateTime.now();
   bool useCustomTime = false;
 
-  await showDialog(
+  await showShadDialog(
     context: context,
     builder: (context) => StatefulBuilder(
       builder: (context, setState) {
-        return AlertDialog(
+        return ShadDialog(
           title: Text('Take ${supplement.name}'),
-          content: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              Row(
-                children: [
-                  Expanded(
-                    child: TextField(
-                      controller: unitsController,
-                      keyboardType: const TextInputType.numberWithOptions(decimal: true),
-                      decoration: InputDecoration(
-                        labelText: 'Number of ${supplement.unitType}',
-                        border: const OutlineInputBorder(),
-                        suffixText: supplement.unitType,
-                      ),
-                      onChanged: (value) => setState(() {}),
-                    ),
-                  ),
-                ],
-              ),
-              const SizedBox(height: 8),
-              Container(
-                padding: const EdgeInsets.all(8),
-                decoration: BoxDecoration(
-                  color: Theme.of(context).colorScheme.surfaceVariant,
-                  borderRadius: BorderRadius.circular(4),
-                ),
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Row(
                   children: [
-                    Text(
-                      'Total dosage:',
-                      style: TextStyle(
-                        fontSize: 12,
-                        color: Theme.of(context).colorScheme.onSurfaceVariant,
-                      ),
-                    ),
-                    Text(
-                      supplement.ingredientsDisplay,
-                      style: TextStyle(
-                        fontSize: 12,
-                        fontWeight: FontWeight.w600,
-                        color: Theme.of(context).colorScheme.onSurface,
+                    Expanded(
+                      child: ShadInput(
+                        controller: unitsController,
+                        keyboardType: const TextInputType.numberWithOptions(decimal: true),
+                        placeholder: Text('Number of ${supplement.unitType}'),
+                        onChanged: (value) => setState(() {}),
                       ),
                     ),
                   ],
                 ),
-              ),
-              const SizedBox(height: 16),
-
-              if (!hideTime) ...[
-                // Time selection section
-                Container(
-                  padding: const EdgeInsets.all(12),
-                  decoration: BoxDecoration(
-                    color: Theme.of(context).colorScheme.primaryContainer.withOpacity(0.3),
-                    borderRadius: BorderRadius.circular(8),
-                    border: Border.all(
-                      color: Theme.of(context).colorScheme.primary.withOpacity(0.3),
-                    ),
-                  ),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Row(
-                        children: [
-                          Icon(
-                            Icons.access_time,
-                            size: 16,
-                            color: Theme.of(context).colorScheme.primary,
+                const SizedBox(height: 8),
+                ShadCard(
+                  child: Padding(
+                    padding: const EdgeInsets.all(8),
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        Text(
+                          'Total dosage:',
+                          style: TextStyle(
+                            fontSize: 12,
+                            color: ShadTheme.of(context).colorScheme.foreground,
                           ),
-                          const SizedBox(width: 6),
-                          Text(
-                            'When did you take it?',
-                            style: TextStyle(
-                              fontSize: 12,
-                              fontWeight: FontWeight.w600,
-                              color: Theme.of(context).colorScheme.primary,
-                            ),
-                          ),
-                        ],
-                      ),
-                      const SizedBox(height: 8),
-                      Row(
-                        children: [
-                          Expanded(
-                            child: RadioListTile<bool>(
-                              dense: true,
-                              contentPadding: EdgeInsets.zero,
-                              title: const Text('Just now', style: TextStyle(fontSize: 12)),
-                              value: false,
-                              groupValue: useCustomTime,
-                              onChanged: (value) => setState(() => useCustomTime = value!),
-                            ),
-                          ),
-                          Expanded(
-                            child: RadioListTile<bool>(
-                              dense: true,
-                              contentPadding: EdgeInsets.zero,
-                              title: const Text('Custom time', style: TextStyle(fontSize: 12)),
-                              value: true,
-                              groupValue: useCustomTime,
-                              onChanged: (value) => setState(() => useCustomTime = value!),
-                            ),
-                          ),
-                        ],
-                      ),
-                      if (useCustomTime) ...[
-                        const SizedBox(height: 8),
-                        Container(
-                          width: double.infinity,
-                          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-                          decoration: BoxDecoration(
-                            color: Theme.of(context).colorScheme.surface,
-                            borderRadius: BorderRadius.circular(6),
-                            border: Border.all(
-                              color: Theme.of(context).colorScheme.outline.withOpacity(0.5),
-                            ),
-                          ),
-                          child: Column(
-                            children: [
-                              // Date picker
-                              Row(
-                                children: [
-                                  Icon(
-                                    Icons.calendar_today,
-                                    size: 14,
-                                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                                  ),
-                                  const SizedBox(width: 8),
-                                  Expanded(
-                                    child: Text(
-                                      'Date: ${selectedDateTime.day}/${selectedDateTime.month}/${selectedDateTime.year}',
-                                      style: const TextStyle(fontSize: 12),
-                                    ),
-                                  ),
-                                  TextButton(
-                                    onPressed: () async {
-                                      final date = await showDatePicker(
-                                        context: context,
-                                        initialDate: selectedDateTime,
-                                        firstDate: DateTime.now().subtract(const Duration(days: 7)),
-                                        lastDate: DateTime.now(),
-                                      );
-                                      if (date != null) {
-                                        setState(() {
-                                          selectedDateTime = DateTime(
-                                            date.year,
-                                            date.month,
-                                            date.day,
-                                            selectedDateTime.hour,
-                                            selectedDateTime.minute,
-                                          );
-                                        });
-                                      }
-                                    },
-                                    child: const Text('Change', style: TextStyle(fontSize: 10)),
-                                  ),
-                                ],
-                              ),
-                              const SizedBox(height: 4),
-                              // Time picker
-                              Row(
-                                children: [
-                                  Icon(
-                                    Icons.access_time,
-                                    size: 14,
-                                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                                  ),
-                                  const SizedBox(width: 8),
-                                  Expanded(
-                                    child: Text(
-                                      'Time: ${selectedDateTime.hour.toString().padLeft(2, '0')}:${selectedDateTime.minute.toString().padLeft(2, '0')}',
-                                      style: const TextStyle(fontSize: 12),
-                                    ),
-                                  ),
-                                  TextButton(
-                                    onPressed: () async {
-                                      final time = await showTimePicker(
-                                        context: context,
-                                        initialTime: TimeOfDay.fromDateTime(selectedDateTime),
-                                      );
-                                      if (time != null) {
-                                        setState(() {
-                                          selectedDateTime = DateTime(
-                                            selectedDateTime.year,
-                                            selectedDateTime.month,
-                                            selectedDateTime.day,
-                                            time.hour,
-                                            time.minute,
-                                          );
-                                        });
-                                      }
-                                    },
-                                    child: const Text('Change', style: TextStyle(fontSize: 10)),
-                                  ),
-                                ],
-                              ),
-                            ],
+                        ),
+                        Text(
+                          supplement.ingredientsDisplay,
+                          style: TextStyle(
+                            fontSize: 12,
+                            fontWeight: FontWeight.w600,
+                            color: ShadTheme.of(context).colorScheme.foreground,
                           ),
                         ),
                       ],
-                    ],
+                    ),
                   ),
                 ),
                 const SizedBox(height: 16),
-              ],
-
-              TextField(
-                controller: notesController,
-                decoration: const InputDecoration(
-                  labelText: 'Notes (optional)',
-                  border: OutlineInputBorder(),
-                ),
-                maxLines: 2,
-              ),
-            ],
-          ),
-          actions: [
-            TextButton(
-              onPressed: () => Navigator.of(context).pop(),
-              child: const Text('Cancel'),
-            ),
-            ElevatedButton(
-              onPressed: () {
-                final unitsTaken = double.tryParse(unitsController.text) ?? supplement.numberOfUnits.toDouble();
-                // For now, we'll record 0 as total dosage since we're transitioning to ingredients
-                // This will be properly implemented when we add the full ingredient tracking
-                final totalDosageTaken = 0.0;
-                context.read<SupplementProvider>().recordIntake(
-                      supplement.id!,
-                      totalDosageTaken,
-                      unitsTaken: unitsTaken,
-                      notes: notesController.text.isNotEmpty ? notesController.text : null,
-                      takenAt: hideTime
-                          ? null
-                          : (useCustomTime ? selectedDateTime : null),
-                    );
-                Navigator.of(context).pop();
-                ScaffoldMessenger.of(context).showSnackBar(
-                  SnackBar(
-                    content: Text('${supplement.name} recorded!'),
-                    backgroundColor: Colors.green,
+                if (!hideTime) ...[
+                  ShadCard(
+                    child: Padding(
+                      padding: const EdgeInsets.all(12),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Row(
+                            children: [
+                              Icon(
+                                Icons.access_time,
+                                size: 16,
+                                color: ShadTheme.of(context).colorScheme.primary,
+                              ),
+                              const SizedBox(width: 6),
+                              Text(
+                                'When did you take it?',
+                                style: TextStyle(
+                                  fontSize: 12,
+                                  fontWeight: FontWeight.w600,
+                                  color: ShadTheme.of(context).colorScheme.primary,
+                                ),
+                              ),
+                            ],
+                          ),
+                          const SizedBox(height: 8),
+                          ShadRadioGroupFormField<bool>(
+                            initialValue: useCustomTime,
+                            onChanged: (value) => setState(() => useCustomTime = value!),
+                            items: [
+                              ShadRadio(
+                                value: false,
+                                label: const Text('Just now', style: TextStyle(fontSize: 12)),
+                              ),
+                              ShadRadio(
+                                value: true,
+                                label: const Text('Custom time', style: TextStyle(fontSize: 12)),
+                              ),
+                            ],
+                          ),
+                          if (useCustomTime) ...[
+                            const SizedBox(height: 8),
+                            ShadCard(
+                              child: Padding(
+                                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+                                child: Column(
+                                  children: [
+                                    Row(
+                                      children: [
+                                        Icon(
+                                          Icons.calendar_today,
+                                          size: 14,
+                                          color: ShadTheme.of(context).colorScheme.foreground,
+                                        ),
+                                        const SizedBox(width: 8),
+                                        Expanded(
+                                          child: Text(
+                                            'Date: ${selectedDateTime.day}/${selectedDateTime.month}/${selectedDateTime.year}',
+                                            style: const TextStyle(fontSize: 12),
+                                          ),
+                                        ),
+                                        ShadButton.outline(
+                                          onPressed: () async {
+                                            final date = await showDatePicker(
+                                              context: context,
+                                              initialDate: selectedDateTime,
+                                              firstDate: DateTime.now().subtract(const Duration(days: 7)),
+                                              lastDate: DateTime.now(),
+                                            );
+                                            if (date != null) {
+                                              setState(() {
+                                                selectedDateTime = DateTime(
+                                                  date.year,
+                                                  date.month,
+                                                  date.day,
+                                                  selectedDateTime.hour,
+                                                  selectedDateTime.minute,
+                                                );
+                                              });
+                                            }
+                                          },
+                                          child: const Text('Change', style: TextStyle(fontSize: 10)),
+                                        ),
+                                      ],
+                                    ),
+                                    const SizedBox(height: 4),
+                                    Row(
+                                      children: [
+                                        Icon(
+                                          Icons.access_time,
+                                          size: 14,
+                                          color: ShadTheme.of(context).colorScheme.foreground,
+                                        ),
+                                        const SizedBox(width: 8),
+                                        Expanded(
+                                          child: Text(
+                                            'Time: ${selectedDateTime.hour.toString().padLeft(2, '0')}:${selectedDateTime.minute.toString().padLeft(2, '0')}',
+                                            style: const TextStyle(fontSize: 12),
+                                          ),
+                                        ),
+                                        ShadButton.outline(
+                                          onPressed: () async {
+                                            final time = await showTimePicker(
+                                              context: context,
+                                              initialTime: TimeOfDay.fromDateTime(selectedDateTime),
+                                            );
+                                            if (time != null) {
+                                              setState(() {
+                                                selectedDateTime = DateTime(
+                                                  selectedDateTime.year,
+                                                  selectedDateTime.month,
+                                                  selectedDateTime.day,
+                                                  time.hour,
+                                                  time.minute,
+                                                );
+                                              });
+                                            }
+                                          },
+                                          child: const Text('Change', style: TextStyle(fontSize: 10)),
+                                        ),
+                                      ],
+                                    ),
+                                  ],
+                                ),
+                              ),
+                            ),
+                          ],
+                        ],
+                      ),
+                    ),
                   ),
-                );
-              },
-              child: const Text('Record'),
+                  const SizedBox(height: 16),
+                ],
+                ShadInput(
+                  controller: notesController,
+                  placeholder: const Text('Notes (optional)'),
+                  maxLines: 2,
+                ),
+                const SizedBox(height: 16),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.end,
+                  children: [
+                    ShadButton.outline(
+                      onPressed: () => Navigator.of(context).pop(),
+                      child: const Text('Cancel'),
+                    ),
+                    const SizedBox(width: 8),
+                    ShadButton(
+                      onPressed: () {
+                        final unitsTaken = double.tryParse(unitsController.text) ?? supplement.numberOfUnits.toDouble();
+                        final totalDosageTaken = 0.0;
+                        context.read<SupplementProvider>().recordIntake(
+                          supplement.id!,
+                          totalDosageTaken,
+                          unitsTaken: unitsTaken,
+                          notes: notesController.text.isNotEmpty ? notesController.text : null,
+                          takenAt: hideTime ? null : (useCustomTime ? selectedDateTime : null),
+                        );
+                        Navigator.of(context).pop();
+                        ShadToaster.of(context).show(
+                          ShadToast(
+                            title: Text('${supplement.name} recorded!'),
+                          ),
+                        );
+                      },
+                      child: const Text('Record'),
+                    ),
+                  ],
+                ),
+              ],
             ),
-          ],
+          ),
         );
       },
     ),

lib/widgets/info_chip.dart

@@ -7,6 +7,7 @@ class InfoChip extends StatelessWidget {
   final bool fullWidth;
 
   const InfoChip({
+    super.key,
     required this.icon,
     required this.label,
     required this.context,
@@ -19,7 +20,7 @@ class InfoChip extends StatelessWidget {
       width: fullWidth ? double.infinity : null,
       padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
       decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.4),
+        color: Theme.of(context).colorScheme.surfaceContainerHighest.withValues(alpha: 0.4),
         borderRadius: BorderRadius.circular(8),
       ),
       child: Row(

lib/widgets/supplement_card.dart

@@ -1,5 +1,7 @@
-import 'package:flutter/material.dart';
+ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+import 'package:popover/popover.dart';
 import '../models/supplement.dart';
 import '../providers/supplement_provider.dart';
 
@@ -10,6 +12,8 @@ class SupplementCard extends StatefulWidget {
   final VoidCallback onDelete;
   final VoidCallback onArchive;
   final VoidCallback onDuplicate;
+  final VoidCallback? onUndoLastTaken;
+  final bool showCompletionStatus;
 
   const SupplementCard({
     super.key,
@@ -19,6 +23,8 @@ class SupplementCard extends StatefulWidget {
     required this.onDelete,
     required this.onArchive,
     required this.onDuplicate,
+    this.onUndoLastTaken,
+    this.showCompletionStatus = true,
   });
 
   @override
@@ -28,16 +34,48 @@ class SupplementCard extends StatefulWidget {
 class _SupplementCardState extends State<SupplementCard> {
   bool _isExpanded = false;
 
+  Widget _buildPopoverItem({
+    required IconData icon,
+    required String label,
+    required VoidCallback onTap,
+    Color? color,
+  }) {
+    return InkWell(
+      onTap: onTap,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+        child: Row(
+          children: [
+            Icon(
+              icon,
+              size: 18,
+              color: color ?? Theme.of(context).colorScheme.onSurface,
+            ),
+            const SizedBox(width: 12),
+            Text(
+              label,
+              style: TextStyle(
+                fontSize: 14,
+                color: color ?? Theme.of(context).colorScheme.onSurface,
+                fontWeight: FontWeight.w500,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return Consumer<SupplementProvider>(
       builder: (context, provider, child) {
-        final bool isTakenToday = provider.hasBeenTakenToday(widget.supplement.id!);
-        final int todayIntakeCount = provider.getTodayIntakeCount(widget.supplement.id!);
-        final bool isCompletelyTaken = todayIntakeCount >= widget.supplement.frequencyPerDay;
+        final bool isTakenToday = widget.showCompletionStatus ? provider.hasBeenTakenToday(widget.supplement.id!) : false;
+        final int todayIntakeCount = widget.showCompletionStatus ? provider.getTodayIntakeCount(widget.supplement.id!) : 0;
+        final bool isCompletelyTaken = widget.showCompletionStatus ? todayIntakeCount >= widget.supplement.frequencyPerDay : false;
 
-        // Get today's intake times for this supplement
-        final todayIntakes = provider.todayIntakes
+        // Get today's intake times for this supplement (only if showing completion status)
+        final todayIntakes = widget.showCompletionStatus ? provider.todayIntakes
             .where((intake) => intake['supplement_id'] == widget.supplement.id)
             .map((intake) {
               final takenAt = DateTime.parse(intake['takenAt']);
@@ -46,447 +84,227 @@ class _SupplementCardState extends State<SupplementCard> {
                 'time': '${takenAt.hour.toString().padLeft(2, '0')}:${takenAt.minute.toString().padLeft(2, '0')}',
                 'units': unitsTaken is int ? unitsTaken.toDouble() : unitsTaken as double,
               };
-            }).toList();
+            }).toList() : [];
 
         return Card(
-          margin: const EdgeInsets.only(bottom: 16),
-          elevation: 3,
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
-          child: Container(
-            decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(16),
-              color: isCompletelyTaken
-                  ? Theme.of(context).colorScheme.surface
-                  : isTakenToday
-                      ? Theme.of(context).colorScheme.secondaryContainer
-                      : Theme.of(context).colorScheme.surface,
-              border: Border.all(
-                color: isCompletelyTaken
-                    ? Colors.green.shade600
-                    : isTakenToday
-                        ? Theme.of(context).colorScheme.secondary
-                        : Theme.of(context).colorScheme.outline.withOpacity(0.2),
-                width: 1.5,
-              ),
-            ),
-            child: Theme(
-              data: Theme.of(context).copyWith(
-                dividerColor: Colors.transparent,
-              ),
-              child: ExpansionTile(
-                initiallyExpanded: _isExpanded,
-                onExpansionChanged: (expanded) {
-                  setState(() {
-                    _isExpanded = expanded;
-                  });
-                },
-                tilePadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
-                childrenPadding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
-                leading: Container(
-                  padding: const EdgeInsets.all(8),
+          margin: const EdgeInsets.only(bottom: 8),
+          elevation: 2,
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+          child: InkWell(
+            onTap: () {
+              showPopover(
+                context: context,
+                bodyBuilder: (context) => Container(
+                  constraints: const BoxConstraints(maxWidth: 200),
                   decoration: BoxDecoration(
-                    color: isCompletelyTaken
-                        ? Colors.green.shade500
-                        : isTakenToday
-                            ? Theme.of(context).colorScheme.secondary
-                            : Theme.of(context).colorScheme.primary.withOpacity(0.1),
-                    shape: BoxShape.circle,
-                  ),
-                  child: Icon(
-                    isCompletelyTaken
-                        ? Icons.check_circle
-                        : isTakenToday
-                            ? Icons.schedule
-                            : Icons.medication,
-                    color: isCompletelyTaken
-                        ? Theme.of(context).colorScheme.inverseSurface
-                        : isTakenToday
-                            ? Theme.of(context).colorScheme.onSecondary
-                            : Theme.of(context).colorScheme.primary,
-                    size: 20,
-                  ),
-                ),
-                title: Row(
-                  children: [
-                    Expanded(
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          Text(
-                            widget.supplement.name,
-                            style: TextStyle(
-                              fontSize: 16,
-                              fontWeight: FontWeight.bold,
-                              color: isCompletelyTaken
-                                  ? Theme.of(context).colorScheme.inverseSurface
-                                  : isTakenToday
-                                      ? Theme.of(context).colorScheme.onSecondaryContainer
-                                      : Theme.of(context).colorScheme.onSurface,
-                            ),
-                          ),
-                          if (widget.supplement.brand != null && widget.supplement.brand!.isNotEmpty)
-                            Text(
-                              widget.supplement.brand!,
-                              style: TextStyle(
-                                fontSize: 12,
-                                color: isCompletelyTaken
-                                    ? Colors.green.shade200
-                                    : isTakenToday
-                                        ? Theme.of(context).colorScheme.secondary
-                                        : Theme.of(context).colorScheme.primary,
-                                fontWeight: FontWeight.w500,
-                              ),
-                            ),
-                        ],
-                      ),
+                    color: Theme.of(context).colorScheme.surface,
+                    borderRadius: BorderRadius.circular(12),
+                    border: Border.all(
+                      color: Theme.of(context).colorScheme.outline.withValues(alpha: 0.3),
+                      width: 1,
                     ),
-                    // Status badge and take button in collapsed view
-                    if (!_isExpanded) ...[
-                      if (isCompletelyTaken)
-                        Container(
-                          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-                          decoration: BoxDecoration(
-                            color: Colors.green.shade500,
-                            borderRadius: BorderRadius.circular(12),
-                          ),
-                          child: Text(
-                            'Complete',
-                            style: TextStyle(
-                              color: Theme.of(context).colorScheme.inverseSurface,
-                              fontSize: 10,
-                              fontWeight: FontWeight.bold,
-                            ),
-                          ),
-                        )
-                      else ...[
-                        if (isTakenToday)
-                          Container(
-                            padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
-                            margin: const EdgeInsets.only(right: 8),
-                            decoration: BoxDecoration(
-                              color: Theme.of(context).colorScheme.secondary,
-                              borderRadius: BorderRadius.circular(12),
-                            ),
-                            child: Text(
-                              '$todayIntakeCount/${widget.supplement.frequencyPerDay}',
-                              style: TextStyle(
-                                color: Theme.of(context).colorScheme.onSecondary,
-                                fontSize: 10,
-                                fontWeight: FontWeight.bold,
-                              ),
-                            ),
-                          ),
-                        ElevatedButton(
-                          onPressed: widget.onTake,
-                          style: ElevatedButton.styleFrom(
-                            backgroundColor: isCompletelyTaken
-                                ? Colors.green.shade500
-                                : Theme.of(context).colorScheme.primary,
-                            foregroundColor: Theme.of(context).colorScheme.inverseSurface,
-                            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
-                            minimumSize: const Size(60, 32),
-                            shape: RoundedRectangleBorder(
-                              borderRadius: BorderRadius.circular(8),
-                            ),
-                          ),
-                          child: Text(
-                            isCompletelyTaken ? '✓' : 'Take',
-                            style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
-                          ),
-                        ),
-                      ],
+                    boxShadow: [
+                      BoxShadow(
+                        color: Theme.of(context).colorScheme.shadow.withValues(alpha: 0.1),
+                        blurRadius: 8,
+                        offset: const Offset(0, 2),
+                      ),
                     ],
-                  ],
-                ),
-                trailing: PopupMenuButton(
-                  padding: EdgeInsets.zero,
-                  icon: Icon(
-                    Icons.more_vert,
-                    color: isCompletelyTaken
-                        ? Theme.of(context).colorScheme.inverseSurface
-                        : Theme.of(context).colorScheme.onSurfaceVariant,
                   ),
-                  onSelected: (value) {
-                    switch (value) {
-                      case 'edit':
-                        widget.onEdit();
-                        break;
-                      case 'duplicate':
-                        widget.onDuplicate();
-                        break;
-                      case 'archive':
-                        widget.onArchive();
-                        break;
-                      case 'delete':
-                        widget.onDelete();
-                        break;
-                    }
-                  },
-                  itemBuilder: (context) => [
-                    if (isTakenToday)
-                      PopupMenuItem(
-                        value: 'take',
-                        onTap: widget.onTake,
-                        child: const Row(
-                          children: [
-                            Icon(Icons.add_circle_outline),
-                            SizedBox(width: 8),
-                            Text('Take Again'),
-                          ],
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      if (widget.onUndoLastTaken != null && isTakenToday)
+                        _buildPopoverItem(
+                          icon: Icons.undo,
+                          label: 'Undo Last Taken',
+                          onTap: () {
+                            Navigator.of(context).pop();
+                            widget.onUndoLastTaken!();
+                          },
+                          color: Colors.orange,
                         ),
+                      _buildPopoverItem(
+                        icon: Icons.edit,
+                        label: 'Edit',
+                        onTap: () {
+                          Navigator.of(context).pop();
+                          widget.onEdit();
+                        },
                       ),
-                    const PopupMenuItem(
-                      value: 'edit',
-                      child: Row(
-                        children: [
-                          Icon(Icons.edit),
-                          SizedBox(width: 8),
-                          Text('Edit'),
-                        ],
+                      _buildPopoverItem(
+                        icon: Icons.copy,
+                        label: 'Duplicate',
+                        onTap: () {
+                          Navigator.of(context).pop();
+                          widget.onDuplicate();
+                        },
                       ),
-                    ),
-                    const PopupMenuItem(
-                      value: 'duplicate',
-                      child: Row(
-                        children: [
-                          Icon(Icons.copy),
-                          SizedBox(width: 8),
-                          Text('Duplicate'),
-                        ],
+                      _buildPopoverItem(
+                        icon: Icons.archive,
+                        label: 'Archive',
+                        color: Colors.orange,
+                        onTap: () {
+                          Navigator.of(context).pop();
+                          widget.onArchive();
+                        },
                       ),
-                    ),
-                    const PopupMenuItem(
-                      value: 'archive',
-                      child: Row(
-                        children: [
-                          Icon(Icons.archive, color: Colors.orange),
-                          SizedBox(width: 8),
-                          Text('Archive'),
-                        ],
+                      _buildPopoverItem(
+                        icon: Icons.delete,
+                        label: 'Delete',
+                        color: Colors.red,
+                        onTap: () {
+                          Navigator.of(context).pop();
+                          widget.onDelete();
+                        },
                       ),
-                    ),
-                    const PopupMenuItem(
-                      value: 'delete',
-                      child: Row(
-                        children: [
-                          Icon(Icons.delete, color: Colors.red),
-                          SizedBox(width: 8),
-                          Text('Delete', style: TextStyle(color: Colors.red)),
-                        ],
-                      ),
-                    ),
-                  ],
+                    ],
+                  ),
                 ),
+                direction: PopoverDirection.bottom,
+                width: 180,
+                height: null,
+                arrowHeight: 0,
+                arrowWidth: 0,
+                backgroundColor: Colors.transparent,
+                shadow: const [],
+              );
+            },
+            borderRadius: BorderRadius.circular(12),
+            splashColor: Theme.of(context).colorScheme.primary.withValues(alpha: 0.4),
+            highlightColor: Theme.of(context).colorScheme.primary.withValues(alpha: 0.3),
+            child: AnimatedContainer(
+              duration: const Duration(milliseconds: 150),
+              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(12),
+                color: widget.showCompletionStatus ? (isCompletelyTaken
+                      ? Theme.of(context).colorScheme.surface
+                      : isTakenToday
+                          ? Theme.of(context).colorScheme.secondaryContainer
+                          : Theme.of(context).colorScheme.surface) : Theme.of(context).colorScheme.surface,
+                border: Border.all(
+                  color: widget.showCompletionStatus ? (isCompletelyTaken
+                      ? Colors.green.shade600
+                      : isTakenToday
+                          ? Theme.of(context).colorScheme.secondary
+                          : Theme.of(context).colorScheme.outline.withValues(alpha: 0.2)) : Theme.of(context).colorScheme.outline.withValues(alpha: 0.2),
+                  width: 1,
+                ),
+              ),
+              child: Row(
                 children: [
-                  // Today's intake times (if any) - only show in expanded view
-                  if (todayIntakes.isNotEmpty) ...[
-                    Container(
-                      padding: const EdgeInsets.all(12),
-                      decoration: BoxDecoration(
-                        color: isCompletelyTaken
-                            ? Colors.green.shade700.withOpacity(0.8)
-                            : Theme.of(context).colorScheme.secondaryContainer.withOpacity(0.7),
-                        borderRadius: BorderRadius.circular(8),
-                        border: Border.all(
-                          color: isCompletelyTaken
-                              ? Colors.green.shade500
-                              : Theme.of(context).colorScheme.secondary,
-                        ),
-                      ),
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          Row(
-                            children: [
-                              Icon(
-                                Icons.check_circle_outline,
-                                size: 16,
-                                color: isCompletelyTaken
-                                    ? Colors.green.shade200
-                                    : Theme.of(context).colorScheme.onSecondaryContainer,
-                              ),
-                              const SizedBox(width: 6),
-                              Text(
-                                'Taken today:',
-                                style: TextStyle(
-                                  fontSize: 12,
-                                  fontWeight: FontWeight.w600,
-                                  color: isCompletelyTaken
-                                      ? Colors.green.shade200
-                                      : Theme.of(context).colorScheme.onSecondaryContainer,
-                                ),
-                              ),
-                            ],
-                          ),
-                          const SizedBox(height: 6),
-                          Wrap(
-                            spacing: 8,
-                            runSpacing: 4,
-                            children: todayIntakes.map((intake) {
-                              final units = intake['units'] as double;
-                              final unitsText = units == 1.0
-                                  ? '${widget.supplement.unitType}'
-                                  : '${units.toStringAsFixed(units % 1 == 0 ? 0 : 1)} ${widget.supplement.unitType}';
-
-                              return Container(
-                                padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
-                                decoration: BoxDecoration(
-                                  color: isCompletelyTaken
-                                      ? Colors.green.shade600
-                                      : Theme.of(context).colorScheme.secondary,
-                                  borderRadius: BorderRadius.circular(6),
-                                ),
-                                child: Text(
-                                  '${intake['time']} • $unitsText',
-                                  style: TextStyle(
-                                    fontSize: 10,
-                                    fontWeight: FontWeight.w500,
-                                    color: isCompletelyTaken
-                                        ? Colors.white
-                                        : Theme.of(context).colorScheme.onSecondary,
-                                  ),
-                                ),
-                              );
-                            }).toList(),
-                          ),
-                        ],
-                      ),
-                    ),
-                    const SizedBox(height: 16),
-                  ],
-
-                  // Ingredients section
                   Container(
-                    padding: const EdgeInsets.all(12),
+                    padding: const EdgeInsets.all(6),
                     decoration: BoxDecoration(
-                      color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
-                      borderRadius: BorderRadius.circular(12),
+                      color: widget.showCompletionStatus ? (isCompletelyTaken
+                          ? Colors.green.shade500
+                          : isTakenToday
+                              ? Theme.of(context).colorScheme.secondary
+                              : Theme.of(context).colorScheme.primary.withValues(alpha: 0.1)) : Theme.of(context).colorScheme.primary.withValues(alpha: 0.1),
+                      shape: BoxShape.circle,
                     ),
+                    child: Icon(
+                      widget.showCompletionStatus ? (isCompletelyTaken
+                          ? Icons.check_circle
+                          : isTakenToday
+                              ? Icons.schedule
+                              : Icons.medication) : Icons.medication,
+                      color: widget.showCompletionStatus ? (isCompletelyTaken
+                          ? Theme.of(context).colorScheme.inverseSurface
+                          : isTakenToday
+                              ? Theme.of(context).colorScheme.onSecondary
+                              : Theme.of(context).colorScheme.primary) : Theme.of(context).colorScheme.primary,
+                      size: 18,
+                    ),
+                  ),
+                  const SizedBox(width: 12),
+                  Expanded(
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
-                        Text(
-                          'Ingredients per ${widget.supplement.unitType}:',
-                          style: TextStyle(
-                            fontSize: 12,
-                            fontWeight: FontWeight.w600,
-                            color: Theme.of(context).colorScheme.onSurfaceVariant,
-                          ),
-                        ),
-                        const SizedBox(height: 8),
-                        Wrap(
-                          spacing: 8,
-                          runSpacing: 4,
-                          children: widget.supplement.ingredients.map((ingredient) {
-                            return Container(
-                              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-                              decoration: BoxDecoration(
-                                color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
-                                borderRadius: BorderRadius.circular(8),
-                                border: Border.all(
-                                  color: Theme.of(context).colorScheme.primary.withOpacity(0.3),
-                                ),
-                              ),
+                        Row(
+                          children: [
+                            Expanded(
                               child: Text(
-                                '${ingredient.name} ${ingredient.amount}${ingredient.unit}',
+                                widget.supplement.name,
                                 style: TextStyle(
-                                  fontSize: 11,
-                                  fontWeight: FontWeight.w500,
-                                  color: Theme.of(context).colorScheme.primary,
+                                  fontSize: 14,
+                                  fontWeight: FontWeight.bold,
+                                  color: widget.showCompletionStatus ? (isCompletelyTaken
+                                      ? Theme.of(context).colorScheme.inverseSurface
+                                      : isTakenToday
+                                          ? Theme.of(context).colorScheme.onSecondaryContainer
+                                          : Theme.of(context).colorScheme.onSurface) : Theme.of(context).colorScheme.onSurface,
                                 ),
                               ),
-                            );
-                          }).toList(),
+                            ),
+                            if (widget.showCompletionStatus && isCompletelyTaken) ...[
+                              const SizedBox(width: 8),
+                              Container(
+                                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                                decoration: BoxDecoration(
+                                  color: Colors.green.shade500,
+                                  borderRadius: BorderRadius.circular(12),
+                                ),
+                                child: Text(
+                                  'Complete',
+                                  style: TextStyle(
+                                    color: Theme.of(context).colorScheme.inverseSurface,
+                                    fontSize: 10,
+                                    fontWeight: FontWeight.bold,
+                                  ),
+                                ),
+                              ),
+                            ],
+                          ],
+                        ),
+                        if (widget.supplement.brand != null && widget.supplement.brand!.isNotEmpty)
+                          Text(
+                            widget.supplement.brand!,
+                            style: TextStyle(
+                              fontSize: 11,
+                              color: widget.showCompletionStatus ? (isCompletelyTaken
+                                  ? Colors.green.shade200
+                                  : isTakenToday
+                                      ? Theme.of(context).colorScheme.secondary
+                                      : Theme.of(context).colorScheme.primary) : Theme.of(context).colorScheme.primary,
+                              fontWeight: FontWeight.w500,
+                            ),
+                          ),
+                        const SizedBox(height: 4),
+                        Row(
+                          children: [
+                            Text(
+                              '${widget.supplement.frequencyPerDay}x daily • ${widget.supplement.numberOfUnits} ${widget.supplement.unitType}',
+                              style: TextStyle(
+                                fontSize: 11,
+                                color: ShadTheme.of(context).colorScheme.foreground.withValues(alpha: 0.7),
+                              ),
+                            ),
+                            if (widget.showCompletionStatus && isTakenToday && !isCompletelyTaken) ...[
+                              const SizedBox(width: 8),
+                              Container(
+                                padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+                                decoration: BoxDecoration(
+                                  color: Theme.of(context).colorScheme.secondary,
+                                  borderRadius: BorderRadius.circular(8),
+                                ),
+                                child: Text(
+                                  '$todayIntakeCount/${widget.supplement.frequencyPerDay}',
+                                  style: TextStyle(
+                                    color: Theme.of(context).colorScheme.onSecondary,
+                                    fontSize: 9,
+                                    fontWeight: FontWeight.bold,
+                                  ),
+                                ),
+                              ),
+                            ],
+                          ],
                         ),
                       ],
                     ),
                   ),
-
-                  const SizedBox(height: 12),
-
-                  // Schedule and dosage info
-                  Row(
-                    children: [
-                      Expanded(
-                        child: _InfoChip(
-                          icon: Icons.schedule,
-                          label: '${widget.supplement.frequencyPerDay}x daily',
-                          context: context,
-                        ),
-                      ),
-                      const SizedBox(width: 8),
-                      Expanded(
-                        child: _InfoChip(
-                          icon: Icons.medication,
-                          label: '${widget.supplement.numberOfUnits} ${widget.supplement.unitType}',
-                          context: context,
-                        ),
-                      ),
-                    ],
-                  ),
-
-                  if (widget.supplement.reminderTimes.isNotEmpty) ...[
-                    const SizedBox(height: 8),
-                    _InfoChip(
-                      icon: Icons.notifications,
-                      label: 'Reminders: ${widget.supplement.reminderTimes.join(', ')}',
-                      context: context,
-                      fullWidth: true,
-                    ),
-                  ],
-
-                  if (widget.supplement.notes != null && widget.supplement.notes!.isNotEmpty) ...[
-                    const SizedBox(height: 8),
-                    Container(
-                      width: double.infinity,
-                      padding: const EdgeInsets.all(8),
-                      decoration: BoxDecoration(
-                        color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.2),
-                        borderRadius: BorderRadius.circular(8),
-                      ),
-                      child: Text(
-                        widget.supplement.notes!,
-                        style: TextStyle(
-                          fontSize: 12,
-                          color: Theme.of(context).colorScheme.onSurfaceVariant,
-                          fontStyle: FontStyle.italic,
-                        ),
-                      ),
-                    ),
-                  ],
-
-                  const SizedBox(height: 16),
-
-                  // Take button
-                  SizedBox(
-                    width: double.infinity,
-                    child: ElevatedButton.icon(
-                      onPressed: widget.onTake,
-                      icon: Icon(
-                        isCompletelyTaken ? Icons.check_circle : Icons.medication,
-                        size: 18,
-                      ),
-                      label: Text(
-                        isCompletelyTaken
-                            ? 'All doses taken today'
-                            : isTakenToday
-                                ? 'Take next dose'
-                                : 'Take supplement',
-                        style: const TextStyle(fontWeight: FontWeight.w600),
-                      ),
-                      style: ElevatedButton.styleFrom(
-                        backgroundColor: isCompletelyTaken
-                            ? Colors.green.shade500
-                            : Theme.of(context).colorScheme.primary,
-                        foregroundColor: Colors.white,
-                        padding: const EdgeInsets.symmetric(vertical: 12),
-                        shape: RoundedRectangleBorder(
-                          borderRadius: BorderRadius.circular(12),
-                        ),
-                        elevation: isCompletelyTaken ? 0 : 2,
-                      ),
-                    ),
-                  ),
                 ],
               ),
             ),
@@ -516,7 +334,7 @@ class _InfoChip extends StatelessWidget {
       width: fullWidth ? double.infinity : null,
       padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
       decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.4),
+        color: Theme.of(context).colorScheme.surfaceContainerHighest.withValues(alpha: 0.4),
         borderRadius: BorderRadius.circular(8),
       ),
       child: Row(
@@ -544,3 +362,4 @@ class _InfoChip extends StatelessWidget {
     );
   }
 }
+

pubspec.lock

@@ -33,6 +33,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.2"
+  boxy:
+    dependency: transitive
+    description:
+      name: boxy
+      sha256: "71af0cd1bf7889c09787f26219a345aa4f38ccb98384c8ec24189e4d8e746005"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.1"
   characters:
     dependency: transitive
     description:
@@ -129,6 +137,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.7"
+  extended_image:
+    dependency: transitive
+    description:
+      name: extended_image
+      sha256: f6cbb1d798f51262ed1a3d93b4f1f2aa0d76128df39af18ecb77fa740f88b2e0
+      url: "https://pub.dev"
+    source: hosted
+    version: "10.0.1"
+  extended_image_library:
+    dependency: transitive
+    description:
+      name: extended_image_library
+      sha256: "1f9a24d3a00c2633891c6a7b5cab2807999eb2d5b597e5133b63f49d113811fe"
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.0.1"
   fake_async:
     dependency: transitive
     description:
@@ -166,6 +190,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_animate:
+    dependency: transitive
+    description:
+      name: flutter_animate
+      sha256: "7befe2d3252728afb77aecaaea1dec88a89d35b9b1d2eea6d04479e8af9117b5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.5.2"
   flutter_fgbg:
     dependency: transitive
     description:
@@ -214,6 +246,11 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.2"
+  flutter_localizations:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
   flutter_secure_storage:
     dependency: "direct main"
     description:
@@ -263,6 +300,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.0.0"
+  flutter_shaders:
+    dependency: transitive
+    description:
+      name: flutter_shaders
+      sha256: "34794acadd8275d971e02df03afee3dee0f98dbfb8c4837082ad0034f612a3e2"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.3"
+  flutter_svg:
+    dependency: transitive
+    description:
+      name: flutter_svg
+      sha256: cd57f7969b4679317c17af6fd16ee233c1e60a82ed209d8a475c54fd6fd6f845
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -281,6 +334,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.5.0"
+  http_client_helper:
+    dependency: transitive
+    description:
+      name: http_client_helper
+      sha256: "8a9127650734da86b5c73760de2b404494c968a3fd55602045ffec789dac3cb1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.0"
   http_parser:
     dependency: transitive
     description:
@@ -297,6 +358,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.20.2"
+  js:
+    dependency: transitive
+    description:
+      name: js
+      sha256: "53385261521cc4a0c4658fd0ad07a7d14591cf8fc33abbceae306ddb974888dc"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.2"
   json_annotation:
     dependency: transitive
     description:
@@ -345,6 +414,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.0"
+  lucide_icons_flutter:
+    dependency: transitive
+    description:
+      name: lucide_icons_flutter
+      sha256: c88e3611c0aa272ca2f2aa263662174ae4996f5e3ee1c300021514df230b6588
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.9"
   matcher:
     dependency: transitive
     description:
@@ -401,6 +478,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.9.1"
+  path_parsing:
+    dependency: transitive
+    description:
+      name: path_parsing
+      sha256: "883402936929eac138ee0a45da5b0f2c80f89913e6dc3bf77eb65b84b409c6ca"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   path_provider:
     dependency: transitive
     description:
@@ -473,6 +558,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.8"
+  popover:
+    dependency: "direct main"
+    description:
+      name: popover
+      sha256: "0606f3e10f92fc0459f5c52fd917738c29e7552323b28694d50c2d3312d0e1a2"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.3.1"
   provider:
     dependency: "direct main"
     description:
@@ -489,6 +582,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.28.0"
+  shadcn_ui:
+    dependency: "direct main"
+    description:
+      name: shadcn_ui
+      sha256: "628d1a7f36e4c764dae3b86b38abb086adf39ccea0073960f481777d1880f90d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.29.2"
   shared_preferences:
     dependency: "direct main"
     description:
@@ -678,6 +779,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.10.1"
+  two_dimensional_scrollables:
+    dependency: transitive
+    description:
+      name: two_dimensional_scrollables
+      sha256: "0f77ecb96596f2f82eec2b0a8e60d9305c58315557da9fa3b610c7dbf5ded621"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.3.7"
   typed_data:
     dependency: transitive
     description:
@@ -686,6 +795,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.4.0"
+  universal_image:
+    dependency: transitive
+    description:
+      name: universal_image
+      sha256: ef47a4a002158cf0b36ed3b7605af132d2476cc42703e41b8067d3603705c40d
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.11"
   url_launcher:
     dependency: "direct main"
     description:
@@ -758,6 +875,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.5.1"
+  vector_graphics:
+    dependency: transitive
+    description:
+      name: vector_graphics
+      sha256: a4f059dc26fc8295b5921376600a194c4ec7d55e72f2fe4c7d2831e103d461e6
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.19"
+  vector_graphics_codec:
+    dependency: transitive
+    description:
+      name: vector_graphics_codec
+      sha256: "99fd9fbd34d9f9a32efd7b6a6aae14125d8237b10403b422a6a6dfeac2806146"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.13"
+  vector_graphics_compiler:
+    dependency: transitive
+    description:
+      name: vector_graphics_compiler
+      sha256: d354a7ec6931e6047785f4db12a1f61ec3d43b207fc0790f863818543f8ff0dc
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.19"
   vector_math:
     dependency: transitive
     description:
@@ -816,4 +957,4 @@ packages:
     version: "6.6.1"
 sdks:
   dart: ">=3.9.0 <4.0.0"
-  flutter: ">=3.29.0"
+  flutter: ">=3.32.0"

pubspec.yaml

@@ -1,7 +1,7 @@
 name: supplements
 description: "A supplement tracking app for managing your daily supplements"
 publish_to: "none"
-version: 1.0.8+30082025
+version: 1.0.9+31082025
 
 environment:
   sdk: ^3.9.0
@@ -29,6 +29,10 @@ dependencies:
   # Date time handling
   intl: ^0.20.2
 
+  # UI components
+  shadcn_ui: ^0.29.2
+  popover: ^0.3.0
+
   # WebDAV sync functionality
   webdav_client: ^1.2.2
   connectivity_plus: ^6.1.5