diff --git a/src/features/ui/components/modals/actions-modal.tsx b/src/features/ui/components/modals/actions-modal.tsx
index 5fd37bab7..0898a80b2 100644
--- a/src/features/ui/components/modals/actions-modal.tsx
+++ b/src/features/ui/components/modals/actions-modal.tsx
@@ -22,7 +22,7 @@ interface IActionsModal {
 const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClose }) => {
   const renderAction = (action: MenuItem | null, i: number) => {
     if (action === null) {
-      return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
+      return <li key={`sep-${i}`} className='m-2 block h-px bg-gray-200 black:bg-gray-800 dark:bg-gray-600' />;
     }
 
     const { icon = null, text, meta = null, active = false, href = '#', destructive } = action;
@@ -36,12 +36,12 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
           {...compProps}
           space={2.5}
           data-index={i}
-          className={clsx('w-full', { active, destructive })}
+          className={clsx('w-full', { active, 'text-danger-600 dark:text-danger-400': destructive })}
           element={Comp}
         >
           {icon && <Icon title={text} src={icon} role='presentation' tabIndex={-1} />}
           <div>
-            <div className={clsx({ 'actions-modal__item-label': !!meta })}>{text}</div>
+            <div className={clsx({ 'font-medium': !!meta })}>{text}</div>
             <div>{meta}</div>
           </div>
         </HStack>
@@ -52,18 +52,18 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
   return (
     <Motion defaultStyle={{ top: 100 }} style={{ top: spring(0) }}>
       {({ top }) => (
-        <div className='modal-root__modal actions-modal' style={{ top: `${top}%` }}>
+        <div className='pointer-events-auto relative z-[9999] m-auto flex max-h-[calc(100vh-3rem)] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white text-gray-400 shadow-xl black:bg-black dark:bg-gray-900' style={{ top: `${top}%` }}>
           {status && (
-            <ReplyIndicator className='actions-modal__status rounded-b-none' status={status} hideActions />
+            <ReplyIndicator className='max-h-[300px] overflow-y-auto rounded-b-none' status={status} hideActions />
           )}
 
-          <ul className={clsx({ 'with-status': !!status })}>
+          <ul className={clsx({ 'max-h-[calc(80vh-75px)]': !!status }, 'my-2 shrink-0 overflow-y-auto')}>
             {actions && actions.map(renderAction)}
 
-            <li className='dropdown-menu__separator' />
+            <li className='m-2 block h-px bg-gray-200 black:bg-gray-800 dark:bg-gray-600' />
 
             <li>
-              <button type='button' onClick={onClose}>
+              <button type='button' className='w-full text-center text-gray-700 hover:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800' onClick={onClose}>
                 <FormattedMessage id='lightbox.close' defaultMessage='Close' />
               </button>
             </li>