diff --git a/refilc/lib/database/struct.dart b/refilc/lib/database/struct.dart
index bb33de6..d5947c6 100644
--- a/refilc/lib/database/struct.dart
+++ b/refilc/lib/database/struct.dart
@@ -8,10 +8,10 @@ class DatabaseStruct {
     String typeName = "";
 
     switch (type.runtimeType) {
-      case int:
+      case const (int):
         typeName = "integer";
         break;
-      case String:
+      case const (String):
         typeName = "text";
         break;
     }
diff --git a/refilc/lib/theme/theme.dart b/refilc/lib/theme/theme.dart
index 1ddd93e..405ac95 100644
--- a/refilc/lib/theme/theme.dart
+++ b/refilc/lib/theme/theme.dart
@@ -125,8 +125,6 @@ class AppTheme {
         onTertiary:
             (newTertiary.computeLuminance() > 0.5 ? Colors.black : Colors.white)
                 .withOpacity(.9),
-        background: highlightColor,
-        onBackground: Colors.black.withOpacity(.9),
         brightness: Brightness.light,
         error: lightColors.red,
         onError: Colors.white.withOpacity(.9),
@@ -141,9 +139,9 @@ class AppTheme {
         indicatorColor:
             accent.withOpacity(accentColor == AccentColor.adaptive ? 0.4 : 0.8),
         iconTheme:
-            MaterialStateProperty.all(IconThemeData(color: lightColors.text)),
+            WidgetStateProperty.all(IconThemeData(color: lightColors.text)),
         backgroundColor: highlightColor,
-        labelTextStyle: MaterialStateProperty.all(TextStyle(
+        labelTextStyle: WidgetStateProperty.all(TextStyle(
           fontSize: 13.0,
           fontWeight: FontWeight.w500,
           color: lightColors.text.withOpacity(0.8),
@@ -250,8 +248,6 @@ class AppTheme {
         onTertiary:
             (newTertiary.computeLuminance() > 0.5 ? Colors.black : Colors.white)
                 .withOpacity(.9),
-        background: highlightColor,
-        onBackground: Colors.white.withOpacity(.9),
         brightness: Brightness.dark,
         error: darkColors.red,
         onError: Colors.black.withOpacity(.9),
@@ -266,9 +262,9 @@ class AppTheme {
         indicatorColor:
             accent.withOpacity(accentColor == AccentColor.adaptive ? 0.4 : 0.8),
         iconTheme:
-            MaterialStateProperty.all(IconThemeData(color: darkColors.text)),
+            WidgetStateProperty.all(IconThemeData(color: darkColors.text)),
         backgroundColor: highlightColor,
-        labelTextStyle: MaterialStateProperty.all(TextStyle(
+        labelTextStyle: WidgetStateProperty.all(TextStyle(
           fontSize: 13.0,
           fontWeight: FontWeight.w500,
           color: darkColors.text.withOpacity(0.8),
diff --git a/refilc/lib/ui/filter/widgets.dart b/refilc/lib/ui/filter/widgets.dart
index b3683db..5142a88 100644
--- a/refilc/lib/ui/filter/widgets.dart
+++ b/refilc/lib/ui/filter/widgets.dart
@@ -259,7 +259,7 @@ Widget filterItemBuilder(
                     ? const EdgeInsets.symmetric(vertical: 8.0)
                     : const EdgeInsets.symmetric(vertical: 4.0),
                 decoration: BoxDecoration(
-                  color: Theme.of(context).colorScheme.background,
+                  color: Theme.of(context).colorScheme.surface,
                   borderRadius: BorderRadius.vertical(
                     top: separated || isAfterSeparated
                         ? const Radius.circular(16.0)
diff --git a/refilc/lib/ui/flutter_colorpicker/palette.dart b/refilc/lib/ui/flutter_colorpicker/palette.dart
index 3571a86..b569b2b 100644
--- a/refilc/lib/ui/flutter_colorpicker/palette.dart
+++ b/refilc/lib/ui/flutter_colorpicker/palette.dart
@@ -364,7 +364,7 @@ class ColorPickerInputState extends State<ColorPickerInput> {
           controller: textEditingController,
           style: TextStyle(
             fontSize: 18,
-            color: Theme.of(context).colorScheme.onBackground,
+            color: Theme.of(context).colorScheme.onSurface,
           ),
           inputFormatters: [
             UpperCaseTextFormatter(),
diff --git a/refilc_desktop_ui/lib/common/filter_bar.dart b/refilc_desktop_ui/lib/common/filter_bar.dart
index 7e0b51b..790f9e9 100644
--- a/refilc_desktop_ui/lib/common/filter_bar.dart
+++ b/refilc_desktop_ui/lib/common/filter_bar.dart
@@ -41,7 +41,7 @@ class FilterBar extends StatelessWidget implements PreferredSizeWidget {
         color: Theme.of(context).colorScheme.secondary.withOpacity(0.25),
         borderRadius: BorderRadius.circular(45.0),
       ),
-      overlayColor: MaterialStateProperty.all(const Color(0x00000000)),
+      overlayColor: WidgetStateProperty.all(const Color(0x00000000)),
       // Tabs
       padding: EdgeInsets.zero,
       tabs: items,
diff --git a/refilc_desktop_ui/lib/pages/absences/absences_page.dart b/refilc_desktop_ui/lib/pages/absences/absences_page.dart
index aff6b4a..33e0906 100644
--- a/refilc_desktop_ui/lib/pages/absences/absences_page.dart
+++ b/refilc_desktop_ui/lib/pages/absences/absences_page.dart
@@ -287,7 +287,7 @@ class AbsencesPageState extends State<AbsencesPage>
                 return FadeThroughTransition(
                   animation: primaryAnimation,
                   secondaryAnimation: secondaryAnimation,
-                  fillColor: Theme.of(context).colorScheme.background,
+                  fillColor: Theme.of(context).colorScheme.surface,
                   child: child,
                 );
               },
diff --git a/refilc_desktop_ui/lib/screens/settings/settings_screen.dart b/refilc_desktop_ui/lib/screens/settings/settings_screen.dart
index 16334b1..e8ca7a8 100644
--- a/refilc_desktop_ui/lib/screens/settings/settings_screen.dart
+++ b/refilc_desktop_ui/lib/screens/settings/settings_screen.dart
@@ -776,7 +776,7 @@ class SettingsScreenState extends State<SettingsScreen>
                                     decoration: BoxDecoration(
                                         color: Theme.of(context)
                                             .colorScheme
-                                            .background),
+                                            .surface),
                                     child: Material(
                                       type: MaterialType.transparency,
                                       child: SwitchListTile(
diff --git a/refilc_mobile_ui/lib/common/bottom_card.dart b/refilc_mobile_ui/lib/common/bottom_card.dart
index b0d23a3..689b209 100644
--- a/refilc_mobile_ui/lib/common/bottom_card.dart
+++ b/refilc_mobile_ui/lib/common/bottom_card.dart
@@ -14,7 +14,7 @@ class BottomCard extends StatelessWidget {
         child: Container(
           decoration: BoxDecoration(
             borderRadius: BorderRadius.circular(14.0),
-            color: Theme.of(context).colorScheme.background,
+            color: Theme.of(context).colorScheme.surface,
           ),
           child: Column(
             mainAxisSize: MainAxisSize.min,
diff --git a/refilc_mobile_ui/lib/common/bottom_sheet_menu/rounded_bottom_sheet.dart b/refilc_mobile_ui/lib/common/bottom_sheet_menu/rounded_bottom_sheet.dart
index 9a64aa2..8c60603 100644
--- a/refilc_mobile_ui/lib/common/bottom_sheet_menu/rounded_bottom_sheet.dart
+++ b/refilc_mobile_ui/lib/common/bottom_sheet_menu/rounded_bottom_sheet.dart
@@ -22,7 +22,7 @@ class RoundedBottomSheet extends StatelessWidget {
     return AnimatedContainer(
       duration: const Duration(milliseconds: 500),
       decoration: BoxDecoration(
-        color: backgroundColor ?? Theme.of(context).colorScheme.background,
+        color: backgroundColor ?? Theme.of(context).colorScheme.surface,
         borderRadius: BorderRadius.only(
           topLeft: Radius.circular(borderRadius),
           topRight: Radius.circular(borderRadius),
diff --git a/refilc_mobile_ui/lib/common/filter_bar.dart b/refilc_mobile_ui/lib/common/filter_bar.dart
index 019b4c5..cac9294 100644
--- a/refilc_mobile_ui/lib/common/filter_bar.dart
+++ b/refilc_mobile_ui/lib/common/filter_bar.dart
@@ -64,7 +64,7 @@ class _FilterBarState extends State<FilterBar> {
         color: Theme.of(context).colorScheme.tertiary.withOpacity(.2),
         borderRadius: BorderRadius.circular(45.0),
       ),
-      overlayColor: MaterialStateProperty.all(const Color(0x00000000)),
+      overlayColor: WidgetStateProperty.all(const Color(0x00000000)),
       // Tabs
       padding: EdgeInsets.zero,
       tabs: widget.censored
diff --git a/refilc_mobile_ui/lib/common/outlined_round_button.dart b/refilc_mobile_ui/lib/common/outlined_round_button.dart
index 8eedb66..ae3fd5c 100644
--- a/refilc_mobile_ui/lib/common/outlined_round_button.dart
+++ b/refilc_mobile_ui/lib/common/outlined_round_button.dart
@@ -22,7 +22,7 @@ class OutlinedRoundButton extends StatelessWidget {
         width: size,
         height: size,
         decoration: BoxDecoration(
-          color: Theme.of(context).colorScheme.background,
+          color: Theme.of(context).colorScheme.surface,
           border: Border.all(
             color: Theme.of(context).colorScheme.secondary.withOpacity(0.1),
             width: 1.1,
diff --git a/refilc_mobile_ui/lib/common/panel/panel.dart b/refilc_mobile_ui/lib/common/panel/panel.dart
index 7a144a1..3c61396 100644
--- a/refilc_mobile_ui/lib/common/panel/panel.dart
+++ b/refilc_mobile_ui/lib/common/panel/panel.dart
@@ -35,7 +35,7 @@ class Panel extends StatelessWidget {
               borderRadius: BorderRadius.circular(16.0),
               color: isTransparent
                   ? Colors.transparent
-                  : Theme.of(context).colorScheme.background,
+                  : Theme.of(context).colorScheme.surface,
               boxShadow: [
                 if ((hasShadow && !isTransparent) &&
                     Provider.of<SettingsProvider>(context, listen: false)
@@ -87,7 +87,7 @@ class PanelHeader extends StatelessWidget {
       decoration: BoxDecoration(
         borderRadius: const BorderRadius.only(
             topLeft: Radius.circular(16.0), topRight: Radius.circular(16.0)),
-        color: Theme.of(context).colorScheme.background,
+        color: Theme.of(context).colorScheme.surface,
         boxShadow: [
           if (Provider.of<SettingsProvider>(context, listen: false)
               .shadowEffect)
@@ -113,7 +113,7 @@ class PanelBody extends StatelessWidget {
     return Container(
       width: double.infinity,
       decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.background,
+        color: Theme.of(context).colorScheme.surface,
         boxShadow: [
           if (Provider.of<SettingsProvider>(context, listen: false)
               .shadowEffect)
@@ -144,7 +144,7 @@ class PanelFooter extends StatelessWidget {
         borderRadius: const BorderRadius.only(
             bottomLeft: Radius.circular(16.0),
             bottomRight: Radius.circular(16.0)),
-        color: Theme.of(context).colorScheme.background,
+        color: Theme.of(context).colorScheme.surface,
         boxShadow: [
           if (Provider.of<SettingsProvider>(context, listen: false)
               .shadowEffect)
diff --git a/refilc_mobile_ui/lib/common/sliding_bottom_sheet.dart b/refilc_mobile_ui/lib/common/sliding_bottom_sheet.dart
index daf2302..b156857 100644
--- a/refilc_mobile_ui/lib/common/sliding_bottom_sheet.dart
+++ b/refilc_mobile_ui/lib/common/sliding_bottom_sheet.dart
@@ -9,7 +9,7 @@ void showSlidingBottomSheet(
               cornerRadius: 16,
               cornerRadiusOnFullscreen: 0,
               avoidStatusBar: true,
-              color: Theme.of(context).colorScheme.background,
+              color: Theme.of(context).colorScheme.surface,
               duration: const Duration(milliseconds: 400),
               snapSpec: const ss.SnapSpec(
                 snap: true,
@@ -18,7 +18,7 @@ void showSlidingBottomSheet(
               ),
               headerBuilder: (context, state) {
                 return Material(
-                  color: Theme.of(context).colorScheme.background,
+                  color: Theme.of(context).colorScheme.surface,
                   child: Column(
                     mainAxisSize: MainAxisSize.min,
                     children: [
@@ -37,7 +37,7 @@ void showSlidingBottomSheet(
               },
               builder: (context, state) {
                 return Material(
-                  color: Theme.of(context).colorScheme.background,
+                  color: Theme.of(context).colorScheme.surface,
                   child: Padding(
                       padding: const EdgeInsets.fromLTRB(12.0, 0, 12.0, 8.0),
                       child: child),
diff --git a/refilc_mobile_ui/lib/common/splitted_panel/splitted_panel.dart b/refilc_mobile_ui/lib/common/splitted_panel/splitted_panel.dart
index 4517b48..402e16f 100644
--- a/refilc_mobile_ui/lib/common/splitted_panel/splitted_panel.dart
+++ b/refilc_mobile_ui/lib/common/splitted_panel/splitted_panel.dart
@@ -46,7 +46,7 @@ class SplittedPanel extends StatelessWidget {
           decoration: BoxDecoration(
             color: isTransparent
                 ? Colors.transparent
-                : Theme.of(context).colorScheme.background,
+                : Theme.of(context).colorScheme.surface,
             borderRadius: BorderRadius.vertical(
               top: Radius.circular(i == 0 ? 16.0 : 8.0),
               bottom: Radius.circular(children!.length == i + 1 ? 16.0 : 8.0),
diff --git a/refilc_mobile_ui/lib/common/viewable.dart b/refilc_mobile_ui/lib/common/viewable.dart
index 205a8e4..8cad17b 100644
--- a/refilc_mobile_ui/lib/common/viewable.dart
+++ b/refilc_mobile_ui/lib/common/viewable.dart
@@ -10,7 +10,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
 
-double valueFromPercentageInRange({required final double min, max, percentage}) {
+double valueFromPercentageInRange(
+    {required final double min, max, percentage}) {
   return percentage * (max - min) + min;
 }
 
@@ -44,7 +45,8 @@ typedef _ViewablePreviewBuilderChildless = Widget Function(
 
 Rect _getRect(GlobalKey globalKey) {
   assert(globalKey.currentContext != null);
-  final RenderBox renderBoxContainer = globalKey.currentContext!.findRenderObject()! as RenderBox;
+  final RenderBox renderBoxContainer =
+      globalKey.currentContext!.findRenderObject()! as RenderBox;
   final Offset containerOffset = renderBoxContainer.localToGlobal(
     renderBoxContainer.paintBounds.topLeft,
   );
@@ -101,7 +103,8 @@ class _ViewableState extends State<Viewable> with TickerProviderStateMixin {
     final double screenWidth = MediaQuery.of(context).size.width;
 
     final double center = screenWidth / 2;
-    final bool centerDividesChild = childRect.left < center && childRect.right > center;
+    final bool centerDividesChild =
+        childRect.left < center && childRect.right > center;
     final double distanceFromCenter = (center - childRect.center.dx).abs();
     if (centerDividesChild && distanceFromCenter <= childRect.width / 4) {
       return _ViewableLocation.center;
@@ -132,7 +135,7 @@ class _ViewableState extends State<Viewable> with TickerProviderStateMixin {
         return ClipRRect(
           borderRadius: BorderRadius.circular(16.0),
           child: Material(
-            color: Theme.of(context).colorScheme.background,
+            color: Theme.of(context).colorScheme.surface,
             borderRadius: BorderRadius.circular(16.0),
             child: Stack(
               children: [
@@ -270,7 +273,8 @@ class _DecoyChild extends StatefulWidget {
   _DecoyChildState createState() => _DecoyChildState();
 }
 
-class _DecoyChildState extends State<_DecoyChild> with TickerProviderStateMixin {
+class _DecoyChildState extends State<_DecoyChild>
+    with TickerProviderStateMixin {
   static const Color _lightModeMaskColor = Color(0xFF888888);
   static const Color _masklessColor = Color(0xFFFFFFFF);
 
@@ -327,7 +331,9 @@ class _DecoyChildState extends State<_DecoyChild> with TickerProviderStateMixin
   }
 
   Widget _buildAnimation(BuildContext context, Widget? child) {
-    final Color color = widget.controller.status == AnimationStatus.reverse ? _masklessColor : _mask.value;
+    final Color color = widget.controller.status == AnimationStatus.reverse
+        ? _masklessColor
+        : _mask.value;
     return Positioned.fromRect(
       rect: _rect.value!,
       child: ShaderMask(
@@ -373,7 +379,8 @@ class _ViewableRoute<T> extends PopupRoute<T> {
 
   static const Color _kModalBarrierColor = Color(0x6604040F);
 
-  static const Duration _kModalPopupTransitionDuration = Duration(milliseconds: 335);
+  static const Duration _kModalPopupTransitionDuration =
+      Duration(milliseconds: 335);
 
   final List<Widget> _actions;
   final _ViewablePreviewBuilderChildless? _builder;
@@ -396,7 +403,8 @@ class _ViewableRoute<T> extends PopupRoute<T> {
   static final RectTween _rectTween = RectTween();
   static final Animatable<Rect?> _rectAnimatable = _rectTween.chain(_curve);
   static final RectTween _rectTweenReverse = RectTween();
-  static final Animatable<Rect?> _rectAnimatableReverse = _rectTweenReverse.chain(
+  static final Animatable<Rect?> _rectAnimatableReverse =
+      _rectTweenReverse.chain(
     _curveReverse,
   );
   static final RectTween _sheetRectTween = RectTween();
@@ -407,10 +415,12 @@ class _ViewableRoute<T> extends PopupRoute<T> {
     _curveReverse,
   );
   static final Tween<double> _sheetScaleTween = Tween<double>();
-  static final Animatable<double> _sheetScaleAnimatable = _sheetScaleTween.chain(
+  static final Animatable<double> _sheetScaleAnimatable =
+      _sheetScaleTween.chain(
     _curve,
   );
-  static final Animatable<double> _sheetScaleAnimatableReverse = _sheetScaleTween.chain(
+  static final Animatable<double> _sheetScaleAnimatableReverse =
+      _sheetScaleTween.chain(
     _curveReverse,
   );
   final Tween<double> _opacityTween = Tween<double>(begin: 0.0, end: 1.0);
@@ -441,7 +451,8 @@ class _ViewableRoute<T> extends PopupRoute<T> {
     return offsetScaled & sizeScaled;
   }
 
-  static AlignmentDirectional getSheetAlignment(_ViewableLocation contextMenuLocation) {
+  static AlignmentDirectional getSheetAlignment(
+      _ViewableLocation contextMenuLocation) {
     switch (contextMenuLocation) {
       case _ViewableLocation.center:
         return AlignmentDirectional.topCenter;
@@ -452,17 +463,24 @@ class _ViewableRoute<T> extends PopupRoute<T> {
     }
   }
 
-  static Rect _getSheetRectBegin(Orientation? orientation, _ViewableLocation contextMenuLocation, Rect childRect, Rect sheetRect) {
+  static Rect _getSheetRectBegin(Orientation? orientation,
+      _ViewableLocation contextMenuLocation, Rect childRect, Rect sheetRect) {
     switch (contextMenuLocation) {
       case _ViewableLocation.center:
-        final Offset target = orientation == Orientation.portrait ? childRect.bottomCenter : childRect.topCenter;
+        final Offset target = orientation == Orientation.portrait
+            ? childRect.bottomCenter
+            : childRect.topCenter;
         final Offset centered = target - Offset(sheetRect.width / 2, 0.0);
         return centered & sheetRect.size;
       case _ViewableLocation.right:
-        final Offset target = orientation == Orientation.portrait ? childRect.bottomRight : childRect.topRight;
+        final Offset target = orientation == Orientation.portrait
+            ? childRect.bottomRight
+            : childRect.topRight;
         return (target - Offset(sheetRect.width, 0.0)) & sheetRect.size;
       case _ViewableLocation.left:
-        final Offset target = orientation == Orientation.portrait ? childRect.bottomLeft : childRect.topLeft;
+        final Offset target = orientation == Orientation.portrait
+            ? childRect.bottomLeft
+            : childRect.topLeft;
         return target & sheetRect.size;
     }
   }
@@ -478,7 +496,9 @@ class _ViewableRoute<T> extends PopupRoute<T> {
   }
 
   void _updateTweenRects() {
-    final Rect childRect = _scale == null ? _getRect(_childGlobalKey) : _getScaledRect(_childGlobalKey, _scale!);
+    final Rect childRect = _scale == null
+        ? _getRect(_childGlobalKey)
+        : _getScaledRect(_childGlobalKey, _scale!);
     _rectTween.begin = _previousChildRect;
     _rectTween.end = childRect;
 
@@ -546,21 +566,29 @@ class _ViewableRoute<T> extends PopupRoute<T> {
   }
 
   @override
-  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
+  Widget buildPage(BuildContext context, Animation<double> animation,
+      Animation<double> secondaryAnimation) {
     return Container();
   }
 
   @override
-  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
+  Widget buildTransitions(BuildContext context, Animation<double> animation,
+      Animation<double> secondaryAnimation, Widget child) {
     return OrientationBuilder(
       builder: (BuildContext context, Orientation orientation) {
         _lastOrientation = orientation;
 
         if (!animation.isCompleted) {
           final bool reverse = animation.status == AnimationStatus.reverse;
-          final Rect rect = reverse ? _rectAnimatableReverse.evaluate(animation)! : _rectAnimatable.evaluate(animation)!;
-          final Rect sheetRect = reverse ? _sheetRectAnimatableReverse.evaluate(animation)! : _sheetRectAnimatable.evaluate(animation)!;
-          final double sheetScale = reverse ? _sheetScaleAnimatableReverse.evaluate(animation) : _sheetScaleAnimatable.evaluate(animation);
+          final Rect rect = reverse
+              ? _rectAnimatableReverse.evaluate(animation)!
+              : _rectAnimatable.evaluate(animation)!;
+          final Rect sheetRect = reverse
+              ? _sheetRectAnimatableReverse.evaluate(animation)!
+              : _sheetRectAnimatable.evaluate(animation)!;
+          final double sheetScale = reverse
+              ? _sheetScaleAnimatableReverse.evaluate(animation)
+              : _sheetScaleAnimatable.evaluate(animation);
           return Stack(
             children: <Widget>[
               Positioned.fromRect(
@@ -623,7 +651,8 @@ class _ContextMenuRouteStatic extends StatefulWidget {
   _ContextMenuRouteStaticState createState() => _ContextMenuRouteStaticState();
 }
 
-class _ContextMenuRouteStaticState extends State<_ContextMenuRouteStatic> with TickerProviderStateMixin {
+class _ContextMenuRouteStaticState extends State<_ContextMenuRouteStatic>
+    with TickerProviderStateMixin {
   static const double _kMinScale = 0.8;
 
   static const double _kSheetScaleThreshold = 0.9;
@@ -639,7 +668,8 @@ class _ContextMenuRouteStaticState extends State<_ContextMenuRouteStatic> with T
   late Animation<double> _sheetScaleAnimation;
   late Animation<double> _sheetOpacityAnimation;
 
-  static double _getScale(Orientation orientation, double maxDragDistance, double dy) {
+  static double _getScale(
+      Orientation orientation, double maxDragDistance, double dy) {
     final double dyDirectional = dy <= 0.0 ? dy : -dy;
     return math.max(
       _kMinScale,
@@ -659,11 +689,13 @@ class _ContextMenuRouteStaticState extends State<_ContextMenuRouteStatic> with T
   void _onPanEnd(DragEndDetails details) {
     if (details.velocity.pixelsPerSecond.dy.abs() >= kMinFlingVelocity) {
       final bool flingIsAway = details.velocity.pixelsPerSecond.dy > 0;
-      final double finalPosition = flingIsAway ? _moveAnimation.value.dy + 100.0 : 0.0;
+      final double finalPosition =
+          flingIsAway ? _moveAnimation.value.dy + 100.0 : 0.0;
 
       if (flingIsAway && _sheetController.status != AnimationStatus.forward) {
         _sheetController.forward();
-      } else if (!flingIsAway && _sheetController.status != AnimationStatus.reverse) {
+      } else if (!flingIsAway &&
+          _sheetController.status != AnimationStatus.reverse) {
         _sheetController.reverse();
       }
 
@@ -713,20 +745,29 @@ class _ContextMenuRouteStaticState extends State<_ContextMenuRouteStatic> with T
     widget.onDismiss!(context, _lastScale, _sheetOpacityAnimation.value);
   }
 
-  Alignment _getChildAlignment(Orientation orientation, _ViewableLocation contextMenuLocation) {
+  Alignment _getChildAlignment(
+      Orientation orientation, _ViewableLocation contextMenuLocation) {
     switch (contextMenuLocation) {
       case _ViewableLocation.center:
-        return orientation == Orientation.portrait ? Alignment.bottomCenter : Alignment.topRight;
+        return orientation == Orientation.portrait
+            ? Alignment.bottomCenter
+            : Alignment.topRight;
       case _ViewableLocation.right:
-        return orientation == Orientation.portrait ? Alignment.bottomCenter : Alignment.topLeft;
+        return orientation == Orientation.portrait
+            ? Alignment.bottomCenter
+            : Alignment.topLeft;
       case _ViewableLocation.left:
-        return orientation == Orientation.portrait ? Alignment.bottomCenter : Alignment.topRight;
+        return orientation == Orientation.portrait
+            ? Alignment.bottomCenter
+            : Alignment.topRight;
     }
   }
 
   void _setDragOffset(Offset dragOffset) {
     final double endX = _kPadding * dragOffset.dx / _kDamping;
-    final double endY = dragOffset.dy >= 0.0 ? dragOffset.dy : _kPadding * dragOffset.dy / _kDamping;
+    final double endY = dragOffset.dy >= 0.0
+        ? dragOffset.dy
+        : _kPadding * dragOffset.dy / _kDamping;
     setState(() {
       _dragOffset = dragOffset;
       _moveAnimation = Tween<Offset>(
@@ -742,15 +783,20 @@ class _ContextMenuRouteStaticState extends State<_ContextMenuRouteStatic> with T
         ),
       );
 
-      if (_lastScale <= _kSheetScaleThreshold && _sheetController.status != AnimationStatus.forward && _sheetScaleAnimation.value != 0.0) {
+      if (_lastScale <= _kSheetScaleThreshold &&
+          _sheetController.status != AnimationStatus.forward &&
+          _sheetScaleAnimation.value != 0.0) {
         _sheetController.forward();
-      } else if (_lastScale > _kSheetScaleThreshold && _sheetController.status != AnimationStatus.reverse && _sheetScaleAnimation.value != 1.0) {
+      } else if (_lastScale > _kSheetScaleThreshold &&
+          _sheetController.status != AnimationStatus.reverse &&
+          _sheetScaleAnimation.value != 1.0) {
         _sheetController.reverse();
       }
     });
   }
 
-  List<Widget> _getChildren(Orientation orientation, _ViewableLocation contextMenuLocation) {
+  List<Widget> _getChildren(
+      Orientation orientation, _ViewableLocation contextMenuLocation) {
     final Expanded child = Expanded(
       child: Align(
         alignment: _getChildAlignment(
@@ -781,7 +827,9 @@ class _ContextMenuRouteStaticState extends State<_ContextMenuRouteStatic> with T
       case _ViewableLocation.center:
         return <Widget>[child, spacer, sheet];
       case _ViewableLocation.right:
-        return orientation == Orientation.portrait ? <Widget>[child, spacer, sheet] : <Widget>[sheet, spacer, child];
+        return orientation == Orientation.portrait
+            ? <Widget>[child, spacer, sheet]
+            : <Widget>[sheet, spacer, child];
       case _ViewableLocation.left:
         return <Widget>[child, spacer, sheet];
     }
@@ -915,7 +963,8 @@ class _ViewableSheet extends StatelessWidget {
                   decoration: BoxDecoration(
                     border: Border(
                         top: BorderSide(
-                      color: CupertinoDynamicColor.resolve(_borderColor, context),
+                      color:
+                          CupertinoDynamicColor.resolve(_borderColor, context),
                       width: 0.5,
                     )),
                   ),
diff --git a/refilc_mobile_ui/lib/common/widgets/cretification/certification_tile.dart b/refilc_mobile_ui/lib/common/widgets/cretification/certification_tile.dart
index 683f084..5702fbc 100644
--- a/refilc_mobile_ui/lib/common/widgets/cretification/certification_tile.dart
+++ b/refilc_mobile_ui/lib/common/widgets/cretification/certification_tile.dart
@@ -59,7 +59,7 @@ class CertificationTile extends StatelessWidget {
     }
 
     return Material(
-      color: Theme.of(context).colorScheme.background,
+      color: Theme.of(context).colorScheme.surface,
       borderRadius: BorderRadius.circular(8.0),
       child: Padding(
         padding: padding ?? const EdgeInsets.symmetric(horizontal: 8.0),
diff --git a/refilc_mobile_ui/lib/common/widgets/custom_segmented_control.dart b/refilc_mobile_ui/lib/common/widgets/custom_segmented_control.dart
index a9bf40b..86d44f0 100644
--- a/refilc_mobile_ui/lib/common/widgets/custom_segmented_control.dart
+++ b/refilc_mobile_ui/lib/common/widgets/custom_segmented_control.dart
@@ -38,7 +38,7 @@ class CustomSegmentedControl extends StatelessWidget {
         borderRadius: BorderRadius.circular(12.0),
       ),
       thumbDecoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.background,
+        color: Theme.of(context).colorScheme.surface,
         borderRadius: BorderRadius.circular(10.0),
         // boxShadow: [
         //   BoxShadow(
diff --git a/refilc_mobile_ui/lib/common/widgets/event/event_tile.dart b/refilc_mobile_ui/lib/common/widgets/event/event_tile.dart
index 17c8f7e..6c0dc2a 100644
--- a/refilc_mobile_ui/lib/common/widgets/event/event_tile.dart
+++ b/refilc_mobile_ui/lib/common/widgets/event/event_tile.dart
@@ -13,7 +13,7 @@ class EventTile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Material(
-      color: Theme.of(context).colorScheme.background,
+      color: Theme.of(context).colorScheme.surface,
       borderRadius: BorderRadius.circular(14.0),
       child: Padding(
         padding: padding ?? const EdgeInsets.symmetric(horizontal: 8.0),
diff --git a/refilc_mobile_ui/lib/common/widgets/exam/exam_viewable.dart b/refilc_mobile_ui/lib/common/widgets/exam/exam_viewable.dart
index 207b72f..129d8ae 100644
--- a/refilc_mobile_ui/lib/common/widgets/exam/exam_viewable.dart
+++ b/refilc_mobile_ui/lib/common/widgets/exam/exam_viewable.dart
@@ -208,7 +208,7 @@ class ExamPopup extends StatelessWidget {
                   Container(
                     width: double.infinity,
                     decoration: BoxDecoration(
-                      color: Theme.of(context).colorScheme.background,
+                      color: Theme.of(context).colorScheme.surface,
                       borderRadius: const BorderRadius.vertical(
                           top: Radius.circular(12.0),
                           bottom: Radius.circular(6.0)),
@@ -266,7 +266,7 @@ class ExamPopup extends StatelessWidget {
                     Container(
                       width: double.infinity,
                       decoration: BoxDecoration(
-                        color: Theme.of(context).colorScheme.background,
+                        color: Theme.of(context).colorScheme.surface,
                         borderRadius: const BorderRadius.vertical(
                             top: Radius.circular(6.0),
                             bottom: Radius.circular(12.0)),
@@ -348,7 +348,7 @@ class ExamPopup extends StatelessWidget {
                   //   child: Container(
                   //     width: double.infinity,
                   //     decoration: BoxDecoration(
-                  //       color: Theme.of(context).colorScheme.background,
+                  //       color: Theme.of(context).colorScheme.surface,
                   //       borderRadius: BorderRadius.circular(12.0),
                   //     ),
                   //     padding: const EdgeInsets.all(16.0),
diff --git a/refilc_mobile_ui/lib/common/widgets/lesson/changed_lesson_tile.dart b/refilc_mobile_ui/lib/common/widgets/lesson/changed_lesson_tile.dart
index ffcbb25..95c4e68 100644
--- a/refilc_mobile_ui/lib/common/widgets/lesson/changed_lesson_tile.dart
+++ b/refilc_mobile_ui/lib/common/widgets/lesson/changed_lesson_tile.dart
@@ -34,7 +34,7 @@ class ChangedLessonTile extends StatelessWidget {
     }
 
     return Material(
-      color: Theme.of(context).colorScheme.background,
+      color: Theme.of(context).colorScheme.surface,
       borderRadius: BorderRadius.circular(14.0),
       child: Padding(
         padding: padding ?? const EdgeInsets.symmetric(horizontal: 8.0),
diff --git a/refilc_mobile_ui/lib/common/widgets/lesson/lesson_viewable.dart b/refilc_mobile_ui/lib/common/widgets/lesson/lesson_viewable.dart
index cec6307..90a3402 100644
--- a/refilc_mobile_ui/lib/common/widgets/lesson/lesson_viewable.dart
+++ b/refilc_mobile_ui/lib/common/widgets/lesson/lesson_viewable.dart
@@ -417,7 +417,7 @@ class TimetableLessonPopup extends StatelessWidget {
                   Container(
                     width: double.infinity,
                     decoration: BoxDecoration(
-                      color: Theme.of(context).colorScheme.background,
+                      color: Theme.of(context).colorScheme.surface,
                       borderRadius: const BorderRadius.vertical(
                         top: Radius.circular(12.0),
                         bottom: Radius.circular(6.0),
@@ -521,7 +521,7 @@ class TimetableLessonPopup extends StatelessWidget {
                     Container(
                       width: double.infinity,
                       decoration: BoxDecoration(
-                        color: Theme.of(context).colorScheme.background,
+                        color: Theme.of(context).colorScheme.surface,
                         borderRadius: const BorderRadius.vertical(
                           top: Radius.circular(6.0),
                           bottom: Radius.circular(6.0),
@@ -549,7 +549,7 @@ class TimetableLessonPopup extends StatelessWidget {
                   Container(
                     width: double.infinity,
                     decoration: BoxDecoration(
-                      color: Theme.of(context).colorScheme.background,
+                      color: Theme.of(context).colorScheme.surface,
                       borderRadius: BorderRadius.vertical(
                         top: const Radius.circular(6.0),
                         bottom: lesson.exam != ''
@@ -580,7 +580,7 @@ class TimetableLessonPopup extends StatelessWidget {
                     Container(
                       width: double.infinity,
                       decoration: BoxDecoration(
-                        color: Theme.of(context).colorScheme.background,
+                        color: Theme.of(context).colorScheme.surface,
                         borderRadius: const BorderRadius.vertical(
                             top: Radius.circular(6.0),
                             bottom: Radius.circular(12.0)),
@@ -654,7 +654,7 @@ class TimetableLessonPopup extends StatelessWidget {
                   //   child: Container(
                   //     width: double.infinity,
                   //     decoration: BoxDecoration(
-                  //       color: Theme.of(context).colorScheme.background,
+                  //       color: Theme.of(context).colorScheme.surface,
                   //       borderRadius: BorderRadius.circular(12.0),
                   //     ),
                   //     padding: const EdgeInsets.all(16.0),
diff --git a/refilc_mobile_ui/lib/common/widgets/message/message_viewable.dart b/refilc_mobile_ui/lib/common/widgets/message/message_viewable.dart
index 3e22685..a46192f 100644
--- a/refilc_mobile_ui/lib/common/widgets/message/message_viewable.dart
+++ b/refilc_mobile_ui/lib/common/widgets/message/message_viewable.dart
@@ -23,9 +23,9 @@ class MessageViewable extends StatelessWidget {
           RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
       closedShape:
           RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
-      middleColor: Theme.of(context).colorScheme.background,
+      middleColor: Theme.of(context).colorScheme.surface,
       openColor: Theme.of(context).scaffoldBackgroundColor,
-      closedColor: Theme.of(context).colorScheme.background,
+      closedColor: Theme.of(context).colorScheme.surface,
       transitionType: ContainerTransitionType.fadeThrough,
       transitionDuration: const Duration(milliseconds: 400),
       useRootNavigator: true,
diff --git a/refilc_mobile_ui/lib/common/widgets/statistics_tile.dart b/refilc_mobile_ui/lib/common/widgets/statistics_tile.dart
index e655aa9..23afdce 100644
--- a/refilc_mobile_ui/lib/common/widgets/statistics_tile.dart
+++ b/refilc_mobile_ui/lib/common/widgets/statistics_tile.dart
@@ -48,7 +48,7 @@ class StatisticsTile extends StatelessWidget {
       padding: const EdgeInsets.all(18.0),
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(12.0),
-        color: Theme.of(context).colorScheme.background,
+        color: Theme.of(context).colorScheme.surface,
         boxShadow: [
           if (Provider.of<SettingsProvider>(context, listen: false)
               .shadowEffect)
diff --git a/refilc_mobile_ui/lib/pages/grades/average_selector.dart b/refilc_mobile_ui/lib/pages/grades/average_selector.dart
index e80ef04..854a548 100644
--- a/refilc_mobile_ui/lib/pages/grades/average_selector.dart
+++ b/refilc_mobile_ui/lib/pages/grades/average_selector.dart
@@ -84,9 +84,9 @@ class AverageSelectorState extends State<AverageSelector> {
         elevation: 8,
         scrollbarTheme: ScrollbarThemeData(
           radius: const Radius.circular(40),
-          thickness: MaterialStateProperty.all<double>(6.0),
-          trackVisibility: MaterialStateProperty.all<bool>(true),
-          thumbVisibility: MaterialStateProperty.all<bool>(true),
+          thickness: WidgetStateProperty.all<double>(6.0),
+          trackVisibility: WidgetStateProperty.all<bool>(true),
+          thumbVisibility: WidgetStateProperty.all<bool>(true),
         ),
         offset: const Offset(-10, -10),
       ),
diff --git a/refilc_mobile_ui/lib/pages/grades/grades_page.dart b/refilc_mobile_ui/lib/pages/grades/grades_page.dart
index 4286490..c81bc2f 100644
--- a/refilc_mobile_ui/lib/pages/grades/grades_page.dart
+++ b/refilc_mobile_ui/lib/pages/grades/grades_page.dart
@@ -205,7 +205,7 @@ class GradesPageState extends State<GradesPage> {
                         ? const Radius.circular(8.0)
                         : const Radius.circular(16.0),
                   ),
-                  color: Theme.of(context).colorScheme.background,
+                  color: Theme.of(context).colorScheme.surface,
                 ),
                 child: Padding(
                   padding: const EdgeInsets.symmetric(
@@ -256,7 +256,7 @@ class GradesPageState extends State<GradesPage> {
                           ? const Radius.circular(8.0)
                           : const Radius.circular(16.0),
                     ),
-                    color: Theme.of(context).colorScheme.background,
+                    color: Theme.of(context).colorScheme.surface,
                   ),
                   child: Padding(
                     padding: const EdgeInsets.only(
@@ -307,7 +307,7 @@ class GradesPageState extends State<GradesPage> {
                       bottomLeft: Radius.circular(16.0),
                       bottomRight: Radius.circular(16.0),
                     ),
-                    color: Theme.of(context).colorScheme.background,
+                    color: Theme.of(context).colorScheme.surface,
                   ),
                   child: ExamViewable(
                     nearestExam,
@@ -689,7 +689,7 @@ class GradesPageState extends State<GradesPage> {
         Container(
           decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(12.0),
-              color: Theme.of(context).colorScheme.background),
+              color: Theme.of(context).colorScheme.surface),
           child: ListTile(
             title: Row(
               children: [
@@ -721,7 +721,7 @@ class GradesPageState extends State<GradesPage> {
         Container(
           decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(12.0),
-              color: Theme.of(context).colorScheme.background),
+              color: Theme.of(context).colorScheme.surface),
           child: ListTile(
             title: Row(
               children: [
@@ -779,7 +779,7 @@ class GradesPageState extends State<GradesPage> {
         Container(
           decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(12.0),
-              color: Theme.of(context).colorScheme.background),
+              color: Theme.of(context).colorScheme.surface),
           child: SwitchListTile(
             title: Row(
               children: [
diff --git a/refilc_mobile_ui/lib/pages/grades/graph.dart b/refilc_mobile_ui/lib/pages/grades/graph.dart
index a52720b..6eac865 100644
--- a/refilc_mobile_ui/lib/pages/grades/graph.dart
+++ b/refilc_mobile_ui/lib/pages/grades/graph.dart
@@ -179,7 +179,7 @@ class GradeGraphState extends State<GradeGraph> {
                   ? Alignment.topRight
                   : Alignment.topLeft,
               style: TextStyle(
-                backgroundColor: Theme.of(context).colorScheme.background,
+                backgroundColor: Theme.of(context).colorScheme.surface,
                 color: AppColors.of(context).text,
                 fontSize: 16.0,
                 fontWeight: FontWeight.w600,
diff --git a/refilc_mobile_ui/lib/pages/home/live_card/live_card_widget.dart b/refilc_mobile_ui/lib/pages/home/live_card/live_card_widget.dart
index 07f3933..db17acf 100644
--- a/refilc_mobile_ui/lib/pages/home/live_card/live_card_widget.dart
+++ b/refilc_mobile_ui/lib/pages/home/live_card/live_card_widget.dart
@@ -72,10 +72,10 @@ class _LiveCardWidgetState extends State<LiveCardWidget> {
               ? const EdgeInsets.all(12.0)
               : EdgeInsets.zero,
           decoration: BoxDecoration(
-            // color: Theme.of(context).colorScheme.background,
+            // color: Theme.of(context).colorScheme.surface,
             color: widget.children != null
                 ? Colors.transparent
-                : Theme.of(context).colorScheme.background,
+                : Theme.of(context).colorScheme.surface,
             borderRadius: BorderRadius.circular(16.0),
             boxShadow: [
               if (Provider.of<SettingsProvider>(context, listen: false)
diff --git a/refilc_mobile_ui/lib/pages/messages/messages_page.dart b/refilc_mobile_ui/lib/pages/messages/messages_page.dart
index 117c280..6d7cdbf 100644
--- a/refilc_mobile_ui/lib/pages/messages/messages_page.dart
+++ b/refilc_mobile_ui/lib/pages/messages/messages_page.dart
@@ -125,7 +125,7 @@ class MessagesPageState extends State<MessagesPage>
                     BackButton(
                       style: ButtonStyle(
                         splashFactory: NoSplash.splashFactory,
-                        padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
+                        padding: WidgetStateProperty.all<EdgeInsetsGeometry>(
                             EdgeInsets.zero),
                       ),
                     ),
diff --git a/refilc_mobile_ui/lib/pages/messages/send_message/send_message.dart b/refilc_mobile_ui/lib/pages/messages/send_message/send_message.dart
index 869aff2..e3dbe22 100644
--- a/refilc_mobile_ui/lib/pages/messages/send_message/send_message.dart
+++ b/refilc_mobile_ui/lib/pages/messages/send_message/send_message.dart
@@ -105,9 +105,9 @@ class SendMessageSheetState extends State<SendMessageSheet> {
                 elevation: 8,
                 scrollbarTheme: ScrollbarThemeData(
                   radius: const Radius.circular(40),
-                  thickness: MaterialStateProperty.all<double>(6.0),
-                  trackVisibility: MaterialStateProperty.all<bool>(true),
-                  thumbVisibility: MaterialStateProperty.all<bool>(true),
+                  thickness: WidgetStateProperty.all<double>(6.0),
+                  trackVisibility: WidgetStateProperty.all<bool>(true),
+                  thumbVisibility: WidgetStateProperty.all<bool>(true),
                 ),
                 offset: const Offset(-10, -10),
               ),
diff --git a/refilc_mobile_ui/lib/pages/notes/notes_page.dart b/refilc_mobile_ui/lib/pages/notes/notes_page.dart
index 4de4664..537fe24 100644
--- a/refilc_mobile_ui/lib/pages/notes/notes_page.dart
+++ b/refilc_mobile_ui/lib/pages/notes/notes_page.dart
@@ -431,7 +431,7 @@ class NotesPageState extends State<NotesPage> with TickerProviderStateMixin {
         Container(
           decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(12.0),
-              color: Theme.of(context).colorScheme.background),
+              color: Theme.of(context).colorScheme.surface),
           child: ListTile(
             title: Row(
               children: [
@@ -453,7 +453,7 @@ class NotesPageState extends State<NotesPage> with TickerProviderStateMixin {
         Container(
           decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(12.0),
-              color: Theme.of(context).colorScheme.background),
+              color: Theme.of(context).colorScheme.surface),
           child: ListTile(
             title: Row(
               children: [
@@ -477,7 +477,7 @@ class NotesPageState extends State<NotesPage> with TickerProviderStateMixin {
         Container(
           decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(12.0),
-              color: Theme.of(context).colorScheme.background),
+              color: Theme.of(context).colorScheme.surface),
           child: ListTile(
             title: Row(
               children: [
diff --git a/refilc_mobile_ui/lib/pages/notes/submenu/self_note_tile.dart b/refilc_mobile_ui/lib/pages/notes/submenu/self_note_tile.dart
index d1d5095..999c975 100644
--- a/refilc_mobile_ui/lib/pages/notes/submenu/self_note_tile.dart
+++ b/refilc_mobile_ui/lib/pages/notes/submenu/self_note_tile.dart
@@ -22,7 +22,7 @@ class SelfNoteTile extends StatelessWidget {
             padding: const EdgeInsets.all(10.0),
             decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(16.0),
-              color: Theme.of(context).colorScheme.background,
+              color: Theme.of(context).colorScheme.surface,
               boxShadow: [
                 if (Provider.of<SettingsProvider>(context, listen: false)
                     .shadowEffect)
diff --git a/refilc_mobile_ui/lib/pages/timetable/timetable_page.dart b/refilc_mobile_ui/lib/pages/timetable/timetable_page.dart
index 0610d60..388a9ac 100644
--- a/refilc_mobile_ui/lib/pages/timetable/timetable_page.dart
+++ b/refilc_mobile_ui/lib/pages/timetable/timetable_page.dart
@@ -700,7 +700,7 @@ class TimetablePageState extends State<TimetablePage>
                                                     ],
                                                     color: Theme.of(context)
                                                         .colorScheme
-                                                        .background,
+                                                        .surface,
                                                     borderRadius:
                                                         BorderRadius.only(
                                                       topLeft: index == 0
@@ -786,7 +786,7 @@ class TimetablePageState extends State<TimetablePage>
                           indicatorPadding:
                               const EdgeInsets.symmetric(horizontal: 10.0),
                           indicator: BoxDecoration(
-                            color: Theme.of(context).colorScheme.background,
+                            color: Theme.of(context).colorScheme.surface,
                             // color: Colors.transparent,
                             // border: Border.all(
                             //     color: AppColors.of(context)
@@ -798,7 +798,7 @@ class TimetablePageState extends State<TimetablePage>
                             //     .withOpacity(0.25),
                             borderRadius: BorderRadius.circular(16.0),
                           ),
-                          overlayColor: MaterialStateProperty.all(
+                          overlayColor: WidgetStateProperty.all(
                               const Color(0x00000000)),
                           // Tabs
                           padding: const EdgeInsets.symmetric(
@@ -899,7 +899,7 @@ class TimetablePageState extends State<TimetablePage>
         Container(
           decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(12.0),
-              color: Theme.of(context).colorScheme.background),
+              color: Theme.of(context).colorScheme.surface),
           child: ListTile(
             contentPadding: const EdgeInsets.only(left: 16.0, right: 10.0),
             title: Row(
@@ -943,7 +943,7 @@ class TimetablePageState extends State<TimetablePage>
         Container(
           decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(12.0),
-              color: Theme.of(context).colorScheme.background),
+              color: Theme.of(context).colorScheme.surface),
           child: SwitchListTile(
             contentPadding: const EdgeInsets.only(left: 16.0, right: 10.0),
             title: Row(
@@ -990,7 +990,7 @@ class TimetablePageState extends State<TimetablePage>
         Container(
           decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(12.0),
-              color: Theme.of(context).colorScheme.background),
+              color: Theme.of(context).colorScheme.surface),
           child: SwitchListTile(
             contentPadding: const EdgeInsets.only(left: 16.0, right: 10.0),
             title: Row(
diff --git a/refilc_mobile_ui/lib/screens/error_report_screen.dart b/refilc_mobile_ui/lib/screens/error_report_screen.dart
index aed20d1..6313bd5 100644
--- a/refilc_mobile_ui/lib/screens/error_report_screen.dart
+++ b/refilc_mobile_ui/lib/screens/error_report_screen.dart
@@ -110,10 +110,10 @@ class ErrorReportScreen extends StatelessWidget {
                 height: 48,
                 child: TextButton(
                   style: ButtonStyle(
-                    padding: MaterialStateProperty.all(
+                    padding: WidgetStateProperty.all(
                         const EdgeInsets.symmetric(vertical: 10.0)),
-                    backgroundColor: MaterialStateProperty.all(Colors.black),
-                    shape: MaterialStateProperty.all(
+                    backgroundColor: WidgetStateProperty.all(Colors.black),
+                    shape: WidgetStateProperty.all(
                       RoundedRectangleBorder(
                           borderRadius: BorderRadius.circular(12.0)),
                     ),
@@ -135,18 +135,18 @@ class ErrorReportScreen extends StatelessWidget {
                 height: 48,
                 child: OutlinedButton(
                   style: ButtonStyle(
-                    padding: MaterialStateProperty.all(
+                    padding: WidgetStateProperty.all(
                       const EdgeInsets.symmetric(vertical: 14.0),
                     ),
-                    backgroundColor: MaterialStateProperty.all(
+                    backgroundColor: WidgetStateProperty.all(
                       const Color(0xFFF3F7FE),
                     ),
-                    shape: MaterialStateProperty.all(
+                    shape: WidgetStateProperty.all(
                       RoundedRectangleBorder(
                         borderRadius: BorderRadius.circular(12.0),
                       ),
                     ),
-                    side: MaterialStateProperty.all(
+                    side: WidgetStateProperty.all(
                       const BorderSide(width: 1.0, color: Color(0xFFC7D3EB)),
                     ),
                   ),
diff --git a/refilc_mobile_ui/lib/screens/error_screen.dart b/refilc_mobile_ui/lib/screens/error_screen.dart
index 4439395..cc119d3 100644
--- a/refilc_mobile_ui/lib/screens/error_screen.dart
+++ b/refilc_mobile_ui/lib/screens/error_screen.dart
@@ -39,7 +39,7 @@ class ErrorScreen extends StatelessWidget {
                   width: double.infinity,
                   decoration: BoxDecoration(
                     borderRadius: BorderRadius.circular(14.0),
-                    color: Theme.of(context).colorScheme.background,
+                    color: Theme.of(context).colorScheme.surface,
                   ),
                   child: CupertinoScrollbar(
                     child: SingleChildScrollView(
diff --git a/refilc_mobile_ui/lib/screens/login/login_screen_new.dart b/refilc_mobile_ui/lib/screens/login/login_screen_new.dart
index 7c9cab0..d2b3fd0 100644
--- a/refilc_mobile_ui/lib/screens/login/login_screen_new.dart
+++ b/refilc_mobile_ui/lib/screens/login/login_screen_new.dart
@@ -221,7 +221,7 @@
 //                                       horizontal: 16),
 //                                   child: FilledButton(
 //                                       style: ButtonStyle(
-//                                           shape: MaterialStateProperty.all<
+//                                           shape: WidgetStateProperty.all<
 //                                                   RoundedRectangleBorder>(
 //                                               const RoundedRectangleBorder(
 //                                         borderRadius: BorderRadius.all(
diff --git a/refilc_mobile_ui/lib/screens/login/school_input/school_input_overlay.dart b/refilc_mobile_ui/lib/screens/login/school_input/school_input_overlay.dart
index 4279507..2fbc71e 100644
--- a/refilc_mobile_ui/lib/screens/login/school_input/school_input_overlay.dart
+++ b/refilc_mobile_ui/lib/screens/login/school_input/school_input_overlay.dart
@@ -47,7 +47,7 @@ class SchoolInputOverlayWidget extends StatelessWidget {
               showWhenUnlinked: false,
               offset: Offset(0.0, size.height + 5.0),
               child: Material(
-                color: Theme.of(context).colorScheme.background,
+                color: Theme.of(context).colorScheme.surface,
                 shape: RoundedRectangleBorder(
                     borderRadius: BorderRadius.circular(8.0)),
                 elevation: 4.0,
diff --git a/refilc_mobile_ui/lib/screens/navigation/navigation_screen.dart b/refilc_mobile_ui/lib/screens/navigation/navigation_screen.dart
index cfef95e..0a43ba8 100644
--- a/refilc_mobile_ui/lib/screens/navigation/navigation_screen.dart
+++ b/refilc_mobile_ui/lib/screens/navigation/navigation_screen.dart
@@ -302,7 +302,7 @@ class NavigationScreenState extends State<NavigationScreen>
                 children: [
                   // Status bar
                   Material(
-                    color: Theme.of(context).colorScheme.background,
+                    color: Theme.of(context).colorScheme.surface,
                     child: const StatusBar(),
                   ),
 
diff --git a/refilc_mobile_ui/lib/screens/settings/modify_subject_names.dart b/refilc_mobile_ui/lib/screens/settings/modify_subject_names.dart
index aa1c7be..25e4e61 100644
--- a/refilc_mobile_ui/lib/screens/settings/modify_subject_names.dart
+++ b/refilc_mobile_ui/lib/screens/settings/modify_subject_names.dart
@@ -178,8 +178,8 @@ class _ModifySubjectNamesState extends State<ModifySubjectNames> {
                   elevation: 8,
                   scrollbarTheme: ScrollbarThemeData(
                     radius: const Radius.circular(40),
-                    thickness: MaterialStateProperty.all<double>(6.0),
-                    trackVisibility: MaterialStateProperty.all<bool>(true),
+                    thickness: WidgetStateProperty.all<double>(6.0),
+                    trackVisibility: WidgetStateProperty.all<bool>(true),
                   ),
                   offset: const Offset(-10, -10),
                 ),
diff --git a/refilc_mobile_ui/lib/screens/settings/settings_screen.dart b/refilc_mobile_ui/lib/screens/settings/settings_screen.dart
index 50d431a..fc7b19a 100644
--- a/refilc_mobile_ui/lib/screens/settings/settings_screen.dart
+++ b/refilc_mobile_ui/lib/screens/settings/settings_screen.dart
@@ -993,7 +993,7 @@ class SettingsScreenState extends State<SettingsScreen>
                       fontWeight: FontWeight.w500,
                       color: AppColors.of(context).text),
                   decoration: BoxDecoration(
-                    color: Theme.of(context).colorScheme.background,
+                    color: Theme.of(context).colorScheme.surface,
                     borderRadius: BorderRadius.circular(12.0),
                     boxShadow: [
                       BoxShadow(
diff --git a/refilc_mobile_ui/lib/screens/settings/submenu/edit_subject.dart b/refilc_mobile_ui/lib/screens/settings/submenu/edit_subject.dart
index f5dcc09..a05cc77 100644
--- a/refilc_mobile_ui/lib/screens/settings/submenu/edit_subject.dart
+++ b/refilc_mobile_ui/lib/screens/settings/submenu/edit_subject.dart
@@ -202,7 +202,7 @@ class EditSubjectScreenState extends State<EditSubjectScreen> {
             children: [
               Container(
                 decoration: BoxDecoration(
-                    color: Theme.of(context).colorScheme.background,
+                    color: Theme.of(context).colorScheme.surface,
                     borderRadius:
                         const BorderRadius.all(Radius.circular(12.0))),
                 padding: const EdgeInsets.symmetric(vertical: 10.0),
@@ -302,7 +302,7 @@ class EditSubjectScreenState extends State<EditSubjectScreen> {
             children: [
               Container(
                 decoration: BoxDecoration(
-                    color: Theme.of(context).colorScheme.background,
+                    color: Theme.of(context).colorScheme.surface,
                     borderRadius:
                         const BorderRadius.all(Radius.circular(12.0))),
                 padding: const EdgeInsets.symmetric(vertical: 10.0),
diff --git a/refilc_mobile_ui/lib/screens/settings/submenu/grade_colors.dart b/refilc_mobile_ui/lib/screens/settings/submenu/grade_colors.dart
index 50445b3..ec98d95 100644
--- a/refilc_mobile_ui/lib/screens/settings/submenu/grade_colors.dart
+++ b/refilc_mobile_ui/lib/screens/settings/submenu/grade_colors.dart
@@ -79,7 +79,7 @@ class GradeColorsSettingsScreenState extends State<GradeColorsSettingsScreen> {
                   children: [
                     Container(
                       decoration: BoxDecoration(
-                        color: Theme.of(context).colorScheme.background,
+                        color: Theme.of(context).colorScheme.surface,
                         borderRadius: BorderRadius.circular(75.0),
                         boxShadow: [
                           BoxShadow(
diff --git a/refilc_mobile_ui/lib/screens/settings/submenu/paint_list.dart b/refilc_mobile_ui/lib/screens/settings/submenu/paint_list.dart
index 63a7f95..171b6e6 100644
--- a/refilc_mobile_ui/lib/screens/settings/submenu/paint_list.dart
+++ b/refilc_mobile_ui/lib/screens/settings/submenu/paint_list.dart
@@ -454,7 +454,7 @@ class PaintListScreenState extends State<PaintListScreen>
               ),
               Container(
                 decoration: BoxDecoration(
-                    color: Theme.of(context).colorScheme.background,
+                    color: Theme.of(context).colorScheme.surface,
                     borderRadius:
                         const BorderRadius.all(Radius.circular(12.0))),
                 padding: const EdgeInsets.symmetric(vertical: 10.0),
diff --git a/refilc_mobile_ui/lib/screens/settings/submenu/personalize_screen.dart b/refilc_mobile_ui/lib/screens/settings/submenu/personalize_screen.dart
index e1872fa..d8ea4d9 100644
--- a/refilc_mobile_ui/lib/screens/settings/submenu/personalize_screen.dart
+++ b/refilc_mobile_ui/lib/screens/settings/submenu/personalize_screen.dart
@@ -842,11 +842,11 @@ class PersonalizeSettingsScreenState extends State<PersonalizeSettingsScreen>
                                 scrollbarTheme: ScrollbarThemeData(
                                   radius: const Radius.circular(40),
                                   thickness:
-                                      MaterialStateProperty.all<double>(6.0),
+                                      WidgetStateProperty.all<double>(6.0),
                                   trackVisibility:
-                                      MaterialStateProperty.all<bool>(true),
+                                      WidgetStateProperty.all<bool>(true),
                                   thumbVisibility:
-                                      MaterialStateProperty.all<bool>(true),
+                                      WidgetStateProperty.all<bool>(true),
                                 ),
                               ),
                               customButton: PanelButton(
diff --git a/refilc_mobile_ui/lib/screens/settings/theme_screen.dart b/refilc_mobile_ui/lib/screens/settings/theme_screen.dart
index 5068d2b..eb7ec85 100644
--- a/refilc_mobile_ui/lib/screens/settings/theme_screen.dart
+++ b/refilc_mobile_ui/lib/screens/settings/theme_screen.dart
@@ -234,7 +234,7 @@ class _PremiumCustomAccentColorSettingState
     // bool hasAccess = Provider.of<PlusProvider>(context)
     //     .hasScope(PremiumScopes.customColors);
     bool hasAccess = true;
-    bool isBackgroundDifferent = Theme.of(context).colorScheme.background !=
+    bool isBackgroundDifferent = Theme.of(context).colorScheme.surface !=
         AppColors.of(context).background;
 
     ThemeMode currentTheme = Theme.of(context).brightness == Brightness.light
@@ -251,8 +251,8 @@ class _PremiumCustomAccentColorSettingState
         animation: _openAnimController,
         builder: (context, child) {
           final backgroundGradientBottomColor = isBackgroundDifferent
-              ? Theme.of(context).colorScheme.background
-              : HSVColor.fromColor(Theme.of(context).colorScheme.background)
+              ? Theme.of(context).colorScheme.surface
+              : HSVColor.fromColor(Theme.of(context).colorScheme.surface)
                   .withValue(currentTheme == ThemeMode.dark
                       ? 0.1 * _openAnimController.value
                       : 1.0 - (0.1 * _openAnimController.value))
@@ -271,7 +271,7 @@ class _PremiumCustomAccentColorSettingState
                 stops: const [0.0, 0.75],
                 colors: isBackgroundDifferent
                     ? [
-                        Theme.of(context).colorScheme.background.withOpacity(1 -
+                        Theme.of(context).colorScheme.surface.withOpacity(1 -
                             ((currentTheme == ThemeMode.dark ? 0.65 : 0.25) *
                                 backgroundAnimation.value)),
                         backgroundGradientBottomColor,
@@ -383,7 +383,7 @@ class _PremiumCustomAccentColorSettingState
                                 ],
                                 colors: [
                                   settings.customBackgroundColor ??
-                                      Theme.of(context).colorScheme.background,
+                                      Theme.of(context).colorScheme.surface,
                                   isBackgroundDifferent
                                       ? HSVColor.fromColor(Theme.of(context)
                                               .colorScheme
diff --git a/refilc_mobile_ui/lib/screens/summary/pages/personality_page.dart b/refilc_mobile_ui/lib/screens/summary/pages/personality_page.dart
index 2f78b4f..128e918 100644
--- a/refilc_mobile_ui/lib/screens/summary/pages/personality_page.dart
+++ b/refilc_mobile_ui/lib/screens/summary/pages/personality_page.dart
@@ -96,7 +96,7 @@ class PersonalityBodyState extends State<PersonalityBody> {
                       size: 30,
                     ),
                     style: ButtonStyle(
-                      backgroundColor: MaterialStateProperty.all(
+                      backgroundColor: WidgetStateProperty.all(
                           Colors.white.withOpacity(0.2)),
                     ),
                   ),
@@ -113,7 +113,7 @@ class PersonalityBodyState extends State<PersonalityBody> {
                       size: 30,
                     ),
                     style: ButtonStyle(
-                      backgroundColor: MaterialStateProperty.all(
+                      backgroundColor: WidgetStateProperty.all(
                           Colors.white.withOpacity(0.2)),
                     ),
                   ),
diff --git a/refilc_plus b/refilc_plus
index 1b75282..5331cdd 160000
--- a/refilc_plus
+++ b/refilc_plus
@@ -1 +1 @@
-Subproject commit 1b7528236cdc6761a98dd0ae5ab0d26bddee5501
+Subproject commit 5331cddddada60872f5eb0dc1c3f21bb1bba4b0c