diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
index 47713e69cadc9..f34b9c72d8067 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
@@ -130,6 +130,10 @@ export const DraggableFilter: FC<FilterTabTitleProps> = ({
     },
   });
   drag(drop(ref));
+
+  //this is gross... we should pass in the filter/divider type, rather than inferring from the generated ID.
+  const filterIcon = filterIds[0].split('-')[0] == "NATIVE_FILTER" ? <Icons.FilterSmall /> : <Icons.BorderVerticleOutlined />;
+
   return (
     <Container ref={ref} isDragging={isDragging}>
       <DragIcon
@@ -138,6 +142,7 @@ export const DraggableFilter: FC<FilterTabTitleProps> = ({
         className="dragIcon"
         viewBox="4 4 16 16"
       />
+      {filterIcon}
       <div css={{ flex: 1 }}>{children}</div>
     </Container>
   );
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
index 8014f3bbb13d7..f61c9d6458472 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
@@ -19,8 +19,10 @@
 import { useRef, FC } from 'react';
 
 import { NativeFilterType, styled, t, useTheme } from '@superset-ui/core';
-import { AntdDropdown } from 'src/components';
-import { MainNav as Menu } from 'src/components/Menu';
+import { DropdownButton } from 'src/components/DropdownButton';
+import { DropdownButtonProps } from 'antd/lib/dropdown';
+import Icons from 'src/components/Icons';
+import { MainNav } from 'src/components/Menu';
 import FilterTitleContainer from './FilterTitleContainer';
 import { FilterRemoval } from './types';
 
@@ -58,7 +60,7 @@ const options = [
   { label: t('Divider'), type: NativeFilterType.Divider },
 ];
 
-const FilterTitlePane: FC<Props> = ({
+const FilterTitlePane: React.FC<Props> = ({
   getFilterTitle,
   onChange,
   onAdd,
@@ -89,27 +91,30 @@ const FilterTitlePane: FC<Props> = ({
     }, 0);
   };
   const menu = (
-    <Menu mode="horizontal">
-      {options.map(item => (
-        <Menu.Item onClick={() => handleOnAdd(item.type)}>
-          {item.label}
-        </Menu.Item>
-      ))}
-    </Menu>
+    <MainNav mode="horizontal">
+        <MainNav.Item onClick={() => handleOnAdd(NativeFilterType.DIVIDER)}>
+            {t('Add Divider')}
+        </MainNav.Item>
+    </MainNav>
   );
+
+  const StyledDropdownButton = styled(
+    DropdownButton as React.FC<DropdownButtonProps>,
+  )`
+    padding: ${theme.gridUnit * 2}px ${theme.gridUnit * 4}px;
+  `;
+
   return (
     <TabsContainer>
-      <AntdDropdown
+      <StyledDropdownButton
         overlay={menu}
-        arrow
         placement="topLeft"
-        trigger={['hover']}
+        icon={<Icons.CaretDown />}
       >
-        <StyledAddBox>
-          <div data-test="new-dropdown-icon" className="fa fa-plus" />{' '}
-          <span>{t('Add filters and dividers')}</span>
-        </StyledAddBox>
-      </AntdDropdown>
+        <span onClick={() => handleOnAdd(NativeFilterType.NATIVE_FILTER)}>
+          {t('Add Filter')}
+        </span>
+      </StyledDropdownButton>
       <div
         css={{
           height: '100%',