diff --git a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js
index bbb48602c70f..b3dc61fa4920 100644
--- a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js
+++ b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js
@@ -1,20 +1,25 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Box from '../../../box';
 import {
   AlignItems,
-  BLOCK_SIZES,
+  BlockSize,
   BackgroundColor,
   BorderColor,
   BorderRadius,
   BorderStyle,
-  DISPLAY,
-  FLEX_DIRECTION,
-  FLEX_WRAP,
+  Display,
+  FlexDirection,
+  FlexWrap,
   TextVariant,
 } from '../../../../../helpers/constants/design-system';
-import { Icon, IconName, IconSize, Text } from '../../../../component-library';
+import {
+  Box,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
+} from '../../../../component-library';
 
 export const DropdownTab = ({
   activeClassName,
@@ -43,6 +48,10 @@ export const DropdownTab = ({
   const openDropdown = (event) => {
     event.preventDefault();
     setIsOpen(true);
+  };
+
+  const onTabClick = (event) => {
+    event.preventDefault();
     onClick(tabIndex);
   };
 
@@ -75,15 +84,15 @@ export const DropdownTab = ({
         [activeClassName]: activeClassName && isActive,
       })}
       data-testid={dataTestId}
-      onClick={openDropdown}
+      onClick={onTabClick}
       dataTestId={dataTestId}
-      flexDirection={FLEX_DIRECTION.ROW}
-      flexWrap={FLEX_WRAP.NO_WRAP}
-      height={BLOCK_SIZES.FULL}
+      flexDirection={FlexDirection.Row}
+      flexWrap={FlexWrap.NoWrap}
+      height={BlockSize.Full}
       style={{ cursor: 'pointer', overflow: 'hidden' }}
       title={selectedOptionName}
     >
-      <Box alignItems={AlignItems.center} padding={2}>
+      <Box display={Display.Flex} alignItems={AlignItems.flexStart} padding={2}>
         <Text
           variant={TextVariant.inherit}
           style={{
@@ -94,7 +103,15 @@ export const DropdownTab = ({
         >
           {selectedOptionName}
         </Text>
-        <Icon marginLeft={2} name={IconName.ArrowDown} size={IconSize.Sm} />
+        <Box
+          display={Display.Flex}
+          alignItems={AlignItems.flexStart}
+          paddingLeft={1}
+          paddingRight={1}
+          onClick={openDropdown}
+        >
+          <Icon name={IconName.ArrowDown} size={IconSize.Sm} />
+        </Box>
       </Box>
       {isOpen && (
         <Box
@@ -104,9 +121,9 @@ export const DropdownTab = ({
           borderRadius={BorderRadius.SM}
           paddingLeft={2}
           paddingRight={2}
-          display={DISPLAY.FLEX}
-          flexDirection={FLEX_DIRECTION.COLUMN}
-          flexWrap={FLEX_WRAP.NO_WRAP}
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
+          flexWrap={FlexWrap.NoWrap}
           style={{ position: 'absolute', maxWidth: '170px' }}
           ref={dropdownRef}
         >
diff --git a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.test.js b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.test.js
index 61b19a847a64..ba0fb4d8c812 100644
--- a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.test.js
+++ b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.test.js
@@ -36,7 +36,10 @@ describe('DropdownTab', () => {
   it('registers selection', () => {
     const { container, getByText } = render(<DropdownTab {...args} />);
 
-    fireEvent.click(container.firstChild);
+    // Find the clickable element (icon box) in the dropdown that contains
+    // ArrowDown icon by walking the nested elements
+    const clickableIconBox = container.firstChild.firstChild.lastChild;
+    fireEvent.click(clickableIconBox);
 
     const element = getByText(args.options[1].name);