diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 9cecd4b043b..dfbb10c2d41 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -7959,13 +7959,13 @@ button.module-image__border-overlay:focus {
 .module-calling-device-selection__close-button {
   @include button-reset;
 
-  @include color-svg('../images/x-shadow-16.svg', $color-white);
+  @include color-svg('../images/icons/v2/x-24.svg', $color-gray-15);
 
-  height: 16px;
+  height: 24px;
   position: absolute;
   right: 5px;
   top: 0;
-  width: 16px;
+  width: 24px;
   z-index: 2;
 
   @include keyboard-mode {
diff --git a/ts/components/ModalHost.tsx b/ts/components/ModalHost.tsx
index 7e5866b360e..94b7cd9343d 100644
--- a/ts/components/ModalHost.tsx
+++ b/ts/components/ModalHost.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { useEffect } from 'react';
-import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import FocusTrap from 'focus-trap-react';
 import type { SpringValues } from '@react-spring/web';
@@ -76,13 +75,10 @@ export const ModalHost = React.memo(
               allowOutsideClick: false,
             }}
           >
-            <div>
+            <div className={theme ? themeClassName(theme) : undefined}>
               <animated.div
                 role="presentation"
-                className={classNames(
-                  'module-modal-host__overlay',
-                  theme ? themeClassName(theme) : undefined
-                )}
+                className="module-modal-host__overlay"
                 onMouseDown={noMouseClose ? undefined : handleMouseDown}
                 onMouseUp={noMouseClose ? undefined : handleMouseUp}
                 style={overlayStyles}