diff --git a/src/components/Gallery/Gallery.tsx b/src/components/Gallery/Gallery.tsx
index 66560df9bc..c5bd3aa507 100644
--- a/src/components/Gallery/Gallery.tsx
+++ b/src/components/Gallery/Gallery.tsx
@@ -104,7 +104,11 @@ const UnMemoizedGallery = <
   return (
     <div className={className}>
       {renderImages}
-      <Modal onClose={() => setModalOpen((modalOpen) => !modalOpen)} open={modalOpen}>
+      <Modal
+        className='str-chat__gallery-modal'
+        onClose={() => setModalOpen((modalOpen) => !modalOpen)}
+        open={modalOpen}
+      >
         <ModalGallery images={images} index={index} />
       </Modal>
     </div>
diff --git a/src/components/Gallery/Image.tsx b/src/components/Gallery/Image.tsx
index a8c4de8cd6..d3d23f7fcd 100644
--- a/src/components/Gallery/Image.tsx
+++ b/src/components/Gallery/Image.tsx
@@ -61,7 +61,7 @@ export const ImageComponent = <
         {...dimensions}
         {...(innerRef && { ref: innerRef })}
       />
-      <Modal onClose={toggleModal} open={modalIsOpen}>
+      <Modal className='str-chat__image-modal' onClose={toggleModal} open={modalIsOpen}>
         <ModalGallery images={[props]} index={0} />
       </Modal>
     </>
diff --git a/src/components/Message/MessageSimple.tsx b/src/components/Message/MessageSimple.tsx
index cbd8fbbbde..33a909521a 100644
--- a/src/components/Message/MessageSimple.tsx
+++ b/src/components/Message/MessageSimple.tsx
@@ -149,7 +149,7 @@ const MessageSimpleWithContext = <
   return (
     <>
       {editing && (
-        <Modal onClose={clearEditingState} open={editing}>
+        <Modal className='str-chat__edit-message-modal' onClose={clearEditingState} open={editing}>
           <MessageInput
             clearEditingState={clearEditingState}
             grow
diff --git a/src/components/MessageBounce/MessageBounceModal.tsx b/src/components/MessageBounce/MessageBounceModal.tsx
index 102afca211..7cf33b34fc 100644
--- a/src/components/MessageBounce/MessageBounceModal.tsx
+++ b/src/components/MessageBounce/MessageBounceModal.tsx
@@ -14,7 +14,7 @@ export function MessageBounceModal({
   ...modalProps
 }: MessageBounceModalProps) {
   return (
-    <Modal {...modalProps}>
+    <Modal className='str-chat__message-bounce-modal' {...modalProps}>
       <MessageBounceProvider>
         <MessageBouncePrompt onClose={modalProps.onClose} />
       </MessageBounceProvider>
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index aed0789e0d..8b99b225c8 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { PropsWithChildren, useEffect, useRef } from 'react';
 import { FocusScope } from '@react-aria/focus';
 
@@ -8,13 +9,15 @@ import { useChatContext, useTranslationContext } from '../../context';
 export type ModalProps = {
   /** If true, modal is opened or visible. */
   open: boolean;
+  /** Custom class to be applied to the modal root div */
+  className?: string;
   /** Callback handler for closing of modal. */
   onClose?: (
     event: React.KeyboardEvent | React.MouseEvent<HTMLButtonElement | HTMLDivElement>,
   ) => void;
 };
 
-export const Modal = ({ children, onClose, open }: PropsWithChildren<ModalProps>) => {
+export const Modal = ({ children, className, onClose, open }: PropsWithChildren<ModalProps>) => {
   const { t } = useTranslationContext('Modal');
   const { themeVersion } = useChatContext('Modal');
 
@@ -42,7 +45,7 @@ export const Modal = ({ children, onClose, open }: PropsWithChildren<ModalProps>
   if (!open) return null;
 
   return (
-    <div className='str-chat__modal str-chat__modal--open' onClick={handleClick}>
+    <div className={clsx('str-chat__modal str-chat__modal--open', className)} onClick={handleClick}>
       <FocusScope autoFocus contain>
         <button className='str-chat__modal__close-button' ref={closeRef} title={t<string>('Close')}>
           {themeVersion === '2' && <CloseIconRound />}
diff --git a/src/components/Reactions/ReactionsListModal.tsx b/src/components/Reactions/ReactionsListModal.tsx
index f9021dceb7..1ddacfb402 100644
--- a/src/components/Reactions/ReactionsListModal.tsx
+++ b/src/components/Reactions/ReactionsListModal.tsx
@@ -68,7 +68,7 @@ export function ReactionsListModal<
   );
 
   return (
-    <Modal {...modalProps}>
+    <Modal className='str-chat__message-reactions-details-modal' {...modalProps}>
       <div className='str-chat__message-reactions-details' data-testid='reactions-list-modal'>
         <div className='str-chat__message-reactions-details-reaction-types'>
           {reactions.map(