diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsUpsellMenuItem.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsUpsellMenuItem.tsx
index f9d9f88f11..6a877cb7a0 100644
--- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsUpsellMenuItem.tsx
+++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsUpsellMenuItem.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Icon, MenuItem, Text, Tooltip } from '@invoke-ai/ui-library';
+import { Flex, Icon, MenuItem, Text, Tooltip } from '@invoke-ai/ui-library';
 import { useTranslation } from 'react-i18next';
 import type { IconType } from 'react-icons';
 import { PiArrowUpBold } from 'react-icons/pi';
@@ -7,19 +7,11 @@ export const SettingsUpsellMenuItem = ({ menuText, menuIcon }: { menuText: strin
   const { t } = useTranslation();
 
   return (
-    <Tooltip label={t('upsell.professionalUpsell')} placement="right" zIndex={2}>
+    <Tooltip label={t('upsell.professionalUpsell')} placement="right" gutter={16}>
       <MenuItem as="a" href="http://invoke.com/pricing" target="_blank" icon={menuIcon({})}>
-        <Flex gap="1" alignItems="center">
-          <Text pb="2px">{menuText}</Text>
-          <Box>
-            <Icon
-              as={PiArrowUpBold}
-              sx={{
-                mt: '2px',
-                fill: 'invokeYellow.500',
-              }}
-            />
-          </Box>
+        <Flex gap="1" alignItems="center" justifyContent="space-between">
+          <Text>{menuText}</Text>
+          <Icon as={PiArrowUpBold} color="invokeYellow.500" />
         </Flex>
       </MenuItem>
     </Tooltip>