diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index af9e7a7c7b4..9b66849b51d 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 1.68.4
+
+### Patch Changes
+
+- [#5322](https://github.com/cultureamp/kaizen-design-system/pull/5322) [`7903e38`](https://github.com/cultureamp/kaizen-design-system/commit/7903e38930fb442780f19285a9cc99e7aa167c55) - FilterBar: hide 'Clear all' button when there's nothing to clear
+
 ## 1.68.3
 
 ### Patch Changes
diff --git a/packages/components/package.json b/packages/components/package.json
index a6e39b34a54..a7698fcaeda 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.68.3",
+  "version": "1.68.4",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
diff --git a/packages/components/src/Filter/FilterBar/FilterBar.spec.tsx b/packages/components/src/Filter/FilterBar/FilterBar.spec.tsx
index dc9f4955fa7..f9ceee3038b 100644
--- a/packages/components/src/Filter/FilterBar/FilterBar.spec.tsx
+++ b/packages/components/src/Filter/FilterBar/FilterBar.spec.tsx
@@ -722,70 +722,6 @@ describe("<FilterBar />", () => {
     })
   })
 
-  describe("Clear all", () => {
-    it("clears all the values of all the filters", async () => {
-      const { getByRole } = render(
-        <FilterBarWrapper<ValuesSimple>
-          filters={simpleFilters}
-          defaultValues={{
-            flavour: "jasmine-milk-tea",
-            sugarLevel: 50,
-            iceLevel: 100,
-          }}
-        />
-      )
-      await waitForI18nContent()
-
-      const flavourButton = getByRole("button", {
-        name: "Flavour : Jasmine Milk Tea",
-      })
-      const sugarLevelButton = getByRole("button", {
-        name: "Sugar Level : 50%",
-      })
-      const iceLevelButton = getByRole("button", { name: "Ice Level : 100%" })
-
-      expect(flavourButton).toHaveAccessibleName("Flavour : Jasmine Milk Tea")
-      expect(sugarLevelButton).toHaveAccessibleName("Sugar Level : 50%")
-      expect(iceLevelButton).toHaveAccessibleName("Ice Level : 100%")
-
-      await user.click(getByRole("button", { name: "Clear all filters" }))
-
-      await waitFor(() => {
-        expect(flavourButton).toHaveAccessibleName("Flavour")
-        expect(sugarLevelButton).toHaveAccessibleName("Sugar Level")
-        expect(iceLevelButton).toHaveAccessibleName("Ice Level")
-      })
-    })
-
-    it("removes all removable filters", async () => {
-      const { getByRole } = render(
-        <FilterBarWrapper<ValuesRemovable>
-          filters={filtersRemovable}
-          defaultValues={{
-            flavour: "jasmine-milk-tea",
-            topping: "pearls",
-          }}
-        />
-      )
-      await waitForI18nContent()
-
-      const flavourButton = getByRole("button", {
-        name: "Flavour : Jasmine Milk Tea",
-      })
-      const toppingButton = getByRole("button", { name: "Topping : Pearls" })
-
-      expect(flavourButton).toBeVisible()
-      expect(toppingButton).toBeVisible()
-
-      await user.click(getByRole("button", { name: "Clear all filters" }))
-
-      await waitFor(() => {
-        expect(flavourButton).not.toBeInTheDocument()
-        expect(toppingButton).not.toBeInTheDocument()
-      })
-    })
-  })
-
   describe("External events", () => {
     it("allows updating the values via an external event", async () => {
       const Wrapper = (): JSX.Element => {
diff --git a/packages/components/src/Filter/FilterBar/_docs/FilterBar.spec.stories.tsx b/packages/components/src/Filter/FilterBar/_docs/FilterBar.spec.stories.tsx
new file mode 100644
index 00000000000..dd6db64bb8d
--- /dev/null
+++ b/packages/components/src/Filter/FilterBar/_docs/FilterBar.spec.stories.tsx
@@ -0,0 +1,249 @@
+import React, { useState } from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { expect, userEvent, waitFor, within, fn } from "@storybook/test"
+import { FilterMultiSelect } from "~components/Filter/FilterMultiSelect"
+import { DateRange } from "~components/index"
+import { FilterBar, Filters } from "../index"
+
+const meta = {
+  title: "Components/FilterBar/FilterBar Tests",
+  component: FilterBar,
+  argTypes: {
+    filters: { control: false },
+    values: { control: false },
+    onValuesChange: { control: false },
+  },
+  args: {
+    filters: [], // Defined in stories
+    values: {}, // Defined in stories
+    onValuesChange: fn(),
+  },
+} satisfies Meta<typeof FilterBar>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+type Values = {
+  flavour: string
+  deliveryDates: DateRange
+  toppings: string[]
+  drank: Date
+}
+
+const filters = [
+  {
+    id: "flavour",
+    name: "Flavour",
+    Component: (
+      <FilterBar.Select
+        items={[
+          { value: "jasmine-milk-tea", label: "Jasmine Milk Tea" },
+          { value: "honey-milk-tea", label: "Honey Milk Tea" },
+          { value: "lychee-green-tea", label: "Lychee Green Tea" },
+        ]}
+      />
+    ),
+  },
+  {
+    id: "deliveryDates",
+    name: "Delivery Dates",
+    Component: <FilterBar.DateRangePicker />,
+  },
+  {
+    id: "toppings",
+    name: "Toppings",
+    Component: (
+      <FilterBar.MultiSelect
+        items={[
+          { value: "none", label: "None" },
+          { value: "pearls", label: "Pearls" },
+          { value: "fruit-jelly", label: "Fruit Jelly" },
+          { value: "peanuts", label: "Peanuts" },
+          { value: "coconut", label: "Coconut" },
+          { value: "aloe", label: "Aloe Vera" },
+          { value: "mochi", label: "Mini Mochi" },
+          { value: "popping-pearls", label: "Popping Pearls" },
+        ]}
+      >
+        {(): JSX.Element => (
+          <>
+            <FilterMultiSelect.SearchInput />
+            <FilterMultiSelect.ListBox>
+              {({ allItems }): JSX.Element | JSX.Element[] =>
+                allItems.map(item => (
+                  <FilterMultiSelect.Option key={item.key} item={item} />
+                ))
+              }
+            </FilterMultiSelect.ListBox>
+            <FilterMultiSelect.MenuFooter>
+              <FilterMultiSelect.SelectAllButton />
+              <FilterMultiSelect.ClearButton />
+            </FilterMultiSelect.MenuFooter>
+          </>
+        )}
+      </FilterBar.MultiSelect>
+    ),
+    isRemovable: true,
+  },
+  {
+    id: "drank",
+    name: "Drank",
+    Component: <FilterBar.DatePicker />,
+    isRemovable: true,
+  },
+] satisfies Filters<Values>
+
+export const ClearAllFromValue: Story = {
+  render: args => {
+    const [activeValues, onActiveValuesChange] = useState<Partial<Values>>({})
+    return (
+      <FilterBar<Values>
+        {...args}
+        filters={filters}
+        values={activeValues}
+        onValuesChange={onActiveValuesChange}
+      />
+    )
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+
+    await step(
+      "Clear all button hidden by default given no values",
+      async () => {
+        expect(
+          canvas.queryByRole("button", {
+            name: "Clear all filters",
+          })
+        ).not.toBeInTheDocument()
+      }
+    )
+
+    await step("filter value is added", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Flavour" }))
+      await userEvent.click(
+        canvas.getByRole("option", { name: "Jasmine Milk Tea" })
+      )
+      expect(
+        canvas.getByRole("button", { name: "Flavour: Jasmine Milk Tea" })
+      ).toBeInTheDocument()
+    })
+
+    await step(
+      "'Clear all' press removes the value and hides itself",
+      async () => {
+        const clearAllButton = canvas.getByRole("button", {
+          name: "Clear all filters",
+        })
+        userEvent.click(clearAllButton)
+
+        waitFor(() =>
+          expect(
+            canvas.getByRole("button", { name: "Flavour" })
+          ).toBeInTheDocument()
+        )
+
+        waitFor(() =>
+          expect(
+            canvas.queryByRole("button", {
+              name: "Clear all filters",
+            })
+          ).not.toBeInTheDocument()
+        )
+      }
+    )
+  },
+}
+
+export const ClearAllFromRemovable: Story = {
+  render: args => {
+    const [activeValues, onActiveValuesChange] = useState<Partial<Values>>({})
+    return (
+      <FilterBar<Values>
+        {...args}
+        filters={filters}
+        values={activeValues}
+        onValuesChange={onActiveValuesChange}
+      />
+    )
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+
+    await step("removable filter is added with no value", async () => {
+      await waitFor(() => {
+        userEvent.click(canvas.getByRole("button", { name: "Add Filters" }))
+      })
+
+      await waitFor(() => {
+        userEvent.click(canvas.getByRole("button", { name: "Toppings" }))
+      })
+    })
+
+    await step("'Clear all' press removes removable filter", async () => {
+      await waitFor(() => {
+        userEvent.click(
+          canvas.getByRole("button", {
+            name: "Clear all filters",
+          })
+        )
+      })
+
+      waitFor(() =>
+        expect(
+          canvas.queryByRole("button", { name: "Toppings" })
+        ).not.toBeInTheDocument()
+      )
+
+      waitFor(() =>
+        expect(
+          canvas.queryByRole("button", {
+            name: "Clear all filters",
+          })
+        ).not.toBeInTheDocument()
+      )
+    })
+  },
+}
+
+export const ClearAllRemovesItself: Story = {
+  render: args => {
+    const [activeValues, onActiveValuesChange] = useState<Partial<Values>>({})
+    return (
+      <FilterBar<Values>
+        {...args}
+        filters={filters}
+        values={activeValues}
+        onValuesChange={onActiveValuesChange}
+      />
+    )
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+
+    await step("removable filter is added with no value", async () => {
+      await waitFor(() =>
+        userEvent.click(canvas.getByRole("button", { name: "Add Filters" }))
+      )
+      await userEvent.click(canvas.getByRole("button", { name: "Drank" }))
+    })
+
+    await step(
+      "Clear all button hides by itself after removing filter",
+      async () => {
+        await userEvent.click(
+          canvas.getByRole("button", { name: "Remove filter - Drank" })
+        )
+      }
+    )
+
+    waitFor(() =>
+      expect(
+        canvas.queryByRole("button", {
+          name: "Clear all filters",
+        })
+      ).not.toBeInTheDocument()
+    )
+  },
+}
diff --git a/packages/components/src/Filter/FilterBar/_docs/FilterBar.stickersheet.stories.tsx b/packages/components/src/Filter/FilterBar/_docs/FilterBar.stickersheet.stories.tsx
index aa3eb38c10e..ae88615e165 100644
--- a/packages/components/src/Filter/FilterBar/_docs/FilterBar.stickersheet.stories.tsx
+++ b/packages/components/src/Filter/FilterBar/_docs/FilterBar.stickersheet.stories.tsx
@@ -7,7 +7,7 @@ import {
 import { FilterBar, Filters } from "../index"
 
 export default {
-  title: "Components/Filter Bar",
+  title: "Components/FilterBar",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
diff --git a/packages/components/src/Filter/FilterBar/_docs/FilterBar.stories.tsx b/packages/components/src/Filter/FilterBar/_docs/FilterBar.stories.tsx
index a73b31ae6f8..e11dacf067a 100644
--- a/packages/components/src/Filter/FilterBar/_docs/FilterBar.stories.tsx
+++ b/packages/components/src/Filter/FilterBar/_docs/FilterBar.stories.tsx
@@ -21,7 +21,7 @@ import { FilterBar, Filters, useFilterBarContext } from "../index"
 import { FilterBarMultiSelectProps } from "../subcomponents"
 
 const meta = {
-  title: "Components/Filter Bar",
+  title: "Components/FilterBar",
   component: FilterBar,
   argTypes: {
     filters: { control: false },
diff --git a/packages/components/src/Filter/FilterBar/context/FilterBarContext.tsx b/packages/components/src/Filter/FilterBar/context/FilterBarContext.tsx
index 293e0e062ba..5b715631640 100644
--- a/packages/components/src/Filter/FilterBar/context/FilterBarContext.tsx
+++ b/packages/components/src/Filter/FilterBar/context/FilterBarContext.tsx
@@ -22,6 +22,7 @@ export type FilterBarContextValue<
   getFilterState: <Id extends keyof ValuesMap>(
     id: Id
   ) => FilterState<keyof ValuesMap, ValuesMap[Id]>
+  isClearable: boolean
   getActiveFilterValues: () => Partial<ValuesMap>
   /**
    * @deprecated Use `setFilterOpenState` instead.
@@ -90,12 +91,28 @@ export const FilterBarProvider = <ValuesMap extends FiltersValues>({
     setupFilterBarState<ValuesMap>(filters, values)
   )
 
+  const activeFilters = Array.from(
+    state.activeFilterIds,
+    id => mappedFilters[id]
+  )
+
+  // Workaround for DateRangePicker populating the values object before the value is valid
+  // (it purposefully persists a state with a 'from' date but no 'to' date, but hides it on the filter button)
+  const isDraftDateRange = (v: ValuesMap): boolean =>
+    v && v.from !== undefined && v.to === undefined
+  const hasDraftDateRangeOnly = Object.values(values).every(isDraftDateRange)
+
+  const isClearable =
+    (Object.keys(values).length > 0 && !hasDraftDateRangeOnly) ||
+    (state.hasRemovableFilter && activeFilters.some(f => f.isRemovable))
+
   const value = {
     getFilterState: <Id extends keyof ValuesMap>(id: Id) => ({
       ...state.filters[id],
       isActive: state.activeFilterIds.has(id),
       value: values[id],
     }),
+    isClearable,
     getActiveFilterValues: () => values,
     toggleOpenFilter: <Id extends keyof ValuesMap>(
       id: Id,
@@ -163,11 +180,6 @@ export const FilterBarProvider = <ValuesMap extends FiltersValues>({
     }
   }, [filters])
 
-  const activeFilters = Array.from(
-    state.activeFilterIds,
-    id => mappedFilters[id]
-  )
-
   return (
     <FilterBarContext.Provider
       // @note: Context object cannot be generic, thus the type-casting to a looser type
diff --git a/packages/components/src/Filter/FilterBar/context/reducer/filterBarStateReducer.spec.ts b/packages/components/src/Filter/FilterBar/context/reducer/filterBarStateReducer.spec.ts
index a32d206bf86..5477f7da6b2 100644
--- a/packages/components/src/Filter/FilterBar/context/reducer/filterBarStateReducer.spec.ts
+++ b/packages/components/src/Filter/FilterBar/context/reducer/filterBarStateReducer.spec.ts
@@ -32,6 +32,7 @@ describe("filterBarStateReducer", () => {
         values: {},
         dependentFilterIds: new Set(),
         hasUpdatedValues: true,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = filterBarStateReducer<Values>(state, {
@@ -50,6 +51,7 @@ describe("filterBarStateReducer", () => {
         values: {},
         dependentFilterIds: new Set(),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = filterBarStateReducer<Values>(state, {
@@ -71,6 +73,7 @@ describe("filterBarStateReducer", () => {
         values: { flavour: "jasmine" },
         dependentFilterIds: new Set(),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = filterBarStateReducer<Values>(state, {
diff --git a/packages/components/src/Filter/FilterBar/context/reducer/filterBarStateReducer.ts b/packages/components/src/Filter/FilterBar/context/reducer/filterBarStateReducer.ts
index e5b08cea22b..8ad22a9dd21 100644
--- a/packages/components/src/Filter/FilterBar/context/reducer/filterBarStateReducer.ts
+++ b/packages/components/src/Filter/FilterBar/context/reducer/filterBarStateReducer.ts
@@ -49,7 +49,7 @@ export const filterBarStateReducer = <ValuesMap extends FiltersValues>(
 
     case "deactivate_filter":
       state.activeFilterIds.delete(action.id)
-      state.values[action.id] = undefined
+      delete state.values[action.id]
       return {
         ...updateDependentFilters(state),
         hasUpdatedValues: true,
diff --git a/packages/components/src/Filter/FilterBar/context/reducer/setupFilterBarState.spec.tsx b/packages/components/src/Filter/FilterBar/context/reducer/setupFilterBarState.spec.tsx
index a90d1b23486..2f967fdeda7 100644
--- a/packages/components/src/Filter/FilterBar/context/reducer/setupFilterBarState.spec.tsx
+++ b/packages/components/src/Filter/FilterBar/context/reducer/setupFilterBarState.spec.tsx
@@ -17,6 +17,16 @@ const filters = [
   },
 ] satisfies Filters<Values>
 
+const filtersNoRemovable = [
+  { id: "flavour", name: "Flavour", Component: <div /> },
+  {
+    id: "sugarLevel",
+    name: "Sugar Level",
+    Component: <div />,
+    isRemovable: false,
+  },
+] satisfies Filters<Values>
+
 describe("setupFilterBarState()", () => {
   it("sets up the base state correctly", () => {
     const values = { flavour: "jasmine", sugarLevel: 50 }
@@ -41,6 +51,7 @@ describe("setupFilterBarState()", () => {
       values,
       dependentFilterIds: new Set<keyof Values>(),
       hasUpdatedValues: false,
+      hasRemovableFilter: true,
     })
   })
 
@@ -65,4 +76,33 @@ describe("setupFilterBarState()", () => {
       expect(state.hasUpdatedValues).toBe(true)
     })
   })
+
+  describe("Removable filters", () => {
+    it("hasRemovableFilter as false when there's no removable filters", () => {
+      const values = {}
+      expect(setupFilterBarState<Values>(filtersNoRemovable, values)).toEqual({
+        filters: {
+          flavour: {
+            id: "flavour",
+            name: "Flavour",
+            isRemovable: false,
+            isOpen: false,
+            isUsable: true,
+          },
+          sugarLevel: {
+            id: "sugarLevel",
+            name: "Sugar Level",
+            isRemovable: false,
+            isOpen: false,
+            isUsable: true,
+          },
+        },
+        activeFilterIds: new Set(["flavour", "sugarLevel"]),
+        values,
+        dependentFilterIds: new Set<keyof Values>(),
+        hasUpdatedValues: false,
+        hasRemovableFilter: false,
+      })
+    })
+  })
 })
diff --git a/packages/components/src/Filter/FilterBar/context/reducer/setupFilterBarState.ts b/packages/components/src/Filter/FilterBar/context/reducer/setupFilterBarState.ts
index d8ee0f08325..40b813c1605 100644
--- a/packages/components/src/Filter/FilterBar/context/reducer/setupFilterBarState.ts
+++ b/packages/components/src/Filter/FilterBar/context/reducer/setupFilterBarState.ts
@@ -27,6 +27,10 @@ export const setupFilterBarState = <ValuesMap extends FiltersValues>(
         baseState.activeFilterIds.add(id)
       }
 
+      if (isRemovable) {
+        baseState.hasRemovableFilter = true
+      }
+
       return baseState
     },
     {
@@ -35,6 +39,7 @@ export const setupFilterBarState = <ValuesMap extends FiltersValues>(
       values,
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
       focusId: undefined,
     } as FilterBarState<ValuesMap>
   )
diff --git a/packages/components/src/Filter/FilterBar/context/reducer/updateSingleFilter.spec.ts b/packages/components/src/Filter/FilterBar/context/reducer/updateSingleFilter.spec.ts
index 4d5a718118c..f1c92dfe40d 100644
--- a/packages/components/src/Filter/FilterBar/context/reducer/updateSingleFilter.spec.ts
+++ b/packages/components/src/Filter/FilterBar/context/reducer/updateSingleFilter.spec.ts
@@ -31,6 +31,7 @@ describe("filterBarStateReducer: update_single_filter", () => {
       values: {},
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     const newState = filterBarStateReducer<Values>(state, {
@@ -49,6 +50,7 @@ describe("filterBarStateReducer: update_single_filter", () => {
       values: {},
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     expect(state.filters.flavour.isOpen).toBe(false)
diff --git a/packages/components/src/Filter/FilterBar/context/reducer/updateValues.spec.ts b/packages/components/src/Filter/FilterBar/context/reducer/updateValues.spec.ts
index 3c8c5186c58..da29d4c1dd3 100644
--- a/packages/components/src/Filter/FilterBar/context/reducer/updateValues.spec.ts
+++ b/packages/components/src/Filter/FilterBar/context/reducer/updateValues.spec.ts
@@ -35,6 +35,7 @@ describe("filterBarStateReducer: update_values", () => {
         values: {},
         dependentFilterIds: new Set(),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = filterBarStateReducer<Values>(state, {
@@ -65,6 +66,7 @@ describe("filterBarStateReducer: update_values", () => {
           values: { sugarLevel: 50 },
           dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
           hasUpdatedValues: false,
+          hasRemovableFilter: false,
         } satisfies FilterBarState<Values>
 
         const newState = filterBarStateReducer<Values>(state, {
@@ -93,6 +95,7 @@ describe("filterBarStateReducer: update_values", () => {
           values: {},
           dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
           hasUpdatedValues: false,
+          hasRemovableFilter: false,
         } satisfies FilterBarState<Values>
 
         const newState = filterBarStateReducer<Values>(state, {
@@ -122,6 +125,7 @@ describe("filterBarStateReducer: update_values", () => {
           values: {},
           dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
           hasUpdatedValues: false,
+          hasRemovableFilter: false,
         } satisfies FilterBarState<Values>
 
         const newState = filterBarStateReducer<Values>(state, {
@@ -149,6 +153,7 @@ describe("filterBarStateReducer: update_values", () => {
           values: {},
           dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
           hasUpdatedValues: false,
+          hasRemovableFilter: false,
         } satisfies FilterBarState<Values>
 
         const newState = filterBarStateReducer<Values>(state, {
diff --git a/packages/components/src/Filter/FilterBar/context/types.ts b/packages/components/src/Filter/FilterBar/context/types.ts
index 92358675459..aa2703f1431 100644
--- a/packages/components/src/Filter/FilterBar/context/types.ts
+++ b/packages/components/src/Filter/FilterBar/context/types.ts
@@ -28,6 +28,7 @@ export type FilterBarStateFilters<ValuesMap extends FiltersValues> = {
 
 export type FilterBarState<ValuesMap extends FiltersValues> = {
   hasUpdatedValues: boolean
+  hasRemovableFilter: boolean
   filters: FilterBarStateFilters<ValuesMap>
   activeFilterIds: Set<keyof ValuesMap>
   values: Partial<ValuesMap>
diff --git a/packages/components/src/Filter/FilterBar/context/utils/checkShouldUpdateValues.spec.ts b/packages/components/src/Filter/FilterBar/context/utils/checkShouldUpdateValues.spec.ts
index 4aeb7252cfa..1a5ea93c170 100644
--- a/packages/components/src/Filter/FilterBar/context/utils/checkShouldUpdateValues.spec.ts
+++ b/packages/components/src/Filter/FilterBar/context/utils/checkShouldUpdateValues.spec.ts
@@ -27,6 +27,7 @@ const state = {
   values: {},
   dependentFilterIds: new Set(),
   hasUpdatedValues: false,
+  hasRemovableFilter: false,
 } satisfies FilterBarState<Values>
 
 describe("checkShouldUpdateValues()", () => {
diff --git a/packages/components/src/Filter/FilterBar/context/utils/getInactiveFilters.spec.ts b/packages/components/src/Filter/FilterBar/context/utils/getInactiveFilters.spec.ts
index 94f299ba35a..37fd8a4ce17 100644
--- a/packages/components/src/Filter/FilterBar/context/utils/getInactiveFilters.spec.ts
+++ b/packages/components/src/Filter/FilterBar/context/utils/getInactiveFilters.spec.ts
@@ -31,6 +31,7 @@ describe("getInactiveFilters()", () => {
       values: {},
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     expect(getInactiveFilters<Values>(state)).toEqual([
@@ -61,6 +62,7 @@ describe("getInactiveFilters()", () => {
       values: {},
       dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     expect(getInactiveFilters<Values>(state)).toEqual([stateFilters.flavour])
diff --git a/packages/components/src/Filter/FilterBar/context/utils/getIsUsableWhenArgs.spec.ts b/packages/components/src/Filter/FilterBar/context/utils/getIsUsableWhenArgs.spec.ts
index 12833c74b2f..773310afec9 100644
--- a/packages/components/src/Filter/FilterBar/context/utils/getIsUsableWhenArgs.spec.ts
+++ b/packages/components/src/Filter/FilterBar/context/utils/getIsUsableWhenArgs.spec.ts
@@ -31,6 +31,7 @@ describe("getIsUsableWhenArgs()", () => {
       values: { flavour: "jasmine" },
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     const usableArgs = getIsUsableWhenArgs<Values>(state)
diff --git a/packages/components/src/Filter/FilterBar/context/utils/updateDependentFilters.spec.ts b/packages/components/src/Filter/FilterBar/context/utils/updateDependentFilters.spec.ts
index 488024f37bd..e3378fafd03 100644
--- a/packages/components/src/Filter/FilterBar/context/utils/updateDependentFilters.spec.ts
+++ b/packages/components/src/Filter/FilterBar/context/utils/updateDependentFilters.spec.ts
@@ -38,6 +38,7 @@ describe("updateDependentFilters()", () => {
       values: { flavour: "jasmine" },
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     const newState = updateDependentFilters<Values>(state)
@@ -53,6 +54,7 @@ describe("updateDependentFilters()", () => {
       values: { flavour: "jasmine" },
       dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     const newState = updateDependentFilters<Values>(state)
@@ -77,6 +79,7 @@ describe("updateDependentFilters()", () => {
       values: { flavour: "jasmine" },
       dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
       hasUpdatedValues: false,
+      hasRemovableFilter: false,
     } satisfies FilterBarState<Values>
 
     updateDependentFilters<Values>(state)
@@ -98,6 +101,7 @@ describe("updateDependentFilters()", () => {
         values: { flavour: "jasmine" },
         dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = updateDependentFilters<Values>(state)
@@ -117,6 +121,7 @@ describe("updateDependentFilters()", () => {
         values: { flavour: "jasmine" },
         dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = updateDependentFilters<Values>(state)
@@ -139,6 +144,7 @@ describe("updateDependentFilters()", () => {
         values: { flavour: "jasmine", sugarLevel: 50 },
         dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = updateDependentFilters<Values>(state)
@@ -161,6 +167,7 @@ describe("updateDependentFilters()", () => {
         values: { flavour: "jasmine" },
         dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = updateDependentFilters<Values>(state)
@@ -176,6 +183,7 @@ describe("updateDependentFilters()", () => {
         values: { sugarLevel: 50 },
         dependentFilterIds: new Set<keyof Values>(["sugarLevel"]),
         hasUpdatedValues: false,
+        hasRemovableFilter: false,
       } satisfies FilterBarState<Values>
 
       const newState = updateDependentFilters<Values>(state)
diff --git a/packages/components/src/Filter/FilterBar/context/utils/updateDependentFilters.ts b/packages/components/src/Filter/FilterBar/context/utils/updateDependentFilters.ts
index 15fbb1e9e3c..6934ca664d0 100644
--- a/packages/components/src/Filter/FilterBar/context/utils/updateDependentFilters.ts
+++ b/packages/components/src/Filter/FilterBar/context/utils/updateDependentFilters.ts
@@ -22,7 +22,7 @@ export const updateDependentFilters = <ValuesMap extends FiltersValues>(
 
     if (!isUsable) {
       state.activeFilterIds.delete(id)
-      state.values[id] = undefined
+      delete state.values[id]
       state.hasUpdatedValues = true
       return
     }
diff --git a/packages/components/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss b/packages/components/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss
index a795bd94c95..01240a1c8da 100644
--- a/packages/components/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss
+++ b/packages/components/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.module.scss
@@ -1,3 +1,7 @@
 .clearAllButton {
   white-space: nowrap;
 }
+
+.hidden {
+  visibility: hidden;
+}
diff --git a/packages/components/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.tsx b/packages/components/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.tsx
index e94bcdb0320..e3408643be8 100644
--- a/packages/components/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.tsx
+++ b/packages/components/src/Filter/FilterBar/subcomponents/ClearAllButton/ClearAllButton.tsx
@@ -1,5 +1,6 @@
 import React from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
+import classnames from "classnames"
 import { Button } from "~components/__actions__/v2"
 import { useFilterBarContext } from "../../context/FilterBarContext"
 import styles from "./ClearAllButton.module.scss"
@@ -19,13 +20,15 @@ export const ClearAllButton = (): JSX.Element => {
     description: "Button aria-label to clear all values within the filter bar",
   })
 
-  const { clearAllFilters } = useFilterBarContext()
+  const { clearAllFilters, isClearable } = useFilterBarContext()
 
   return (
     <Button
       label={clearButtonLabel}
       aria-label={clearButtonAriaLabel}
-      classNameOverride={styles.clearAllButton}
+      classNameOverride={classnames(styles.clearAllButton, {
+        [styles.hidden]: !isClearable,
+      })}
       secondary
       onClick={clearAllFilters}
     />
diff --git a/packages/components/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx b/packages/components/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx
index 958ae94e0d0..83de9a37bcc 100644
--- a/packages/components/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx
+++ b/packages/components/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx
@@ -259,6 +259,10 @@ export const FilterDateRangePickerField = ({
       return
     }
 
+    if (state.inputStartValue === "" && state.inputEndValue === "") {
+      return
+    }
+
     const newStartDate = validateStartDate(
       selectedRange?.from,
       state.inputStartValue