diff --git a/src/components/VHeader/VFilterButton.vue b/src/components/VHeader/VFilterButton.vue
index fa62b8565c..54bfab58a4 100644
--- a/src/components/VHeader/VFilterButton.vue
+++ b/src/components/VHeader/VFilterButton.vue
@@ -3,18 +3,17 @@
     id="filter-button"
     variant="plain"
     size="disabled"
-    class="align-center label-regular h-12 w-12 gap-2 self-center xl:w-auto xl:ps-3 xl:pe-4"
+    class="align-center label-regular h-12 w-12 gap-2 self-center border-tx xl:w-auto xl:ps-3 xl:pe-4"
     :class="
       pressed
-        ? 'border-tx bg-dark-charcoal text-white hover:bg-dark-charcoal-90'
-        : 'border-tx bg-tx hover:border-dark-charcoal-20 '
+        ? 'bg-dark-charcoal text-white hover:bg-dark-charcoal-90'
+        : 'bg-tx hover:border-dark-charcoal-20'
     "
     :pressed="pressed"
     :disabled="disabled"
     aria-controls="filters"
     :aria-label="ariaLabel"
     @click="$emit('toggle')"
-    @keydown.tab.exact="$emit('tab', $event)"
   >
     <VFilterIconOrCounter
       :applied-filter-count="filterCount"
@@ -51,7 +50,6 @@ export default defineComponent({
     },
   },
   emits: {
-    tab: defineEvent<[KeyboardEvent]>(),
     toggle: defineEvent(),
   },
   setup() {
diff --git a/src/components/VHeader/VFilterIconOrCounter.vue b/src/components/VHeader/VFilterIconOrCounter.vue
index 3eef350d9a..c2e3ea74b2 100644
--- a/src/components/VHeader/VFilterIconOrCounter.vue
+++ b/src/components/VHeader/VFilterIconOrCounter.vue
@@ -2,8 +2,8 @@
   <VIcon v-if="showIcon" :icon-path="filterIcon" />
   <p
     v-else
-    class="flex h-6 w-6 items-center justify-center bg-dark-charcoal-10"
-    :class="{ 'bg-dark-charcoal-10 group-hover:bg-dark-charcoal-20': pressed }"
+    class="flex h-6 w-6 items-center justify-center"
+    :class="pressed ? 'bg-tx' : 'bg-dark-charcoal-10'"
   >
     {{ appliedFilterCount }}
   </p>
diff --git a/src/components/VHeader/meta/VFilterButton.stories.mdx b/src/components/VHeader/meta/VFilterButton.stories.mdx
index 302f249a64..455459f6ce 100644
--- a/src/components/VHeader/meta/VFilterButton.stories.mdx
+++ b/src/components/VHeader/meta/VFilterButton.stories.mdx
@@ -20,17 +20,19 @@ import { IMAGE } from "~/constants/media"
     appliedFilters: {
       type: "number",
     },
+    disabled: {
+      type: "boolean",
+    },
     toggle: {
       action: "toggle",
     },
-    tab: {
-      action: "tab",
-    },
   }}
 />
 
 export const Template = (args, { argTypes }) => ({
-  template: `<VFilterButton v-bind="args" v-on="args" />`,
+  template: `<div id="wrapper" class="w-40 h-16 bg-dark-charcoal-06 flex align-center justify-center">
+<VFilterButton v-bind="args" v-on="args" />
+</div>`,
   components: { VFilterButton },
   props: Object.keys(argTypes),
   setup() {
@@ -67,8 +69,7 @@ export const Template = (args, { argTypes }) => ({
 <ArgsTable of={VFilterButton} />
 
 The button opens and closes the filters sidebar. It also shows how many filters
-are applied in the mobile view. the field receives an input. It also emits the
-`search` event when the search button is clicked.
+are applied. It also emits the `toggle` event when clicked.
 
 <Canvas>
   <Story
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts b/test/storybook/visual-regression/v-filter-button.spec.ts
index 4f8d612d3e..6eb6ca5a19 100644
--- a/test/storybook/visual-regression/v-filter-button.spec.ts
+++ b/test/storybook/visual-regression/v-filter-button.spec.ts
@@ -9,42 +9,67 @@ const gotoWithArgs = makeGotoWithArgs(
 
 test.describe.configure({ mode: "parallel" })
 
-test.describe("VFilterButton", () => {
-  breakpoints.describeLg(({ expectSnapshot }) => {
-    test("no filters applied", async ({ page }) => {
-      await gotoWithArgs(page, { isMinMd: true })
-      await expectSnapshot("filter-button-at-rest", page)
-    })
-
-    test("no filters pressed", async ({ page }) => {
-      await gotoWithArgs(page, { pressed: true })
-      await expectSnapshot("filter-button-pressed", page)
-    })
-
-    test("filters applied", async ({ page }) => {
-      await gotoWithArgs(page, { appliedFilters: 2 })
-      await expectSnapshot("filter-button-2-filters", page)
-    })
+const wrapper = "#wrapper"
 
-    test("filters applied and pressed", async ({ page }) => {
-      await gotoWithArgs(page, {
-        isMinMd: true,
-        appliedFilters: 2,
-        pressed: true,
+test.describe("VFilterButton", () => {
+  breakpoints.describeMobileAndDesktop(({ expectSnapshot }) => {
+    for (const filterCount of [0, 1, 12]) {
+      test(`resting, ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, { appliedFilters: filterCount })
+        await expectSnapshot(
+          `filter-button-at-rest-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
       })
-      await expectSnapshot("filter-button-2-filters-pressed", page)
-    })
-  })
-
-  breakpoints.describeXl(({ expectSnapshot }) => {
-    test("no filters applied", async ({ page }) => {
-      await gotoWithArgs(page)
-      await expectSnapshot("filter-button-no-filters-not-scrolled", page)
-    })
-
-    test("2 filters", async ({ page }) => {
-      await gotoWithArgs(page, { appliedFilters: 2 })
-      await expectSnapshot("filter-button-2-filters-not-scrolled", page)
-    })
+      test(`focused, ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, { appliedFilters: filterCount })
+        await expectSnapshot(
+          `filter-button-at-rest-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
+      })
+      test(`pressed, ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, {
+          appliedFilters: filterCount,
+          pressed: true,
+        })
+        await expectSnapshot(
+          `filter-button-pressed-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
+      })
+      test(`pressed, hovered, ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, {
+          appliedFilters: filterCount,
+          pressed: true,
+        })
+        await page.locator("button", { hasText: "Filter" }).hover()
+        await expectSnapshot(
+          `filter-button-pressed-hovered-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
+      })
+      test(`hovered, ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, {
+          appliedFilters: filterCount,
+        })
+        await page.locator("button", { hasText: "Filter" }).hover()
+        await expectSnapshot(
+          `filter-button-hovered-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
+      })
+      test(`focused, pressed ${filterCount} filters`, async ({ page }) => {
+        await gotoWithArgs(page, {
+          appliedFilters: filterCount,
+          pressed: true,
+        })
+        await page.locator("button", { hasText: "Filter" }).focus()
+        await expectSnapshot(
+          `filter-button-focused-pressed-${filterCount}-checked`,
+          page.locator(wrapper)
+        )
+      })
+    }
   })
 })
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-0-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-0-checked-sm-linux.png
new file mode 100644
index 0000000000..54b8894cc6
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-0-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-0-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-0-checked-xl-linux.png
new file mode 100644
index 0000000000..05bc0e9ea3
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-0-checked-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-1-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-1-checked-sm-linux.png
new file mode 100644
index 0000000000..44ffec3c59
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-1-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-1-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-1-checked-xl-linux.png
new file mode 100644
index 0000000000..0172f23c9f
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-1-checked-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-12-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-12-checked-sm-linux.png
new file mode 100644
index 0000000000..ee9580e41d
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-12-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-12-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-12-checked-xl-linux.png
new file mode 100644
index 0000000000..5af6760b08
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-at-rest-12-checked-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-0-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-0-checked-sm-linux.png
new file mode 100644
index 0000000000..9050221a7f
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-0-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-0-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-0-checked-xl-linux.png
new file mode 100644
index 0000000000..75a62dea75
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-0-checked-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-1-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-1-checked-sm-linux.png
new file mode 100644
index 0000000000..a0ff36c0c7
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-1-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-1-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-1-checked-xl-linux.png
new file mode 100644
index 0000000000..2f5b8e0942
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-1-checked-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-12-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-12-checked-sm-linux.png
new file mode 100644
index 0000000000..8716260e37
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-12-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-12-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-12-checked-xl-linux.png
new file mode 100644
index 0000000000..dc6c95a0e8
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-focused-pressed-12-checked-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-0-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-0-checked-sm-linux.png
new file mode 100644
index 0000000000..9ffe1347e8
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-0-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-0-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-0-checked-xl-linux.png
new file mode 100644
index 0000000000..164d946ac6
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-0-checked-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-1-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-1-checked-sm-linux.png
new file mode 100644
index 0000000000..517646691a
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-1-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-1-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-1-checked-xl-linux.png
new file mode 100644
index 0000000000..eddd0caa83
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-1-checked-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-12-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-12-checked-sm-linux.png
new file mode 100644
index 0000000000..550f967e2a
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-12-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-12-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-12-checked-xl-linux.png
new file mode 100644
index 0000000000..15c3bbf660
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-hovered-12-checked-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-0-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-0-checked-sm-linux.png
new file mode 100644
index 0000000000..614b11bb01
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-0-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-0-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-0-checked-xl-linux.png
new file mode 100644
index 0000000000..5ce8bcaa78
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-0-checked-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-1-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-1-checked-sm-linux.png
new file mode 100644
index 0000000000..3f490d439b
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-1-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-1-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-1-checked-xl-linux.png
new file mode 100644
index 0000000000..6245ca2175
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-1-checked-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-12-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-12-checked-sm-linux.png
new file mode 100644
index 0000000000..a452897699
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-12-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-12-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-12-checked-xl-linux.png
new file mode 100644
index 0000000000..2f9f823e09
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-12-checked-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-0-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-0-checked-sm-linux.png
new file mode 100644
index 0000000000..262ea4cdfb
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-0-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-0-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-0-checked-xl-linux.png
new file mode 100644
index 0000000000..a325253404
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-0-checked-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-1-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-1-checked-sm-linux.png
new file mode 100644
index 0000000000..e4005e64c6
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-1-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-1-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-1-checked-xl-linux.png
new file mode 100644
index 0000000000..c80d5e82a7
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-1-checked-xl-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-12-checked-sm-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-12-checked-sm-linux.png
new file mode 100644
index 0000000000..eff987eb2a
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-12-checked-sm-linux.png differ
diff --git a/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-12-checked-xl-linux.png b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-12-checked-xl-linux.png
new file mode 100644
index 0000000000..e10879344e
Binary files /dev/null and b/test/storybook/visual-regression/v-filter-button.spec.ts-snapshots/filter-button-pressed-hovered-12-checked-xl-linux.png differ