diff --git a/webapp/components/DropdownFilter/DropdownFilter.spec.js b/webapp/components/DropdownFilter/DropdownFilter.spec.js
new file mode 100644
index 000000000..9566fa6ef
--- /dev/null
+++ b/webapp/components/DropdownFilter/DropdownFilter.spec.js
@@ -0,0 +1,78 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import VTooltip from 'v-tooltip'
+import Styleguide from '@human-connection/styleguide'
+import DropdownFilter from './DropdownFilter.vue'
+
+const localVue = createLocalVue()
+localVue.use(Styleguide)
+localVue.use(VTooltip)
+
+describe('DropdownFilter.vue', () => {
+  let propsData, wrapper, mocks
+
+  beforeEach(() => {
+    propsData = {}
+    mocks = {
+      $t: jest.fn(a => a),
+    }
+  })
+
+  const Wrapper = () => {
+    return mount(DropdownFilter, { propsData, localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    describe('selected', () => {
+      it('displays selected filter', () => {
+        propsData.selected = 'Read'
+        wrapper = Wrapper()
+        expect(wrapper.find('.dropdown-filter label').text()).toEqual(propsData.selected)
+      })
+    })
+
+    describe('menu items', () => {
+      let allLink
+      beforeEach(() => {
+        propsData.filterOptions = [
+          { label: 'All', value: null },
+          { label: 'Read', value: true },
+          { label: 'Unread', value: false },
+        ]
+        wrapper = Wrapper()
+        wrapper.find('.dropdown-filter').trigger('click')
+        allLink = wrapper
+          .findAll('.dropdown-menu-item')
+          .at(propsData.filterOptions.findIndex(option => option.label === 'All'))
+      })
+
+      it('displays a link for All', () => {
+        expect(allLink.text()).toEqual('All')
+      })
+
+      it('displays a link for Read', () => {
+        const readLink = wrapper
+          .findAll('.dropdown-menu-item')
+          .at(propsData.filterOptions.findIndex(option => option.label === 'Read'))
+        expect(readLink.text()).toEqual('Read')
+      })
+
+      it('displays a link for Unread', () => {
+        const unreadLink = wrapper
+          .findAll('.dropdown-menu-item')
+          .at(propsData.filterOptions.findIndex(option => option.label === 'Unread'))
+        expect(unreadLink.text()).toEqual('Unread')
+      })
+
+      it('clicking on menu item emits filterNotifications', () => {
+        allLink.trigger('click')
+        expect(wrapper.emitted().filterNotifications[0]).toEqual(
+          propsData.filterOptions.filter(option => option.label === 'All'),
+        )
+      })
+    })
+  })
+})
diff --git a/webapp/components/DropdownFilter/DropdownFilter.vue b/webapp/components/DropdownFilter/DropdownFilter.vue
index 8ca5c5410..c24cf18bc 100644
--- a/webapp/components/DropdownFilter/DropdownFilter.vue
+++ b/webapp/components/DropdownFilter/DropdownFilter.vue
@@ -16,13 +16,13 @@
     <ds-menu
       slot="popover"
       slot-scope="{ toggleMenu }"
-      class="locale-menu-popover"
+      class="dropdown-menu-popover"
       :routes="filterOptions"
     >
       <ds-menu-item
         slot="menuitem"
         slot-scope="item"
-        class="locale-menu-item"
+        class="dropdown-menu-item"
         :route="item.route"
         :parents="item.parents"
         @click.stop.prevent="filterNotifications(item.route, toggleMenu)"
@@ -60,4 +60,19 @@ export default {
   padding: $space-xx-small;
   color: $text-color-soft;
 }
+.dropdown-menu {
+  user-select: none;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: $space-xx-small;
+  color: $text-color-soft;
+}
+
+.dropdown-menu-popover {
+  a {
+    padding: $space-x-small $space-small;
+    padding-right: $space-base;
+  }
+}
 </style>