diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js
--- a/web/modals/chat/sidebar-list-modal.react.js
+++ b/web/modals/chat/sidebar-list-modal.react.js
@@ -115,7 +115,7 @@
   }
 
   return (
-    <Modal name="Sidebars" onClose={popModal} fixedHeight={false}>
+    <Modal name="Sidebars" onClose={popModal}>
       <div
         className={classNames(
           globalCSS['modal-body'],
diff --git a/web/modals/modal.css b/web/modals/modal.css
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -1,79 +1,62 @@
-div.modal-overlay {
+div.modalOverlay {
   position: fixed;
   left: 0;
   top: 0;
-  bottom: 0;
+  height: 100%;
   z-index: 4;
   width: 100%;
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.9);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  overflow: auto;
-}
-div.resizable-modal-overlay {
-  min-height: 60px;
 }
-div.modal-container {
-  background: var(--bg);
-  background-size: 3000px 2000px;
-  max-width: 330px;
+
+div.modalContainer {
   border-radius: 15px;
   display: flex;
-  min-height: 0;
-  max-height: 500px;
-}
-div.large-modal-container {
-  max-width: 500px;
-}
-div.modal {
-  position: relative;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
   background-color: var(--modal-bg);
-  border-radius: 15px;
-  flex: 1;
-  display: flex;
+  border-radius: 8px;
   flex-direction: column;
+  margin: 20px;
+  overflow: hidden;
 }
-div.large-modal-container div.modal {
-  width: 500px;
+
+div.modalContainerSmall {
+  width: 330px;
+  min-height: 0;
+  max-height: 500px;
 }
-div.fixed-height-modal {
-  height: 100%;
+
+div.modalContainerLarge {
+  width: 500px;
+  min-height: 0;
+  max-height: 500px;
 }
-span.modal-close {
-  float: right;
-  font-size: 32px;
-  font-weight: 300;
-  line-height: 30px;
-  color: var(--fg);
+
+span.modalClose {
+  display: flex;
+  color: var(--modal-close-color);
 }
-span.modal-close:hover {
+
+span.modalClose:hover {
   cursor: pointer;
+  color: var(--modal-close-color-hover);
 }
-div.modal-header {
-  padding: 32px 40px 16px 40px;
-}
-div.modal-header > h2 {
-  font-size: var(--xl-font-20);
-  font-weight: var(--bold);
-  color: var(--fg);
+
+div.modalHeader {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-}
-div.modal-header > h2 svg {
-  padding-right: 8px;
-  display: flex;
+  padding: 32px 32px 0px 32px;
 }
 
-@media only screen and (-webkit-min-device-pixel-ratio: 2),
-  only screen and (min--moz-device-pixel-ratio: 2),
-  only screen and (-o-min-device-pixel-ratio: 2/1),
-  only screen and (min-device-pixel-ratio: 2),
-  only screen and (min-resolution: 320dpi),
-  only screen and (min-resolution: 2dppx) {
-  div.modal-container {
-    background: var(--bg);
-  }
+h2.title {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 32px;
+  color: var(--fg);
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
 }
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -6,15 +6,14 @@
 import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
 import css from './modal.css';
 
-export type ModalSize = 'small' | 'large';
+export type ModalSize = 'small' | 'large' | 'fit-content';
 type Props = {
-  +name: React.Node,
+  +name: string,
   +icon?: Icon,
   +onClose: () => void,
   +withCloseButton?: boolean,
   +children?: React.Node,
   +size?: ModalSize,
-  +fixedHeight?: boolean,
 };
 
 function Modal(props: Props): React.Node {
@@ -22,7 +21,6 @@
     size = 'small',
     children,
     onClose,
-    fixedHeight,
     name,
     icon,
     withCloseButton = true,
@@ -53,34 +51,21 @@
     }
   }, []);
 
-  const overlayClasses = React.useMemo(
-    () =>
-      classNames(css['modal-overlay'], {
-        [css['resizable-modal-overlay']]: !fixedHeight,
-      }),
-    [fixedHeight],
-  );
   const modalContainerClasses = React.useMemo(
     () =>
-      classNames(css['modal-container'], {
-        [css['large-modal-container']]: size === 'large',
+      classNames(css.modalContainer, {
+        [css.modalContainerLarge]: size === 'large',
+        [css.modalContainerSmall]: size === 'small',
       }),
     [size],
   );
-  const modalClasses = React.useMemo(
-    () =>
-      classNames(css['modal'], {
-        [css['fixed-height-modal']]: fixedHeight,
-      }),
-    [fixedHeight],
-  );
 
   const cornerCloseButton = React.useMemo(() => {
     if (!withCloseButton) {
       return null;
     }
     return (
-      <span className={css['modal-close']} onClick={onClose}>
+      <span className={css.modalClose} onClick={onClose}>
         <SWMansionIcon size={24} icon="cross" />
       </span>
     );
@@ -95,23 +80,21 @@
 
   return (
     <div
-      className={overlayClasses}
+      className={css.modalOverlay}
       ref={overlayRef}
       onClick={onBackgroundClick}
       tabIndex={0}
       onKeyDown={onKeyDown}
     >
       <div className={modalContainerClasses}>
-        <div className={modalClasses}>
-          <div className={css['modal-header']}>
-            {cornerCloseButton}
-            <h2>
-              {headerIcon}
-              {name}
-            </h2>
-          </div>
-          {children}
+        <div className={css.modalHeader}>
+          <h2 className={css.title}>
+            {headerIcon}
+            {name}
+          </h2>
+          {cornerCloseButton}
         </div>
+        {children}
       </div>
     </div>
   );
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -143,4 +143,6 @@
   --color-selector-active-bg: var(--shades-black-80);
   --relationship-modal-color: var(--shades-black-60);
   --arrow-extension-color: var(--shades-black-60);
+  --modal-close-color: var(--shades-black-60);
+  --modal-close-color-hover: var(--shades-white-100);
 }