diff --git a/ui/components/component-library/modal-content/__snapshots__/modal-content.test.tsx.snap b/ui/components/component-library/modal-content/__snapshots__/modal-content.test.tsx.snap
index 1a82b95f4..852a91209 100644
--- a/ui/components/component-library/modal-content/__snapshots__/modal-content.test.tsx.snap
+++ b/ui/components/component-library/modal-content/__snapshots__/modal-content.test.tsx.snap
@@ -2,12 +2,12 @@
 
 exports[`ModalContent should match snapshot 1`] = `
 <div
-  class="mm-box mm-modal-content mm-box--padding-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
+  class="mm-box mm-modal-content mm-box--padding-top-4 mm-box--sm:padding-top-8 mm-box--md:padding-top-12 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--sm:padding-bottom-8 mm-box--md:padding-bottom-12 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
   data-testid="test"
 >
   <section
     aria-modal="true"
-    class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm mm-box--sm:margin-top-8 mm-box--md:margin-top-12 mm-box--sm:margin-bottom-8 mm-box--md:margin-bottom-12 mm-box--padding-4 mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
+    class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm mm-box--padding-4 mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
     role="dialog"
   >
     test
diff --git a/ui/components/component-library/modal-content/modal-content.scss b/ui/components/component-library/modal-content/modal-content.scss
index d9e032140..326a8e1c0 100644
--- a/ui/components/component-library/modal-content/modal-content.scss
+++ b/ui/components/component-library/modal-content/modal-content.scss
@@ -6,6 +6,22 @@
   overflow: auto;
   overscroll-behavior-y: none;
 
+  // Scroll bar styles
+  // Firefox
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-icon-muted) transparent;
+
+  // Webkit: Chrome, Brave
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 8px;
+    border-radius: 8px;
+    background: var(--color-icon-muted);
+  }
+
   &__dialog {
     --modal-content-size: var(--size, 360px);
 
diff --git a/ui/components/component-library/modal-content/modal-content.test.tsx b/ui/components/component-library/modal-content/modal-content.test.tsx
index df87ccf89..7607e92e6 100644
--- a/ui/components/component-library/modal-content/modal-content.test.tsx
+++ b/ui/components/component-library/modal-content/modal-content.test.tsx
@@ -55,11 +55,14 @@ describe('ModalContent', () => {
       'mm-modal-content__dialog--size-sm',
     );
   });
-  it('should render with additional props being passed to modalDialogProps', () => {
+  it('should render with additional props being passed to modalDialogProps and not override default class name', () => {
     const { getByTestId } = render(
       <Modal isOpen onClose={onClose}>
         <ModalContent
-          modalDialogProps={{ 'data-testid': 'test' }}
+          modalDialogProps={{
+            'data-testid': 'test',
+            className: 'custom-dialog-class',
+          }}
           data-testid="modal-content"
         >
           test
@@ -67,6 +70,9 @@ describe('ModalContent', () => {
       </Modal>,
     );
     expect(getByTestId('test')).toBeDefined();
+    expect(getByTestId('test')).toHaveClass(
+      'mm-modal-content__dialog custom-dialog-class',
+    );
   });
   it('should close when escape key is pressed', () => {
     const { getByRole } = render(
diff --git a/ui/components/component-library/modal-content/modal-content.tsx b/ui/components/component-library/modal-content/modal-content.tsx
index 70f1dfc4e..202fd55f5 100644
--- a/ui/components/component-library/modal-content/modal-content.tsx
+++ b/ui/components/component-library/modal-content/modal-content.tsx
@@ -86,25 +86,27 @@ export const ModalContent = forwardRef(
           height={BlockSize.Screen}
           justifyContent={JustifyContent.center}
           alignItems={AlignItems.flexStart}
-          padding={4}
+          paddingRight={4}
+          paddingLeft={4}
+          paddingTop={[4, 8, 12]}
+          paddingBottom={[4, 8, 12]}
           {...props}
         >
           <Box
-            className={classnames(
-              'mm-modal-content__dialog',
-              `mm-modal-content__dialog--size-${size}`,
-            )}
             as="section"
             role="dialog"
             aria-modal="true"
             backgroundColor={BackgroundColor.backgroundDefault}
             borderRadius={BorderRadius.LG}
             width={BlockSize.Full}
-            marginTop={[null, 8, 12]}
-            marginBottom={[null, 8, 12]}
             padding={4}
             ref={modalDialogRef}
             {...modalDialogProps}
+            className={classnames(
+              'mm-modal-content__dialog',
+              `mm-modal-content__dialog--size-${size}`,
+              modalDialogProps?.className,
+            )}
           >
             {children}
           </Box>
diff --git a/ui/components/multichain/account-list-menu/account-list-menu.js b/ui/components/multichain/account-list-menu/account-list-menu.js
index 6f3935e4d..c44b6e5b5 100644
--- a/ui/components/multichain/account-list-menu/account-list-menu.js
+++ b/ui/components/multichain/account-list-menu/account-list-menu.js
@@ -19,6 +19,8 @@ import {
   BlockSize,
   Size,
   TextColor,
+  Display,
+  FlexDirection,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@@ -85,24 +87,22 @@ export const AccountListMenu = ({ onClose }) => {
       <ModalOverlay />
       <ModalContent
         className="multichain-account-menu-popover"
-        modalDialogProps={{ padding: 0, marginBottom: 0 }}
+        modalDialogProps={{
+          className: 'multichain-account-menu-popover__dialog',
+          padding: 0,
+          display: Display.Flex,
+          flexDirection: FlexDirection.Column,
+        }}
       >
         <ModalHeader
-          paddingTop={4}
-          paddingRight={4}
-          paddingBottom={6}
+          padding={4}
           onClose={onClose}
           onBack={actionMode === '' ? null : () => setActionMode('')}
         >
           {title}
         </ModalHeader>
         {actionMode === 'add' ? (
-          <Box
-            paddingLeft={4}
-            paddingRight={4}
-            paddingBottom={4}
-            paddingTop={0}
-          >
+          <Box paddingLeft={4} paddingRight={4} paddingBottom={4}>
             <CreateAccount
               onActionComplete={(confirmed) => {
                 if (confirmed) {
@@ -133,7 +133,7 @@ export const AccountListMenu = ({ onClose }) => {
           </Box>
         ) : null}
         {actionMode === '' ? (
-          <Box>
+          <>
             {/* Search box */}
             {accounts.length > 1 ? (
               <Box
@@ -315,7 +315,7 @@ export const AccountListMenu = ({ onClose }) => {
                 ///: END:ONLY_INCLUDE_IN
               }
             </Box>
-          </Box>
+          </>
         ) : null}
       </ModalContent>
     </Modal>
diff --git a/ui/components/multichain/account-list-menu/index.scss b/ui/components/multichain/account-list-menu/index.scss
index bd4f1d909..34b8faffd 100644
--- a/ui/components/multichain/account-list-menu/index.scss
+++ b/ui/components/multichain/account-list-menu/index.scss
@@ -1,10 +1,13 @@
 .multichain-account-menu-popover {
+  &__dialog {
+    max-height: 100%;
+  }
+
   .popover-content {
     border-radius: 0;
   }
 
   &__list {
-    max-height: 200px;
     overflow: auto;
   }
 }