diff --git a/example/lib/pages/components/comment.dart b/example/lib/pages/components/comment.dart
index 99769461..54bcc553 100644
--- a/example/lib/pages/components/comment.dart
+++ b/example/lib/pages/components/comment.dart
@@ -16,6 +16,8 @@ class _CommentDemoState extends State<CommentDemo> {
       child: Column(
         children: [
           ZdsComment(
+            backgroundColor: Colors.amber,
+            popupMenuBackgroundColor: Colors.greenAccent[100],
             avatar: ZetaAvatar.initials(
               initials: 'JP',
               size: ZetaAvatarSize.xxxs,
diff --git a/lib/src/components/molecules/comment.dart b/lib/src/components/molecules/comment.dart
index 982e876c..96aa963a 100644
--- a/lib/src/components/molecules/comment.dart
+++ b/lib/src/components/molecules/comment.dart
@@ -24,6 +24,8 @@ class ZdsComment extends StatelessWidget {
     this.menuItems,
     this.menuPosition = ZdsPopupMenuPosition.bottomRight,
     this.onMenuItemSelected,
+    this.backgroundColor,
+    this.popupMenuBackgroundColor,
   })  : assert(
           onReply != null && replySemanticLabel != null || onReply == null && replySemanticLabel == null,
           'replySemanticLabel must be not null if onReply is defined',
@@ -76,7 +78,7 @@ class ZdsComment extends StatelessWidget {
   final Widget? attachmentThumbnail;
 
   /// The menu items to display in the popup menu.
-  /// If defined, the pouup menu will be shown when the user taps on the comment.
+  /// If defined, the popup menu will be shown when the user taps on the comment.
   final List<ZdsPopupMenuItem<int>>? menuItems;
 
   /// The popup menu position to display in the popup menu items.
@@ -86,13 +88,25 @@ class ZdsComment extends StatelessWidget {
   /// Menu items must be given a value for the callback to trigger.
   final ValueChanged<int>? onMenuItemSelected;
 
+  /// The background color of the comment.
+  ///
+  /// Defaults to [ZetaColors.surfacePrimary].
+  final Color? backgroundColor;
+
+  /// The background color of the popup menu.
+  ///
+  /// Defaults to [ZetaColors.surfacePrimary].
+  final Color? popupMenuBackgroundColor;
+
   @override
   Widget build(BuildContext context) {
     final colors = Zeta.of(context).colors;
     final spacing = Zeta.of(context).spacing;
 
+    final backgroundColor = this.backgroundColor ?? colors.surfacePrimary;
+
     return ColoredBox(
-      color: colors.surfacePrimary,
+      color: backgroundColor,
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
@@ -121,7 +135,6 @@ class ZdsComment extends StatelessWidget {
                         icon: ZetaIcons.reply,
                         semanticLabel: replySemanticLabel,
                         foregroundColor: colors.primary,
-                        backgroundColor: colors.surfacePrimarySubtle,
                         onPressed: (_) => onReply!(),
                       ),
                     if (onDelete != null && deleteSemanticLabel != null)
@@ -200,29 +213,35 @@ class ZdsComment extends StatelessWidget {
                                   attachment: attachment!,
                                   downloadCallback: downloadCallback,
                                   customThumbnail: attachmentThumbnail,
+                                  backgroundColor: backgroundColor,
                                 ),
                               ),
                           ],
                         ),
                       );
                       if (menuItems != null) {
-                        return ZdsPopupMenu<int>(
-                          verticalOffset: spacing.small,
-                          menuPosition: menuPosition,
-                          items: menuItems ?? [],
-                          onSelected: onMenuItemSelected,
-                          builder: (context, open) {
-                            return Material(
-                              color: colors.surfacePrimary,
-                              child: InkWell(
-                                onTap: open,
-                                child: child,
-                              ),
-                            );
-                          },
+                        return Theme(
+                          data: Theme.of(context).copyWith(
+                            popupMenuTheme: PopupMenuThemeData(color: popupMenuBackgroundColor),
+                          ),
+                          child: ZdsPopupMenu<int>(
+                            verticalOffset: spacing.small,
+                            menuPosition: menuPosition,
+                            items: menuItems ?? [],
+                            onSelected: onMenuItemSelected,
+                            builder: (context, open) {
+                              return Material(
+                                color: backgroundColor,
+                                child: InkWell(
+                                  onTap: open,
+                                  child: child,
+                                ),
+                              );
+                            },
+                          ),
                         );
                       }
-                      return ColoredBox(color: colors.surfacePrimary, child: child);
+                      return ColoredBox(color: backgroundColor, child: child);
                     },
                   ),
                 );
@@ -249,7 +268,9 @@ class ZdsComment extends StatelessWidget {
       ..add(StringProperty('deleteSemanticLabel', deleteSemanticLabel))
       ..add(StringProperty('replySemanticLabel', replySemanticLabel))
       ..add(EnumProperty<ZdsPopupMenuPosition>('menuPosition', menuPosition))
-      ..add(ObjectFlagProperty<ValueChanged<int>?>.has('onMenuItemSelected', onMenuItemSelected));
+      ..add(ObjectFlagProperty<ValueChanged<int>?>.has('onMenuItemSelected', onMenuItemSelected))
+      ..add(ColorProperty('backgroundColor', backgroundColor))
+      ..add(ColorProperty('popupMenuBackgroundColor', popupMenuBackgroundColor));
   }
 }
 
@@ -258,11 +279,13 @@ class _AttachmentRow extends StatelessWidget {
     required this.attachment,
     this.customThumbnail,
     this.downloadCallback,
+    required this.backgroundColor,
   });
 
   final ZdsChatAttachment attachment;
   final VoidCallback? downloadCallback;
   final Widget? customThumbnail;
+  final Color backgroundColor;
 
   @override
   Widget build(BuildContext context) {
@@ -271,6 +294,7 @@ class _AttachmentRow extends StatelessWidget {
     final radius = Zeta.of(context).radius;
 
     return Material(
+      color: backgroundColor,
       child: InkWell(
         borderRadius: radius.minimal,
         onTap: downloadCallback,
@@ -324,6 +348,7 @@ class _AttachmentRow extends StatelessWidget {
     super.debugFillProperties(properties);
     properties
       ..add(DiagnosticsProperty<ZdsChatAttachment>('attachment', attachment))
-      ..add(ObjectFlagProperty<VoidCallback?>.has('downloadCallback', downloadCallback));
+      ..add(ObjectFlagProperty<VoidCallback?>.has('downloadCallback', downloadCallback))
+      ..add(ColorProperty('backgroundColor', backgroundColor));
   }
 }
diff --git a/lib/src/components/organisms/chat/message_input.dart b/lib/src/components/organisms/chat/message_input.dart
index 61e08590..cc564163 100644
--- a/lib/src/components/organisms/chat/message_input.dart
+++ b/lib/src/components/organisms/chat/message_input.dart
@@ -433,8 +433,9 @@ class ZdsMessageInputState extends State<ZdsMessageInput> with SingleTickerProvi
     const itemHeightHorizontalIndividual = 56;
     final itemHeightHorizontalTotal = itemHeightHorizontalIndividual * moreItemsLength;
     final dividerHeight = _moreConfig.options.length - 1;
-
-    final maxSheetHeight = handleSize +
+    final viewInsets = MediaQuery.of(context).padding.bottom;
+    final maxSheetHeight = viewInsets +
+        handleSize +
         titleHeaderHeight +
         (widget.moreOptionItemStyle == ZdsFilePickerOptionItemStyle.vertical
             ? itemHeightHorizontalTotal + dividerHeight
@@ -445,7 +446,7 @@ class ZdsMessageInputState extends State<ZdsMessageInput> with SingleTickerProvi
         enforceSheet: true,
         backgroundColor: zetaColors.surfacePrimary,
         context: context,
-        maxHeight: maxSheetHeight.toDouble(),
+        maxHeight: maxSheetHeight,
         builder: (_) {
           return Scaffold(
             body: Material(
diff --git a/pubspec.yaml b/pubspec.yaml
index 681dcc23..8926066f 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -20,7 +20,7 @@ environment:
 dependencies:
   any_link_preview: ^3.0.2
   cached_network_image: ^3.4.1
-  camerawesome: ^2.1.0
+  camerawesome: 2.1.0 # TODO: Update this once repo is on 3.27.x
   chewie: ^1.8.5
   collection: ^1.18.0
   crop_image: ^1.0.15